/* /Components/Layout/Header.razor.rz.scp.css */
/* Header component styles */
/* Styles are in wwwroot/css/app.css */
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-dnbveqo0tk] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-dnbveqo0tk] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* Modal Dialog */
#components-reconnect-modal[b-kngt968whq] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    padding: 0;
    width: 400px;
    max-width: calc(100vw - 32px);
    margin: auto;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#components-reconnect-modal[open][b-kngt968whq] {
    opacity: 1;
    transform: translateY(0) scale(1);
}

#components-reconnect-modal[b-kngt968whq]::backdrop {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Modal Content */
.reconnect-modal-content[b-kngt968whq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 32px;
    text-align: center;
    gap: 8px;
}

/* Icons */
.reconnect-icon[b-kngt968whq] {
    width: 80px;
    height: 80px;
    margin-bottom: 16px;
    align-items: center;
    justify-content: center;
}

.reconnect-icon svg[b-kngt968whq] {
    color: var(--text-muted);
}

.reconnect-icon-error svg[b-kngt968whq] {
    color: #ef4444;
}

.reconnect-icon-warning svg[b-kngt968whq] {
    color: #f59e0b;
}

/* Spinner Animation */
.reconnect-spinner[b-kngt968whq] {
    position: relative;
    width: 80px;
    height: 80px;
}

.reconnect-spinner div[b-kngt968whq] {
    position: absolute;
    border: 3px solid var(--primary);
    opacity: 1;
    border-radius: 50%;
    animation: reconnect-ripple-b-kngt968whq 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.reconnect-spinner div:nth-child(2)[b-kngt968whq] {
    animation-delay: -0.5s;
}

@keyframes reconnect-ripple-b-kngt968whq {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }
    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }
    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        top: 0;
        left: 0;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}

/* Typography */
.reconnect-title[b-kngt968whq] {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.reconnect-message[b-kngt968whq] {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0 0 16px 0;
    line-height: 1.5;
}

.reconnect-countdown[b-kngt968whq] {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--primary);
    background: var(--primary-alpha);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

/* Buttons */
#components-reconnect-modal .btn[b-kngt968whq] {
    margin-top: 8px;
    gap: 8px;
}

#components-reconnect-modal .btn svg[b-kngt968whq] {
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 480px) {
    #components-reconnect-modal[b-kngt968whq] {
        width: calc(100vw - 32px);
    }

    .reconnect-modal-content[b-kngt968whq] {
        padding: 32px 24px;
    }

    .reconnect-icon[b-kngt968whq] {
        width: 64px;
        height: 64px;
    }

    .reconnect-spinner[b-kngt968whq] {
        width: 64px;
        height: 64px;
    }

    .reconnect-spinner div[b-kngt968whq] {
        animation-name: reconnect-ripple-small-b-kngt968whq;
    }

    @keyframes reconnect-ripple-small-b-kngt968whq {
        0% {
            top: 32px;
            left: 32px;
            width: 0;
            height: 0;
            opacity: 0;
        }
        4.9% {
            top: 32px;
            left: 32px;
            width: 0;
            height: 0;
            opacity: 0;
        }
        5% {
            top: 32px;
            left: 32px;
            width: 0;
            height: 0;
            opacity: 1;
        }
        100% {
            top: 0;
            left: 0;
            width: 64px;
            height: 64px;
            opacity: 0;
        }
    }

    .reconnect-title[b-kngt968whq] {
        font-size: 18px;
    }

    .reconnect-message[b-kngt968whq] {
        font-size: 13px;
    }
}
/* /Components/Layout/Sidebar.razor.rz.scp.css */
/* Sidebar component styles */
/* Styles are in wwwroot/css/app.css */
/* /Components/Layout/ThemeSettings.razor.rz.scp.css */
/* ThemeSettings component styles */
/* Styles are in wwwroot/css/app.css */
/* /Components/Layout/UserMenu.razor.rz.scp.css */
/* UserMenu component styles */
/* Styles are in wwwroot/css/app.css */

.dropdown-backdrop[b-ku410km7g5] {
    position: fixed;
    inset: 0;
    z-index: 9999;
}

@media (max-width: 1024px) {
    .dropdown-backdrop[b-ku410km7g5] {
        background: rgba(0, 0, 0, 0.5);
        z-index: 1050;
    }
}
/* /Components/Orders/ManualOrderModal.razor.rz.scp.css */
/* Manual Order Modal - Wizard Style */

/* Overlay */
.manual-order-overlay[b-zc5x1xkxni] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.manual-order-overlay.active[b-zc5x1xkxni] {
    opacity: 1;
    visibility: visible;
}

/* Container */
.manual-order-container[b-zc5x1xkxni] {
    width: 900px;
    max-width: 95vw;
    max-height: 90vh;
    background: #fff;
    border-radius: 20px;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.05),
        0 25px 60px -12px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.95) translateY(20px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.manual-order-overlay.active .manual-order-container[b-zc5x1xkxni] {
    transform: scale(1) translateY(0);
}

/* Header */
.manual-order-header[b-zc5x1xkxni] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}

.manual-order-title[b-zc5x1xkxni] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
}

.manual-order-title svg[b-zc5x1xkxni] {
    width: 24px;
    height: 24px;
    color: var(--primary);
}

.manual-order-close[b-zc5x1xkxni] {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: var(--surface-hover);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: all 0.15s ease;
}

.manual-order-close:hover[b-zc5x1xkxni] {
    background: var(--border);
    color: var(--text);
}

.manual-order-close svg[b-zc5x1xkxni] {
    width: 18px;
    height: 18px;
}

/* Wizard Progress */
.wizard-progress[b-zc5x1xkxni] {
    display: flex;
    align-items: center;
    padding: 24px 32px;
    background: var(--surface-hover);
    border-bottom: 1px solid var(--border);
    gap: 0;
    overflow-x: auto;
}

.wizard-step[b-zc5x1xkxni] {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 12px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.wizard-step:hover[b-zc5x1xkxni] {
    background: rgba(99, 102, 241, 0.05);
}

.wizard-step-indicator[b-zc5x1xkxni] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    background: var(--surface);
    border: 2px solid var(--border);
    color: var(--text-muted);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.wizard-step.active .wizard-step-indicator[b-zc5x1xkxni] {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.wizard-step.completed .wizard-step-indicator[b-zc5x1xkxni] {
    background: #22c55e;
    border-color: #22c55e;
    color: white;
}

.wizard-step.completed .wizard-step-indicator svg[b-zc5x1xkxni] {
    width: 18px;
    height: 18px;
}

.wizard-step-info[b-zc5x1xkxni] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wizard-step-title[b-zc5x1xkxni] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

.wizard-step.active .wizard-step-title[b-zc5x1xkxni],
.wizard-step.completed .wizard-step-title[b-zc5x1xkxni] {
    color: var(--text);
}

.wizard-step-subtitle[b-zc5x1xkxni] {
    font-size: 11px;
    color: var(--text-muted);
    opacity: 0.7;
    white-space: nowrap;
}

.wizard-step-connector[b-zc5x1xkxni] {
    width: 40px;
    height: 2px;
    background: var(--border);
    margin: 0 4px;
    border-radius: 1px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.wizard-step-connector.completed[b-zc5x1xkxni] {
    background: #22c55e;
}

/* Body */
.manual-order-body[b-zc5x1xkxni] {
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px;
}

.manual-order-body[b-zc5x1xkxni]::-webkit-scrollbar {
    width: 6px;
}

.manual-order-body[b-zc5x1xkxni]::-webkit-scrollbar-track {
    background: transparent;
}

.manual-order-body[b-zc5x1xkxni]::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

/* Wizard Step Content */
.wizard-step-content[b-zc5x1xkxni] {
    animation: fadeIn-b-zc5x1xkxni 0.3s ease;
}

@keyframes fadeIn-b-zc5x1xkxni {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Form Sections */
.form-section[b-zc5x1xkxni] {
    margin-bottom: 32px;
}

.form-section:last-child[b-zc5x1xkxni] {
    margin-bottom: 0;
}

.form-section-header[b-zc5x1xkxni] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.form-section-title[b-zc5x1xkxni] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 16px;
}

.form-section-header .form-section-title[b-zc5x1xkxni] {
    margin: 0;
}

.form-section-title svg[b-zc5x1xkxni] {
    width: 20px;
    height: 20px;
    color: var(--primary);
}

/* Form Grid */
.form-grid[b-zc5x1xkxni] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.form-group[b-zc5x1xkxni] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group.full-width[b-zc5x1xkxni] {
    grid-column: 1 / -1;
}

.form-group label[b-zc5x1xkxni] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.form-group label .required[b-zc5x1xkxni] {
    color: #ef4444;
}

.form-group input[b-zc5x1xkxni],
.form-group select[b-zc5x1xkxni],
.form-group textarea[b-zc5x1xkxni] {
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    color: var(--text);
    background: var(--surface);
    transition: all 0.2s ease;
}

.form-group input:focus[b-zc5x1xkxni],
.form-group select:focus[b-zc5x1xkxni],
.form-group textarea:focus[b-zc5x1xkxni] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.form-group input[b-zc5x1xkxni]::placeholder,
.form-group textarea[b-zc5x1xkxni]::placeholder {
    color: var(--text-muted);
}

.form-group textarea[b-zc5x1xkxni] {
    resize: vertical;
    min-height: 60px;
}

.input-with-suffix[b-zc5x1xkxni] {
    display: flex;
    align-items: center;
}

.input-with-suffix input[b-zc5x1xkxni] {
    flex: 1;
    border-radius: 10px 0 0 10px;
    border-right: none;
}

.input-with-suffix span[b-zc5x1xkxni] {
    padding: 10px 14px;
    background: var(--surface-hover);
    border: 1px solid var(--border);
    border-left: none;
    border-radius: 0 10px 10px 0;
    font-size: 14px;
    color: var(--text-muted);
}

/* Checkbox */
.checkbox-group[b-zc5x1xkxni] {
    justify-content: center;
}

.checkbox-label[b-zc5x1xkxni] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text);
}

.checkbox-label input[type="checkbox"][b-zc5x1xkxni] {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    accent-color: var(--primary);
}

/* Product Search */
.product-search[b-zc5x1xkxni] {
    margin-bottom: 24px;
    position: relative;
}

.product-search-input[b-zc5x1xkxni] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.product-search-input:focus-within[b-zc5x1xkxni] {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.product-search-input svg[b-zc5x1xkxni] {
    width: 20px;
    height: 20px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.product-search-input input[b-zc5x1xkxni] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 15px;
    color: var(--text);
    outline: none;
}

.product-search-input input[b-zc5x1xkxni]::placeholder {
    color: var(--text-muted);
}

.search-spinner[b-zc5x1xkxni] {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-zc5x1xkxni 0.8s linear infinite;
}

@keyframes spin-b-zc5x1xkxni {
    to { transform: rotate(360deg); }
}

/* Product Search Results */
.product-search-results[b-zc5x1xkxni] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 8px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    max-height: 300px;
    overflow-y: auto;
    z-index: 100;
}

.product-search-item[b-zc5x1xkxni] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.product-search-item:hover[b-zc5x1xkxni] {
    background: var(--surface-hover);
}

.product-search-item:first-child[b-zc5x1xkxni] {
    border-radius: 12px 12px 0 0;
}

.product-search-item:last-child[b-zc5x1xkxni] {
    border-radius: 0 0 12px 12px;
}

.product-search-image[b-zc5x1xkxni] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: var(--surface-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.product-search-image img[b-zc5x1xkxni] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-search-image svg[b-zc5x1xkxni] {
    width: 24px;
    height: 24px;
    color: var(--text-muted);
}

.product-search-info[b-zc5x1xkxni] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.product-search-name[b-zc5x1xkxni] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-search-details[b-zc5x1xkxni] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.product-search-sku[b-zc5x1xkxni] {
    font-size: 12px;
    color: var(--text-muted);
}

.product-search-barcode[b-zc5x1xkxni] {
    font-size: 12px;
    color: var(--text-muted);
}

.product-search-variants[b-zc5x1xkxni] {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.variant-badge[b-zc5x1xkxni] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 4px;
    background: var(--surface-hover);
    color: var(--text);
}

.variant-badge.main-dim[b-zc5x1xkxni] {
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary);
}

.variant-badge.dim1[b-zc5x1xkxni] {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.variant-badge.dim2[b-zc5x1xkxni] {
    background: rgba(249, 115, 22, 0.1);
    color: #ea580c;
}

.variant-badge.dim3[b-zc5x1xkxni] {
    background: rgba(168, 85, 247, 0.1);
    color: #9333ea;
}

.product-search-meta[b-zc5x1xkxni] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}

.product-search-price[b-zc5x1xkxni] {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
}

.product-search-stock[b-zc5x1xkxni] {
    font-size: 11px;
    color: var(--text-muted);
}

/* Selected Products */
.selected-products[b-zc5x1xkxni] {
    background: var(--surface-hover);
    border-radius: 12px;
    padding: 16px;
}

.selected-products-header[b-zc5x1xkxni] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.selected-products-count[b-zc5x1xkxni] {
    font-weight: 500;
    color: var(--text-muted);
    background: var(--surface);
    padding: 4px 10px;
    border-radius: 20px;
}

.selected-products-list[b-zc5x1xkxni] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.selected-product-item[b-zc5x1xkxni] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--border);
}

.selected-product-image[b-zc5x1xkxni] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: var(--surface-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.selected-product-image img[b-zc5x1xkxni] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.selected-product-image svg[b-zc5x1xkxni] {
    width: 24px;
    height: 24px;
    color: var(--text-muted);
}

.selected-product-info[b-zc5x1xkxni] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.selected-product-name[b-zc5x1xkxni] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.selected-product-sku[b-zc5x1xkxni] {
    font-size: 12px;
    color: var(--text-muted);
}

.selected-product-quantity[b-zc5x1xkxni] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.selected-product-quantity input[b-zc5x1xkxni] {
    width: 50px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    text-align: center;
    color: var(--text);
}

.qty-btn[b-zc5x1xkxni] {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: all 0.15s ease;
}

.qty-btn:hover:not(:disabled)[b-zc5x1xkxni] {
    background: var(--surface-hover);
    color: var(--text);
}

.qty-btn:disabled[b-zc5x1xkxni] {
    opacity: 0.5;
    cursor: not-allowed;
}

.qty-btn svg[b-zc5x1xkxni] {
    width: 14px;
    height: 14px;
}

.selected-product-price[b-zc5x1xkxni] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.selected-product-price input[b-zc5x1xkxni] {
    width: 80px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    text-align: right;
    color: var(--text);
}

.selected-product-price span[b-zc5x1xkxni] {
    font-size: 12px;
    color: var(--text-muted);
}

.selected-product-total[b-zc5x1xkxni] {
    min-width: 90px;
    text-align: right;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
}

.selected-product-remove[b-zc5x1xkxni] {
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: all 0.15s ease;
}

.selected-product-remove:hover[b-zc5x1xkxni] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.selected-product-remove svg[b-zc5x1xkxni] {
    width: 16px;
    height: 16px;
}

/* No Products */
.no-products[b-zc5x1xkxni] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    color: var(--text-muted);
    text-align: center;
}

.no-products svg[b-zc5x1xkxni] {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.no-products p[b-zc5x1xkxni] {
    margin: 0;
    font-size: 14px;
}

/* Order Summary */
.order-summary[b-zc5x1xkxni] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.summary-section[b-zc5x1xkxni] {
    background: var(--surface-hover);
    border-radius: 12px;
    padding: 16px;
}

.summary-section-header[b-zc5x1xkxni] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.summary-section-header svg[b-zc5x1xkxni] {
    width: 18px;
    height: 18px;
    color: var(--primary);
}

.summary-edit-btn[b-zc5x1xkxni] {
    margin-left: auto;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: var(--surface);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: all 0.15s ease;
}

.summary-edit-btn:hover[b-zc5x1xkxni] {
    background: var(--primary);
    color: white;
}

.summary-edit-btn svg[b-zc5x1xkxni] {
    width: 14px;
    height: 14px;
}

.summary-content[b-zc5x1xkxni] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.summary-row[b-zc5x1xkxni] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.summary-label[b-zc5x1xkxni] {
    font-size: 13px;
    color: var(--text-muted);
    min-width: 100px;
}

.summary-value[b-zc5x1xkxni] {
    font-size: 13px;
    color: var(--text);
    font-weight: 500;
}

.summary-address[b-zc5x1xkxni] {
    margin: 0;
    font-size: 13px;
    color: var(--text);
    line-height: 1.6;
}

.summary-address strong[b-zc5x1xkxni] {
    font-weight: 600;
}

/* Summary Products */
.summary-products[b-zc5x1xkxni] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.summary-product-item[b-zc5x1xkxni] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: #fff;
    border-radius: 8px;
}

.summary-product-image[b-zc5x1xkxni] {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: var(--surface-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.summary-product-image img[b-zc5x1xkxni] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.summary-product-image svg[b-zc5x1xkxni] {
    width: 20px;
    height: 20px;
    color: var(--text-muted);
}

.summary-product-info[b-zc5x1xkxni] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.summary-product-name[b-zc5x1xkxni] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.summary-product-sku[b-zc5x1xkxni] {
    font-size: 11px;
    color: var(--text-muted);
}

.summary-product-qty[b-zc5x1xkxni] {
    font-size: 13px;
    color: var(--text-muted);
}

.summary-product-price[b-zc5x1xkxni] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

/* Summary Totals */
.summary-totals[b-zc5x1xkxni] {
    background: var(--surface-hover);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.summary-total-row[b-zc5x1xkxni] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: var(--text);
}

.summary-total-row.discount[b-zc5x1xkxni] {
    color: #22c55e;
}

.summary-total-row.grand-total[b-zc5x1xkxni] {
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 16px;
    font-weight: 700;
    color: var(--primary);
}

/* Footer */
.manual-order-footer[b-zc5x1xkxni] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    background: var(--surface-hover);
}

.footer-left[b-zc5x1xkxni],
.footer-right[b-zc5x1xkxni] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Buttons */
.btn[b-zc5x1xkxni] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn svg[b-zc5x1xkxni] {
    width: 18px;
    height: 18px;
}

.btn:disabled[b-zc5x1xkxni] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary[b-zc5x1xkxni] {
    background: var(--primary);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-zc5x1xkxni] {
    background: #4f46e5;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.btn-secondary[b-zc5x1xkxni] {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-secondary:hover:not(:disabled)[b-zc5x1xkxni] {
    background: var(--surface-hover);
}

.btn-ghost[b-zc5x1xkxni] {
    background: transparent;
    color: var(--text-muted);
}

.btn-ghost:hover:not(:disabled)[b-zc5x1xkxni] {
    background: var(--surface-hover);
    color: var(--text);
}

.btn-success[b-zc5x1xkxni] {
    background: #22c55e;
    color: white;
}

.btn-success:hover:not(:disabled)[b-zc5x1xkxni] {
    background: #16a34a;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.btn-spinner[b-zc5x1xkxni] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-zc5x1xkxni 0.8s linear infinite;
}

/* Dark Mode */
[data-theme="dark"] .manual-order-container[b-zc5x1xkxni] {
    background: #1e1e23;
}

[data-theme="dark"] .manual-order-header[b-zc5x1xkxni] {
    background: linear-gradient(180deg, #2a2a30 0%, #1e1e23 100%);
}

[data-theme="dark"] .product-search-results[b-zc5x1xkxni],
[data-theme="dark"] .selected-product-item[b-zc5x1xkxni],
[data-theme="dark"] .summary-product-item[b-zc5x1xkxni] {
    background: #2a2a30;
}

/* Responsive */
@media (max-width: 768px) {
    .manual-order-container[b-zc5x1xkxni] {
        max-height: 95vh;
        border-radius: 16px 16px 0 0;
    }

    .wizard-progress[b-zc5x1xkxni] {
        padding: 16px;
    }

    .wizard-step-info[b-zc5x1xkxni] {
        display: none;
    }

    .wizard-step-connector[b-zc5x1xkxni] {
        width: 20px;
    }

    .manual-order-body[b-zc5x1xkxni] {
        padding: 16px;
    }

    .form-grid[b-zc5x1xkxni] {
        grid-template-columns: 1fr;
    }

    .form-group.full-width[b-zc5x1xkxni] {
        grid-column: 1;
    }

    .selected-product-item[b-zc5x1xkxni] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .selected-product-info[b-zc5x1xkxni] {
        width: calc(100% - 60px);
    }

    .selected-product-quantity[b-zc5x1xkxni],
    .selected-product-price[b-zc5x1xkxni],
    .selected-product-total[b-zc5x1xkxni] {
        flex: 1;
    }
}
/* /Components/Orders/ResendOrderModal.razor.rz.scp.css */
/* Overlay */
.resend-order-overlay[b-7eypa96xjx] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.resend-order-overlay.active[b-7eypa96xjx] {
    opacity: 1;
    visibility: visible;
}

/* Container */
.resend-order-container[b-7eypa96xjx] {
    background: var(--surface-color, #fff);
    border-radius: 16px;
    width: 95%;
    max-width: 800px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: scale(0.95) translateY(20px);
    transition: transform 0.3s ease;
}

.resend-order-overlay.active .resend-order-container[b-7eypa96xjx] {
    transform: scale(1) translateY(0);
}

/* Header */
.resend-order-header[b-7eypa96xjx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.resend-order-title[b-7eypa96xjx] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary, #111827);
}

.resend-order-title svg[b-7eypa96xjx] {
    width: 24px;
    height: 24px;
    color: #8b5cf6;
}

.resend-order-close[b-7eypa96xjx] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-secondary, #6b7280);
    transition: all 0.2s;
}

.resend-order-close:hover[b-7eypa96xjx] {
    background: var(--hover-bg, #f3f4f6);
    color: var(--text-primary, #111827);
}

.resend-order-close svg[b-7eypa96xjx] {
    width: 20px;
    height: 20px;
}

/* Loading */
.resend-order-loading[b-7eypa96xjx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    gap: 16px;
    color: var(--text-secondary, #6b7280);
}

.loading-spinner[b-7eypa96xjx] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color, #e5e7eb);
    border-top-color: #8b5cf6;
    border-radius: 50%;
    animation: spin-b-7eypa96xjx 0.8s linear infinite;
}

@keyframes spin-b-7eypa96xjx {
    to { transform: rotate(360deg); }
}

/* Body */
.resend-order-body[b-7eypa96xjx] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Original Order Info */
.original-order-info[b-7eypa96xjx] {
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.info-badge[b-7eypa96xjx] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: #7c3aed;
}

.info-badge svg[b-7eypa96xjx] {
    width: 18px;
    height: 18px;
}

.info-badge strong[b-7eypa96xjx] {
    font-weight: 600;
}

.customer-info[b-7eypa96xjx] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.customer-name[b-7eypa96xjx] {
    font-weight: 500;
    color: var(--text-primary, #111827);
}

.customer-phone[b-7eypa96xjx] {
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
}

/* Form Section */
.form-section[b-7eypa96xjx] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-section-title[b-7eypa96xjx] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #111827);
    margin: 0;
}

.form-section-title svg[b-7eypa96xjx] {
    width: 20px;
    height: 20px;
    color: #8b5cf6;
}

.form-grid[b-7eypa96xjx] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.form-group.full-width[b-7eypa96xjx] {
    grid-column: 1 / -1;
}

/* Store Select */
.store-select[b-7eypa96xjx] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    font-size: 0.9375rem;
    color: var(--text-primary, #111827);
    background: var(--surface-color, #fff);
    cursor: pointer;
    transition: all 0.2s;
}

.store-select:focus[b-7eypa96xjx] {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

/* Select All Row */
.select-all-row[b-7eypa96xjx] {
    padding: 12px 16px;
    background: var(--hover-bg, #f9fafb);
    border-radius: 10px;
    border: 1px solid var(--border-color, #e5e7eb);
}

.checkbox-label[b-7eypa96xjx] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary, #111827);
}

.checkbox-label input[type="checkbox"][b-7eypa96xjx] {
    width: 18px;
    height: 18px;
    accent-color: #8b5cf6;
    cursor: pointer;
}

/* Order Items List */
.order-items-list[b-7eypa96xjx] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.order-item[b-7eypa96xjx] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--surface-color, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    transition: all 0.2s;
}

.order-item.selected[b-7eypa96xjx] {
    border-color: #8b5cf6;
    background: linear-gradient(135deg, #faf5ff 0%, #f5f3ff 100%);
}

.order-item.additional[b-7eypa96xjx] {
    border-color: #10b981;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
}

.item-checkbox[b-7eypa96xjx] {
    display: flex;
    align-items: center;
}

.item-checkbox input[type="checkbox"][b-7eypa96xjx] {
    width: 18px;
    height: 18px;
    accent-color: #8b5cf6;
    cursor: pointer;
}

.item-image[b-7eypa96xjx] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--hover-bg, #f9fafb);
}

.item-image img[b-7eypa96xjx] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.no-image[b-7eypa96xjx] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary, #9ca3af);
}

.no-image svg[b-7eypa96xjx] {
    width: 24px;
    height: 24px;
}

.item-details[b-7eypa96xjx] {
    flex: 1;
    min-width: 0;
}

.item-name[b-7eypa96xjx] {
    font-weight: 500;
    color: var(--text-primary, #111827);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-variant[b-7eypa96xjx] {
    font-size: 0.8125rem;
    color: #8b5cf6;
}

.item-sku[b-7eypa96xjx] {
    font-size: 0.75rem;
    color: var(--text-tertiary, #9ca3af);
}

.item-quantity[b-7eypa96xjx] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.qty-btn[b-7eypa96xjx] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color, #e5e7eb);
    background: var(--surface-color, #fff);
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    color: var(--text-primary, #111827);
    transition: all 0.2s;
}

.qty-btn:hover:not(:disabled)[b-7eypa96xjx] {
    background: var(--hover-bg, #f3f4f6);
    border-color: #8b5cf6;
}

.qty-btn:disabled[b-7eypa96xjx] {
    opacity: 0.4;
    cursor: not-allowed;
}

.item-quantity input[b-7eypa96xjx] {
    width: 48px;
    height: 28px;
    text-align: center;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    font-size: 0.875rem;
}

.item-quantity input:disabled[b-7eypa96xjx] {
    background: var(--hover-bg, #f9fafb);
    opacity: 0.6;
}

.item-price[b-7eypa96xjx] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 80px;
}

.unit-price[b-7eypa96xjx] {
    font-size: 0.75rem;
    color: var(--text-tertiary, #9ca3af);
}

.total-price[b-7eypa96xjx] {
    font-weight: 600;
    color: var(--text-primary, #111827);
}

.remove-item-btn[b-7eypa96xjx] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: #ef4444;
    transition: all 0.2s;
}

.remove-item-btn:hover[b-7eypa96xjx] {
    background: #fef2f2;
}

.remove-item-btn svg[b-7eypa96xjx] {
    width: 16px;
    height: 16px;
}

/* Product Search */
.product-search-container[b-7eypa96xjx] {
    position: relative;
}

.product-search-input-wrapper[b-7eypa96xjx] {
    position: relative;
    display: flex;
    align-items: center;
}

.product-search-input-wrapper svg[b-7eypa96xjx] {
    position: absolute;
    left: 14px;
    width: 18px;
    height: 18px;
    color: var(--text-tertiary, #9ca3af);
}

.product-search-input-wrapper input[b-7eypa96xjx] {
    width: 100%;
    padding: 12px 16px 12px 42px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    font-size: 0.9375rem;
    transition: all 0.2s;
}

.product-search-input-wrapper input:focus[b-7eypa96xjx] {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.search-spinner[b-7eypa96xjx] {
    position: absolute;
    right: 14px;
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-color, #e5e7eb);
    border-top-color: #8b5cf6;
    border-radius: 50%;
    animation: spin-b-7eypa96xjx 0.8s linear infinite;
}

/* Product Search Results */
.product-search-results[b-7eypa96xjx] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--surface-color, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    max-height: 300px;
    overflow-y: auto;
    z-index: 100;
}

.product-search-item[b-7eypa96xjx] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.2s;
}

.product-search-item:hover[b-7eypa96xjx] {
    background: var(--hover-bg, #f9fafb);
}

.product-search-item:not(:last-child)[b-7eypa96xjx] {
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.product-search-image[b-7eypa96xjx] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--hover-bg, #f9fafb);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-search-image img[b-7eypa96xjx] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-search-image svg[b-7eypa96xjx] {
    width: 20px;
    height: 20px;
    color: var(--text-tertiary, #9ca3af);
}

.product-search-info[b-7eypa96xjx] {
    flex: 1;
    min-width: 0;
}

.product-search-name[b-7eypa96xjx] {
    display: block;
    font-weight: 500;
    color: var(--text-primary, #111827);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-search-sku[b-7eypa96xjx] {
    display: block;
    font-size: 0.75rem;
    color: var(--text-tertiary, #9ca3af);
}

.product-search-price[b-7eypa96xjx] {
    font-weight: 600;
    color: #8b5cf6;
    white-space: nowrap;
}

/* Additional Items */
.additional-items-list[b-7eypa96xjx] {
    margin-top: 16px;
}

.additional-items-header[b-7eypa96xjx] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #10b981;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Summary */
.resend-summary[b-7eypa96xjx] {
    background: var(--hover-bg, #f9fafb);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.summary-row[b-7eypa96xjx] {
    display: flex;
    justify-content: space-between;
    font-size: 0.9375rem;
    color: var(--text-secondary, #6b7280);
}

.summary-row.total[b-7eypa96xjx] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary, #111827);
    padding-top: 8px;
    border-top: 1px solid var(--border-color, #e5e7eb);
}

/* Footer */
.resend-order-footer[b-7eypa96xjx] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid var(--border-color, #e5e7eb);
}

.btn-cancel[b-7eypa96xjx] {
    padding: 12px 24px;
    border: 1px solid var(--border-color, #e5e7eb);
    background: var(--surface-color, #fff);
    border-radius: 10px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary, #111827);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cancel:hover[b-7eypa96xjx] {
    background: var(--hover-bg, #f3f4f6);
}

.btn-resend[b-7eypa96xjx] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    border-radius: 10px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-resend:hover:not(:disabled)[b-7eypa96xjx] {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

.btn-resend:disabled[b-7eypa96xjx] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-resend svg[b-7eypa96xjx] {
    width: 18px;
    height: 18px;
}

.btn-spinner[b-7eypa96xjx] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-7eypa96xjx 0.8s linear infinite;
}

/* Responsive */
@media (max-width: 640px) {
    .resend-order-container[b-7eypa96xjx] {
        width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }

    .order-item[b-7eypa96xjx] {
        flex-wrap: wrap;
    }

    .item-details[b-7eypa96xjx] {
        width: calc(100% - 80px);
    }

    .item-quantity[b-7eypa96xjx] {
        margin-left: auto;
    }

    .item-price[b-7eypa96xjx] {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px dashed var(--border-color, #e5e7eb);
    }

    .customer-info[b-7eypa96xjx] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}
/* /Components/Pages/Ai/AiDashboard.razor.rz.scp.css */
.config-warning[b-ma6gt1s21s] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 12px;
    margin-bottom: 24px;
}

.warning-icon[b-ma6gt1s21s] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 158, 11, 0.15);
    border-radius: 12px;
    color: var(--warning);
}

.warning-content[b-ma6gt1s21s] {
    flex: 1;
}

.warning-content h4[b-ma6gt1s21s] {
    margin: 0 0 4px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.warning-content p[b-ma6gt1s21s] {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.date-range-selector[b-ma6gt1s21s] {
    margin-right: 8px;
}

.date-range-selector .form-select[b-ma6gt1s21s] {
    min-width: 150px;
}

.loading-container[b-ma6gt1s21s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    gap: 16px;
}

.token-stats-row[b-ma6gt1s21s] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

[b-ma6gt1s21s] .token-card .card-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.token-stat[b-ma6gt1s21s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.token-label[b-ma6gt1s21s] {
    font-size: 14px;
    color: var(--text-secondary);
}

.token-value[b-ma6gt1s21s] {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
}

.token-breakdown[b-ma6gt1s21s] {
    display: flex;
    gap: 24px;
}

.token-item[b-ma6gt1s21s] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.token-type[b-ma6gt1s21s] {
    font-size: 12px;
    font-weight: 500;
}

.token-type.input[b-ma6gt1s21s] {
    color: var(--primary);
}

.token-type.output[b-ma6gt1s21s] {
    color: var(--success);
}

.token-count[b-ma6gt1s21s] {
    font-size: 16px;
    font-weight: 600;
}

[b-ma6gt1s21s] .stat-icon.success {
    color: var(--success);
}

[b-ma6gt1s21s] .stat-icon.danger {
    color: var(--danger);
}

[b-ma6gt1s21s] .stat-icon.warning {
    color: var(--warning);
}

.feature-list[b-ma6gt1s21s] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.feature-item[b-ma6gt1s21s] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.feature-info[b-ma6gt1s21s] {
    flex: 0 0 180px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.feature-name[b-ma6gt1s21s] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.feature-count[b-ma6gt1s21s] {
    font-size: 12px;
    color: var(--text-secondary);
}

.feature-bar-container[b-ma6gt1s21s] {
    flex: 1;
    height: 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    overflow: hidden;
}

.feature-bar[b-ma6gt1s21s] {
    height: 100%;
    background: var(--primary);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.feature-cost[b-ma6gt1s21s] {
    flex: 0 0 80px;
    text-align: right;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.chart-empty[b-ma6gt1s21s] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--text-secondary);
}

.provider-badge[b-ma6gt1s21s] {
    display: inline-block;
    padding: 4px 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.model-name[b-ma6gt1s21s] {
    font-family: var(--font-mono);
    font-size: 13px;
}

.cost-value[b-ma6gt1s21s] {
    font-weight: 600;
    color: var(--warning);
}

.text-right[b-ma6gt1s21s] {
    text-align: right;
}

@media (max-width: 768px) {
    .token-stats-row[b-ma6gt1s21s] {
        grid-template-columns: 1fr;
    }

    .feature-info[b-ma6gt1s21s] {
        flex: 0 0 120px;
    }
}
/* /Components/Pages/Ai/AiSettings.razor.rz.scp.css */
.loading-container[b-3j5s0e2hpv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    gap: 16px;
}

.empty-state[b-3j5s0e2hpv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    text-align: center;
}

.empty-state-icon[b-3j5s0e2hpv] {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border-radius: 50%;
    margin-bottom: 24px;
    color: var(--text-secondary);
}

.empty-state svg[b-3j5s0e2hpv] {
    margin-bottom: 0;
}

.empty-state h3[b-3j5s0e2hpv] {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.empty-state p[b-3j5s0e2hpv] {
    margin: 0 0 24px 0;
    color: var(--text-secondary);
    max-width: 400px;
}

.config-grid[b-3j5s0e2hpv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 20px;
}

.config-card[b-3j5s0e2hpv] {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    position: relative;
    transition: all 0.2s ease;
}

.config-card:hover[b-3j5s0e2hpv] {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.config-card.default[b-3j5s0e2hpv] {
    border-color: var(--primary);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, transparent 100%);
}

.config-card.inactive[b-3j5s0e2hpv] {
    opacity: 0.7;
}

.default-badge[b-3j5s0e2hpv] {
    position: absolute;
    top: -8px;
    right: 16px;
    background: var(--primary);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.config-header[b-3j5s0e2hpv] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.config-icon[b-3j5s0e2hpv] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border-radius: 10px;
    color: var(--primary);
    flex-shrink: 0;
}

.config-info[b-3j5s0e2hpv] {
    flex: 1;
    min-width: 0;
}

.config-info h3[b-3j5s0e2hpv] {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.provider-badge[b-3j5s0e2hpv] {
    display: inline-block;
    padding: 2px 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

.config-actions[b-3j5s0e2hpv] {
    display: flex;
    gap: 4px;
}

.icon-btn[b-3j5s0e2hpv] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.15s ease;
}

.icon-btn:hover[b-3j5s0e2hpv] {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.icon-btn.danger:hover[b-3j5s0e2hpv] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.config-body[b-3j5s0e2hpv] {
    padding: 16px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.config-detail[b-3j5s0e2hpv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.detail-label[b-3j5s0e2hpv] {
    font-size: 13px;
    color: var(--text-secondary);
}

.detail-value[b-3j5s0e2hpv] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.model-name[b-3j5s0e2hpv] {
    font-family: var(--font-mono);
    background: var(--bg-secondary);
    padding: 2px 8px;
    border-radius: 4px;
}

.config-stats[b-3j5s0e2hpv] {
    display: flex;
    gap: 24px;
}

.stat-item[b-3j5s0e2hpv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat-value[b-3j5s0e2hpv] {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.stat-label[b-3j5s0e2hpv] {
    font-size: 12px;
    color: var(--text-secondary);
}

.config-footer[b-3j5s0e2hpv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
}

.set-default-btn[b-3j5s0e2hpv] {
    background: transparent;
    border: 1px solid var(--border);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.set-default-btn:hover[b-3j5s0e2hpv] {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(99, 102, 241, 0.05);
}

.form-row[b-3j5s0e2hpv] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-group[b-3j5s0e2hpv] {
    margin-bottom: 16px;
}

.form-section[b-3j5s0e2hpv] {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.form-section h4[b-3j5s0e2hpv] {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.form-section-desc[b-3j5s0e2hpv] {
    margin: 0 0 16px 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.form-label[b-3j5s0e2hpv] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.required[b-3j5s0e2hpv] {
    color: var(--danger);
}

.api-key-status[b-3j5s0e2hpv] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 6px;
    color: var(--success);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 8px;
}

.api-key-status svg[b-3j5s0e2hpv] {
    flex-shrink: 0;
}

.modal-loading[b-3j5s0e2hpv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    gap: 16px;
}

.error-message[b-3j5s0e2hpv] {
    padding: 12px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    color: var(--danger);
    font-size: 14px;
    margin-top: 16px;
}

@media (max-width: 768px) {
    .config-grid[b-3j5s0e2hpv] {
        grid-template-columns: 1fr;
    }

    .form-row[b-3j5s0e2hpv] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Ai/PromptTemplates.razor.rz.scp.css */
.name-cell[b-tvyvdmfgqn] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.name-cell .name[b-tvyvdmfgqn] {
    font-weight: 500;
}

.name-cell .description[b-tvyvdmfgqn] {
    font-size: 12px;
    color: var(--text-muted);
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.category-badge[b-tvyvdmfgqn] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-secondary);
}

.token-badge[b-tvyvdmfgqn],
.temp-badge[b-tvyvdmfgqn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    padding: 2px 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

.system-badge[b-tvyvdmfgqn] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: var(--info-bg);
    color: var(--info);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.custom-badge[b-tvyvdmfgqn] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.action-buttons[b-tvyvdmfgqn] {
    display: flex;
    gap: 4px;
}

.btn-icon[b-tvyvdmfgqn] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.15s ease;
}

.btn-icon:hover[b-tvyvdmfgqn] {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.btn-icon.danger:hover[b-tvyvdmfgqn] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

[b-tvyvdmfgqn] .prompt-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

[b-tvyvdmfgqn] .prompt-form .form-row-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

[b-tvyvdmfgqn] .prompt-form .form-section {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

[b-tvyvdmfgqn] .prompt-form .form-section h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

[b-tvyvdmfgqn] .prompt-form .form-group textarea {
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
}
/* /Components/Pages/Cargo/CargoConnection.razor.rz.scp.css */
/* Kargo bağlantı sayfası — channels/stores tab deseni.
   Kanonik tema değişkenleri (dark-mode uyumlu). */

/* ─── Firma seçici ───────────────────────────────────────────────── */
.company-selector[b-h8t394x0d2] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 16px;
}

.company-selector[b-h8t394x0d2]  .searchable-select {
    flex: 1;
}

.company-selector-label[b-h8t394x0d2] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

    .company-selector-label svg[b-h8t394x0d2] {
        color: var(--text-secondary);
    }

/* ─── Boş durumlar ───────────────────────────────────────────────── */
.cargo-empty-state[b-h8t394x0d2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--text-secondary);
    text-align: center;
    gap: 12px;
}

    .cargo-empty-state svg[b-h8t394x0d2] {
        color: var(--border);
    }

    .cargo-empty-state p[b-h8t394x0d2] {
        margin: 0;
        max-width: 480px;
        line-height: 1.5;
    }

    .cargo-empty-state strong[b-h8t394x0d2] {
        color: var(--text-primary);
    }

/* ─── Tab bar ────────────────────────────────────────────────────── */
.cargo-tab-row[b-h8t394x0d2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.filter-tabs-container[b-h8t394x0d2] {
    flex: 1;
    min-width: 0;
}

.filter-tabs[b-h8t394x0d2] {
    display: flex;
    gap: 8px;
    padding: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
}

.filter-tab[b-h8t394x0d2] {
    padding: 10px 18px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-sm, 6px);
    transition: var(--transition, all 120ms ease);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

    .filter-tab:hover:not(.active)[b-h8t394x0d2] {
        color: var(--text-primary);
        background: var(--bg-input);
    }

    .filter-tab.active[b-h8t394x0d2] {
        background: var(--primary);
        color: #fff;
    }

.filter-tab-add[b-h8t394x0d2] {
    padding: 8px 12px;
    color: var(--primary);
    border: 1px dashed var(--border);
    background: transparent;
    margin-left: 4px;
}

    .filter-tab-add:hover[b-h8t394x0d2] {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
        border-style: solid;
    }

    .filter-tab-add svg[b-h8t394x0d2] {
        display: block;
    }

.cargo-tab-status[b-h8t394x0d2] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9ca3af;
    flex-shrink: 0;
}

    .cargo-tab-status.is-connected[b-h8t394x0d2] { background: #10b981; }
    .cargo-tab-status.is-failed[b-h8t394x0d2]    { background: #ef4444; }
    .cargo-tab-status.is-pending[b-h8t394x0d2]   { background: #f59e0b; }

.filter-tab.active .cargo-tab-status[b-h8t394x0d2] {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

/* ─── Kargo firması seçici modal ─────────────────────────────────── */
.provider-selector-desc[b-h8t394x0d2] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bg-input);
    color: var(--text-primary);
    border-radius: 6px;
    margin-bottom: 20px;
    line-height: 1.5;
}

    .provider-selector-desc svg[b-h8t394x0d2] {
        flex-shrink: 0;
        margin-top: 2px;
        color: var(--primary);
    }

.provider-grid[b-h8t394x0d2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.provider-card[b-h8t394x0d2] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease, transform 80ms ease;
    background: var(--bg-card);
}

    .provider-card:hover:not(.is-disabled)[b-h8t394x0d2] {
        border-color: var(--primary);
        box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12);
    }

    .provider-card:active:not(.is-disabled)[b-h8t394x0d2] {
        transform: translateY(1px);
    }

    .provider-card.is-disabled[b-h8t394x0d2] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.provider-logo[b-h8t394x0d2] {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
}

.provider-initials[b-h8t394x0d2] {
    font-size: 16px;
    letter-spacing: -0.02em;
}

.provider-name[b-h8t394x0d2] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    text-align: center;
}

.provider-badge[b-h8t394x0d2] {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 10px;
    font-weight: 600;
    color: var(--primary);
    background: var(--bg-input);
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.provider-badge--soon[b-h8t394x0d2] {
    color: var(--text-muted);
}
/* /Components/Pages/Cargo/CargoConnectionTab.razor.rz.scp.css */
/* Tek kargo bağlantısı tab paneli — kanonik tema değişkenleri (dark-mode uyumlu). */

.cargo-tab[b-28sqhqfrm0] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cargo-tab__header[b-28sqhqfrm0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.cargo-tab__title[b-28sqhqfrm0] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .cargo-tab__title h3[b-28sqhqfrm0] {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
    }

.cargo-tab__status[b-28sqhqfrm0] {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
}

.cargo-tab__status--ok[b-28sqhqfrm0] {
    background: rgba(16, 185, 129, 0.14);
    color: #10b981;
}

.cargo-tab__status--err[b-28sqhqfrm0] {
    background: rgba(239, 68, 68, 0.14);
    color: #ef4444;
}

.cargo-tab__status--idle[b-28sqhqfrm0] {
    background: var(--bg-input);
    color: var(--text-muted);
}

.cargo-tab__actions[b-28sqhqfrm0] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cargo-tab__error[b-28sqhqfrm0] {
    padding: 10px 14px;
    background: rgba(239, 68, 68, 0.10);
    border: 1px solid rgba(239, 68, 68, 0.30);
    border-radius: var(--radius);
    color: #ef4444;
    font-size: 13px;
}

/* ─── Stat kartları — channels/stores deseni ─────────────────────── */
.tab-stats-grid[b-28sqhqfrm0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.tab-stat-card[b-28sqhqfrm0] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

    .tab-stat-card.is-ok[b-28sqhqfrm0] {
        border-left: 3px solid #10b981;
    }

    .tab-stat-card.is-error[b-28sqhqfrm0] {
        border-left: 3px solid #ef4444;
    }

    .tab-stat-card.is-warn[b-28sqhqfrm0] {
        border-left: 3px solid #f59e0b;
    }

.tab-stat-icon[b-28sqhqfrm0] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tab-stat-card.is-ok .tab-stat-icon[b-28sqhqfrm0] {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.tab-stat-card.is-error .tab-stat-icon[b-28sqhqfrm0] {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.tab-stat-body[b-28sqhqfrm0] {
    min-width: 0;
}

.tab-stat-label[b-28sqhqfrm0] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tab-stat-value[b-28sqhqfrm0] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 2px;
}

/* "Bağlantı Bilgileri" gibi gruplanmış bölümler — dark/light uyumlu kart görünümü.
   Global .form-section yalnızca alt-çizgi ayırıcı; burada kart stiline çevriliyor
   (kanonik tema değişkenleri → her iki modda da doğru kontrast). */
.form-section[b-28sqhqfrm0] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin-bottom: 0;
}

/* "Genel" ve "Bağlantı Bilgileri" bölümleri — yan yana 2 kart.
   Dar ekranda tek sütuna iner. */
.cargo-sections[b-28sqhqfrm0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

@media (max-width: 768px) {
    .cargo-sections[b-28sqhqfrm0] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Catalogs/Attributes.razor.rz.scp.css */
/* Attributes page responsive */

/* Tablet */
@media (max-width: 1024px) {
    .attribute-name-cell[b-gzu7xv7xkg] {
        gap: 8px;
    }

    .attribute-type-icon[b-gzu7xv7xkg] {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }

    .type-badge[b-gzu7xv7xkg] {
        font-size: 12px;
        padding: 3px 10px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .attribute-name-cell[b-gzu7xv7xkg] {
        gap: 8px;
    }

    .attribute-name-cell span:last-child[b-gzu7xv7xkg] {
        font-size: 13px;
    }

    .attribute-type-icon[b-gzu7xv7xkg] {
        width: 26px;
        height: 26px;
        font-size: 12px;
        border-radius: 6px;
    }

    .type-badge[b-gzu7xv7xkg] {
        font-size: 11px;
        padding: 3px 8px;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .attribute-type-icon[b-gzu7xv7xkg] {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }

    .attribute-name-cell span:last-child[b-gzu7xv7xkg] {
        font-size: 12px;
    }

    .type-badge[b-gzu7xv7xkg] {
        font-size: 10px;
        padding: 2px 6px;
    }
}
/* /Components/Pages/Catalogs/AttributeValues.razor.rz.scp.css */
/* AttributeValues page responsive */

/* Tablet */
@media (max-width: 1024px) {
    .attribute-badge[b-err23vkiob] {
        font-size: 12px;
        padding: 3px 8px;
    }

    .value-cell[b-err23vkiob] {
        gap: 6px;
        font-size: 13px;
    }

    .color-swatch[b-err23vkiob] {
        width: 22px;
        height: 22px;
    }

    .color-code[b-err23vkiob] {
        font-size: 12px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .attribute-badge[b-err23vkiob] {
        font-size: 11px;
        padding: 3px 8px;
    }

    .value-cell[b-err23vkiob] {
        gap: 6px;
        font-size: 13px;
    }

    .color-dot[b-err23vkiob] {
        width: 10px;
        height: 10px;
    }

    .color-swatch[b-err23vkiob] {
        width: 20px;
        height: 20px;
    }

    .color-code[b-err23vkiob] {
        font-size: 11px;
    }

    .color-preview[b-err23vkiob] {
        gap: 6px;
    }

    /* Bulk textarea in modal */
    .bulk-textarea[b-err23vkiob] {
        font-size: 14px;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .attribute-badge[b-err23vkiob] {
        font-size: 10px;
        padding: 2px 6px;
    }

    .value-cell span:last-child[b-err23vkiob] {
        font-size: 12px;
    }

    .color-swatch[b-err23vkiob] {
        width: 18px;
        height: 18px;
    }

    .color-code[b-err23vkiob] {
        font-size: 10px;
    }
}
/* /Components/Pages/Catalogs/Categories.razor.rz.scp.css */
/* Categories page - scoped styles */

/* Tree badges responsive */

/* Tablet */
@media (max-width: 1024px) {
    .tree-node-name[b-h6db3es9su] {
        font-size: 13px;
    }

    .tree-sort-badge[b-h6db3es9su] {
        font-size: 10px;
        padding: 1px 6px;
    }

    .tree-status-badge[b-h6db3es9su] {
        font-size: 10px;
        padding: 3px 8px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .tree-node-name[b-h6db3es9su] {
        font-size: 13px;
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tree-sort-badge[b-h6db3es9su] {
        display: none;
    }

    .tree-status-badge[b-h6db3es9su] {
        font-size: 9px;
        padding: 2px 6px;
    }

    .tree-status-badge .status-dot[b-h6db3es9su] {
        width: 4px;
        height: 4px;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .tree-node-name[b-h6db3es9su] {
        font-size: 12px;
        max-width: 130px;
    }

    .tree-status-badge span:not(.status-dot)[b-h6db3es9su] {
        display: none;
    }
}

/* /Components/Pages/Channels/CloseAllModal.razor.rz.scp.css */
.close-all-body[b-bapvp98338] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 200px;
}

.close-all-loading[b-bapvp98338] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px 16px;
    color: var(--text-secondary);
    font-size: 13px;
}

.close-all-error[b-bapvp98338] {
    padding: 10px 12px;
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: var(--radius-sm);
    font-size: 13px;
}

.close-all-danger[b-bapvp98338] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    background: rgba(239, 68, 68, 0.10);
    color: var(--text-primary);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-left: 3px solid #ef4444;
    border-radius: var(--radius-sm);
    font-size: 13px;
}

    .close-all-danger strong[b-bapvp98338] {
        color: #ef4444;
    }

    .close-all-danger span[b-bapvp98338] {
        color: var(--text-secondary);
        line-height: 1.45;
    }

.close-all-warning[b-bapvp98338] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: rgba(245, 158, 11, 0.12);
    color: var(--text-primary);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-left: 3px solid #f59e0b;
    border-radius: var(--radius-sm);
    font-size: 13px;
}

    .close-all-warning strong[b-bapvp98338] {
        color: #f59e0b;
    }

    .close-all-warning span[b-bapvp98338] {
        color: var(--text-secondary);
        line-height: 1.45;
    }

.close-all-empty[b-bapvp98338] {
    padding: 16px;
    text-align: center;
    color: var(--text-muted);
    background: var(--bg-input);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
}

.close-all-stats[b-bapvp98338] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.close-all-stat[b-bapvp98338] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-align: center;
}

    .close-all-stat.is-target[b-bapvp98338] {
        border-color: #ef4444;
        background: rgba(239, 68, 68, 0.08);
    }

.close-all-stat-num[b-bapvp98338] {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.close-all-stat.is-target .close-all-stat-num[b-bapvp98338] {
    color: #ef4444;
}

.close-all-stat-lbl[b-bapvp98338] {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.close-all-confirm[b-bapvp98338] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary);
}

    .close-all-confirm input[type="checkbox"][b-bapvp98338] {
        width: 16px;
        height: 16px;
        accent-color: #ef4444;
    }

    .close-all-confirm:hover[b-bapvp98338] {
        border-color: #ef4444;
    }
/* /Components/Pages/Channels/ContentUpdateModal.razor.rz.scp.css */
.content-update-body[b-c9zpo1ewh3] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 200px;
}

.content-update-intro[b-c9zpo1ewh3] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

.content-update-loading[b-c9zpo1ewh3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px 16px;
    color: var(--text-secondary);
    font-size: 13px;
}

.content-update-error[b-c9zpo1ewh3] {
    padding: 10px 12px;
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: var(--radius-sm);
    font-size: 13px;
}

.content-update-warning[b-c9zpo1ewh3] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: rgba(245, 158, 11, 0.12);
    color: var(--text-primary);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-left: 3px solid #f59e0b;
    border-radius: var(--radius-sm);
    font-size: 13px;
}

    .content-update-warning strong[b-c9zpo1ewh3] {
        color: #f59e0b;
    }

    .content-update-warning span[b-c9zpo1ewh3] {
        color: var(--text-secondary);
        line-height: 1.45;
    }

.content-update-stats[b-c9zpo1ewh3] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.content-update-stat[b-c9zpo1ewh3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-align: center;
}

    .content-update-stat.is-changed[b-c9zpo1ewh3] {
        border-color: rgba(245, 158, 11, 0.5);
    }

    .content-update-stat.is-push[b-c9zpo1ewh3] {
        border-color: var(--primary);
        background: var(--primary-alpha);
    }

.content-update-stat-num[b-c9zpo1ewh3] {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.content-update-stat.is-push .content-update-stat-num[b-c9zpo1ewh3] {
    color: var(--primary);
}

.content-update-stat-lbl[b-c9zpo1ewh3] {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.content-update-options[b-c9zpo1ewh3] {
    margin-top: 4px;
}

    .content-update-options[b-c9zpo1ewh3]  .form-group {
        margin-bottom: 0;
    }
/* /Components/Pages/Channels/CreateStoreModal.razor.rz.scp.css */
.create-store-body[b-ls597ijqsn] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.create-store-empty[b-ls597ijqsn] {
    color: var(--text-secondary);
    font-size: 13px;
    margin: 0;
    padding: 12px 14px;
    background: var(--bg-input));
    border-radius: 6px;
}

.create-store-section-title[b-ls597ijqsn] {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    margin: 8px 0 0 0;
}

.create-store-section-subtitle[b-ls597ijqsn] {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 4px 0;
}

.create-store-grid[b-ls597ijqsn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

    .create-store-grid .form-group[b-ls597ijqsn] {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .create-store-grid label[b-ls597ijqsn] {
        font-size: 12px;
        font-weight: 600;
        color: var(--text-secondary);
    }

    .create-store-grid .required[b-ls597ijqsn] {
        color: #ef4444;
        margin-left: 2px;
    }

    .create-store-grid .form-input[b-ls597ijqsn] {
        padding: 8px 10px;
        border: 1px solid var(--border);
        border-radius: 6px;
        font-size: 14px;
        background: var(--bg-card);
        color: var(--text-primary);
    }

    .create-store-grid .form-input:focus[b-ls597ijqsn] {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

    .create-store-grid .form-help[b-ls597ijqsn] {
        font-size: 11px;
        color: var(--text-secondary);
    }

    .create-store-grid .input-with-toggle[b-ls597ijqsn] {
        position: relative;
    }

        .create-store-grid .input-with-toggle .form-input[b-ls597ijqsn] {
            padding-right: 36px;
            width: 100%;
        }

    .create-store-grid .toggle-visibility-btn[b-ls597ijqsn] {
        position: absolute;
        right: 6px;
        top: 50%;
        transform: translateY(-50%);
        background: transparent;
        border: none;
        cursor: pointer;
        color: var(--text-secondary);
        padding: 4px;
        display: flex;
    }

        .create-store-grid .toggle-visibility-btn:hover[b-ls597ijqsn] {
            color: var(--primary);
        }

.create-store-body > .form-group[b-ls597ijqsn] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .create-store-body > .form-group label[b-ls597ijqsn] {
        font-size: 12px;
        font-weight: 600;
        color: var(--text-secondary);
    }

    .create-store-body > .form-group .required[b-ls597ijqsn] {
        color: #ef4444;
        margin-left: 2px;
    }

    .create-store-body > .form-group .form-input[b-ls597ijqsn] {
        padding: 8px 10px;
        border: 1px solid var(--border);
        border-radius: 6px;
        font-size: 14px;
        background: var(--bg-card);
        color: var(--text-primary);
    }

    .create-store-body > .form-group .form-input:focus[b-ls597ijqsn] {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

    .create-store-body > .form-group .form-help[b-ls597ijqsn] {
        font-size: 11px;
        color: var(--text-secondary);
    }

.create-store-error[b-ls597ijqsn] {
    padding: 10px 12px;
    background: rgba(239, 68, 68, 0.08);
    color: #b91c1c;
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 6px;
    font-size: 13px;
}
/* /Components/Pages/Channels/InventoryDiffPushModal.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────────
   InventoryDiffPushModal — "afilli" canlı sync ekranı.
   Tema değişkenleri: --bg-card / --border / --primary / --text-* /
   --bg-input / --radius / --primary-alpha (kanonik set).
   ───────────────────────────────────────────────────────────── */

.diff-push-shell[b-w14sag5nvu] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 360px;
}

/* ─── Hero (mode chip + status badge) ───────────────────────── */
.diff-push-hero[b-w14sag5nvu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.diff-push-hero-left[b-w14sag5nvu] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.diff-push-hero-title[b-w14sag5nvu] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.diff-push-mode-chip[b-w14sag5nvu] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary);
}

    .diff-push-mode-chip.is-stock[b-w14sag5nvu] {
        background: rgba(59, 130, 246, 0.12);
        border-color: rgba(59, 130, 246, 0.35);
        color: #3b82f6;
    }

    .diff-push-mode-chip.is-price[b-w14sag5nvu] {
        background: rgba(245, 158, 11, 0.12);
        border-color: rgba(245, 158, 11, 0.35);
        color: #f59e0b;
    }

    .diff-push-mode-chip.is-both[b-w14sag5nvu] {
        background: var(--primary-alpha);
        border-color: var(--primary);
        color: var(--primary);
    }

.diff-push-mode-icon[b-w14sag5nvu] {
    font-size: 14px;
    line-height: 1;
}

/* Status badge — sağ üst köşede canlı durum etiketi */
.diff-push-status-badge[b-w14sag5nvu] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    white-space: nowrap;
}

    .diff-push-status-badge.is-pending[b-w14sag5nvu] {
        background: rgba(245, 158, 11, 0.12);
        border-color: rgba(245, 158, 11, 0.35);
        color: #f59e0b;
    }

    .diff-push-status-badge.is-submitted[b-w14sag5nvu] {
        background: rgba(59, 130, 246, 0.12);
        border-color: rgba(59, 130, 246, 0.35);
        color: #3b82f6;
    }

    .diff-push-status-badge.is-success[b-w14sag5nvu] {
        background: rgba(34, 197, 94, 0.12);
        border-color: rgba(34, 197, 94, 0.35);
        color: #22c55e;
    }

    .diff-push-status-badge.is-partial[b-w14sag5nvu] {
        background: rgba(245, 158, 11, 0.18);
        border-color: rgba(245, 158, 11, 0.5);
        color: #f59e0b;
    }

    .diff-push-status-badge.is-failure[b-w14sag5nvu] {
        background: rgba(239, 68, 68, 0.12);
        border-color: rgba(239, 68, 68, 0.35);
        color: #ef4444;
    }

.diff-push-status-dot[b-w14sag5nvu] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    animation: diff-push-pulse-b-w14sag5nvu 1.4s ease-in-out infinite;
}

@keyframes diff-push-pulse-b-w14sag5nvu {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(0.75); }
}

/* ─── Initial ekranı — açıklama satırları ───────────────────── */
.diff-push-explain[b-w14sag5nvu] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.diff-push-explain-row[b-w14sag5nvu] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 13px;
    line-height: 1.5;
}

    .diff-push-explain-row strong[b-w14sag5nvu] {
        display: block;
        color: var(--text-primary);
        font-weight: 600;
        font-size: 13px;
    }

    .diff-push-explain-row span[b-w14sag5nvu] {
        display: block;
        color: var(--text-secondary);
        font-size: 12px;
    }

.diff-push-bullet[b-w14sag5nvu] {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

    .diff-push-bullet.is-ok[b-w14sag5nvu] {
        background: rgba(34, 197, 94, 0.18);
        color: #22c55e;
    }

    .diff-push-bullet.is-warn[b-w14sag5nvu] {
        background: rgba(245, 158, 11, 0.18);
        color: #f59e0b;
    }

    .diff-push-bullet.is-mute[b-w14sag5nvu] {
        background: var(--bg-input);
        color: var(--text-muted);
    }

.diff-push-options[b-w14sag5nvu] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 4px 14px;
}

    /* SwitchField'ın form-group margin'ini modal içinde nötrle */
    .diff-push-options[b-w14sag5nvu]  .form-group {
        margin-bottom: 0;
    }

/* ─── Running ekranı — 4 fazlı timeline ─────────────────────── */
.diff-push-timeline[b-w14sag5nvu] {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 18px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.diff-push-phase[b-w14sag5nvu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    min-width: 90px;
}

.diff-push-phase-marker[b-w14sag5nvu] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    border: 2px solid var(--border);
    color: var(--text-muted);
    font-weight: 700;
    font-size: 13px;
    transition: all 0.25s ease;
}

.diff-push-phase.completed .diff-push-phase-marker[b-w14sag5nvu] {
    background: rgba(34, 197, 94, 0.16);
    border-color: #22c55e;
    color: #22c55e;
}

.diff-push-phase.active .diff-push-phase-marker[b-w14sag5nvu] {
    background: var(--primary-alpha);
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-alpha);
}

.diff-push-phase-check[b-w14sag5nvu] {
    font-size: 16px;
    line-height: 1;
}

.diff-push-phase-num[b-w14sag5nvu] {
    line-height: 1;
}

.diff-push-phase-pulse[b-w14sag5nvu] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--primary);
    animation: diff-push-pulse-b-w14sag5nvu 1.2s ease-in-out infinite;
}

.diff-push-phase-label[b-w14sag5nvu] {
    font-size: 11px;
    color: var(--text-secondary);
    text-align: center;
    font-weight: 500;
    line-height: 1.3;
    max-width: 100px;
}

.diff-push-phase.active .diff-push-phase-label[b-w14sag5nvu],
.diff-push-phase.completed .diff-push-phase-label[b-w14sag5nvu] {
    color: var(--text-primary);
}

.diff-push-phase-bar[b-w14sag5nvu] {
    flex: 1 1 auto;
    height: 2px;
    background: var(--border);
    margin: 0 -4px;
    margin-bottom: 26px; /* marker yüksekliğine uydur, label altta kalsın */
    transition: background 0.25s ease;
}

    .diff-push-phase-bar.filled[b-w14sag5nvu] {
        background: #22c55e;
    }

/* ─── Stat cards grid (4 sütun) ─────────────────────────────── */
.diff-push-stats[b-w14sag5nvu] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.diff-push-stat[b-w14sag5nvu] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-align: center;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

    .diff-push-stat:hover[b-w14sag5nvu] {
        transform: translateY(-1px);
    }

    .diff-push-stat.is-push[b-w14sag5nvu] {
        border-color: var(--primary);
        background: var(--primary-alpha);
    }

    .diff-push-stat.is-skip[b-w14sag5nvu] {
        border-color: var(--border);
    }

    .diff-push-stat.is-fail[b-w14sag5nvu] {
        border-color: rgba(239, 68, 68, 0.4);
        background: rgba(239, 68, 68, 0.08);
    }

.diff-push-stat-num[b-w14sag5nvu] {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.diff-push-stat.is-push .diff-push-stat-num[b-w14sag5nvu] {
    color: var(--primary);
}

.diff-push-stat.is-fail .diff-push-stat-num[b-w14sag5nvu] {
    color: #ef4444;
}

.diff-push-stat-lbl[b-w14sag5nvu] {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ─── Activity log (spinner + status text + batch chip) ─────── */
.diff-push-activity[b-w14sag5nvu] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.diff-push-activity-row[b-w14sag5nvu] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.diff-push-activity-row strong[b-w14sag5nvu] {
    color: var(--text-primary);
    font-weight: 600;
}

.diff-push-spinner-sm[b-w14sag5nvu] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: diff-push-spin-b-w14sag5nvu 0.8s linear infinite;
}

@keyframes diff-push-spin-b-w14sag5nvu {
    to { transform: rotate(360deg); }
}

.diff-push-batch-chip[b-w14sag5nvu] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.diff-push-batch-label[b-w14sag5nvu] {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.diff-push-batch-val[b-w14sag5nvu] {
    color: var(--text-primary);
}

/* ─── Done ekranı — success/partial/failure ─────────────────── */
.diff-push-done[b-w14sag5nvu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 28px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: center;
}

.diff-push-done.is-success[b-w14sag5nvu] {
    border-color: rgba(34, 197, 94, 0.4);
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.08), var(--bg-card));
}

.diff-push-done.is-partial[b-w14sag5nvu] {
    border-color: rgba(245, 158, 11, 0.45);
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.08), var(--bg-card));
}

.diff-push-done.is-failure[b-w14sag5nvu] {
    border-color: rgba(239, 68, 68, 0.4);
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.08), var(--bg-card));
}

.diff-push-done-icon[b-w14sag5nvu] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
}

.diff-push-done.is-success .diff-push-done-icon[b-w14sag5nvu] {
    background: rgba(34, 197, 94, 0.18);
    color: #22c55e;
}

.diff-push-done.is-partial .diff-push-done-icon[b-w14sag5nvu] {
    background: rgba(245, 158, 11, 0.18);
    color: #f59e0b;
}

.diff-push-done.is-failure .diff-push-done-icon[b-w14sag5nvu] {
    background: rgba(239, 68, 68, 0.18);
    color: #ef4444;
}

.diff-push-done-title[b-w14sag5nvu] {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.diff-push-done-sub[b-w14sag5nvu] {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.diff-push-done-sub strong[b-w14sag5nvu] {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.diff-push-done-stats[b-w14sag5nvu] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    width: 100%;
    margin-top: 6px;
}

/* ─── Error box ─────────────────────────────────────────────── */
.diff-push-error[b-w14sag5nvu] {
    width: 100%;
    padding: 10px 12px;
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: var(--radius-sm);
    font-size: 13px;
    text-align: left;
}

/* Eski class'lar — kullanılmayanlar referans kalmasın diye temizledim;
   .diff-push-breakdown ve .diff-push-warning kaldırıldı (artık aktif değil). */
/* /Components/Pages/Channels/MarketplaceBatches.razor.rz.scp.css */
/* Batch Store Column */
.batch-store[b-f9wmymuqij] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.marketplace-icon[b-f9wmymuqij] {
    font-size: 1.25rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.batch-store-info[b-f9wmymuqij] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.batch-store-name[b-f9wmymuqij] {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.batch-platform-name[b-f9wmymuqij] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

/* Batch ID */
.batch-id[b-f9wmymuqij] {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    background: var(--bg-secondary);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    color: var(--text-secondary);
}

/* Batch Type Badge */
.batch-type-badge[b-f9wmymuqij] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.batch-type-badge.type-create[b-f9wmymuqij] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.batch-type-badge.type-update[b-f9wmymuqij] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.batch-type-badge.type-stock[b-f9wmymuqij] {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.batch-type-badge.type-price[b-f9wmymuqij] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.batch-type-badge.type-default[b-f9wmymuqij] {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

/* Progress Bar */
.batch-progress[b-f9wmymuqij] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 120px;
}

.batch-progress-bar[b-f9wmymuqij] {
    display: flex;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
}

.batch-progress-success[b-f9wmymuqij] {
    background: #10b981;
    transition: width 0.3s ease;
}

.batch-progress-fail[b-f9wmymuqij] {
    background: #ef4444;
    transition: width 0.3s ease;
}

.batch-progress-counts[b-f9wmymuqij] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.count-success[b-f9wmymuqij] {
    color: #10b981;
}

.count-fail[b-f9wmymuqij] {
    color: #ef4444;
}

.count-total[b-f9wmymuqij] {
    color: var(--text-secondary);
}

.count-divider[b-f9wmymuqij] {
    color: var(--text-tertiary);
}

/* Creator */
.batch-creator[b-f9wmymuqij] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.creator-avatar[b-f9wmymuqij] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
}

.creator-name[b-f9wmymuqij] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* Date */
.batch-date[b-f9wmymuqij] {
    display: flex;
    flex-direction: column;
}

.date-relative[b-f9wmymuqij] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* Action Button */
[b-f9wmymuqij] .action-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

[b-f9wmymuqij] .action-btn:hover:not(:disabled) {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

[b-f9wmymuqij] .action-btn:disabled,
[b-f9wmymuqij] .action-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

[b-f9wmymuqij] .action-btn svg {
    width: 16px;
    height: 16px;
}

[b-f9wmymuqij] .spinner-sm {
    width: 14px;
    height: 14px;
    border: 2px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin-b-f9wmymuqij 0.8s linear infinite;
}

@keyframes spin-b-f9wmymuqij {
    to {
        transform: rotate(360deg);
    }
}

/* Table Actions Column */
[b-f9wmymuqij] .th-actions {
    width: 60px;
    text-align: center;
}

[b-f9wmymuqij] .table-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* Status Badge */
.status-badge[b-f9wmymuqij] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-badge .dot[b-f9wmymuqij] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

/* Detail Modal Styles */
.batch-detail[b-f9wmymuqij] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.batch-detail-summary[b-f9wmymuqij] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.summary-row[b-f9wmymuqij] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.summary-item[b-f9wmymuqij] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.summary-label[b-f9wmymuqij] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.summary-value[b-f9wmymuqij] {
    font-size: 0.875rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.marketplace-icon-sm[b-f9wmymuqij] {
    font-size: 1rem;
}

.batch-id-full[b-f9wmymuqij] {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    background: var(--bg-tertiary);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    color: var(--text-secondary);
    word-break: break-all;
}

/* Stats Cards */
.batch-stats[b-f9wmymuqij] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.stat-card[b-f9wmymuqij] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
}

.stat-value[b-f9wmymuqij] {
    font-size: 1.5rem;
    font-weight: 600;
}

.stat-label[b-f9wmymuqij] {
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.stat-total[b-f9wmymuqij] {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

.stat-success[b-f9wmymuqij] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.stat-fail[b-f9wmymuqij] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.stat-pending[b-f9wmymuqij] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

/* Batch Items Section */
.batch-items-section[b-f9wmymuqij] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.section-title[b-f9wmymuqij] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.batch-items-filter[b-f9wmymuqij] {
    display: flex;
    gap: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.filter-tab[b-f9wmymuqij] {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    border: none;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.filter-tab:hover[b-f9wmymuqij] {
    background: var(--bg-secondary);
}

.filter-tab.active[b-f9wmymuqij] {
    background: var(--primary-color);
    color: white;
}

.batch-items-list[b-f9wmymuqij] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
}

.batch-item[b-f9wmymuqij] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.batch-item.item-success[b-f9wmymuqij] {
    background: rgba(16, 185, 129, 0.05);
    border-color: rgba(16, 185, 129, 0.2);
}

.batch-item.item-failed[b-f9wmymuqij] {
    background: rgba(239, 68, 68, 0.05);
    border-color: rgba(239, 68, 68, 0.2);
}

.batch-item.item-pending[b-f9wmymuqij] {
    background: rgba(245, 158, 11, 0.05);
    border-color: rgba(245, 158, 11, 0.2);
}

.item-status[b-f9wmymuqij] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.item-status svg[b-f9wmymuqij] {
    width: 20px;
    height: 20px;
}

.icon-success[b-f9wmymuqij] {
    color: #10b981;
}

.icon-failed[b-f9wmymuqij] {
    color: #ef4444;
}

.icon-pending[b-f9wmymuqij] {
    color: #f59e0b;
}

.item-content[b-f9wmymuqij] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.item-main[b-f9wmymuqij] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.item-title[b-f9wmymuqij] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.3;
}

.item-identifiers[b-f9wmymuqij] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.item-barcode[b-f9wmymuqij] {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
}

.item-product-id[b-f9wmymuqij] {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.item-error[b-f9wmymuqij] {
    font-size: 0.75rem;
    color: #ef4444;
    line-height: 1.4;
    background: rgba(239, 68, 68, 0.08);
    padding: 0.375rem 0.5rem;
    border-radius: 4px;
    border-left: 2px solid #ef4444;
}

/* Responsive */
@media (max-width: 640px) {
    .batch-stats[b-f9wmymuqij] {
        grid-template-columns: repeat(2, 1fr);
    }

    .summary-row[b-f9wmymuqij] {
        flex-direction: column;
        gap: 0.75rem;
    }
}
/* /Components/Pages/Channels/MarketplaceStoreTab.razor.rz.scp.css */
/* ─── Tab content layout ─────────────────────────────────────────── */
.marketplace-tab-content[b-4tjdhn3vz6] {
    padding: 20px 4px 8px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.marketplace-tab-empty[b-4tjdhn3vz6] {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-secondary);
}

/* Aksiyon barı (Test / Kaydet / Sil) */
.tab-action-bar[b-4tjdhn3vz6] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

/* ─── Stat kartları ──────────────────────────────────────────────── */
.tab-stats-grid[b-4tjdhn3vz6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.tab-stat-card[b-4tjdhn3vz6] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

    .tab-stat-card.is-ok[b-4tjdhn3vz6] {
        border-left: 3px solid #10b981;
    }

    .tab-stat-card.is-error[b-4tjdhn3vz6] {
        border-left: 3px solid #ef4444;
    }

    .tab-stat-card.is-warn[b-4tjdhn3vz6] {
        border-left: 3px solid #f59e0b;
    }

.tab-stat-icon[b-4tjdhn3vz6] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--bg-input));
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tab-stat-card.is-ok .tab-stat-icon[b-4tjdhn3vz6] {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.tab-stat-card.is-error .tab-stat-icon[b-4tjdhn3vz6] {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.tab-stat-card.is-warn .tab-stat-icon[b-4tjdhn3vz6] {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}

.tab-stat-body[b-4tjdhn3vz6] {
    min-width: 0;
}

.tab-stat-label[b-4tjdhn3vz6] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tab-stat-value[b-4tjdhn3vz6] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 2px;
}

.tab-stat-mini[b-4tjdhn3vz6] {
    font-size: 12px;
    font-weight: 500;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

    .tab-stat-mini span[b-4tjdhn3vz6] {
        color: var(--text-secondary);
        opacity: 0.55;
    }

    .tab-stat-mini span.is-on[b-4tjdhn3vz6] {
        color: #10b981;
        opacity: 1;
    }

/* ─── Section card ────────────────────────────────────────────────── */
.tab-section[b-4tjdhn3vz6] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 18px 20px;
}

.tab-section-header[b-4tjdhn3vz6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.tab-section-title[b-4tjdhn3vz6] {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tab-section-subtitle[b-4tjdhn3vz6] {
    margin: 0 0 14px 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.tab-section-empty[b-4tjdhn3vz6] {
    padding: 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
}

/* ─── Form grid ──────────────────────────────────────────────────── */
.tab-form-grid[b-4tjdhn3vz6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

    .tab-form-grid .form-group[b-4tjdhn3vz6] {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .tab-form-grid label[b-4tjdhn3vz6] {
        font-size: 12px;
        font-weight: 600;
        color: var(--text-secondary);
    }

    .tab-form-grid .required[b-4tjdhn3vz6] {
        color: #ef4444;
        margin-left: 2px;
    }

    .tab-form-grid .form-input[b-4tjdhn3vz6] {
        padding: 8px 10px;
        border: 1px solid var(--border);
        border-radius: 6px;
        font-size: 14px;
        background: var(--bg-card);
        color: var(--text-primary);
    }

    .tab-form-grid .form-input:focus[b-4tjdhn3vz6] {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

    .tab-form-grid .form-help[b-4tjdhn3vz6] {
        font-size: 11px;
        color: var(--text-secondary);
    }

    .tab-form-grid .credential-status[b-4tjdhn3vz6] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: #10b981;
    }

    .tab-form-grid .input-with-toggle[b-4tjdhn3vz6] {
        position: relative;
    }

        .tab-form-grid .input-with-toggle .form-input[b-4tjdhn3vz6] {
            padding-right: 36px;
            width: 100%;
        }

    .tab-form-grid .toggle-visibility-btn[b-4tjdhn3vz6] {
        position: absolute;
        right: 6px;
        top: 50%;
        transform: translateY(-50%);
        background: transparent;
        border: none;
        cursor: pointer;
        color: var(--text-secondary);
        padding: 4px;
        display: flex;
    }

        .tab-form-grid .toggle-visibility-btn:hover[b-4tjdhn3vz6] {
            color: var(--primary);
        }

/* ─── Toggle list ────────────────────────────────────────────────── */
.tab-toggles[b-4tjdhn3vz6] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    /* SwitchField kendi form-group margin'ini taşıyor; tab-toggles içinde nötrle */
    .tab-toggles[b-4tjdhn3vz6]  .form-group {
        margin-bottom: 0;
    }

/* ─── Sync log table ─────────────────────────────────────────────── */
.tab-log-table[b-4tjdhn3vz6] {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
}

    .tab-log-table table[b-4tjdhn3vz6] {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
    }

    .tab-log-table th[b-4tjdhn3vz6] {
        text-align: left;
        font-weight: 600;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-secondary);
        padding: 10px 12px;
        background: var(--bg-input));
        border-bottom: 1px solid var(--border);
    }

    .tab-log-table td[b-4tjdhn3vz6] {
        padding: 10px 12px;
        border-bottom: 1px solid var(--border);
        color: var(--text-primary);
    }

    .tab-log-table tr:last-child td[b-4tjdhn3vz6] {
        border-bottom: none;
    }

    .tab-log-table .text-center[b-4tjdhn3vz6] { text-align: center; }
    .tab-log-table .text-right[b-4tjdhn3vz6]  { text-align: right; }

.log-status-pill[b-4tjdhn3vz6] {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

    .log-status-pill.ok[b-4tjdhn3vz6] {
        background: rgba(16, 185, 129, 0.12);
        color: #059669;
    }

    .log-status-pill.fail[b-4tjdhn3vz6] {
        background: rgba(239, 68, 68, 0.12);
        color: #dc2626;
    }

.tab-log-footer[b-4tjdhn3vz6] {
    margin-top: 10px;
    text-align: right;
    font-size: 13px;
}

    .tab-log-footer a[b-4tjdhn3vz6] {
        color: var(--primary);
        text-decoration: none;
    }

        .tab-log-footer a:hover[b-4tjdhn3vz6] {
            text-decoration: underline;
        }

/* ─── Manuel sync aksiyon kartları ───────────────────────────────── */
.sync-action-grid[b-4tjdhn3vz6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.sync-action-card[b-4tjdhn3vz6] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: border-color 120ms ease, box-shadow 120ms ease, transform 80ms ease;
}

    .sync-action-card:hover:not(:disabled)[b-4tjdhn3vz6] {
        border-color: var(--primary);
        box-shadow: 0 2px 10px rgba(37, 99, 235, 0.12);
    }

    .sync-action-card:active:not(:disabled)[b-4tjdhn3vz6] {
        transform: translateY(1px);
    }

    .sync-action-card:disabled[b-4tjdhn3vz6] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.sync-action-card-special[b-4tjdhn3vz6] {
    border-left: 3px solid #f27a1a;
}

.sync-action-card-danger[b-4tjdhn3vz6] {
    border-left: 3px solid #ef4444;
}

    .sync-action-card-danger .sync-action-icon[b-4tjdhn3vz6] {
        background: rgba(239, 68, 68, 0.12);
        color: #ef4444;
    }

.sync-action-icon[b-4tjdhn3vz6] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--bg-input));
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sync-action-card-special .sync-action-icon[b-4tjdhn3vz6] {
    background: rgba(242, 122, 26, 0.12);
    color: #f27a1a;
}

.sync-action-body[b-4tjdhn3vz6] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

    .sync-action-body strong[b-4tjdhn3vz6] {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
    }

    .sync-action-body small[b-4tjdhn3vz6] {
        font-size: 12px;
        color: var(--text-secondary);
        line-height: 1.35;
    }

.sync-action-spinner[b-4tjdhn3vz6] {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 14px;
    height: 14px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: sync-action-spin-b-4tjdhn3vz6 0.7s linear infinite;
}

@keyframes sync-action-spin-b-4tjdhn3vz6 {
    to { transform: rotate(360deg); }
}

/* /Components/Pages/Channels/MarketplaceSyncLogs.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════ */
/* MARKETPLACE SYNC LOGS PAGE                                          */
/* ═══════════════════════════════════════════════════════════════════ */

.filter-bar[b-0vi2e317qg] {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.filter-bar .form-input[b-0vi2e317qg] {
    max-width: 220px;
}

/* Table cells */
.text-muted[b-0vi2e317qg] {
    color: var(--text-secondary);
    font-size: 12px;
    margin-left: 6px;
}

.text-center[b-0vi2e317qg] {
    text-align: center;
}

.batch-id[b-0vi2e317qg] {
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    background: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--text-primary);
}

/* SyncType badge — base + tip-bazlı renk override'ları */
.badge-syntype[b-0vi2e317qg] {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(99, 102, 241, 0.1);
    color: rgb(99, 102, 241);
}

/* ProductCreate — yeşil (yeni ürün) */
.badge-syntype--create[b-0vi2e317qg] {
    background: rgba(16, 185, 129, 0.12);
    color: rgb(16, 185, 129);
}

/* ProductUpdateContent — mavi (içerik güncelleme) */
.badge-syntype--update[b-0vi2e317qg] {
    background: rgba(59, 130, 246, 0.12);
    color: rgb(59, 130, 246);
}

/* ProductUpdateUnapproved — turuncu (onaysız update) */
.badge-syntype--unapproved[b-0vi2e317qg] {
    background: rgba(249, 115, 22, 0.12);
    color: rgb(249, 115, 22);
}

/* PriceUpdate — mor (fiyat) */
.badge-syntype--price[b-0vi2e317qg] {
    background: rgba(168, 85, 247, 0.12);
    color: rgb(168, 85, 247);
}

/* StockUpdate — turkuaz (stok) */
.badge-syntype--stock[b-0vi2e317qg] {
    background: rgba(20, 184, 166, 0.12);
    color: rgb(20, 184, 166);
}

/* PriceAndStockUpdate — fuşya (fiyat + stok) */
.badge-syntype--price-stock[b-0vi2e317qg] {
    background: rgba(236, 72, 153, 0.12);
    color: rgb(236, 72, 153);
}

/* Counts pills (table) */
.counts-row[b-0vi2e317qg] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.count-pill[b-0vi2e317qg] {
    min-width: 28px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.count-pill.ok[b-0vi2e317qg]      { background: rgba(16, 185, 129, 0.12); color: var(--success, #10b981); }
.count-pill.warning[b-0vi2e317qg] { background: rgba(245, 158, 11, 0.12); color: var(--warning, #f59e0b); }
.count-pill.danger[b-0vi2e317qg]  { background: rgba(239, 68, 68, 0.12);  color: var(--danger,  #ef4444); }
.count-pill.muted[b-0vi2e317qg]   { background: transparent; color: var(--text-secondary); }

/* Status badge */
.status-badge[b-0vi2e317qg] {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.status-badge.ok[b-0vi2e317qg]     { background: rgba(16, 185, 129, 0.12); color: var(--success, #10b981); }
.status-badge.danger[b-0vi2e317qg] { background: rgba(239, 68, 68, 0.12);  color: var(--danger,  #ef4444); }

/* ═══════════════════════════════════════════════════════════════════ */
/* DETAIL MODAL                                                        */
/* ═══════════════════════════════════════════════════════════════════ */

.detail-modal[b-0vi2e317qg] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.detail-summary[b-0vi2e317qg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    border-left-width: 4px;
}

.detail-summary.ok[b-0vi2e317qg]     { border-left-color: var(--success, #10b981); background: rgba(16, 185, 129, 0.04); }
.detail-summary.danger[b-0vi2e317qg] { border-left-color: var(--danger,  #ef4444); background: rgba(239, 68, 68, 0.04); }

.detail-summary-left[b-0vi2e317qg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-summary-left strong[b-0vi2e317qg] {
    font-size: 16px;
    font-weight: 600;
}

.detail-summary-right[b-0vi2e317qg] {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    gap: 4px 12px;
    align-items: baseline;
}

.big-stat[b-0vi2e317qg] {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}

.big-stat.ok[b-0vi2e317qg]      { color: var(--success, #10b981); }
.big-stat.warning[b-0vi2e317qg] { color: var(--warning, #f59e0b); }
.big-stat.danger[b-0vi2e317qg]  { color: var(--danger,  #ef4444); }

.detail-batch[b-0vi2e317qg] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.detail-error[b-0vi2e317qg] {
    padding: 10px 14px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 6px;
    color: var(--danger, #ef4444);
    font-size: 13px;
}

/* Tabs */
.detail-tabs[b-0vi2e317qg] {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    gap: 4px;
}

.tab-btn[b-0vi2e317qg] {
    background: none;
    border: none;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    transition: all 0.15s ease;
}

.tab-btn:hover[b-0vi2e317qg] {
    color: var(--text-primary);
}

.tab-btn.active[b-0vi2e317qg] {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.tab-count[b-0vi2e317qg] {
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--bg-secondary);
    font-size: 11px;
    font-weight: 600;
}

.tab-btn.active .tab-count[b-0vi2e317qg] {
    background: var(--primary);
    color: white;
}

.detail-tab-content[b-0vi2e317qg] {
    max-height: 50vh;
    overflow-y: auto;
}

/* Item rows */
.item-list[b-0vi2e317qg] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.item-row[b-0vi2e317qg] {
    border: 1px solid var(--border-color);
    border-left-width: 4px;
    border-radius: 6px;
    padding: 10px 12px;
    background: var(--bg-primary);
}

.item-row.ok[b-0vi2e317qg]      { border-left-color: var(--success, #10b981); }
.item-row.warning[b-0vi2e317qg] { border-left-color: var(--warning, #f59e0b); }
.item-row.danger[b-0vi2e317qg]  { border-left-color: var(--danger,  #ef4444); }

.item-head[b-0vi2e317qg] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.item-head strong[b-0vi2e317qg] {
    font-weight: 600;
}

.item-issue[b-0vi2e317qg] {
    margin-top: 8px;
    padding: 6px 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.item-issue.warning[b-0vi2e317qg] { background: rgba(245, 158, 11, 0.08); color: var(--text-primary); }
.item-issue.danger[b-0vi2e317qg]  { background: rgba(239, 68, 68, 0.08);  color: var(--text-primary); }
.item-issue.ok[b-0vi2e317qg]      { background: rgba(16, 185, 129, 0.08); color: var(--text-primary); }

.badge-reason[b-0vi2e317qg] {
    background: rgba(0, 0, 0, 0.06);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.empty-state[b-0vi2e317qg] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--text-secondary);
}

/* Row mini-action button (Yenile) */
.row-action-btn[b-0vi2e317qg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    height: 30px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.row-action-btn.refresh-btn[b-0vi2e317qg] {
    border-color: var(--primary);
    color: var(--primary);
}

.row-action-btn:hover[b-0vi2e317qg] {
    background: var(--primary-alpha, rgba(59, 130, 246, 0.1));
    color: var(--primary);
    border-color: var(--primary);
}

.row-action-btn:disabled[b-0vi2e317qg] {
    cursor: not-allowed;
    opacity: 0.6;
}

.refresh-btn__text[b-0vi2e317qg] {
    line-height: 1;
}

.spinner-mini[b-0vi2e317qg] {
    width: 14px;
    height: 14px;
    border: 2px solid var(--border-color);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-0vi2e317qg 0.8s linear infinite;
}

@keyframes spin-b-0vi2e317qg {
    to { transform: rotate(360deg); }
}

/* Detail batch row — Yenile butonu için flex */
.detail-batch[b-0vi2e317qg] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* BULK ACTIONS BAR                                                    */
/* ═══════════════════════════════════════════════════════════════════ */

.bulk-actions-bar[b-0vi2e317qg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: var(--primary-alpha, rgba(59, 130, 246, 0.08));
    border: 1px solid var(--primary, #3b82f6);
    border-radius: 8px;
}

.bulk-actions-bar__info[b-0vi2e317qg] {
    color: var(--text-primary);
    font-size: 13px;
}

.bulk-actions-bar__info strong[b-0vi2e317qg] {
    color: var(--primary);
    font-size: 16px;
    margin-right: 4px;
}

.bulk-actions-bar__actions[b-0vi2e317qg] {
    display: flex;
    gap: 8px;
}

.bulk-actions-bar .btn[b-0vi2e317qg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}

.bulk-actions-bar .btn-danger[b-0vi2e317qg] {
    background: rgb(239, 68, 68);
    color: white;
}

.bulk-actions-bar .btn-danger:hover[b-0vi2e317qg] {
    background: rgb(220, 38, 38);
}

.bulk-actions-bar .btn-secondary[b-0vi2e317qg] {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.bulk-actions-bar .btn-secondary:hover[b-0vi2e317qg] {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════════ */
/* SYNC DETAIL MODAL — yeniden tasarım                                  */
/* ═══════════════════════════════════════════════════════════════════ */

.sync-detail[b-0vi2e317qg] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.detail-loading[b-0vi2e317qg] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px;
    color: var(--text-secondary);
}

/* ─── Header ─── */
.sync-detail__header[b-0vi2e317qg] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.sync-detail__title h2[b-0vi2e317qg] {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.sync-detail__meta[b-0vi2e317qg] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sync-detail__date[b-0vi2e317qg] {
    font-size: 12px;
}

.sync-detail__batch[b-0vi2e317qg] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.sync-detail__batch-label[b-0vi2e317qg] {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ─── Stats Grid (4 cards) ─── */
.sync-detail__stats[b-0vi2e317qg] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.stat-card[b-0vi2e317qg] {
    position: relative;
    padding: 14px 16px;
    background: var(--bg-card, var(--bg-secondary));
    border: 1px solid var(--border-color);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.stat-card:hover[b-0vi2e317qg] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.stat-card__icon[b-0vi2e317qg] {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    opacity: 0.8;
}

.stat-card__icon svg[b-0vi2e317qg] {
    width: 14px;
    height: 14px;
}

.stat-card__label[b-0vi2e317qg] {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
    margin-bottom: 6px;
}

.stat-card__value[b-0vi2e317qg] {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.stat-card--total[b-0vi2e317qg]       { border-left: 3px solid var(--primary, #3b82f6); }
.stat-card--total .stat-card__value[b-0vi2e317qg] { color: var(--primary, #3b82f6); }

.stat-card--success[b-0vi2e317qg]     { border-left: 3px solid #10b981; }
.stat-card--success .stat-card__icon[b-0vi2e317qg] { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.stat-card--success .stat-card__value[b-0vi2e317qg] { color: #10b981; }

.stat-card--warning[b-0vi2e317qg]     { border-left: 3px solid #f59e0b; }
.stat-card--warning .stat-card__icon[b-0vi2e317qg] { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.stat-card--warning .stat-card__value[b-0vi2e317qg] { color: #f59e0b; }

.stat-card--danger[b-0vi2e317qg]      { border-left: 3px solid #ef4444; }
.stat-card--danger .stat-card__icon[b-0vi2e317qg] { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.stat-card--danger .stat-card__value[b-0vi2e317qg] { color: #ef4444; }

/* ─── Error banner ─── */
.sync-detail__error[b-0vi2e317qg] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    color: rgb(220, 38, 38);
    font-size: 13px;
    line-height: 1.5;
}

.sync-detail__error svg[b-0vi2e317qg] {
    flex-shrink: 0;
    margin-top: 1px;
}

/* ─── Tabs ─── */
.sync-detail__tabs[b-0vi2e317qg] {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.sync-tab[b-0vi2e317qg] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.sync-tab:hover[b-0vi2e317qg] {
    color: var(--text-primary);
    background: var(--bg-primary);
}

.sync-tab__count[b-0vi2e317qg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 6px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
}

/* Active states — type-spesifik renk vurgu */
.sync-tab.is-active.sync-tab--success[b-0vi2e317qg] {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}
.sync-tab.is-active.sync-tab--success .sync-tab__count[b-0vi2e317qg] {
    background: #10b981;
    color: white;
    border-color: #10b981;
}

.sync-tab.is-active.sync-tab--warning[b-0vi2e317qg] {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}
.sync-tab.is-active.sync-tab--warning .sync-tab__count[b-0vi2e317qg] {
    background: #f59e0b;
    color: white;
    border-color: #f59e0b;
}

.sync-tab.is-active.sync-tab--danger[b-0vi2e317qg] {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}
.sync-tab.is-active.sync-tab--danger .sync-tab__count[b-0vi2e317qg] {
    background: #ef4444;
    color: white;
    border-color: #ef4444;
}

/* ─── Item table styling ─── */
.sync-detail__table[b-0vi2e317qg] {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
}

.item-product__name[b-0vi2e317qg] {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 13px;
}

.item-code[b-0vi2e317qg] {
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    background: var(--bg-secondary);
    padding: 2px 8px;
    border-radius: 4px;
    color: var(--text-primary);
    display: inline-block;
}

.item-detail[b-0vi2e317qg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    line-height: 1.4;
}

.item-detail__chip[b-0vi2e317qg] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    width: fit-content;
}

.item-detail--warning .item-detail__chip[b-0vi2e317qg] {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}

.item-detail__msg[b-0vi2e317qg] {
    color: var(--text-secondary);
    word-break: break-word;
}

.item-detail--danger .item-detail__msg[b-0vi2e317qg] {
    color: rgb(220, 38, 38);
}

.item-detail--ok[b-0vi2e317qg] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* BULK DELETE CONFIRM MODAL                                           */
/* ═══════════════════════════════════════════════════════════════════ */

.bulk-delete-confirm[b-0vi2e317qg] {
    text-align: center;
    padding: 16px 8px;
}

.bulk-delete-confirm__icon[b-0vi2e317qg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border-radius: 50%;
    margin-bottom: 16px;
}

.bulk-delete-confirm p[b-0vi2e317qg] {
    margin: 0 0 8px;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.5;
}

.bulk-delete-confirm p.text-muted[b-0vi2e317qg] {
    font-size: 12px;
    color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════ */
/* RESPONSIVE                                                           */
/* ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .sync-detail__stats[b-0vi2e317qg] {
        grid-template-columns: repeat(2, 1fr);
    }
    .sync-detail__header[b-0vi2e317qg] {
        flex-direction: column;
    }
    .sync-detail__batch[b-0vi2e317qg] {
        align-items: flex-start;
    }
}
/* /Components/Pages/Channels/PriceRules.razor.rz.scp.css */
/* Fiyat kuralları sayfası — kanonik tema değişkenleri (dark/light uyumlu). */

.pricerule-editor[b-z0wyeidhlq] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pricerule-grid[b-z0wyeidhlq] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}

@media (max-width: 640px) {
    .pricerule-grid[b-z0wyeidhlq] {
        grid-template-columns: 1fr;
    }
}

.form-hint[b-z0wyeidhlq] {
    color: var(--text-muted);
    font-size: 11px;
}

/* ─── Gün seçici ─────────────────────────────────────────────── */
.day-toggles[b-z0wyeidhlq] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.day-toggle[b-z0wyeidhlq] {
    min-width: 48px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-secondary);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition, all 120ms ease);
}

    .day-toggle:hover[b-z0wyeidhlq] {
        border-color: var(--primary);
        color: var(--text-primary);
    }

    .day-toggle.active[b-z0wyeidhlq] {
        background: var(--primary);
        border-color: var(--primary);
        color: #fff;
    }

/* ─── İşlem zinciri düzenleyici ───────────────────────────────── */
.op-empty[b-z0wyeidhlq] {
    padding: 20px;
    text-align: center;
    color: var(--text-secondary);
    background: var(--bg-input);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    font-size: 13px;
}

.op-list[b-z0wyeidhlq] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.op-row[b-z0wyeidhlq] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.op-index[b-z0wyeidhlq] {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #fff;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.op-field[b-z0wyeidhlq] {
    min-width: 0;
}

.op-type[b-z0wyeidhlq] {
    flex: 1 1 200px;
}

.op-value[b-z0wyeidhlq] {
    flex: 0 0 180px;
}

.op-value-input[b-z0wyeidhlq] {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .op-value-input .form-input[b-z0wyeidhlq] {
        flex: 1 1 auto;
        min-width: 0;
    }

.op-unit[b-z0wyeidhlq] {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.op-actions[b-z0wyeidhlq] {
    flex-shrink: 0;
    display: flex;
    gap: 2px;
}

.op-preview[b-z0wyeidhlq] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 10px 14px;
    background: linear-gradient(135deg, var(--primary-alpha, rgba(37, 99, 235, 0.12)) 0%, transparent 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.op-preview-label[b-z0wyeidhlq] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.op-preview-calc[b-z0wyeidhlq] {
    font-size: 14px;
    color: var(--text-secondary);
}

    .op-preview-calc strong[b-z0wyeidhlq] {
        color: var(--text-primary);
    }

.op-add-btn[b-z0wyeidhlq] {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px dashed var(--border);
    background: transparent;
    color: var(--primary);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition, all 120ms ease);
}

    .op-add-btn:hover[b-z0wyeidhlq] {
        border-color: var(--primary);
        background: var(--bg-input);
    }

.op-count-badge[b-z0wyeidhlq] {
    display: inline-block;
    min-width: 24px;
    padding: 2px 8px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-secondary);
}

/* ─── Etkilenen ürünler önizleme modalı ──────────────────────── */
.preview-summary[b-z0wyeidhlq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, var(--primary-alpha, rgba(37, 99, 235, 0.12)) 0%, transparent 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.preview-summary-main[b-z0wyeidhlq] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.preview-count-badge[b-z0wyeidhlq] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #fff;
    flex-shrink: 0;
}

.preview-count-text[b-z0wyeidhlq] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.preview-count[b-z0wyeidhlq] {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
}

.preview-count-label[b-z0wyeidhlq] {
    font-size: 13px;
    color: var(--text-secondary);
}

.preview-empty[b-z0wyeidhlq] {
    padding: 32px 20px;
    text-align: center;
    color: var(--text-secondary);
    background: var(--bg-input);
    border-radius: var(--radius);
}

/* Liste satırı */
.preview-th-img[b-z0wyeidhlq] {
    width: 64px;
}

.preview-thumb[b-z0wyeidhlq] {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg-input);
}

    .preview-thumb img[b-z0wyeidhlq] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.preview-thumb-empty[b-z0wyeidhlq] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.preview-product[b-z0wyeidhlq] {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.preview-product-name[b-z0wyeidhlq] {
    font-weight: 600;
    color: var(--text-primary);
}

.preview-product-sku[b-z0wyeidhlq] {
    font-size: 12px;
    color: var(--text-muted);
}

.preview-badge[b-z0wyeidhlq] {
    display: inline-block;
    min-width: 24px;
    padding: 2px 8px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-secondary);
}
/* /Components/Pages/Channels/PublishMissingModal.razor.rz.scp.css */
.publish-missing-body[b-8jv86f30p5] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 200px;
}

.publish-missing-intro[b-8jv86f30p5] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

.publish-missing-loading[b-8jv86f30p5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px 16px;
    color: var(--text-secondary);
    font-size: 13px;
}

.publish-missing-error[b-8jv86f30p5] {
    padding: 10px 12px;
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: var(--radius-sm);
    font-size: 13px;
}

.publish-missing-warning[b-8jv86f30p5] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: rgba(245, 158, 11, 0.12);
    color: var(--text-primary);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-left: 3px solid #f59e0b;
    border-radius: var(--radius-sm);
    font-size: 13px;
}

    .publish-missing-warning strong[b-8jv86f30p5] {
        color: #f59e0b;
    }

    .publish-missing-warning span[b-8jv86f30p5] {
        color: var(--text-secondary);
        line-height: 1.45;
    }

.publish-missing-empty[b-8jv86f30p5] {
    padding: 18px;
    text-align: center;
    color: var(--text-muted);
    background: var(--bg-input);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
}

.publish-missing-stats[b-8jv86f30p5] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.publish-missing-stat[b-8jv86f30p5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-align: center;
}

    .publish-missing-stat.is-cache[b-8jv86f30p5] {
        border-color: var(--border);
    }

    .publish-missing-stat.is-missing[b-8jv86f30p5] {
        border-color: var(--primary);
        background: var(--primary-alpha);
    }

.publish-missing-stat-num[b-8jv86f30p5] {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.publish-missing-stat.is-missing .publish-missing-stat-num[b-8jv86f30p5] {
    color: var(--primary);
}

.publish-missing-stat-lbl[b-8jv86f30p5] {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
/* /Components/Pages/Channels/Restrictions.razor.rz.scp.css */
/* Yasaklama kuralları sayfası — kanonik tema değişkenleri (dark/light uyumlu). */

.restriction-editor[b-9n2ul8vbly] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.restriction-grid[b-9n2ul8vbly] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}

@media (max-width: 640px) {
    .restriction-grid[b-9n2ul8vbly] {
        grid-template-columns: 1fr;
    }
}

.form-hint[b-9n2ul8vbly] {
    color: var(--text-muted);
    font-size: 11px;
}

/* ─── Gün seçici ─────────────────────────────────────────────── */
.day-toggles[b-9n2ul8vbly] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.day-toggle[b-9n2ul8vbly] {
    min-width: 48px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-secondary);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition, all 120ms ease);
}

    .day-toggle:hover[b-9n2ul8vbly] {
        border-color: var(--primary);
        color: var(--text-primary);
    }

    .day-toggle.active[b-9n2ul8vbly] {
        background: var(--primary);
        border-color: var(--primary);
        color: #fff;
    }

/* ─── Etkilenen ürünler önizleme modalı ──────────────────────── */
.preview-summary[b-9n2ul8vbly] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, var(--primary-alpha, rgba(37, 99, 235, 0.12)) 0%, transparent 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.preview-summary-main[b-9n2ul8vbly] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.preview-count-badge[b-9n2ul8vbly] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #fff;
    flex-shrink: 0;
}

.preview-count-text[b-9n2ul8vbly] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.preview-count[b-9n2ul8vbly] {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
}

.preview-count-label[b-9n2ul8vbly] {
    font-size: 13px;
    color: var(--text-secondary);
}

.preview-empty[b-9n2ul8vbly] {
    padding: 32px 20px;
    text-align: center;
    color: var(--text-secondary);
    background: var(--bg-input);
    border-radius: var(--radius);
}

/* Liste satırı */
.preview-th-img[b-9n2ul8vbly] {
    width: 64px;
}

.preview-thumb[b-9n2ul8vbly] {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg-input);
}

    .preview-thumb img[b-9n2ul8vbly] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.preview-thumb-empty[b-9n2ul8vbly] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.preview-product[b-9n2ul8vbly] {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.preview-product-name[b-9n2ul8vbly] {
    font-weight: 600;
    color: var(--text-primary);
}

.preview-product-sku[b-9n2ul8vbly] {
    font-size: 12px;
    color: var(--text-muted);
}

.preview-badge[b-9n2ul8vbly] {
    display: inline-block;
    min-width: 24px;
    padding: 2px 8px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-secondary);
}

/* /Components/Pages/Channels/ShopifyPushModal.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────────
   ShopifyPushModal — afilli akış: Hazırlık → Pre-flight → Push → Sonuç.
   Kanonik tema değişkenleri: --bg-card / --border / --primary /
   --text-* / --bg-input / --radius / --primary-alpha.
   ───────────────────────────────────────────────────────────── */

.shopify-push-shell[b-mehtyclumt] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 420px;
}

/* ─── Hero ──────────────────────────────────────────────────── */
.shopify-push-hero[b-mehtyclumt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.shopify-push-hero-left[b-mehtyclumt] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.shopify-push-hero-title[b-mehtyclumt] {
    font-size: 14px;
    color: var(--text-primary);
}

    .shopify-push-hero-title strong[b-mehtyclumt] {
        font-weight: 600;
    }

    .shopify-push-hero-title small[b-mehtyclumt] {
        color: var(--text-secondary);
        font-size: 12px;
    }

.shopify-push-mode-chip[b-mehtyclumt] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--primary);
    background: var(--primary-alpha);
    color: var(--primary);
}

.shopify-push-mode-icon[b-mehtyclumt] {
    font-size: 14px;
    line-height: 1;
}

/* Status badge */
.shopify-push-status-badge[b-mehtyclumt] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    white-space: nowrap;
}

    .shopify-push-status-badge.is-neutral[b-mehtyclumt] { color: var(--text-secondary); }

    .shopify-push-status-badge.is-pending[b-mehtyclumt] {
        background: rgba(245, 158, 11, 0.12);
        border-color: rgba(245, 158, 11, 0.35);
        color: #f59e0b;
    }

    .shopify-push-status-badge.is-submitted[b-mehtyclumt] {
        background: rgba(59, 130, 246, 0.12);
        border-color: rgba(59, 130, 246, 0.35);
        color: #3b82f6;
    }

    .shopify-push-status-badge.is-success[b-mehtyclumt] {
        background: rgba(34, 197, 94, 0.12);
        border-color: rgba(34, 197, 94, 0.35);
        color: #22c55e;
    }

    .shopify-push-status-badge.is-partial[b-mehtyclumt] {
        background: rgba(245, 158, 11, 0.18);
        border-color: rgba(245, 158, 11, 0.5);
        color: #f59e0b;
    }

    .shopify-push-status-badge.is-failure[b-mehtyclumt] {
        background: rgba(239, 68, 68, 0.12);
        border-color: rgba(239, 68, 68, 0.35);
        color: #ef4444;
    }

.shopify-push-status-dot[b-mehtyclumt] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    animation: shopify-push-pulse-b-mehtyclumt 1.4s ease-in-out infinite;
}

@keyframes shopify-push-pulse-b-mehtyclumt {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(0.75); }
}

/* ─── Phase timeline ────────────────────────────────────────── */
.shopify-push-timeline[b-mehtyclumt] {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 18px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.shopify-push-phase[b-mehtyclumt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    min-width: 100px;
}

.shopify-push-phase-marker[b-mehtyclumt] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    border: 2px solid var(--border);
    color: var(--text-muted);
    font-weight: 700;
    font-size: 13px;
    transition: all 0.25s ease;
}

.shopify-push-phase.completed .shopify-push-phase-marker[b-mehtyclumt] {
    background: rgba(34, 197, 94, 0.16);
    border-color: #22c55e;
    color: #22c55e;
}

.shopify-push-phase.active .shopify-push-phase-marker[b-mehtyclumt] {
    background: var(--primary-alpha);
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-alpha);
}

.shopify-push-phase-check[b-mehtyclumt] {
    font-size: 16px;
    line-height: 1;
}

.shopify-push-phase-num[b-mehtyclumt] {
    line-height: 1;
}

.shopify-push-phase-pulse[b-mehtyclumt] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--primary);
    animation: shopify-push-pulse-b-mehtyclumt 1.2s ease-in-out infinite;
}

.shopify-push-phase-label[b-mehtyclumt] {
    font-size: 11px;
    color: var(--text-secondary);
    text-align: center;
    font-weight: 500;
    line-height: 1.3;
    max-width: 110px;
}

.shopify-push-phase.active .shopify-push-phase-label[b-mehtyclumt],
.shopify-push-phase.completed .shopify-push-phase-label[b-mehtyclumt] {
    color: var(--text-primary);
}

.shopify-push-phase-bar[b-mehtyclumt] {
    flex: 1 1 auto;
    height: 2px;
    background: var(--border);
    margin: 0 -4px;
    margin-bottom: 26px;
    transition: background 0.25s ease;
}

    .shopify-push-phase-bar.filled[b-mehtyclumt] {
        background: #22c55e;
    }

/* ─── Section ───────────────────────────────────────────────── */
.shopify-push-section[b-mehtyclumt] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.shopify-push-section-title[b-mehtyclumt] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.shopify-push-section-sub[b-mehtyclumt] {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.45;
    margin-bottom: 6px;
}

/* ─── Store list (StoreSelection) ───────────────────────────── */
.shopify-push-store-list[b-mehtyclumt] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.shopify-push-store-card[b-mehtyclumt] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    text-align: left;
    font: inherit;
    transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}

    .shopify-push-store-card:hover[b-mehtyclumt] {
        border-color: var(--primary);
        background: var(--primary-alpha);
        transform: translateY(-1px);
    }

.shopify-push-store-icon[b-mehtyclumt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    background: var(--bg-card);
    color: var(--primary);
    flex-shrink: 0;
}

.shopify-push-store-info[b-mehtyclumt] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .shopify-push-store-info strong[b-mehtyclumt] {
        font-size: 14px;
        color: var(--text-primary);
    }

    .shopify-push-store-info small[b-mehtyclumt] {
        font-size: 12px;
        color: var(--text-secondary);
    }

/* ─── Activity (Preflight/Pushing/Loading) ──────────────────── */
.shopify-push-activity[b-mehtyclumt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.shopify-push-activity-row[b-mehtyclumt] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.shopify-push-activity-row strong[b-mehtyclumt] {
    color: var(--text-primary);
    font-weight: 600;
}

.shopify-push-spinner-sm[b-mehtyclumt] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: shopify-push-spin-b-mehtyclumt 0.8s linear infinite;
}

@keyframes shopify-push-spin-b-mehtyclumt {
    to { transform: rotate(360deg); }
}

.shopify-push-hint-list[b-mehtyclumt] {
    list-style: none;
    margin: 0;
    padding: 0 0 0 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
}

    .shopify-push-hint-list li[b-mehtyclumt] {
        position: relative;
        padding-left: 16px;
    }

    .shopify-push-hint-list li[b-mehtyclumt]::before {
        content: "→";
        position: absolute;
        left: 0;
        color: var(--primary);
        opacity: 0.7;
    }

.shopify-push-foot-note[b-mehtyclumt] {
    margin: 0;
    padding: 8px 10px;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--text-secondary);
}

/* ─── Stats grid ────────────────────────────────────────────── */
.shopify-push-stats[b-mehtyclumt] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.shopify-push-stat[b-mehtyclumt] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-align: center;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

    .shopify-push-stat:hover[b-mehtyclumt] { transform: translateY(-1px); }

    .shopify-push-stat.is-push[b-mehtyclumt] {
        border-color: var(--primary);
        background: var(--primary-alpha);
    }

    .shopify-push-stat.is-skip[b-mehtyclumt] {
        border-color: rgba(245, 158, 11, 0.4);
        background: rgba(245, 158, 11, 0.08);
    }

    .shopify-push-stat.is-fail[b-mehtyclumt] {
        border-color: rgba(239, 68, 68, 0.4);
        background: rgba(239, 68, 68, 0.08);
    }

.shopify-push-stat-num[b-mehtyclumt] {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.shopify-push-stat.is-push .shopify-push-stat-num[b-mehtyclumt] { color: var(--primary); }
.shopify-push-stat.is-skip .shopify-push-stat-num[b-mehtyclumt] { color: #f59e0b; }
.shopify-push-stat.is-fail .shopify-push-stat-num[b-mehtyclumt] { color: #ef4444; }

.shopify-push-stat-lbl[b-mehtyclumt] {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ─── Banners ───────────────────────────────────────────────── */
.shopify-push-warn-banner[b-mehtyclumt] {
    padding: 10px 12px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-left: 3px solid #f59e0b;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.45;
}

.shopify-push-info-banner[b-mehtyclumt] {
    padding: 10px 12px;
    background: var(--primary-alpha);
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.45;
}

    .shopify-push-info-banner strong[b-mehtyclumt] {
        color: var(--primary);
    }

/* ─── Details (accordion) ───────────────────────────────────── */
.shopify-push-details[b-mehtyclumt] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0 14px;
}

    .shopify-push-details summary[b-mehtyclumt] {
        cursor: pointer;
        font-weight: 600;
        color: var(--text-primary);
        font-size: 13px;
        padding: 12px 0;
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .shopify-push-details summary[b-mehtyclumt]::-webkit-details-marker { display: none; }
    .shopify-push-details summary[b-mehtyclumt]::marker { display: none; }

    .shopify-push-details summary:hover[b-mehtyclumt] { color: var(--primary); }

    .shopify-push-details[open] summary[b-mehtyclumt] {
        border-bottom: 1px solid var(--border);
        margin-bottom: 8px;
    }

.shopify-push-details-count[b-mehtyclumt] {
    padding: 2px 8px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 600;
}

.shopify-push-item-list[b-mehtyclumt],
.shopify-push-log-list[b-mehtyclumt] {
    list-style: none;
    margin: 0;
    padding: 0 0 12px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 260px;
    overflow-y: auto;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.shopify-push-item-list li[b-mehtyclumt] {
    padding: 8px 10px;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.shopify-push-item-list strong[b-mehtyclumt] {
    color: var(--text-primary);
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.shopify-push-item-name[b-mehtyclumt] {
    color: var(--text-secondary);
    font-size: 12px;
}

.shopify-push-item-reason[b-mehtyclumt] {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.4;
    margin-top: 2px;
}

.shopify-push-log-list li[b-mehtyclumt] {
    padding: 4px 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
}

/* ─── Done state (success/partial/failure) ──────────────────── */
.shopify-push-done[b-mehtyclumt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 22px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: center;
}

.shopify-push-done.is-success[b-mehtyclumt] {
    border-color: rgba(34, 197, 94, 0.4);
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.08), var(--bg-card));
}

.shopify-push-done.is-partial[b-mehtyclumt] {
    border-color: rgba(245, 158, 11, 0.45);
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.08), var(--bg-card));
}

.shopify-push-done.is-failure[b-mehtyclumt] {
    border-color: rgba(239, 68, 68, 0.4);
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.08), var(--bg-card));
}

.shopify-push-done-icon[b-mehtyclumt] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.shopify-push-done.is-success .shopify-push-done-icon[b-mehtyclumt] {
    background: rgba(34, 197, 94, 0.18);
    color: #22c55e;
}

.shopify-push-done.is-partial .shopify-push-done-icon[b-mehtyclumt] {
    background: rgba(245, 158, 11, 0.18);
    color: #f59e0b;
}

.shopify-push-done.is-failure .shopify-push-done-icon[b-mehtyclumt] {
    background: rgba(239, 68, 68, 0.18);
    color: #ef4444;
}

.shopify-push-done-title[b-mehtyclumt] {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
}

.shopify-push-done-sub[b-mehtyclumt] {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}
/* /Components/Pages/Channels/Stores.razor.rz.scp.css */
/* ─── Company selector ───────────────────────────────────────────── */
.company-selector[b-8ak0cs6uus] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 16px;
}

.company-selector[b-8ak0cs6uus]  .searchable-select {
    flex: 1;
}

.company-selector-label[b-8ak0cs6uus] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

    .company-selector-label svg[b-8ak0cs6uus] {
        color: var(--text-secondary);
    }

/* ─── Empty states ───────────────────────────────────────────────── */
.stores-empty-state[b-8ak0cs6uus] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--text-secondary);
    text-align: center;
    gap: 12px;
}

    .stores-empty-state svg[b-8ak0cs6uus] {
        color: var(--border);
    }

    .stores-empty-state p[b-8ak0cs6uus] {
        margin: 0;
        max-width: 480px;
        line-height: 1.5;
    }

    .stores-empty-state strong[b-8ak0cs6uus] {
        color: var(--text-primary);
    }

/* ─── Tab bar — Orders.razor pattern'iyle uyumlu ──────────────────── */
.store-tab-row[b-8ak0cs6uus] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.filter-tabs-container[b-8ak0cs6uus] {
    flex: 1;
    min-width: 0;
}

.filter-tabs[b-8ak0cs6uus] {
    display: flex;
    gap: 8px;
    padding: 4px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius, 8px);
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
}

.filter-tab[b-8ak0cs6uus] {
    padding: 10px 18px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-sm, 6px);
    transition: var(--transition, all 120ms ease);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

    .filter-tab:hover:not(.active)[b-8ak0cs6uus] {
        color: var(--text-primary);
        background: var(--bg-input, rgba(37, 99, 235, 0.06));
    }

    .filter-tab.active[b-8ak0cs6uus] {
        background: var(--primary, #2563eb);
        color: #fff;
    }

/* Son tab'ın hemen sağında "+ Pazaryeri Ekle" — sadece ikon */
.filter-tab-add[b-8ak0cs6uus] {
    padding: 8px 12px;
    color: var(--primary);
    border: 1px dashed var(--border);
    background: transparent;
    margin-left: 4px;
}

    .filter-tab-add:hover[b-8ak0cs6uus] {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
        border-style: solid;
    }

    .filter-tab-add svg[b-8ak0cs6uus] {
        display: block;
    }

.store-tab-status[b-8ak0cs6uus] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9ca3af;
    flex-shrink: 0;
}

    .store-tab-status.is-connected[b-8ak0cs6uus] { background: #10b981; }
    .store-tab-status.is-failed[b-8ak0cs6uus]    { background: #ef4444; }
    .store-tab-status.is-pending[b-8ak0cs6uus]   { background: #f59e0b; }

/* Active sekmede status dot'unu beyaz arka plana karşı görünür yapmak için
   aydınlatılmış bir halka */
.filter-tab.active .store-tab-status[b-8ak0cs6uus] {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

/* ─── Platform selector modal ────────────────────────────────────── */
.platform-selector-desc[b-8ak0cs6uus] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bg-input));
    color: var(--text-primary);
    border-radius: 6px;
    margin-bottom: 20px;
    line-height: 1.5;
}

    .platform-selector-desc svg[b-8ak0cs6uus] {
        flex-shrink: 0;
        margin-top: 2px;
        color: var(--primary);
    }

.platform-section + .platform-section[b-8ak0cs6uus] {
    margin-top: 20px;
}

.platform-section-title[b-8ak0cs6uus] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 12px 0;
}

.platform-grid[b-8ak0cs6uus] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.platform-card[b-8ak0cs6uus] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease, transform 80ms ease;
    background: var(--bg-card);
}

    .platform-card:hover:not(.is-disabled)[b-8ak0cs6uus] {
        border-color: var(--primary);
        box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12);
    }

    .platform-card:active:not(.is-disabled)[b-8ak0cs6uus] {
        transform: translateY(1px);
    }

    .platform-card.is-disabled[b-8ak0cs6uus] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.platform-logo[b-8ak0cs6uus] {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    font-weight: 700;
}

    .platform-logo.has-image[b-8ak0cs6uus] {
        background: transparent !important;
    }

    .platform-logo img[b-8ak0cs6uus] {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.platform-initials[b-8ak0cs6uus] {
    font-size: 18px;
    letter-spacing: -0.02em;
}

.platform-name[b-8ak0cs6uus] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    text-align: center;
}

.platform-already-connected[b-8ak0cs6uus] {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 10px;
    font-weight: 600;
    color: var(--primary);
    background: var(--bg-input));
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
/* /Components/Pages/Channels/WebSites.razor.rz.scp.css */
/* ─── Company selector ───────────────────────────────────────────── */
.company-selector[b-guwhujropa] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 16px;
}

.company-selector[b-guwhujropa]  .searchable-select {
    flex: 1;
}

.company-selector-label[b-guwhujropa] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

    .company-selector-label svg[b-guwhujropa] {
        color: var(--text-secondary);
    }

/* ─── Inline platform picker (şirket var, site yok) ─────────────── */
.website-picker-section[b-guwhujropa] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    margin-top: 16px;
}

.website-picker-header[b-guwhujropa] {
    margin-bottom: 20px;
    text-align: center;
}

.website-picker-title[b-guwhujropa] {
    margin: 0 0 6px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.website-picker-subtitle[b-guwhujropa] {
    margin: 0 auto;
    max-width: 520px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

.website-picker-grid[b-guwhujropa] {
    max-width: 720px;
    margin: 0 auto;
}

/* ─── Platform card grid ─────────────────────────────────────────── */
.platform-grid[b-guwhujropa] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.platform-card[b-guwhujropa] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease, transform 80ms ease;
    background: var(--bg-card);
}

    .platform-card:hover[b-guwhujropa] {
        border-color: var(--primary);
        box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12);
    }

    .platform-card:active[b-guwhujropa] {
        transform: translateY(1px);
    }

.platform-logo[b-guwhujropa] {
    width: 56px;
    height: 56px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    font-weight: 700;
}

    .platform-logo.has-image[b-guwhujropa] {
        background: transparent !important;
    }

    .platform-logo img[b-guwhujropa] {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.platform-initials[b-guwhujropa] {
    font-size: 18px;
    letter-spacing: -0.02em;
}

.platform-name[b-guwhujropa] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    text-align: center;
}
/* /Components/Pages/Channels/WebsiteStoreTab.razor.rz.scp.css */
/* ─── Tab content layout ─────────────────────────────────────────── */
.marketplace-tab-content[b-wcb1fm1mxv] {
    padding: 20px 4px 8px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.marketplace-tab-empty[b-wcb1fm1mxv] {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-secondary);
}

/* Aksiyon barı (Test / Kaydet / Sil) */
.tab-action-bar[b-wcb1fm1mxv] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

/* ─── Stat kartları ──────────────────────────────────────────────── */
.tab-stats-grid[b-wcb1fm1mxv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.tab-stat-card[b-wcb1fm1mxv] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

    .tab-stat-card.is-ok[b-wcb1fm1mxv] {
        border-left: 3px solid #10b981;
    }

    .tab-stat-card.is-error[b-wcb1fm1mxv] {
        border-left: 3px solid #ef4444;
    }

    .tab-stat-card.is-warn[b-wcb1fm1mxv] {
        border-left: 3px solid #f59e0b;
    }

.tab-stat-icon[b-wcb1fm1mxv] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--bg-input));
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tab-stat-card.is-ok .tab-stat-icon[b-wcb1fm1mxv] {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.tab-stat-card.is-error .tab-stat-icon[b-wcb1fm1mxv] {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.tab-stat-card.is-warn .tab-stat-icon[b-wcb1fm1mxv] {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}

.tab-stat-body[b-wcb1fm1mxv] {
    min-width: 0;
}

.tab-stat-label[b-wcb1fm1mxv] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tab-stat-value[b-wcb1fm1mxv] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 2px;
}

.tab-stat-mini[b-wcb1fm1mxv] {
    font-size: 12px;
    font-weight: 500;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

    .tab-stat-mini span[b-wcb1fm1mxv] {
        color: var(--text-secondary);
        opacity: 0.55;
    }

    .tab-stat-mini span.is-on[b-wcb1fm1mxv] {
        color: #10b981;
        opacity: 1;
    }

/* ─── Section card ────────────────────────────────────────────────── */
.tab-section[b-wcb1fm1mxv] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 18px 20px;
}

.tab-section-header[b-wcb1fm1mxv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.tab-section-title[b-wcb1fm1mxv] {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tab-section-subtitle[b-wcb1fm1mxv] {
    margin: 0 0 14px 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.tab-section-empty[b-wcb1fm1mxv] {
    padding: 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
}

/* ─── Form grid ──────────────────────────────────────────────────── */
.tab-form-grid[b-wcb1fm1mxv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

    .tab-form-grid .form-group[b-wcb1fm1mxv] {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .tab-form-grid label[b-wcb1fm1mxv] {
        font-size: 12px;
        font-weight: 600;
        color: var(--text-secondary);
    }

    .tab-form-grid .required[b-wcb1fm1mxv] {
        color: #ef4444;
        margin-left: 2px;
    }

    .tab-form-grid .form-input[b-wcb1fm1mxv] {
        padding: 8px 10px;
        border: 1px solid var(--border);
        border-radius: 6px;
        font-size: 14px;
        background: var(--bg-card);
        color: var(--text-primary);
    }

    .tab-form-grid .form-input:focus[b-wcb1fm1mxv] {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

    .tab-form-grid .form-help[b-wcb1fm1mxv] {
        font-size: 11px;
        color: var(--text-secondary);
    }

    .tab-form-grid .credential-status[b-wcb1fm1mxv] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: #10b981;
    }

    .tab-form-grid .input-with-toggle[b-wcb1fm1mxv] {
        position: relative;
    }

        .tab-form-grid .input-with-toggle .form-input[b-wcb1fm1mxv] {
            padding-right: 36px;
            width: 100%;
        }

    .tab-form-grid .toggle-visibility-btn[b-wcb1fm1mxv] {
        position: absolute;
        right: 6px;
        top: 50%;
        transform: translateY(-50%);
        background: transparent;
        border: none;
        cursor: pointer;
        color: var(--text-secondary);
        padding: 4px;
        display: flex;
    }

        .tab-form-grid .toggle-visibility-btn:hover[b-wcb1fm1mxv] {
            color: var(--primary);
        }

/* ─── Toggle list ────────────────────────────────────────────────── */
.tab-toggles[b-wcb1fm1mxv] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    /* SwitchField kendi form-group margin'ini taşıyor; tab-toggles içinde nötrle */
    .tab-toggles[b-wcb1fm1mxv]  .form-group {
        margin-bottom: 0;
    }

/* ─── Sync log table ─────────────────────────────────────────────── */
.tab-log-table[b-wcb1fm1mxv] {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
}

    .tab-log-table table[b-wcb1fm1mxv] {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
    }

    .tab-log-table th[b-wcb1fm1mxv] {
        text-align: left;
        font-weight: 600;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-secondary);
        padding: 10px 12px;
        background: var(--bg-input));
        border-bottom: 1px solid var(--border);
    }

    .tab-log-table td[b-wcb1fm1mxv] {
        padding: 10px 12px;
        border-bottom: 1px solid var(--border);
        color: var(--text-primary);
    }

    .tab-log-table tr:last-child td[b-wcb1fm1mxv] {
        border-bottom: none;
    }

    .tab-log-table .text-center[b-wcb1fm1mxv] { text-align: center; }
    .tab-log-table .text-right[b-wcb1fm1mxv]  { text-align: right; }

.log-status-pill[b-wcb1fm1mxv] {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

    .log-status-pill.ok[b-wcb1fm1mxv] {
        background: rgba(16, 185, 129, 0.12);
        color: #059669;
    }

    .log-status-pill.fail[b-wcb1fm1mxv] {
        background: rgba(239, 68, 68, 0.12);
        color: #dc2626;
    }

.tab-log-footer[b-wcb1fm1mxv] {
    margin-top: 10px;
    text-align: right;
    font-size: 13px;
}

    .tab-log-footer a[b-wcb1fm1mxv] {
        color: var(--primary);
        text-decoration: none;
    }

        .tab-log-footer a:hover[b-wcb1fm1mxv] {
            text-decoration: underline;
        }

/* ─── Manuel sync aksiyon kartları ───────────────────────────────── */
.sync-action-grid[b-wcb1fm1mxv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.sync-action-card[b-wcb1fm1mxv] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: border-color 120ms ease, box-shadow 120ms ease, transform 80ms ease;
}

    .sync-action-card:hover:not(:disabled)[b-wcb1fm1mxv] {
        border-color: var(--primary);
        box-shadow: 0 2px 10px rgba(37, 99, 235, 0.12);
    }

    .sync-action-card:active:not(:disabled)[b-wcb1fm1mxv] {
        transform: translateY(1px);
    }

    .sync-action-card:disabled[b-wcb1fm1mxv] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.sync-action-card-special[b-wcb1fm1mxv] {
    border-left: 3px solid #f27a1a;
}

.sync-action-card-danger[b-wcb1fm1mxv] {
    border-left: 3px solid #ef4444;
}

    .sync-action-card-danger .sync-action-icon[b-wcb1fm1mxv] {
        background: rgba(239, 68, 68, 0.12);
        color: #ef4444;
    }

.sync-action-icon[b-wcb1fm1mxv] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--bg-input));
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sync-action-card-special .sync-action-icon[b-wcb1fm1mxv] {
    background: rgba(242, 122, 26, 0.12);
    color: #f27a1a;
}

.sync-action-body[b-wcb1fm1mxv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

    .sync-action-body strong[b-wcb1fm1mxv] {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
    }

    .sync-action-body small[b-wcb1fm1mxv] {
        font-size: 12px;
        color: var(--text-secondary);
        line-height: 1.35;
    }

.sync-action-spinner[b-wcb1fm1mxv] {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 14px;
    height: 14px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: sync-action-spin-b-wcb1fm1mxv 0.7s linear infinite;
}

@keyframes sync-action-spin-b-wcb1fm1mxv {
    to { transform: rotate(360deg); }
}


/* ─── Shopify push parametre formu — yardımcı class'lar ─── */
.checkbox-grid[b-wcb1fm1mxv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin-top: 6px;
}

.checkbox-row[b-wcb1fm1mxv] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}

    .checkbox-row:hover[b-wcb1fm1mxv] {
        border-color: var(--primary);
    }

    .checkbox-row input[type="checkbox"][b-wcb1fm1mxv] {
        width: 16px;
        height: 16px;
        cursor: pointer;
        accent-color: var(--primary);
        flex-shrink: 0;
    }

    .checkbox-row span[b-wcb1fm1mxv] {
        flex: 1;
        font-size: 13px;
        font-weight: 500;
        color: var(--text-primary);
    }

    .checkbox-row small[b-wcb1fm1mxv] {
        font-size: 11px;
        color: var(--text-muted);
        font-family: ui-monospace, "SF Mono", Menlo, monospace;
    }

.info-banner[b-wcb1fm1mxv] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius);
    color: var(--text-primary);
    line-height: 1.5;
    margin-bottom: 16px;
    font-size: 13px;
}

    .info-banner svg[b-wcb1fm1mxv] {
        flex-shrink: 0;
        margin-top: 2px;
        color: var(--primary);
    }

    .info-banner strong[b-wcb1fm1mxv] {
        color: var(--primary);
    }

/* ─── Shopify metadata hata gösterimi + Yenile butonu satırı ─── */
.form-group-header[b-wcb1fm1mxv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

    .form-group-header label[b-wcb1fm1mxv] {
        margin: 0;
    }

.error-banner[b-wcb1fm1mxv] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-left: 3px solid #ef4444;
    border-radius: var(--radius);
    color: var(--text-primary);
    line-height: 1.5;
    margin-top: 6px;
    font-size: 13px;
}

    .error-banner svg[b-wcb1fm1mxv] {
        flex-shrink: 0;
        margin-top: 2px;
        color: #ef4444;
    }

.form-help-error[b-wcb1fm1mxv] {
    color: #ef4444;
}
/* /Components/Pages/Claims/Claims.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   CLAIMS PAGE - CLEAN DESIGN
   ═══════════════════════════════════════════════════════════════ */

/* Page Header */
.page-header[b-m7lt4fw6k3] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    padding: 24px 24px 0;
}

.page-header-left[b-m7lt4fw6k3] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-title[b-m7lt4fw6k3] {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.page-subtitle[b-m7lt4fw6k3] {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
}

.page-header-right[b-m7lt4fw6k3] {
    display: flex;
    gap: 12px;
}

/* Page Content */
.page-content[b-m7lt4fw6k3] {
    padding: 0 24px 24px;
}

/* ═══════════════════════════════════════════════════════════════
   STATS GRID
   ═══════════════════════════════════════════════════════════════ */

.stats-grid[b-m7lt4fw6k3] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.stat-card[b-m7lt4fw6k3] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: var(--transition);
}

.stat-card:hover[b-m7lt4fw6k3] {
    border-color: var(--border-hover);
}

.stat-icon[b-m7lt4fw6k3] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon svg[b-m7lt4fw6k3] {
    width: 24px;
    height: 24px;
}

.stat-icon.blue[b-m7lt4fw6k3] { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }
.stat-icon.green[b-m7lt4fw6k3] { background: rgba(16, 185, 129, 0.12); color: #10b981; }
.stat-icon.yellow[b-m7lt4fw6k3] { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }
.stat-icon.red[b-m7lt4fw6k3] { background: rgba(239, 68, 68, 0.12); color: #ef4444; }

.stat-content h3[b-m7lt4fw6k3] {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 2px;
    color: var(--text-primary);
}

.stat-content p[b-m7lt4fw6k3] {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   FILTER CARD & SEARCH
   ═══════════════════════════════════════════════════════════════ */

.filter-card[b-m7lt4fw6k3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
    gap: 16px;
}

.filter-card-left[b-m7lt4fw6k3] { flex: 1; min-width: 0; }
.filter-card-right[b-m7lt4fw6k3] { display: flex; gap: 10px; }

.search-input-wide[b-m7lt4fw6k3] {
    min-width: 350px;
    max-width: 500px;
    position: relative;
}

.search-input-wide .search-icon[b-m7lt4fw6k3] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.search-input-wide .search-input[b-m7lt4fw6k3] {
    padding-left: 42px;
    width: 100%;
}

.filter-button-wrapper[b-m7lt4fw6k3] {
    position: relative;
    display: inline-flex;
}

.filter-badge[b-m7lt4fw6k3] {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 10px;
    font-weight: 600;
    color: white;
    background: #ef4444;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════
   FILTER TABS
   ═══════════════════════════════════════════════════════════════ */

.filter-tabs-container[b-m7lt4fw6k3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 12px;
}

.filter-tabs[b-m7lt4fw6k3] {
    display: flex;
    gap: 6px;
    padding: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.filter-tabs-right[b-m7lt4fw6k3] {
    display: flex;
    gap: 6px;
}

.filter-tab[b-m7lt4fw6k3] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.filter-tab:hover[b-m7lt4fw6k3] {
    color: var(--text-primary);
    background: var(--bg-muted);
}

.filter-tab.active[b-m7lt4fw6k3] {
    background: var(--primary);
    color: white;
}

.filter-tab .tab-count[b-m7lt4fw6k3] {
    padding: 2px 7px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
}

.filter-tab:not(.active) .tab-count[b-m7lt4fw6k3] {
    background: var(--bg-muted);
}

.btn-icon-sm[b-m7lt4fw6k3] {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    color: var(--text-muted);
}

.btn-icon-sm:hover[b-m7lt4fw6k3] {
    background: var(--bg-muted);
    color: var(--text-primary);
    border-color: var(--border-hover);
}

/* ═══════════════════════════════════════════════════════════════
   CLAIMS LIST
   ═══════════════════════════════════════════════════════════════ */

.claims-list[b-m7lt4fw6k3] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ═══════════════════════════════════════════════════════════════
   CLAIM CARD
   ═══════════════════════════════════════════════════════════════ */

.claim-card[b-m7lt4fw6k3] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition);
}

.claim-card:hover[b-m7lt4fw6k3] {
    border-color: var(--border-hover);
}

.claim-card.selected[b-m7lt4fw6k3] {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}

.claim-card.expanded[b-m7lt4fw6k3] {
    border-color: var(--primary);
}

/* ═══════════════════════════════════════════════════════════════
   CLAIM HEADER (Master Row)
   ═══════════════════════════════════════════════════════════════ */

.claim-header[b-m7lt4fw6k3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    cursor: pointer;
    transition: var(--transition);
    gap: 16px;
}

.claim-header:hover[b-m7lt4fw6k3] {
    background: var(--bg-muted);
}

.header-left[b-m7lt4fw6k3] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.header-right[b-m7lt4fw6k3] {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.claim-checkbox[b-m7lt4fw6k3] {
    flex-shrink: 0;
}

.claim-checkbox input[type="checkbox"][b-m7lt4fw6k3] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--primary);
}

.claim-expand-toggle[b-m7lt4fw6k3] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    color: var(--text-muted);
}

.claim-expand-toggle svg[b-m7lt4fw6k3] {
    transition: transform 0.2s ease;
}

.claim-expand-toggle svg.rotated[b-m7lt4fw6k3] {
    transform: rotate(90deg);
}

/* Claim Info */
.claim-info[b-m7lt4fw6k3] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.claim-primary[b-m7lt4fw6k3] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.order-link[b-m7lt4fw6k3] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    font-size: 14px;
    color: var(--primary);
    text-decoration: none;
    transition: var(--transition);
}

.order-link:hover[b-m7lt4fw6k3] {
    color: var(--primary-hover);
}

.order-link svg[b-m7lt4fw6k3] {
    opacity: 0.6;
}

.order-text[b-m7lt4fw6k3] {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.claim-badge[b-m7lt4fw6k3] {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    background: var(--bg-muted);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    font-family: var(--font-mono, monospace);
}

.claim-secondary[b-m7lt4fw6k3] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.customer[b-m7lt4fw6k3] {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dot-separator[b-m7lt4fw6k3] {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--text-muted);
    flex-shrink: 0;
}

.store-badge[b-m7lt4fw6k3] {
    padding: 2px 8px;
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

.item-count[b-m7lt4fw6k3] {
    color: var(--text-muted);
}

/* Amount & Date */
.claim-amount[b-m7lt4fw6k3] {
    min-width: 90px;
    text-align: right;
}

.claim-amount .amount[b-m7lt4fw6k3] {
    font-weight: 700;
    font-size: 15px;
    color: var(--text-primary);
}

.claim-date[b-m7lt4fw6k3] {
    min-width: 70px;
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.claim-date .date[b-m7lt4fw6k3] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.claim-date .time[b-m7lt4fw6k3] {
    font-size: 11px;
    color: var(--text-muted);
}

/* Actions */
.claim-actions[b-m7lt4fw6k3] {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.action-btn[b-m7lt4fw6k3] {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg-muted);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    color: var(--text-muted);
}

.action-btn:hover[b-m7lt4fw6k3] {
    color: var(--text-primary);
}

.action-btn.view:hover[b-m7lt4fw6k3] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.action-btn.approve[b-m7lt4fw6k3] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.action-btn.approve:hover[b-m7lt4fw6k3] {
    background: rgba(16, 185, 129, 0.2);
    color: #059669;
}

.action-btn.reject[b-m7lt4fw6k3] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.action-btn.reject:hover[b-m7lt4fw6k3] {
    background: rgba(239, 68, 68, 0.2);
    color: #dc2626;
}

/* ═══════════════════════════════════════════════════════════════
   STATUS BADGE
   ═══════════════════════════════════════════════════════════════ */

.status-badge[b-m7lt4fw6k3] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.status-badge.small[b-m7lt4fw6k3] {
    padding: 3px 8px;
    font-size: 10px;
}

.status-created[b-m7lt4fw6k3] {
    background: rgba(156, 163, 175, 0.15);
    color: #6b7280;
}

.status-waiting[b-m7lt4fw6k3] {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
}

.status-accepted[b-m7lt4fw6k3] {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.status-rejected[b-m7lt4fw6k3] {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

.status-unresolved[b-m7lt4fw6k3] {
    background: rgba(139, 92, 246, 0.15);
    color: #7c3aed;
}

.status-cancelled[b-m7lt4fw6k3] {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
}

.status-analysis[b-m7lt4fw6k3] {
    background: rgba(59, 130, 246, 0.15);
    color: #2563eb;
}

.status-default[b-m7lt4fw6k3] {
    background: var(--bg-muted);
    color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════
   CLAIM DETAIL (Expanded)
   ═══════════════════════════════════════════════════════════════ */

.claim-detail[b-m7lt4fw6k3] {
    background: var(--bg-muted);
    border-top: 1px solid var(--border);
    padding: 16px 18px;
}

.detail-header[b-m7lt4fw6k3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.detail-title[b-m7lt4fw6k3] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cargo-info[b-m7lt4fw6k3] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    padding: 6px 12px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
}

.cargo-info svg[b-m7lt4fw6k3] {
    color: var(--text-muted);
}

.tracking-no[b-m7lt4fw6k3] {
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    padding: 2px 6px;
    background: var(--bg-muted);
    border-radius: 4px;
}

.tracking-link[b-m7lt4fw6k3] {
    display: flex;
    align-items: center;
    color: var(--primary);
}

.tracking-link:hover[b-m7lt4fw6k3] {
    color: var(--primary-hover);
}

/* Items Grid */
.items-grid[b-m7lt4fw6k3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.item-card[b-m7lt4fw6k3] {
    display: flex;
    align-items: stretch;
    gap: 14px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.item-image[b-m7lt4fw6k3] {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.item-image img[b-m7lt4fw6k3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item-image .no-image[b-m7lt4fw6k3] {
    width: 100%;
    height: 100%;
    background: var(--bg-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.item-content[b-m7lt4fw6k3] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
}

.item-top[b-m7lt4fw6k3] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.item-name[b-m7lt4fw6k3] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.3;
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-price[b-m7lt4fw6k3] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.item-middle[b-m7lt4fw6k3] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.barcode-badge[b-m7lt4fw6k3] {
    display: inline-flex;
    padding: 3px 8px;
    background: var(--bg-muted);
    border-radius: 4px;
    font-size: 11px;
    font-family: var(--font-mono, monospace);
    color: var(--text-secondary);
}

.variant-badge[b-m7lt4fw6k3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    color: #6366f1;
}

.variant-badge span + span[b-m7lt4fw6k3]::before {
    content: "•";
    margin-right: 6px;
    opacity: 0.5;
}

.qty-badge[b-m7lt4fw6k3] {
    display: inline-flex;
    padding: 3px 8px;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #d97706;
}

.item-bottom[b-m7lt4fw6k3] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.reason-badge[b-m7lt4fw6k3] {
    display: inline-flex;
    padding: 4px 10px;
    background: rgba(251, 146, 60, 0.1);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    color: #ea580c;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════════ */

.empty-state[b-m7lt4fw6k3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.empty-state .empty-icon[b-m7lt4fw6k3] {
    width: 56px;
    height: 56px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.empty-state h3[b-m7lt4fw6k3] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.empty-state p[b-m7lt4fw6k3] {
    font-size: 13px;
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════════════════════════ */

.pagination-wrapper[b-m7lt4fw6k3] {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════════
   BULK ACTIONS BAR
   ═══════════════════════════════════════════════════════════════ */

.bulk-actions-bar[b-m7lt4fw6k3] {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 100;
    animation: slideUp-b-m7lt4fw6k3 0.25s ease-out;
}

@keyframes slideUp-b-m7lt4fw6k3 {
    from { opacity: 0; transform: translateX(-50%) translateY(16px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.bulk-actions-info[b-m7lt4fw6k3] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.selected-count[b-m7lt4fw6k3] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    background: var(--primary);
    color: white;
    border-radius: 13px;
    font-size: 12px;
    font-weight: 600;
}

.selected-text[b-m7lt4fw6k3] {
    font-size: 13px;
    color: var(--text-secondary);
}

.bulk-actions-buttons[b-m7lt4fw6k3] {
    display: flex;
    gap: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════════════ */

.filter-modal-content[b-m7lt4fw6k3] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.date-range-inputs[b-m7lt4fw6k3] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.date-range-inputs .date-input[b-m7lt4fw6k3] { flex: 1; }
.date-range-inputs .date-separator[b-m7lt4fw6k3] { color: var(--text-muted); }

.sync-settings[b-m7lt4fw6k3] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sync-date-row[b-m7lt4fw6k3] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.sync-result[b-m7lt4fw6k3] {
    margin-top: 16px;
    padding: 14px;
    background: rgba(16, 185, 129, 0.05);
    border: 1px solid rgba(16, 185, 129, 0.15);
    border-radius: var(--radius);
}

.sync-result.has-errors[b-m7lt4fw6k3] {
    background: rgba(245, 158, 11, 0.05);
    border-color: rgba(245, 158, 11, 0.15);
}

.sync-result-item[b-m7lt4fw6k3] {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 13px;
}

.sync-result-item .label[b-m7lt4fw6k3] { color: var(--text-secondary); }
.sync-result-item .value[b-m7lt4fw6k3] { font-weight: 600; }
.sync-result-item .value.success[b-m7lt4fw6k3] { color: #10b981; }
.sync-result-item .value.error[b-m7lt4fw6k3] { color: #ef4444; }

/* Detail Modal */
.claim-detail-modal[b-m7lt4fw6k3] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.detail-grid[b-m7lt4fw6k3] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.detail-card[b-m7lt4fw6k3] {
    padding: 14px;
    background: var(--bg-muted);
    border-radius: var(--radius);
}

.detail-card h4[b-m7lt4fw6k3] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 10px;
}

.detail-row[b-m7lt4fw6k3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    font-size: 13px;
}

.detail-row .label[b-m7lt4fw6k3] { color: var(--text-secondary); }
.detail-row .value[b-m7lt4fw6k3] { font-weight: 500; color: var(--text-primary); }

.detail-items[b-m7lt4fw6k3] {
    margin-top: 4px;
}

.detail-items h4[b-m7lt4fw6k3] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 10px;
}

.detail-table[b-m7lt4fw6k3] {
    width: 100%;
    border-collapse: collapse;
}

.detail-table th[b-m7lt4fw6k3],
.detail-table td[b-m7lt4fw6k3] {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.detail-table th[b-m7lt4fw6k3] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    background: var(--bg-muted);
}

.detail-table td[b-m7lt4fw6k3] {
    font-size: 13px;
    color: var(--text-primary);
}

.detail-table code[b-m7lt4fw6k3] {
    font-size: 12px;
    padding: 2px 6px;
    background: var(--bg-muted);
    border-radius: 4px;
}

.product-cell .name[b-m7lt4fw6k3] {
    display: block;
    font-weight: 500;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-cell .variant[b-m7lt4fw6k3] {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {
    .stats-grid[b-m7lt4fw6k3] {
        grid-template-columns: repeat(2, 1fr);
    }

    .detail-grid[b-m7lt4fw6k3] {
        grid-template-columns: 1fr;
    }
}

/* Tablet */
@media (max-width: 1024px) {
    .page-header[b-m7lt4fw6k3] {
        padding: 16px 16px 0;
        margin-bottom: 16px;
    }

    .page-title[b-m7lt4fw6k3] {
        font-size: 22px;
    }

    .page-content[b-m7lt4fw6k3] {
        padding: 0 16px 16px;
    }

    .stats-grid[b-m7lt4fw6k3] {
        gap: 12px;
        margin-bottom: 16px;
    }

    .stat-card[b-m7lt4fw6k3] {
        padding: 16px;
    }

    .stat-icon[b-m7lt4fw6k3] {
        width: 42px;
        height: 42px;
    }

    .stat-icon svg[b-m7lt4fw6k3] {
        width: 20px;
        height: 20px;
    }

    .stat-content h3[b-m7lt4fw6k3] {
        font-size: 20px;
    }

    /* Filter tabs - horizontal scroll */
    .filter-tabs-container[b-m7lt4fw6k3] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .filter-tabs[b-m7lt4fw6k3] {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .filter-tabs[b-m7lt4fw6k3]::-webkit-scrollbar {
        display: none;
    }

    .filter-tab[b-m7lt4fw6k3] {
        white-space: nowrap;
    }

    .filter-tabs-right[b-m7lt4fw6k3] {
        justify-content: flex-end;
    }

    /* Claim header */
    .header-right[b-m7lt4fw6k3] {
        gap: 12px;
    }

    .claim-amount[b-m7lt4fw6k3],
    .claim-date[b-m7lt4fw6k3] {
        display: none;
    }

    /* Items grid */
    .items-grid[b-m7lt4fw6k3] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 768px) {
    .page-header[b-m7lt4fw6k3] {
        flex-direction: column;
        gap: 12px;
        padding: 12px 16px 0;
        margin-bottom: 12px;
    }

    .page-title[b-m7lt4fw6k3] {
        font-size: 20px;
    }

    .page-subtitle[b-m7lt4fw6k3] {
        font-size: 12px;
    }

    .page-header-right[b-m7lt4fw6k3] {
        width: 100%;
        gap: 8px;
    }

    .page-header-right .btn[b-m7lt4fw6k3] {
        flex: 1;
        font-size: 12px;
        padding: 8px 12px;
        justify-content: center;
    }

    .page-content[b-m7lt4fw6k3] {
        padding: 0 12px 100px;
    }

    /* Stats */
    .stats-grid[b-m7lt4fw6k3] {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 12px;
    }

    .stat-card[b-m7lt4fw6k3] {
        padding: 14px;
        gap: 12px;
    }

    .stat-icon[b-m7lt4fw6k3] {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }

    .stat-icon svg[b-m7lt4fw6k3] {
        width: 18px;
        height: 18px;
    }

    .stat-content h3[b-m7lt4fw6k3] {
        font-size: 18px;
    }

    .stat-content p[b-m7lt4fw6k3] {
        font-size: 11px;
    }

    /* Filter card */
    .filter-card[b-m7lt4fw6k3] {
        flex-direction: column;
        gap: 8px;
        padding: 12px;
        margin-bottom: 12px;
    }

    .search-input-wide[b-m7lt4fw6k3] {
        min-width: 100% !important;
        max-width: 100%;
    }

    .filter-card-right[b-m7lt4fw6k3] {
        width: 100%;
    }

    /* Filter tabs */
    .filter-tabs-container[b-m7lt4fw6k3] {
        margin-bottom: 12px;
    }

    .filter-tab[b-m7lt4fw6k3] {
        padding: 7px 12px;
        font-size: 12px;
        gap: 6px;
    }

    .tab-count[b-m7lt4fw6k3] {
        font-size: 10px;
    }

    /* Claim cards */
    .claim-card[b-m7lt4fw6k3] {
        border-radius: var(--radius);
    }

    .claim-header[b-m7lt4fw6k3] {
        padding: 12px;
        gap: 10px;
    }

    .claim-expand-toggle svg[b-m7lt4fw6k3] {
        width: 14px;
        height: 14px;
    }

    /* Claim info */
    .claim-primary[b-m7lt4fw6k3] {
        flex-wrap: wrap;
        gap: 6px;
    }

    .order-link[b-m7lt4fw6k3],
    .order-text[b-m7lt4fw6k3] {
        font-size: 13px;
    }

    .claim-badge[b-m7lt4fw6k3] {
        font-size: 10px;
        padding: 2px 6px;
    }

    .status-badge[b-m7lt4fw6k3] {
        font-size: 10px;
        padding: 3px 8px;
    }

    .claim-secondary[b-m7lt4fw6k3] {
        font-size: 12px;
        flex-wrap: wrap;
        gap: 4px;
    }

    .store-badge[b-m7lt4fw6k3] {
        font-size: 10px;
        padding: 2px 6px;
    }

    /* Header right - show amount inline */
    .header-right[b-m7lt4fw6k3] {
        gap: 8px;
    }

    .claim-amount[b-m7lt4fw6k3] {
        display: none;
    }

    .claim-date[b-m7lt4fw6k3] {
        display: none;
    }

    .claim-actions[b-m7lt4fw6k3] {
        gap: 4px;
    }

    .action-btn[b-m7lt4fw6k3] {
        width: 32px;
        height: 32px;
    }

    .action-btn svg[b-m7lt4fw6k3] {
        width: 14px;
        height: 14px;
    }

    /* Claim detail */
    .claim-detail[b-m7lt4fw6k3] {
        padding: 12px;
    }

    .detail-header[b-m7lt4fw6k3] {
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 12px;
    }

    .detail-title[b-m7lt4fw6k3] {
        font-size: 13px;
    }

    .cargo-info[b-m7lt4fw6k3] {
        font-size: 11px;
    }

    .tracking-no[b-m7lt4fw6k3] {
        font-size: 10px;
    }

    /* Items grid */
    .items-grid[b-m7lt4fw6k3] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .item-card[b-m7lt4fw6k3] {
        padding: 10px;
        gap: 10px;
    }

    .item-image[b-m7lt4fw6k3],
    .item-image img[b-m7lt4fw6k3],
    .item-image .no-image[b-m7lt4fw6k3] {
        width: 48px;
        height: 48px;
    }

    .item-name[b-m7lt4fw6k3] {
        font-size: 13px;
        max-width: 180px;
    }

    .item-price[b-m7lt4fw6k3] {
        font-size: 13px;
    }

    .barcode-badge[b-m7lt4fw6k3] {
        font-size: 10px;
    }

    .variant-badge[b-m7lt4fw6k3] {
        font-size: 10px;
    }

    .reason-badge[b-m7lt4fw6k3] {
        font-size: 10px;
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Empty state */
    .empty-state[b-m7lt4fw6k3] {
        padding: 40px 16px;
    }

    .empty-icon[b-m7lt4fw6k3] {
        width: 48px;
        height: 48px;
    }

    /* Bulk actions */
    .bulk-actions-bar[b-m7lt4fw6k3] {
        left: 12px;
        right: 12px;
        bottom: 84px;
        transform: none;
        flex-direction: column;
        gap: 10px;
    }

    .bulk-actions-buttons[b-m7lt4fw6k3] {
        width: 100%;
    }

    .bulk-actions-buttons .btn[b-m7lt4fw6k3] {
        flex: 1;
    }

    /* Filter modal */
    .date-range-inputs[b-m7lt4fw6k3] {
        flex-direction: column;
        gap: 8px;
    }

    .date-separator[b-m7lt4fw6k3] {
        display: none;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .page-header[b-m7lt4fw6k3] {
        padding: 10px 12px 0;
    }

    .page-title[b-m7lt4fw6k3] {
        font-size: 18px;
    }

    .page-content[b-m7lt4fw6k3] {
        padding: 0 10px 100px;
    }

    .stats-grid[b-m7lt4fw6k3] {
        gap: 8px;
    }

    .stat-card[b-m7lt4fw6k3] {
        padding: 12px;
        gap: 10px;
    }

    .stat-icon[b-m7lt4fw6k3] {
        width: 34px;
        height: 34px;
    }

    .stat-icon svg[b-m7lt4fw6k3] {
        width: 16px;
        height: 16px;
    }

    .stat-content h3[b-m7lt4fw6k3] {
        font-size: 16px;
    }

    .stat-content p[b-m7lt4fw6k3] {
        font-size: 10px;
    }

    .page-header-right .btn[b-m7lt4fw6k3] {
        font-size: 11px;
        padding: 7px 10px;
    }

    /* Claim header - stack */
    .claim-header[b-m7lt4fw6k3] {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 10px;
    }

    .header-left[b-m7lt4fw6k3] {
        width: 100%;
    }

    .header-right[b-m7lt4fw6k3] {
        justify-content: space-between;
        width: 100%;
        padding-top: 8px;
        border-top: 1px solid var(--border);
    }

    /* Show amount and date again in stacked layout */
    .claim-amount[b-m7lt4fw6k3],
    .claim-date[b-m7lt4fw6k3] {
        display: flex;
    }

    .claim-amount .amount[b-m7lt4fw6k3] {
        font-size: 14px;
    }

    .claim-date .date[b-m7lt4fw6k3],
    .claim-date .time[b-m7lt4fw6k3] {
        font-size: 11px;
    }

    /* Item image smaller */
    .item-image[b-m7lt4fw6k3],
    .item-image img[b-m7lt4fw6k3],
    .item-image .no-image[b-m7lt4fw6k3] {
        width: 40px;
        height: 40px;
    }

    .item-name[b-m7lt4fw6k3] {
        font-size: 12px;
        max-width: 140px;
    }

    .filter-tab[b-m7lt4fw6k3] {
        padding: 6px 10px;
        font-size: 11px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   ITEM SELECT MODAL
   ═══════════════════════════════════════════════════════════════ */

.item-select-content[b-m7lt4fw6k3] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.item-select-hint[b-m7lt4fw6k3] {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
}

.item-select-list[b-m7lt4fw6k3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 400px;
    overflow-y: auto;
}

.item-select-card[b-m7lt4fw6k3] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-muted);
    border: 2px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition);
}

.item-select-card:hover[b-m7lt4fw6k3] {
    background: var(--bg-card);
    border-color: var(--border);
}

.item-select-card.selected[b-m7lt4fw6k3] {
    background: rgba(59, 130, 246, 0.06);
    border-color: var(--primary);
}

.item-select-check[b-m7lt4fw6k3] {
    flex-shrink: 0;
}

.item-select-check input[type="checkbox"][b-m7lt4fw6k3] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary);
}

.item-select-image[b-m7lt4fw6k3] {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.item-select-image img[b-m7lt4fw6k3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item-select-image .no-image[b-m7lt4fw6k3] {
    width: 100%;
    height: 100%;
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.item-select-info[b-m7lt4fw6k3] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.item-select-name[b-m7lt4fw6k3] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-select-meta[b-m7lt4fw6k3] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.item-select-barcode[b-m7lt4fw6k3] {
    font-family: var(--font-mono, monospace);
    color: var(--text-secondary);
}

.item-select-variant[b-m7lt4fw6k3] {
    color: #6366f1;
}

.item-select-price[b-m7lt4fw6k3] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   REJECT MODAL ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════ */

.reject-modal-content[b-m7lt4fw6k3] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.reject-items-summary[b-m7lt4fw6k3] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.15);
    border-radius: var(--radius);
}

.reject-items-summary .summary-label[b-m7lt4fw6k3] {
    font-size: 13px;
    color: var(--text-secondary);
}

.reject-items-summary .summary-count[b-m7lt4fw6k3] {
    font-size: 13px;
    font-weight: 600;
    color: #dc2626;
}

.optional[b-m7lt4fw6k3] {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
}

/* Photo Upload Section */
.photo-upload-section[b-m7lt4fw6k3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.photo-grid[b-m7lt4fw6k3] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.photo-item[b-m7lt4fw6k3] {
    width: 80px;
    height: 80px;
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
}

.photo-item img[b-m7lt4fw6k3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-remove-btn[b-m7lt4fw6k3] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border: none;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.photo-remove-btn:hover[b-m7lt4fw6k3] {
    background: rgba(239, 68, 68, 0.9);
}

.photo-add-options[b-m7lt4fw6k3] {
    display: flex;
    gap: 10px;
}

.photo-add-btn[b-m7lt4fw6k3],
.photo-camera-btn[b-m7lt4fw6k3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 80px;
    height: 80px;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    background: var(--bg-muted);
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
    font-size: 10px;
    text-align: center;
}

.photo-add-btn:hover[b-m7lt4fw6k3],
.photo-camera-btn:hover[b-m7lt4fw6k3] {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(59, 130, 246, 0.04);
}

.photo-add-btn .hidden-input[b-m7lt4fw6k3] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* Camera View */
.camera-view[b-m7lt4fw6k3] {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    max-height: 300px;
    background: #000;
    border-radius: var(--radius);
    overflow: hidden;
}

.camera-video[b-m7lt4fw6k3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.camera-overlay[b-m7lt4fw6k3] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.camera-frame[b-m7lt4fw6k3] {
    width: 70%;
    height: 70%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius);
}

.camera-loading[b-m7lt4fw6k3] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
}

.camera-loading .spinner[b-m7lt4fw6k3] {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-m7lt4fw6k3 0.8s linear infinite;
}

@keyframes spin-b-m7lt4fw6k3 {
    to { transform: rotate(360deg); }
}

.camera-loading p[b-m7lt4fw6k3] {
    font-size: 13px;
    margin: 0;
}

.camera-error[b-m7lt4fw6k3] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.8);
    color: #ef4444;
    padding: 20px;
    text-align: center;
}

.camera-error p[b-m7lt4fw6k3] {
    font-size: 13px;
    margin: 0;
}

.camera-actions[b-m7lt4fw6k3] {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 20px;
}

.camera-action-btn[b-m7lt4fw6k3] {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.camera-action-btn.secondary[b-m7lt4fw6k3] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.camera-action-btn.secondary:hover[b-m7lt4fw6k3] {
    background: rgba(255, 255, 255, 0.3);
}

.camera-action-btn.capture[b-m7lt4fw6k3] {
    width: 60px;
    height: 60px;
    background: white;
    position: relative;
}

.camera-action-btn.capture:hover[b-m7lt4fw6k3] {
    transform: scale(1.05);
}

.camera-action-btn.capture:disabled[b-m7lt4fw6k3] {
    opacity: 0.5;
    cursor: not-allowed;
}

.capture-ring[b-m7lt4fw6k3] {
    width: 48px;
    height: 48px;
    border: 3px solid #dc2626;
    border-radius: 50%;
}

.camera-action-btn:disabled[b-m7lt4fw6k3] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
/* Loading State */
.dashboard-loading[b-1uz5s83rhl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 1rem;
    color: var(--text-secondary);
}

.loading-spinner[b-1uz5s83rhl] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-1uz5s83rhl 1s linear infinite;
}

@keyframes spin-b-1uz5s83rhl {
    to {
        transform: rotate(360deg);
    }
}

/* Error State */
.dashboard-error[b-1uz5s83rhl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 1rem;
    padding: 2rem;
    text-align: center;
}

.dashboard-error .error-icon[b-1uz5s83rhl] {
    width: 48px;
    height: 48px;
    color: var(--danger);
}

.dashboard-error .error-icon svg[b-1uz5s83rhl] {
    width: 100%;
    height: 100%;
}

.dashboard-error p[b-1uz5s83rhl] {
    color: var(--text-secondary);
    max-width: 400px;
}

.retry-btn[b-1uz5s83rhl] {
    padding: 0.5rem 1rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background 0.2s;
}

.retry-btn:hover[b-1uz5s83rhl] {
    background: var(--primary-hover);
}

/* Out of sync status */
.sync-status.out-of-sync[b-1uz5s83rhl] {
    color: var(--warning);
}

.sync-status.out-of-sync .sync-status-dot[b-1uz5s83rhl] {
    background: var(--warning);
}

.sync-status.syncing[b-1uz5s83rhl] {
    color: var(--info);
}

.sync-status.syncing .sync-status-dot[b-1uz5s83rhl] {
    background: var(--info);
    animation: pulse-b-1uz5s83rhl 1s ease-in-out infinite;
}

@keyframes pulse-b-1uz5s83rhl {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Marketplace disconnected status */
.marketplace-status.disconnected[b-1uz5s83rhl] {
    background: var(--danger);
}
/* /Components/Pages/Documents/DocumentDesigner.razor.rz.scp.css */
/* ========================================
   Document Designer - Main Layout
   ======================================== */

.document-designer[b-v29atiykax] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px);
    overflow: hidden;
    background: var(--bg-primary);
}

/* ========================================
   Toolbar
   ======================================== */

.designer-toolbar[b-v29atiykax] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    gap: 16px;
    flex-shrink: 0;
    backdrop-filter: blur(20px);
}

.toolbar-left[b-v29atiykax],
.toolbar-center[b-v29atiykax],
.toolbar-right[b-v29atiykax] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toolbar-group[b-v29atiykax] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 12px;
    border-right: 1px solid var(--border);
}

.toolbar-group:last-child[b-v29atiykax] {
    border-right: none;
}

.template-name input[b-v29atiykax] {
    border: 1px solid transparent;
    background: transparent;
    padding: 8px 12px;
    font-size: 16px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    min-width: 200px;
    color: var(--text-primary);
    transition: var(--transition);
}

.template-name input:hover[b-v29atiykax] {
    background: var(--bg-input);
}

.template-name input:focus[b-v29atiykax] {
    border-color: var(--primary);
    background: var(--bg-input);
    outline: none;
}

.zoom-level[b-v29atiykax] {
    min-width: 50px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}

/* ========================================
   Icon Buttons
   ======================================== */

.btn-icon[b-v29atiykax] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text-secondary) !important;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-icon i[b-v29atiykax] {
    font-size: 18px;
    line-height: 1;
}

.btn-icon:hover[b-v29atiykax] {
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
}

.btn-icon.active[b-v29atiykax] {
    background: var(--primary-alpha) !important;
    color: var(--primary) !important;
}

.btn-icon:disabled[b-v29atiykax] {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-icon:disabled:hover[b-v29atiykax] {
    background: transparent !important;
    color: var(--text-secondary) !important;
}

/* ========================================
   Content Layout
   ======================================== */

.designer-content[b-v29atiykax] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ========================================
   Side Panels
   ======================================== */

.designer-panel[b-v29atiykax] {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    transition: width 0.2s ease;
    flex-shrink: 0;
}

.designer-panel.panel-left[b-v29atiykax] {
    width: 280px;
    border-right: 1px solid var(--border);
}

.designer-panel.panel-right[b-v29atiykax] {
    width: 320px;
    border-left: 1px solid var(--border);
}

.designer-panel.collapsed[b-v29atiykax] {
    width: 44px;
}

.panel-header[b-v29atiykax] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.panel-right .panel-header[b-v29atiykax] {
    flex-direction: row-reverse;
}

.panel-content[b-v29atiykax] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

/* ========================================
   Element Toolbox
   ======================================== */

.element-group[b-v29atiykax] {
    margin-bottom: 20px;
}

.group-header[b-v29atiykax] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.element-grid[b-v29atiykax] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.element-item[b-v29atiykax] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: grab;
    transition: all 0.15s ease;
    gap: 6px;
}

.element-item:hover[b-v29atiykax] {
    background: var(--bg-card-hover);
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.element-item:active[b-v29atiykax] {
    cursor: grabbing;
    transform: translateY(0);
}

.element-item i[b-v29atiykax] {
    font-size: 20px;
    color: var(--primary);
}

.element-item span[b-v29atiykax] {
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
}

/* ========================================
   Data Fields List
   ======================================== */

.data-fields[b-v29atiykax] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 200px;
    overflow-y: auto;
}

.data-field[b-v29atiykax] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: grab;
    font-size: 13px;
    transition: all 0.15s ease;
    color: var(--text-secondary);
}

.data-field:hover[b-v29atiykax] {
    background: var(--bg-card-hover);
    border-color: var(--primary);
    color: var(--text-primary);
}

.data-field i[b-v29atiykax] {
    color: var(--primary);
    font-size: 14px;
}

/* ========================================
   Canvas Container
   ======================================== */

.designer-canvas-container[b-v29atiykax] {
    flex: 1;
    overflow: auto;
    background: var(--bg-primary);
    background-image:
        radial-gradient(circle at 1px 1px, var(--border) 1px, transparent 0);
    background-size: 20px 20px;
    display: flex;
    justify-content: center;
    padding: 32px;
}

.canvas-wrapper[b-v29atiykax] {
    transform-origin: top center;
    transition: transform 0.2s ease;
}

.document-canvas[b-v29atiykax] {
    background: white;
    box-shadow: var(--shadow-card);
    position: relative;
    box-sizing: border-box;
}

.document-canvas.show-grid[b-v29atiykax] {
    background-image:
        linear-gradient(to right, rgba(0, 0, 0, 0.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.06) 1px, transparent 1px);
    background-size: 2.5mm 2.5mm;
}

/* Margin/Padding indicator */
.canvas-margin-indicator[b-v29atiykax] {
    position: absolute;
    border: 1px dashed rgba(59, 130, 246, 0.4);
    background: rgba(59, 130, 246, 0.03);
    pointer-events: none;
    z-index: 0;
}

/* Content area where elements are placed */
.canvas-content[b-v29atiykax] {
    position: absolute;
    z-index: 1;
}

/* ========================================
   Canvas Elements
   ======================================== */

.canvas-element[b-v29atiykax] {
    position: absolute;
    cursor: move;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: hidden;
    transition: outline 0.1s ease;
}

.canvas-element:hover[b-v29atiykax] {
    outline: 1px dashed var(--primary);
    outline-offset: 1px;
}

.canvas-element.selected[b-v29atiykax] {
    outline: 2px solid var(--primary);
    outline-offset: 0;
}

.canvas-element.locked[b-v29atiykax] {
    cursor: not-allowed;
    opacity: 0.6;
}

/* ========================================
   Element Content Styles
   ======================================== */

.element-text[b-v29atiykax] {
    width: 100%;
    height: 100%;
    word-wrap: break-word;
    overflow: hidden;
    color: #000;
}

.element-barcode[b-v29atiykax],
.element-qrcode[b-v29atiykax],
.element-image[b-v29atiykax],
.element-table[b-v29atiykax] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    color: #64748b;
    font-size: 12px;
    gap: 4px;
}

.element-barcode i[b-v29atiykax],
.element-qrcode i[b-v29atiykax],
.element-image i[b-v29atiykax],
.element-table i[b-v29atiykax] {
    font-size: 24px;
    opacity: 0.7;
}

.element-datetime[b-v29atiykax],
.element-pagenum[b-v29atiykax] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 13px;
    color: #000;
}

.element-line[b-v29atiykax] {
    width: 100%;
    height: 100%;
    background: #000;
}

/* ========================================
   Resize Handles
   ======================================== */

.resize-handle[b-v29atiykax] {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--primary);
    border: 2px solid white;
    border-radius: 50%;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.resize-handle.nw[b-v29atiykax] { top: -5px; left: -5px; cursor: nwse-resize; }
.resize-handle.n[b-v29atiykax] { top: -5px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.resize-handle.ne[b-v29atiykax] { top: -5px; right: -5px; cursor: nesw-resize; }
.resize-handle.e[b-v29atiykax] { top: 50%; right: -5px; transform: translateY(-50%); cursor: ew-resize; }
.resize-handle.se[b-v29atiykax] { bottom: -5px; right: -5px; cursor: nwse-resize; }
.resize-handle.s[b-v29atiykax] { bottom: -5px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.resize-handle.sw[b-v29atiykax] { bottom: -5px; left: -5px; cursor: nesw-resize; }
.resize-handle.w[b-v29atiykax] { top: 50%; left: -5px; transform: translateY(-50%); cursor: ew-resize; }

/* ========================================
   Preview Modal
   ======================================== */

.preview-iframe[b-v29atiykax] {
    width: 100%;
    height: 600px;
    border: none;
    background: #f5f5f5;
    border-radius: var(--radius-sm);
}

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

@media (max-width: 1400px) {
    .designer-panel.panel-left[b-v29atiykax] {
        width: 250px;
    }

    .designer-panel.panel-right[b-v29atiykax] {
        width: 280px;
    }
}

@media (max-width: 1200px) {
    .designer-panel.panel-left[b-v29atiykax] {
        width: 220px;
    }

    .designer-panel.panel-right[b-v29atiykax] {
        width: 260px;
    }

    .element-grid[b-v29atiykax] {
        grid-template-columns: 1fr;
    }
}

/* Tablet */
@media (max-width: 1024px) {
    .designer-toolbar[b-v29atiykax] {
        padding: 8px 12px;
        gap: 8px;
    }

    .toolbar-group[b-v29atiykax] {
        padding: 0 8px;
    }

    .template-name input[b-v29atiykax] {
        min-width: 140px;
        font-size: 14px;
        padding: 6px 10px;
    }

    .zoom-level[b-v29atiykax] {
        font-size: 12px;
        min-width: 40px;
    }

    /* Toolbar buttons - hide text, keep icons */
    .toolbar-right .btn[b-v29atiykax] {
        font-size: 0;
        padding: 8px;
        gap: 0;
    }

    .toolbar-right .btn i[b-v29atiykax] {
        font-size: 16px;
    }

    /* Panels - overlay mode */
    .designer-panel.panel-left[b-v29atiykax] {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 50;
        width: 240px;
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.15);
    }

    .designer-panel.panel-right[b-v29atiykax] {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 50;
        width: 260px;
        box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
    }

    .designer-panel.collapsed[b-v29atiykax] {
        width: 40px;
        box-shadow: none;
    }

    .designer-content[b-v29atiykax] {
        position: relative;
    }

    .panel-content[b-v29atiykax] {
        padding: 12px;
    }

    .element-item[b-v29atiykax] {
        padding: 10px 6px;
    }

    .element-item i[b-v29atiykax] {
        font-size: 18px;
    }

    .element-item span[b-v29atiykax] {
        font-size: 11px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .document-designer[b-v29atiykax] {
        height: calc(100vh - 73px);
    }

    .designer-toolbar[b-v29atiykax] {
        padding: 6px 10px;
        gap: 6px;
        flex-wrap: wrap;
    }

    .toolbar-left[b-v29atiykax] {
        order: 1;
        flex: 1;
    }

    .toolbar-center[b-v29atiykax] {
        order: 3;
        width: 100%;
        justify-content: center;
        padding-top: 4px;
        border-top: 1px solid var(--border);
    }

    .toolbar-right[b-v29atiykax] {
        order: 2;
    }

    .toolbar-group[b-v29atiykax] {
        padding: 0 6px;
    }

    .template-name input[b-v29atiykax] {
        min-width: 100px;
        font-size: 13px;
        padding: 6px 8px;
    }

    .btn-icon[b-v29atiykax] {
        width: 32px !important;
        height: 32px !important;
    }

    .btn-icon i[b-v29atiykax] {
        font-size: 16px;
    }

    .zoom-level[b-v29atiykax] {
        font-size: 11px;
    }

    /* Toolbar save/preview - icon only */
    .toolbar-right .btn[b-v29atiykax] {
        font-size: 0;
        padding: 6px 8px;
        gap: 0;
    }

    .toolbar-right .btn i[b-v29atiykax] {
        font-size: 14px;
    }

    /* Panels - overlay with smaller size */
    .designer-panel.panel-left[b-v29atiykax] {
        width: 220px;
    }

    .designer-panel.panel-right[b-v29atiykax] {
        width: 240px;
    }

    .designer-panel.collapsed[b-v29atiykax] {
        width: 36px;
    }

    .panel-header[b-v29atiykax] {
        padding: 8px 10px;
        font-size: 13px;
    }

    .panel-content[b-v29atiykax] {
        padding: 10px;
    }

    .element-grid[b-v29atiykax] {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .element-item[b-v29atiykax] {
        flex-direction: row;
        padding: 8px 10px;
        gap: 8px;
    }

    .element-item i[b-v29atiykax] {
        font-size: 16px;
    }

    .element-item span[b-v29atiykax] {
        font-size: 12px;
    }

    .data-field[b-v29atiykax] {
        padding: 6px 10px;
        font-size: 12px;
    }

    .group-header[b-v29atiykax] {
        font-size: 10px;
        margin-bottom: 6px;
    }

    /* Canvas touch improvements */
    .resize-handle[b-v29atiykax] {
        width: 12px;
        height: 12px;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .designer-toolbar[b-v29atiykax] {
        padding: 4px 8px;
    }

    .template-name input[b-v29atiykax] {
        min-width: 80px;
        font-size: 12px;
    }

    .toolbar-group[b-v29atiykax] {
        padding: 0 4px;
    }

    .btn-icon[b-v29atiykax] {
        width: 28px !important;
        height: 28px !important;
    }

    .btn-icon i[b-v29atiykax] {
        font-size: 14px;
    }

    .designer-panel.panel-left[b-v29atiykax] {
        width: 200px;
    }

    .designer-panel.panel-right[b-v29atiykax] {
        width: 220px;
    }

    .designer-panel.collapsed[b-v29atiykax] {
        width: 32px;
    }

    .resize-handle[b-v29atiykax] {
        width: 14px;
        height: 14px;
    }
}
/* /Components/Pages/Documents/DocumentElementProperties.razor.rz.scp.css */
/* ========================================
   Properties Panel - Common Styles
   ======================================== */

.element-properties[b-gx4jrvump0],
.template-properties[b-gx4jrvump0] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ========================================
   Property Sections
   ======================================== */

.property-section[b-gx4jrvump0] {
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    padding: 14px;
}

.section-header[b-gx4jrvump0] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

/* ========================================
   Property Rows
   ======================================== */

.property-row[b-gx4jrvump0] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.property-row:last-child[b-gx4jrvump0] {
    margin-bottom: 0;
}

.property-row label[b-gx4jrvump0] {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

/* ========================================
   Form Controls
   ======================================== */

.property-row input[type="text"][b-gx4jrvump0],
.property-row input[type="number"][b-gx4jrvump0],
.property-row select[b-gx4jrvump0],
.property-row textarea[b-gx4jrvump0] {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    transition: all 0.15s ease;
    width: 100%;
    box-sizing: border-box;
}

.property-row input[type="number"][b-gx4jrvump0] {
    -moz-appearance: textfield;
}

.property-row input[type="number"][b-gx4jrvump0]::-webkit-outer-spin-button,
.property-row input[type="number"][b-gx4jrvump0]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.property-row input:hover[b-gx4jrvump0],
.property-row select:hover[b-gx4jrvump0],
.property-row textarea:hover[b-gx4jrvump0] {
    border-color: var(--border-hover);
}

.property-row input:focus[b-gx4jrvump0],
.property-row select:focus[b-gx4jrvump0],
.property-row textarea:focus[b-gx4jrvump0] {
    outline: none;
    border-color: var(--primary);
}

.property-row input[type="checkbox"][b-gx4jrvump0] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    cursor: pointer;
}

.property-row input[type="color"][b-gx4jrvump0] {
    width: 100%;
    height: 36px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: var(--bg-secondary);
}

.property-row textarea[b-gx4jrvump0] {
    resize: vertical;
    min-height: 60px;
}

/* ========================================
   Property Grid Layout
   ======================================== */

.property-grid[b-gx4jrvump0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.property-grid .property-row[b-gx4jrvump0] {
    min-width: 0;
    overflow: hidden;
}

.property-grid .property-row label[b-gx4jrvump0] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    font-size: 11px;
}

.property-grid .property-row input[type="number"][b-gx4jrvump0] {
    width: 100%;
    min-width: 0;
}

/* ========================================
   Inline Checkboxes
   ======================================== */

.inline-checkboxes[b-gx4jrvump0] {
    flex-direction: row !important;
    gap: 16px !important;
}

.inline-checkboxes label[b-gx4jrvump0] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 13px;
}

/* ========================================
   Color Input
   ======================================== */

.color-input[b-gx4jrvump0] {
    display: flex;
    gap: 6px;
}

.color-input input[type="text"][b-gx4jrvump0] {
    flex: 1;
    min-width: 0;
}

.color-input input[type="color"][b-gx4jrvump0] {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.btn-clear[b-gx4jrvump0] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.btn-clear:hover[b-gx4jrvump0] {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

/* ========================================
   Property Actions
   ======================================== */

.property-actions[b-gx4jrvump0] {
    padding-top: 12px;
    border-top: 1px solid var(--border);
    margin-top: 8px;
    display: flex;
    gap: 8px;
}

/* ========================================
   Orientation Buttons
   ======================================== */

.orientation-buttons[b-gx4jrvump0] {
    display: flex;
    gap: 8px;
}

.orientation-buttons button[b-gx4jrvump0] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 12px;
    color: var(--text-secondary);
    transition: all 0.15s ease;
}

.orientation-buttons button:hover[b-gx4jrvump0] {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.orientation-buttons button.active[b-gx4jrvump0] {
    border-color: var(--primary);
    background: var(--primary-alpha);
    color: var(--primary);
}

.orientation-buttons button i[b-gx4jrvump0] {
    font-size: 20px;
}

/* ========================================
   Margin Control
   ======================================== */

.margin-control[b-gx4jrvump0] {
    display: flex;
    justify-content: center;
}

.margin-preview[b-gx4jrvump0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 160px;
}

.margin-preview input[b-gx4jrvump0] {
    width: 48px;
    text-align: center;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.margin-preview input:focus[b-gx4jrvump0] {
    outline: none;
    border-color: var(--primary);
}

.margin-middle[b-gx4jrvump0] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.margin-center[b-gx4jrvump0] {
    flex: 1;
    height: 50px;
    background: var(--bg-secondary);
    border: 2px dashed var(--border);
    border-radius: var(--radius-sm);
}
/* /Components/Pages/Documents/DocumentTemplateProperties.razor.rz.scp.css */
/* ========================================
   Template Properties Panel
   ======================================== */

.template-properties[b-nksfs9u2id] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ========================================
   Property Sections
   ======================================== */

.property-section[b-nksfs9u2id] {
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    padding: 14px;
}

.section-header[b-nksfs9u2id] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

/* ========================================
   Property Rows
   ======================================== */

.property-row[b-nksfs9u2id] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.property-row:last-child[b-nksfs9u2id] {
    margin-bottom: 0;
}

.property-row label[b-nksfs9u2id] {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

/* ========================================
   Form Controls
   ======================================== */

.property-row input[type="text"][b-nksfs9u2id],
.property-row input[type="number"][b-nksfs9u2id],
.property-row select[b-nksfs9u2id],
.property-row textarea[b-nksfs9u2id] {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    transition: all 0.15s ease;
    width: 100%;
}

.property-row input:hover[b-nksfs9u2id],
.property-row select:hover[b-nksfs9u2id],
.property-row textarea:hover[b-nksfs9u2id] {
    border-color: var(--border-hover);
}

.property-row input:focus[b-nksfs9u2id],
.property-row select:focus[b-nksfs9u2id],
.property-row textarea:focus[b-nksfs9u2id] {
    outline: none;
    border-color: var(--primary);
}

.property-row input[type="checkbox"][b-nksfs9u2id] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    cursor: pointer;
}

.property-row textarea[b-nksfs9u2id] {
    resize: vertical;
    min-height: 60px;
}

.property-row select optgroup[b-nksfs9u2id] {
    font-weight: 600;
    color: var(--text-primary);
}

.property-row select option[b-nksfs9u2id] {
    padding: 8px;
}

/* ========================================
   Property Grid Layout
   ======================================== */

.property-grid[b-nksfs9u2id] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.property-grid .property-row[b-nksfs9u2id] {
    margin-bottom: 0;
}

/* ========================================
   Orientation Buttons
   ======================================== */

.orientation-buttons[b-nksfs9u2id] {
    display: flex;
    gap: 8px;
}

.orientation-buttons button[b-nksfs9u2id] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 12px;
    color: var(--text-secondary);
    transition: all 0.15s ease;
}

.orientation-buttons button:hover[b-nksfs9u2id] {
    background: var(--bg-card-hover);
    color: var(--text-primary);
    border-color: var(--border-hover);
}

.orientation-buttons button.active[b-nksfs9u2id] {
    border-color: var(--primary);
    background: var(--primary-alpha);
    color: var(--primary);
}

.orientation-buttons button i[b-nksfs9u2id] {
    font-size: 20px;
}

/* ========================================
   Margin Control
   ======================================== */

.margin-control[b-nksfs9u2id] {
    display: flex;
    justify-content: center;
}

.margin-preview[b-nksfs9u2id] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 180px;
}

.margin-top[b-nksfs9u2id],
.margin-bottom[b-nksfs9u2id] {
    display: flex;
    justify-content: center;
}

.margin-left[b-nksfs9u2id],
.margin-right[b-nksfs9u2id] {
    display: flex;
    align-items: center;
}

.margin-preview input[type="number"][b-nksfs9u2id] {
    width: 52px;
    text-align: center;
    padding: 6px 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    -moz-appearance: textfield;
}

.margin-preview input[type="number"][b-nksfs9u2id]::-webkit-outer-spin-button,
.margin-preview input[type="number"][b-nksfs9u2id]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.margin-preview input:focus[b-nksfs9u2id] {
    outline: none;
    border-color: var(--primary);
}

.margin-middle[b-nksfs9u2id] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.margin-center[b-nksfs9u2id] {
    flex: 1;
    height: 50px;
    background: var(--bg-secondary);
    border: 2px dashed var(--border);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.margin-center[b-nksfs9u2id]::after {
    content: '';
    width: 24px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 2px;
    background: var(--bg-card);
}
/* /Components/Pages/Documents/DocumentTemplates.razor.rz.scp.css */
/* Template Name Cell */
.template-name-cell[b-zzoo9xa4y8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.template-type-icon[b-zzoo9xa4y8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
}

.template-type-icon.icon-cargo[b-zzoo9xa4y8] { background: rgba(251, 191, 36, 0.15); color: #f59e0b; }
.template-type-icon.icon-invoice[b-zzoo9xa4y8] { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.template-type-icon.icon-waybill[b-zzoo9xa4y8] { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.template-type-icon.icon-packing[b-zzoo9xa4y8] { background: rgba(99, 102, 241, 0.15); color: #6366f1; }
.template-type-icon.icon-product[b-zzoo9xa4y8] { background: rgba(236, 72, 153, 0.15); color: #ec4899; }
.template-type-icon.icon-shelf[b-zzoo9xa4y8] { background: rgba(168, 85, 247, 0.15); color: #a855f7; }
.template-type-icon.icon-report[b-zzoo9xa4y8] { background: rgba(100, 116, 139, 0.15); color: #64748b; }
.template-type-icon.icon-picking-order[b-zzoo9xa4y8] { background: rgba(14, 165, 233, 0.15); color: #0ea5e9; }
.template-type-icon.icon-picking-product[b-zzoo9xa4y8] { background: rgba(20, 184, 166, 0.15); color: #14b8a6; }

.template-info[b-zzoo9xa4y8] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.template-name[b-zzoo9xa4y8] {
    font-weight: 500;
}

/* Type Badge */
.type-badge[b-zzoo9xa4y8] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.type-badge.type-cargo[b-zzoo9xa4y8] { background: rgba(251, 191, 36, 0.15); color: #f59e0b; }
.type-badge.type-invoice[b-zzoo9xa4y8] { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.type-badge.type-waybill[b-zzoo9xa4y8] { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.type-badge.type-packing[b-zzoo9xa4y8] { background: rgba(99, 102, 241, 0.15); color: #6366f1; }
.type-badge.type-product[b-zzoo9xa4y8] { background: rgba(236, 72, 153, 0.15); color: #ec4899; }
.type-badge.type-shelf[b-zzoo9xa4y8] { background: rgba(168, 85, 247, 0.15); color: #a855f7; }
.type-badge.type-report[b-zzoo9xa4y8] { background: rgba(100, 116, 139, 0.15); color: #64748b; }
.type-badge.type-picking-order[b-zzoo9xa4y8] { background: rgba(14, 165, 233, 0.15); color: #0ea5e9; }
.type-badge.type-picking-product[b-zzoo9xa4y8] { background: rgba(20, 184, 166, 0.15); color: #14b8a6; }

/* System Badge */
.system-badge[b-zzoo9xa4y8] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.625rem;
    font-weight: 600;
    background: var(--info);
    color: white;
    text-transform: uppercase;
}

/* Default Badge */
.default-badge[b-zzoo9xa4y8] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--success);
    color: white;
}

/* Action Buttons */
.action-buttons[b-zzoo9xa4y8] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.btn-icon[b-zzoo9xa4y8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-icon:hover[b-zzoo9xa4y8] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Modal Loading */
.modal-loading[b-zzoo9xa4y8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    gap: 1rem;
}

.spinner[b-zzoo9xa4y8] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-zzoo9xa4y8 0.8s linear infinite;
}

@keyframes spin-b-zzoo9xa4y8 {
    to { transform: rotate(360deg); }
}

/* Error Message */
.error-message[b-zzoo9xa4y8] {
    padding: 0.75rem 1rem;
    margin-top: 1rem;
    border-radius: 6px;
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
    font-size: 0.875rem;
}

/* Responsive */
@media (max-width: 768px) {
    .template-name-cell[b-zzoo9xa4y8] {
        gap: 0.5rem;
    }

    .template-type-icon[b-zzoo9xa4y8] {
        width: 28px;
        height: 28px;
        border-radius: 6px;
    }

    .template-name[b-zzoo9xa4y8] {
        font-size: 13px;
    }

    .type-badge[b-zzoo9xa4y8] {
        font-size: 0.688rem;
        padding: 0.188rem 0.375rem;
    }

    .system-badge[b-zzoo9xa4y8] {
        font-size: 0.563rem;
    }

    .default-badge[b-zzoo9xa4y8] {
        font-size: 0.688rem;
        padding: 0.188rem 0.375rem;
    }

    .action-buttons[b-zzoo9xa4y8] {
        gap: 0.125rem;
    }

    .btn-icon[b-zzoo9xa4y8] {
        width: 28px;
        height: 28px;
    }

    .btn-icon svg[b-zzoo9xa4y8] {
        width: 14px;
        height: 14px;
    }

    .form-row[b-zzoo9xa4y8] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .template-type-icon[b-zzoo9xa4y8] {
        width: 24px;
        height: 24px;
    }

    .template-name[b-zzoo9xa4y8] {
        font-size: 12px;
    }

    .type-badge[b-zzoo9xa4y8] {
        font-size: 0.625rem;
    }

    .btn-icon[b-zzoo9xa4y8] {
        width: 26px;
        height: 26px;
    }
}
/* /Components/Pages/Erp/ErpConnection.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   COMPANY SELECTOR
   ═══════════════════════════════════════════════════════════════ */
.company-selector[b-l0g8057dld] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--bg-secondary);
    border-radius: 12px;
    margin-bottom: 20px;
}

.company-selector-label[b-l0g8057dld] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.company-selector-label svg[b-l0g8057dld] {
    color: var(--primary);
}

/* ═══════════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════════ */
.empty-state[b-l0g8057dld] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.empty-state-icon[b-l0g8057dld] {
    color: var(--text-secondary);
    opacity: 0.4;
    margin-bottom: 16px;
}

.empty-state h3[b-l0g8057dld] {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.empty-state p[b-l0g8057dld] {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
    max-width: 400px;
}

/* ═══════════════════════════════════════════════════════════════
   LOADING
   ═══════════════════════════════════════════════════════════════ */
.loading-container[b-l0g8057dld] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD STATS (Products.razor pattern)
   ═══════════════════════════════════════════════════════════════ */
.stats-grid[b-l0g8057dld] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.stat-card[b-l0g8057dld] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--bg-secondary);
    border-radius: 12px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.stat-card:hover[b-l0g8057dld] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.stat-icon[b-l0g8057dld] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    flex-shrink: 0;
}

.stat-icon.blue[b-l0g8057dld] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.stat-icon.green[b-l0g8057dld] {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.stat-icon.red[b-l0g8057dld] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.stat-icon.purple[b-l0g8057dld] {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.stat-icon.orange[b-l0g8057dld] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.stat-icon.gray[b-l0g8057dld] {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

.stat-content h3[b-l0g8057dld] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.stat-content p[b-l0g8057dld] {
    margin: 4px 0 0 0;
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.last-sync-input[b-l0g8057dld] {
    background: transparent;
    border: 1px solid var(--border-color, #d0d5dd);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    font-family: inherit;
    width: 100%;
    max-width: 200px;
}

.last-sync-input:focus[b-l0g8057dld] {
    outline: none;
    border-color: var(--accent-color, #6366f1);
}

.last-sync-reset[b-l0g8057dld] {
    margin-left: 6px;
    color: var(--accent-color, #6366f1);
    font-size: 11px;
    text-transform: none;
    letter-spacing: normal;
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════
   ERROR ALERT (Top-level, prominent)
   ═══════════════════════════════════════════════════════════════ */
.error-alert[b-l0g8057dld] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.04));
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-left: 4px solid #ef4444;
    border-radius: 12px;
    margin-bottom: 20px;
    animation: errorSlideIn-b-l0g8057dld 0.3s ease-out;
}

@keyframes errorSlideIn-b-l0g8057dld {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.error-alert-icon[b-l0g8057dld] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 68, 68, 0.12);
    border-radius: 10px;
    color: #ef4444;
    flex-shrink: 0;
}

.error-alert-content[b-l0g8057dld] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.error-alert-title[b-l0g8057dld] {
    font-size: 14px;
    font-weight: 700;
    color: #dc2626;
    letter-spacing: 0.2px;
}

.error-alert-message[b-l0g8057dld] {
    font-size: 13px;
    color: var(--danger, #ef4444);
    line-height: 1.5;
    word-break: break-word;
}

.error-alert-close[b-l0g8057dld] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: rgba(239, 68, 68, 0.5);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.error-alert-close:hover[b-l0g8057dld] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* ═══════════════════════════════════════════════════════════════
   ERROR BANNER (Last connection error, inline)
   ═══════════════════════════════════════════════════════════════ */
.error-banner[b-l0g8057dld] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.18);
    border-left: 3px solid rgba(239, 68, 68, 0.5);
    border-radius: 10px;
    margin-bottom: 20px;
}

.error-banner-icon[b-l0g8057dld] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 68, 68, 0.08);
    border-radius: 8px;
    color: var(--danger, #ef4444);
    flex-shrink: 0;
}

.error-banner-content[b-l0g8057dld] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.error-banner-title[b-l0g8057dld] {
    font-size: 12px;
    font-weight: 600;
    color: var(--danger, #ef4444);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.error-banner-message[b-l0g8057dld] {
    font-size: 13px;
    color: var(--danger, #ef4444);
    line-height: 1.4;
    word-break: break-word;
    opacity: 0.85;
}

/* Warning Banner */
.warning-banner[b-l0g8057dld] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(245, 158, 11, 0.05);
    border: 1px solid rgba(245, 158, 11, 0.18);
    border-left: 3px solid rgba(245, 158, 11, 0.5);
    border-radius: 10px;
    margin-bottom: 20px;
}

.warning-banner.clickable[b-l0g8057dld] {
    cursor: pointer;
    transition: all 0.2s ease;
}

.warning-banner.clickable:hover[b-l0g8057dld] {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.3);
}

.warning-banner-icon[b-l0g8057dld] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 158, 11, 0.08);
    border-radius: 8px;
    color: #f59e0b;
    flex-shrink: 0;
}

.warning-banner-content[b-l0g8057dld] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.warning-banner-title[b-l0g8057dld] {
    font-size: 12px;
    font-weight: 600;
    color: #f59e0b;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.warning-banner-message[b-l0g8057dld] {
    font-size: 13px;
    color: #f59e0b;
    line-height: 1.4;
    word-break: break-word;
    opacity: 0.85;
}

.warning-banner-action[b-l0g8057dld] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #f59e0b;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   FORM SECTIONS
   ═══════════════════════════════════════════════════════════════ */
.form-section[b-l0g8057dld] {
    margin-bottom: 20px;
    padding: 20px;
    background: var(--bg-secondary);
    border-radius: 12px;
}

.form-section-header[b-l0g8057dld] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
}

.form-section-icon[b-l0g8057dld] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    border-radius: 10px;
    color: var(--primary);
    flex-shrink: 0;
}

.form-section-icon svg[b-l0g8057dld] {
    width: 20px;
    height: 20px;
}

.form-section-title[b-l0g8057dld] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.form-section-subtitle[b-l0g8057dld] {
    margin: 4px 0 0 0;
    font-size: 13px;
    color: var(--text-secondary);
}

/* Form row */
.form-row[b-l0g8057dld] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* ═══════════════════════════════════════════════════════════════
   CREDENTIAL GROUPS
   ═══════════════════════════════════════════════════════════════ */
.credential-group[b-l0g8057dld] {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 16px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.credential-group:last-child[b-l0g8057dld] {
    margin-bottom: 0;
}

.credential-group:hover[b-l0g8057dld] {
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.06);
}

.credential-group-header[b-l0g8057dld] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.credential-group-icon[b-l0g8057dld] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    flex-shrink: 0;
}

.credential-group-icon.server[b-l0g8057dld] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.credential-group-icon.auth[b-l0g8057dld] {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.credential-group-icon.office[b-l0g8057dld] {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.credential-group-icon.export[b-l0g8057dld] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.credential-group-icon.store[b-l0g8057dld] {
    background: rgba(236, 72, 153, 0.1);
    color: #ec4899;
}

.credential-group-icon.default[b-l0g8057dld] {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

.credential-group-title[b-l0g8057dld] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.credential-group-fields[b-l0g8057dld] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Yan yana iki grup container'ı (Kimlik Bilgileri + Ofis/Mağaza). */
.credential-groups-grid[b-l0g8057dld] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

.credential-groups-grid > .credential-group[b-l0g8057dld] {
    margin-bottom: 0;
}

/* Yan yana grupların içindeki input'lar alt alta dizilir. */
.credential-group-fields.stacked[b-l0g8057dld] {
    grid-template-columns: 1fr;
}

/* Disabled form group (örn. Kredi Kartı Tipi — Ödeme Tipi != "2" iken) */
.form-group-disabled[b-l0g8057dld] {
    opacity: 0.55;
}

.form-group-disabled label[b-l0g8057dld] {
    color: var(--text-secondary);
}

.form-help-inline[b-l0g8057dld] {
    margin-left: 8px;
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 400;
}

.store-platform-badge[b-l0g8057dld] {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(99, 102, 241, 0.08);
    color: var(--primary);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.store-params-list[b-l0g8057dld] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ═══════════════════════════════════════════════════════════════
   EXPORT PARAMETERS
   ═══════════════════════════════════════════════════════════════ */
.export-icon[b-l0g8057dld] {
    background: rgba(245, 158, 11, 0.1) !important;
    color: #f59e0b !important;
}

.export-params-grid[b-l0g8057dld] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Subsection title */
.subsection-title[b-l0g8057dld] {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Sync options */
.sync-options[b-l0g8057dld] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sync-flags[b-l0g8057dld] {
    margin-bottom: 24px;
}

/* Intervals grid */
.intervals-grid[b-l0g8057dld] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.input-with-suffix[b-l0g8057dld] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.input-with-suffix .form-input[b-l0g8057dld] {
    flex: 1;
}

.input-suffix[b-l0g8057dld] {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Credential status */
.credential-status[b-l0g8057dld] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 6px;
    color: var(--success);
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 6px;
}

.credential-status svg[b-l0g8057dld] {
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   TRANSFER TYPE MAPPINGS
   ═══════════════════════════════════════════════════════════════ */
.transfer-type-section[b-l0g8057dld] {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.subsection-desc[b-l0g8057dld] {
    margin: 0 0 16px 0;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.transfer-type-cards[b-l0g8057dld] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.transfer-type-card[b-l0g8057dld] {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.transfer-type-card:hover[b-l0g8057dld] {
    border-color: rgba(99, 102, 241, 0.25);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.05);
}

.transfer-type-header[b-l0g8057dld] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.transfer-type-icon[b-l0g8057dld] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    flex-shrink: 0;
}

.transfer-type-icon.retail[b-l0g8057dld] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.transfer-type-icon.micro-export[b-l0g8057dld] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.transfer-type-icon.wholesale[b-l0g8057dld] {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.transfer-type-info[b-l0g8057dld] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.transfer-type-name[b-l0g8057dld] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.transfer-type-desc[b-l0g8057dld] {
    font-size: 11px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.transfer-type-selector[b-l0g8057dld] {
    display: flex;
    gap: 8px;
}

.transfer-btn[b-l0g8057dld] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.transfer-btn:hover[b-l0g8057dld] {
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

.transfer-btn.active.order[b-l0g8057dld] {
    background: rgba(59, 130, 246, 0.08);
    border-color: #3b82f6;
    color: #3b82f6;
    font-weight: 600;
}

.transfer-btn.active.invoice[b-l0g8057dld] {
    background: rgba(245, 158, 11, 0.08);
    border-color: #f59e0b;
    color: #f59e0b;
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   SYNC ACTION CARDS
   ═══════════════════════════════════════════════════════════════ */
.sync-actions-grid[b-l0g8057dld] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.sync-action-card[b-l0g8057dld] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.sync-action-card:hover:not(:disabled)[b-l0g8057dld] {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.04);
    transform: translateY(-1px);
}

.sync-action-card:disabled[b-l0g8057dld] {
    opacity: 0.5;
    cursor: not-allowed;
}

.sync-action-icon[b-l0g8057dld] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.sync-action-icon.products[b-l0g8057dld] {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
}

.sync-action-icon.stock[b-l0g8057dld] {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.sync-action-icon.prices[b-l0g8057dld] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.sync-action-icon.orders[b-l0g8057dld] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.sync-action-icon.images[b-l0g8057dld] {
    background: rgba(168, 85, 247, 0.1);
    color: #a855f7;
}

.log-records-stack[b-l0g8057dld] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.3;
}

.sync-action-title[b-l0g8057dld] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   SYNC LOGS TABLE
   ═══════════════════════════════════════════════════════════════ */
.sync-logs-filters[b-l0g8057dld] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.sync-logs-filter[b-l0g8057dld] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 220px;
}

.sync-logs-filter > label[b-l0g8057dld] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sync-logs-filter-select[b-l0g8057dld] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
    background: var(--bg, #fff);
    font-size: 0.875rem;
    cursor: pointer;
    transition: border-color 120ms ease;
}

.sync-logs-filter-select:hover[b-l0g8057dld],
.sync-logs-filter-select:focus[b-l0g8057dld] {
    border-color: var(--primary, #2563eb);
    outline: none;
}

.sync-logs-table[b-l0g8057dld] {
    overflow-x: auto;
}

.sync-logs-table table[b-l0g8057dld] {
    width: 100%;
    border-collapse: collapse;
}

.sync-logs-table th[b-l0g8057dld] {
    padding: 10px 12px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border);
}

.sync-logs-table td[b-l0g8057dld] {
    padding: 10px 12px;
    font-size: 13px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
}

.sync-logs-table tbody tr:last-child td[b-l0g8057dld] {
    border-bottom: none;
}

.log-type-badge[b-l0g8057dld] {
    display: inline-block;
    padding: 3px 8px;
    background: var(--bg-primary);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

.log-direction[b-l0g8057dld] {
    font-size: 12px;
    color: var(--text-secondary);
}

.log-status[b-l0g8057dld] {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.log-status.success[b-l0g8057dld] {
    background: rgba(34, 197, 94, 0.1);
    color: var(--success, #22c55e);
}

.log-status.error[b-l0g8057dld] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger, #ef4444);
}

.log-status.warning[b-l0g8057dld] {
    background: rgba(245, 158, 11, 0.12);
    color: var(--warning, #b45309);
}

.log-skipped-btn[b-l0g8057dld] {
    background: rgba(245, 158, 11, 0.10);
    color: var(--warning, #b45309);
    border: 1px solid rgba(245, 158, 11, 0.3);
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms;
}
.log-skipped-btn:hover[b-l0g8057dld] {
    background: rgba(245, 158, 11, 0.18);
}

.log-records[b-l0g8057dld] {
    font-size: 13px;
}

.code-badge[b-l0g8057dld] {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
    font-size: 12px;
    background: var(--bg-secondary, #f3f4f6);
    padding: 2px 6px;
    border-radius: 3px;
}

.muted[b-l0g8057dld] {
    color: var(--text-secondary);
    font-size: 13px;
}

.empty-lines[b-l0g8057dld] {
    padding: 24px;
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
}

.log-error-count[b-l0g8057dld] {
    color: var(--danger, #ef4444);
    font-size: 12px;
}

.log-error-msg[b-l0g8057dld] {
    font-size: 12px;
    color: var(--danger, #ef4444);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.date-text[b-l0g8057dld] {
    font-size: 13px;
    color: var(--text-secondary);
}

.text-muted[b-l0g8057dld] {
    color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════
   ATLANANLAR MODAL TABLE
   ═══════════════════════════════════════════════════════════════ */

[b-l0g8057dld] .skipped-table-wrapper {
    max-height: 70vh;
    overflow: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

[b-l0g8057dld] .skipped-table {
    width: 100%;
    table-layout: fixed;
}

[b-l0g8057dld] .skipped-table th,
[b-l0g8057dld] .skipped-table td {
    word-break: break-word;
    white-space: normal;
    vertical-align: top;
}

[b-l0g8057dld] .skipped-table th:nth-child(1),
[b-l0g8057dld] .skipped-table td:nth-child(1) {
    width: 110px;
}

[b-l0g8057dld] .skipped-table th:nth-child(2),
[b-l0g8057dld] .skipped-table td:nth-child(2) {
    width: 160px;
}

[b-l0g8057dld] .skipped-table th:nth-child(3),
[b-l0g8057dld] .skipped-table td:nth-child(3) {
    width: 28%;
}

[b-l0g8057dld] .skipped-table th:nth-child(4),
[b-l0g8057dld] .skipped-table td:nth-child(4) {
    width: 160px;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

/* Tablet */
@media (max-width: 1024px) {
    .stats-grid[b-l0g8057dld] {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 16px;
    }

    .stat-card[b-l0g8057dld] {
        padding: 16px;
    }

    .stat-card:hover[b-l0g8057dld] {
        transform: none;
    }

    .stat-icon[b-l0g8057dld] {
        width: 42px;
        height: 42px;
    }

    .stat-content h3[b-l0g8057dld] {
        font-size: 14px;
    }

    /* Company selector */
    .company-selector[b-l0g8057dld] {
        padding: 14px 16px;
        gap: 12px;
    }

    /* Form sections */
    .form-section[b-l0g8057dld] {
        padding: 16px;
    }

    .form-section-header[b-l0g8057dld] {
        margin-bottom: 16px;
    }

    .form-section-icon[b-l0g8057dld] {
        width: 36px;
        height: 36px;
    }

    .form-section-title[b-l0g8057dld] {
        font-size: 15px;
    }

    /* Transfer type cards */
    .transfer-type-cards[b-l0g8057dld] {
        grid-template-columns: 1fr 1fr;
    }

    /* Sync actions */
    .sync-actions-grid[b-l0g8057dld] {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Banners */
    .error-alert[b-l0g8057dld] {
        padding: 14px 16px;
        gap: 12px;
    }

    .error-banner[b-l0g8057dld],
    .warning-banner[b-l0g8057dld] {
        padding: 12px 14px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    /* Company selector */
    .company-selector[b-l0g8057dld] {
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
        gap: 10px;
        margin-bottom: 16px;
    }

    .company-selector-label[b-l0g8057dld] {
        font-size: 13px;
    }

    /* Stats grid */
    .stats-grid[b-l0g8057dld] {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 12px;
    }

    .stat-card[b-l0g8057dld] {
        padding: 14px;
        gap: 10px;
    }

    .stat-icon[b-l0g8057dld] {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }

    .stat-icon svg[b-l0g8057dld] {
        width: 18px;
        height: 18px;
    }

    .stat-content h3[b-l0g8057dld] {
        font-size: 13px;
        line-height: 1.3;
    }

    .stat-content p[b-l0g8057dld] {
        font-size: 11px;
    }

    /* Error alert */
    .error-alert[b-l0g8057dld] {
        padding: 12px;
        gap: 10px;
        border-radius: var(--radius);
    }

    .error-alert-icon[b-l0g8057dld] {
        width: 32px;
        height: 32px;
    }

    .error-alert-title[b-l0g8057dld] {
        font-size: 13px;
    }

    .error-alert-message[b-l0g8057dld] {
        font-size: 12px;
    }

    /* Banners */
    .error-banner[b-l0g8057dld],
    .warning-banner[b-l0g8057dld] {
        padding: 12px;
        gap: 10px;
        flex-wrap: wrap;
    }

    .error-banner-icon[b-l0g8057dld],
    .warning-banner-icon[b-l0g8057dld] {
        width: 28px;
        height: 28px;
    }

    .error-banner-title[b-l0g8057dld],
    .warning-banner-title[b-l0g8057dld] {
        font-size: 11px;
    }

    .error-banner-message[b-l0g8057dld],
    .warning-banner-message[b-l0g8057dld] {
        font-size: 12px;
    }

    .warning-banner-action[b-l0g8057dld] {
        width: 100%;
        justify-content: center;
        margin-top: 4px;
        padding-top: 8px;
        border-top: 1px solid rgba(245, 158, 11, 0.2);
    }

    /* Empty state */
    .empty-state[b-l0g8057dld] {
        padding: 40px 16px;
    }

    .empty-state h3[b-l0g8057dld] {
        font-size: 16px;
    }

    .empty-state p[b-l0g8057dld] {
        font-size: 13px;
    }

    /* Form sections */
    .form-section[b-l0g8057dld] {
        padding: 14px;
        margin-bottom: 14px;
        border-radius: var(--radius);
    }

    .form-section-header[b-l0g8057dld] {
        margin-bottom: 14px;
        gap: 10px;
    }

    .form-section-icon[b-l0g8057dld] {
        width: 34px;
        height: 34px;
    }

    .form-section-icon svg[b-l0g8057dld] {
        width: 18px;
        height: 18px;
    }

    .form-section-title[b-l0g8057dld] {
        font-size: 14px;
    }

    .form-section-subtitle[b-l0g8057dld] {
        font-size: 12px;
    }

    /* Form grids - single column */
    .form-row[b-l0g8057dld],
    .credential-group-fields[b-l0g8057dld],
    .credential-groups-grid[b-l0g8057dld],
    .intervals-grid[b-l0g8057dld],
    .export-params-grid[b-l0g8057dld] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* Credential groups */
    .credential-group[b-l0g8057dld] {
        padding: 12px;
        margin-bottom: 12px;
    }

    .credential-group-header[b-l0g8057dld] {
        margin-bottom: 12px;
        gap: 8px;
    }

    .credential-group-icon[b-l0g8057dld] {
        width: 30px;
        height: 30px;
    }

    .credential-group-title[b-l0g8057dld] {
        font-size: 13px;
    }

    /* Transfer type cards */
    .transfer-type-cards[b-l0g8057dld] {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .transfer-type-card[b-l0g8057dld] {
        padding: 12px;
    }

    .transfer-type-header[b-l0g8057dld] {
        gap: 10px;
        margin-bottom: 10px;
    }

    .transfer-type-icon[b-l0g8057dld] {
        width: 34px;
        height: 34px;
    }

    .transfer-type-name[b-l0g8057dld] {
        font-size: 13px;
    }

    .transfer-type-desc[b-l0g8057dld] {
        font-size: 11px;
    }

    .transfer-type-selector[b-l0g8057dld] {
        gap: 6px;
    }

    .transfer-btn[b-l0g8057dld] {
        padding: 8px 10px;
        font-size: 12px;
        gap: 6px;
    }

    .transfer-btn svg[b-l0g8057dld] {
        width: 14px;
        height: 14px;
    }

    /* Sync settings */
    .sync-actions-grid[b-l0g8057dld] {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .subsection-title[b-l0g8057dld] {
        font-size: 13px;
    }

    .subsection-desc[b-l0g8057dld] {
        font-size: 12px;
    }

    /* Form inputs */
    .form-input[b-l0g8057dld] {
        font-size: 14px;
    }

    .form-help[b-l0g8057dld] {
        font-size: 11px;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    /* Stats */
    .stats-grid[b-l0g8057dld] {
        gap: 8px;
    }

    .stat-card[b-l0g8057dld] {
        padding: 12px;
        gap: 8px;
    }

    .stat-icon[b-l0g8057dld] {
        width: 34px;
        height: 34px;
    }

    .stat-icon svg[b-l0g8057dld] {
        width: 16px;
        height: 16px;
    }

    .stat-content h3[b-l0g8057dld] {
        font-size: 12px;
    }

    .stat-content p[b-l0g8057dld] {
        font-size: 10px;
    }

    /* Company selector */
    .company-selector[b-l0g8057dld] {
        padding: 10px;
    }

    /* Form section */
    .form-section[b-l0g8057dld] {
        padding: 12px;
    }

    .form-section-title[b-l0g8057dld] {
        font-size: 13px;
    }

    /* Sync actions - single column on very small */
    .sync-actions-grid[b-l0g8057dld] {
        grid-template-columns: 1fr;
    }

    /* Transfer buttons stack */
    .transfer-type-selector[b-l0g8057dld] {
        flex-direction: column;
    }

    /* Banners tighter */
    .error-alert[b-l0g8057dld],
    .error-banner[b-l0g8057dld],
    .warning-banner[b-l0g8057dld] {
        padding: 10px;
    }
}

/* /Components/Pages/Erp/Hitit/HititSetupWizard.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════
   HITIT SETUP WIZARD - PREMIUM STYLES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Container Override */
.hitit-wizard[b-w1wdbk2hss] {
    max-width: 1100px;
    width: 95vw;
    height: auto;
    max-height: 94vh;
}

/* Header Icon - Hitit Theme (Orange/Amber) */
.wizard-header-icon.hitit[b-w1wdbk2hss] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.35);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LOADING & ERROR
   ═══════════════════════════════════════════════════════════════════════════════ */

.hitit-loading[b-w1wdbk2hss] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 60px 20px;
}

.hitit-loading-spinner[b-w1wdbk2hss] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border);
    border-top-color: #f59e0b;
    border-radius: 50%;
    animation: hitit-spin-b-w1wdbk2hss 1s linear infinite;
}

@keyframes hitit-spin-b-w1wdbk2hss {
    to { transform: rotate(360deg); }
}

.hitit-loading span[b-w1wdbk2hss] {
    font-size: 14px;
    color: var(--text-secondary);
}

.hitit-error-card[b-w1wdbk2hss] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 48px 24px;
    background: rgba(239, 68, 68, 0.06);
    border-radius: 16px;
    border: 1px solid rgba(239, 68, 68, 0.15);
}

.hitit-error-icon[b-w1wdbk2hss] {
    color: #ef4444;
}

.hitit-error-card h4[b-w1wdbk2hss] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #ef4444;
}

.hitit-error-card p[b-w1wdbk2hss] {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
    max-width: 400px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   INFO CARD
   ═══════════════════════════════════════════════════════════════════════════════ */

.hitit-info-card[b-w1wdbk2hss] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    background: rgba(245, 158, 11, 0.08);
    border-radius: 12px;
    margin-bottom: 20px;
    border: 1px solid rgba(245, 158, 11, 0.15);
}

.hitit-info-icon[b-w1wdbk2hss] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(245, 158, 11, 0.15);
    border-radius: 10px;
    color: #f59e0b;
    flex-shrink: 0;
}

.hitit-info-card p[b-w1wdbk2hss] {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   NITELIK TABLE
   ═══════════════════════════════════════════════════════════════════════════════ */

.hitit-nitelik-table-container[b-w1wdbk2hss] {
    max-height: 350px;
    overflow-y: auto;
    border-radius: 12px;
    border: 1px solid var(--border);
    margin-bottom: 20px;
}

.hitit-nitelik-table[b-w1wdbk2hss] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.hitit-nitelik-table thead[b-w1wdbk2hss] {
    position: sticky;
    top: 0;
    background: var(--bg-secondary);
    z-index: 1;
}

.hitit-nitelik-table th[b-w1wdbk2hss] {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hitit-nitelik-table td[b-w1wdbk2hss] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}

.hitit-nitelik-table tbody tr:hover[b-w1wdbk2hss] {
    background: var(--bg-card-hover);
}

.nitelik-badge[b-w1wdbk2hss] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-radius: 8px;
    color: white;
    font-size: 12px;
    font-weight: 700;
    margin-right: 10px;
}

.nitelik-name[b-w1wdbk2hss] {
    font-weight: 500;
    color: var(--text-primary);
}

.nitelik-sample[b-w1wdbk2hss] {
    padding: 4px 10px;
    background: var(--bg-input);
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--text-primary);
}

.nitelik-empty[b-w1wdbk2hss] {
    color: var(--text-muted);
}

.nitelik-usage[b-w1wdbk2hss] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 500;
}

.nitelik-usage.high[b-w1wdbk2hss] {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.nitelik-usage.medium[b-w1wdbk2hss] {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

.nitelik-usage.low[b-w1wdbk2hss] {
    background: rgba(156, 163, 175, 0.12);
    color: #9ca3af;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   EXTRA FIELDS (E-Ticaret, Brand)
   ═══════════════════════════════════════════════════════════════════════════════ */

.hitit-extra-fields[b-w1wdbk2hss] {
    margin-top: 24px;
}

.hitit-extra-fields h4[b-w1wdbk2hss] {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.hitit-field-cards[b-w1wdbk2hss] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hitit-field-card[b-w1wdbk2hss] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 18px;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border);
    min-width: 180px;
}

.hitit-field-card.eticaret[b-w1wdbk2hss] {
    border-color: rgba(6, 182, 212, 0.3);
    background: rgba(6, 182, 212, 0.04);
}

.field-label[b-w1wdbk2hss] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
}

.field-sample[b-w1wdbk2hss] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.field-count[b-w1wdbk2hss] {
    font-size: 11px;
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION TITLE
   ═══════════════════════════════════════════════════════════════════════════════ */

.hitit-section-title[b-w1wdbk2hss] {
    margin-bottom: 16px;
}

.hitit-section-title h4[b-w1wdbk2hss] {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.hitit-section-hint[b-w1wdbk2hss] {
    font-size: 13px;
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LEVEL LIST (Category Levels)
   ═══════════════════════════════════════════════════════════════════════════════ */

.hitit-level-list[b-w1wdbk2hss] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.hitit-level-row[b-w1wdbk2hss] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border);
    animation: hitit-slide-in-b-w1wdbk2hss 0.3s ease;
}

@keyframes hitit-slide-in-b-w1wdbk2hss {
    from {
        opacity: 0;
        transform: translateX(-12px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.hitit-level-badge[b-w1wdbk2hss] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    border-radius: 10px;
    color: white;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.hitit-select[b-w1wdbk2hss] {
    flex: 1;
    padding: 12px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    color: var(--text-primary);
    transition: all 0.2s ease;
    cursor: pointer;
}

.hitit-select:focus[b-w1wdbk2hss] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-alpha);
}

.hitit-remove-btn[b-w1wdbk2hss] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.hitit-remove-btn:hover[b-w1wdbk2hss] {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PREVIEW CARD
   ═══════════════════════════════════════════════════════════════════════════════ */

.hitit-preview-card[b-w1wdbk2hss] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(139, 92, 246, 0.06);
    border-radius: 12px;
    border: 1px solid rgba(139, 92, 246, 0.15);
}

.preview-label[b-w1wdbk2hss] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
}

.preview-path[b-w1wdbk2hss] {
    font-size: 14px;
    font-weight: 600;
    color: #8b5cf6;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   OPTION CARDS
   ═══════════════════════════════════════════════════════════════════════════════ */

.hitit-option-cards[b-w1wdbk2hss] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.hitit-option-card[b-w1wdbk2hss] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: var(--bg-card);
    border-radius: 14px;
    border: 2px solid var(--border);
    cursor: pointer;
    transition: all 0.25s ease;
}

.hitit-option-card:hover[b-w1wdbk2hss] {
    border-color: var(--primary-alpha);
    background: var(--bg-card-hover);
}

.hitit-option-card.selected[b-w1wdbk2hss] {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.06);
}

.hitit-option-radio[b-w1wdbk2hss] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--border);
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.hitit-option-card.selected .hitit-option-radio[b-w1wdbk2hss] {
    border-color: var(--primary);
    background: var(--primary);
}

.hitit-radio-dot[b-w1wdbk2hss] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: white;
    opacity: 0;
    transition: all 0.2s ease;
}

.hitit-option-card.selected .hitit-radio-dot[b-w1wdbk2hss] {
    opacity: 1;
}

.hitit-option-icon[b-w1wdbk2hss] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 12px;
    color: var(--primary);
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.hitit-option-card.selected .hitit-option-icon[b-w1wdbk2hss] {
    background: var(--primary);
    color: white;
}

.hitit-option-icon.muted[b-w1wdbk2hss] {
    background: var(--bg-secondary);
    color: var(--text-muted);
}

.hitit-option-content[b-w1wdbk2hss] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hitit-option-content strong[b-w1wdbk2hss] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.hitit-option-content span[b-w1wdbk2hss] {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.hitit-sample-value[b-w1wdbk2hss] {
    margin-top: 4px;
    padding: 4px 10px;
    background: var(--bg-input);
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--text-primary);
    width: fit-content;
}

.hitit-sub-config[b-w1wdbk2hss] {
    margin-top: 16px;
    padding: 16px 20px;
    background: var(--bg-secondary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.hitit-sub-config label[b-w1wdbk2hss] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ATTRIBUTE SECTION
   ═══════════════════════════════════════════════════════════════════════════════ */

.hitit-attribute-section[b-w1wdbk2hss] {
    padding: 20px;
    background: var(--bg-card);
    border-radius: 14px;
    border: 1px solid var(--border);
    margin-bottom: 16px;
}

.hitit-attribute-header[b-w1wdbk2hss] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.hitit-attribute-icon[b-w1wdbk2hss] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
}

.hitit-attribute-icon.color[b-w1wdbk2hss] {
    background: rgba(236, 72, 153, 0.12);
    color: #ec4899;
}

.hitit-attribute-icon.size[b-w1wdbk2hss] {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

.hitit-attribute-icon.extra[b-w1wdbk2hss] {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.hitit-attribute-header h4[b-w1wdbk2hss] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}

.hitit-add-btn[b-w1wdbk2hss] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 8px;
    color: #10b981;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hitit-add-btn:hover[b-w1wdbk2hss] {
    background: rgba(16, 185, 129, 0.15);
    border-color: #10b981;
}

.hitit-attribute-options[b-w1wdbk2hss] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hitit-radio-label[b-w1wdbk2hss] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hitit-radio-label:hover[b-w1wdbk2hss] {
    background: var(--bg-card-hover);
}

.hitit-radio-label input[type="radio"][b-w1wdbk2hss] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

.hitit-radio-label span[b-w1wdbk2hss] {
    font-size: 14px;
    color: var(--text-primary);
}

.hitit-radio-label code[b-w1wdbk2hss] {
    margin-left: auto;
    padding: 4px 10px;
    background: var(--bg-input);
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--text-muted);
}

.hitit-inline-select[b-w1wdbk2hss] {
    margin-top: 12px;
    padding-left: 30px;
}

.hitit-custom-attributes[b-w1wdbk2hss] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.hitit-custom-attribute-row[b-w1wdbk2hss] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: 10px;
    animation: hitit-slide-in-b-w1wdbk2hss 0.3s ease;
}

.hitit-input[b-w1wdbk2hss] {
    flex: 1;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.hitit-input:focus[b-w1wdbk2hss] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-alpha);
}

.hitit-input[b-w1wdbk2hss]::placeholder {
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SOURCE SECTION (Data Sources)
   ═══════════════════════════════════════════════════════════════════════════════ */

.hitit-source-section[b-w1wdbk2hss] {
    margin-bottom: 24px;
}

.hitit-source-section h4[b-w1wdbk2hss] {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.hitit-source-options[b-w1wdbk2hss] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.hitit-source-options.vertical[b-w1wdbk2hss] {
    grid-template-columns: 1fr;
}

.hitit-radio-card[b-w1wdbk2hss] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    background: var(--bg-card);
    border-radius: 12px;
    border: 2px solid var(--border);
    cursor: pointer;
    transition: all 0.2s ease;
}

.hitit-radio-card:hover[b-w1wdbk2hss] {
    border-color: var(--primary-alpha);
}

.hitit-radio-card.selected[b-w1wdbk2hss] {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.04);
}

.hitit-radio-card input[type="radio"][b-w1wdbk2hss] {
    margin-top: 2px;
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    flex-shrink: 0;
}

.radio-card-content[b-w1wdbk2hss] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.radio-card-title[b-w1wdbk2hss] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.radio-card-content code[b-w1wdbk2hss] {
    padding: 4px 10px;
    background: var(--bg-input);
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--text-muted);
    width: fit-content;
}

.radio-card-sample[b-w1wdbk2hss] {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.radio-card-desc[b-w1wdbk2hss] {
    font-size: 12px;
    color: var(--text-muted);
}

.hitit-publish-config[b-w1wdbk2hss] {
    margin-top: 16px;
    padding: 16px 20px;
    background: var(--bg-secondary);
    border-radius: 12px;
}

.hitit-form-row[b-w1wdbk2hss] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.hitit-form-group[b-w1wdbk2hss] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hitit-form-group label[b-w1wdbk2hss] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   COMPLETE HERO
   ═══════════════════════════════════════════════════════════════════════════════ */

.hitit-complete-hero[b-w1wdbk2hss] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 20px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(6, 182, 212, 0.04) 100%);
    border-radius: 20px;
    margin-bottom: 32px;
    border: 1px solid rgba(16, 185, 129, 0.15);
}

.hitit-complete-icon[b-w1wdbk2hss] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 20px;
    color: white;
    margin-bottom: 20px;
    box-shadow: 0 8px 32px rgba(16, 185, 129, 0.35);
    animation: hitit-pulse-b-w1wdbk2hss 2s ease-in-out infinite;
}

@keyframes hitit-pulse-b-w1wdbk2hss {
    0%, 100% { transform: scale(1); box-shadow: 0 8px 32px rgba(16, 185, 129, 0.35); }
    50% { transform: scale(1.05); box-shadow: 0 12px 48px rgba(16, 185, 129, 0.5); }
}

.hitit-complete-hero h3[b-w1wdbk2hss] {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.hitit-complete-hero p[b-w1wdbk2hss] {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
    max-width: 400px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SUMMARY GRID
   ═══════════════════════════════════════════════════════════════════════════════ */

.hitit-summary-grid[b-w1wdbk2hss] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.hitit-summary-card[b-w1wdbk2hss] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: var(--bg-card);
    border-radius: 14px;
    border: 1px solid var(--border);
    transition: all 0.2s ease;
}

.hitit-summary-card:hover[b-w1wdbk2hss] {
    border-color: var(--primary-alpha);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.hitit-summary-icon[b-w1wdbk2hss] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    flex-shrink: 0;
}

.hitit-summary-icon.categories[b-w1wdbk2hss] {
    background: rgba(139, 92, 246, 0.12);
    color: #8b5cf6;
}

.hitit-summary-icon.brand[b-w1wdbk2hss] {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}

.hitit-summary-icon.color[b-w1wdbk2hss] {
    background: rgba(236, 72, 153, 0.12);
    color: #ec4899;
}

.hitit-summary-icon.size[b-w1wdbk2hss] {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

.hitit-summary-icon.data[b-w1wdbk2hss] {
    background: rgba(6, 182, 212, 0.12);
    color: #06b6d4;
}

.hitit-summary-icon.publish[b-w1wdbk2hss] {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.hitit-summary-content[b-w1wdbk2hss] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.hitit-summary-label[b-w1wdbk2hss] {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.hitit-summary-value[b-w1wdbk2hss] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    word-break: break-word;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SUMMARY DETAILS
   ═══════════════════════════════════════════════════════════════════════════════ */

.hitit-summary-details[b-w1wdbk2hss] {
    padding: 20px;
    background: var(--bg-card);
    border-radius: 14px;
    border: 1px solid var(--border);
}

.hitit-summary-details h4[b-w1wdbk2hss] {
    margin: 0 0 16px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.hitit-detail-list[b-w1wdbk2hss] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hitit-detail-row[b-w1wdbk2hss] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.hitit-detail-row:last-child[b-w1wdbk2hss] {
    padding-bottom: 0;
    border-bottom: none;
}

.hitit-detail-label[b-w1wdbk2hss] {
    flex-shrink: 0;
    width: 120px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
}

.hitit-detail-value[b-w1wdbk2hss] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .hitit-wizard[b-w1wdbk2hss] {
        width: 100vw;
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }

    .hitit-source-options[b-w1wdbk2hss] {
        grid-template-columns: 1fr;
    }

    .hitit-form-row[b-w1wdbk2hss] {
        grid-template-columns: 1fr;
    }

    .hitit-summary-grid[b-w1wdbk2hss] {
        grid-template-columns: 1fr;
    }

    .hitit-field-cards[b-w1wdbk2hss] {
        flex-direction: column;
    }

    .hitit-field-card[b-w1wdbk2hss] {
        min-width: 100%;
    }

    .hitit-custom-attribute-row[b-w1wdbk2hss] {
        flex-wrap: wrap;
    }

    .hitit-custom-attribute-row .hitit-input[b-w1wdbk2hss],
    .hitit-custom-attribute-row .hitit-select[b-w1wdbk2hss] {
        flex: 1 1 100%;
    }

    .hitit-nitelik-table-container[b-w1wdbk2hss] {
        max-height: 280px;
    }
}

@media (max-width: 480px) {
    .hitit-option-card[b-w1wdbk2hss] {
        padding: 14px;
    }

    .hitit-attribute-section[b-w1wdbk2hss] {
        padding: 14px;
    }

    .hitit-summary-card[b-w1wdbk2hss] {
        padding: 14px;
    }
}
/* /Components/Pages/Erp/ImageSyncProgressModal.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   IMAGE SYNC PROGRESS MODAL — afili, animasyonlu, faz-aşamalı
   Kanonik tema değişkenleri: --bg-card / --border / --primary
   --text-primary / --text-muted / --bg-input / --radius
   ═══════════════════════════════════════════════════════════════ */

.isync-root[b-558lwxl32h] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 4px 2px;
}

/* ───────────────────── HEADER ROW ───────────────────── */

.isync-header[b-558lwxl32h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.isync-erp-badge[b-558lwxl32h] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(168, 85, 247, 0.08));
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--text-primary);
}

.erp-badge-dot[b-558lwxl32h] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.5);
}

.isync-root.is-running .erp-badge-dot[b-558lwxl32h] {
    animation: badge-pulse-b-558lwxl32h 1.4s ease-in-out infinite;
}

@keyframes badge-pulse-b-558lwxl32h {
    0%, 100% { box-shadow: 0 0 6px rgba(99, 102, 241, 0.4); transform: scale(1); }
    50% { box-shadow: 0 0 14px rgba(168, 85, 247, 0.8); transform: scale(1.15); }
}

.isync-status-pill[b-558lwxl32h] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.pill-icon[b-558lwxl32h] {
    width: 14px;
    height: 14px;
}

.pulse-dot[b-558lwxl32h] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 0 currentColor;
    animation: pulse-ring-b-558lwxl32h 1.5s ease-out infinite;
}

@keyframes pulse-ring-b-558lwxl32h {
    0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.5); }
    100% { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); }
}

.isync-status-pill.pill-fetching[b-558lwxl32h] { color: #3b82f6; border-color: rgba(59, 130, 246, 0.35); background: rgba(59, 130, 246, 0.08); }
.isync-status-pill.pill-uploading[b-558lwxl32h] { color: #8b5cf6; border-color: rgba(139, 92, 246, 0.35); background: rgba(139, 92, 246, 0.08); }
.isync-status-pill.pill-finalizing[b-558lwxl32h] { color: #f59e0b; border-color: rgba(245, 158, 11, 0.35); background: rgba(245, 158, 11, 0.08); }
.isync-status-pill.pill-success[b-558lwxl32h] { color: #22c55e; border-color: rgba(34, 197, 94, 0.4); background: rgba(34, 197, 94, 0.1); }
.isync-status-pill.pill-error[b-558lwxl32h] { color: #ef4444; border-color: rgba(239, 68, 68, 0.4); background: rgba(239, 68, 68, 0.1); }

/* ───────────────────── PIPELINE ───────────────────── */

.isync-pipeline[b-558lwxl32h] {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 14px 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.step[b-558lwxl32h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    min-width: 100px;
    text-align: center;
}

.step-dot[b-558lwxl32h] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    background: var(--bg-input);
    border: 2px solid var(--border);
    color: var(--text-muted);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.step.step-active .step-dot[b-558lwxl32h] {
    background: linear-gradient(135deg, #6366f1, #a855f7);
    border-color: #a855f7;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.15), 0 4px 12px rgba(99, 102, 241, 0.4);
    animation: step-glow-b-558lwxl32h 1.8s ease-in-out infinite;
}

@keyframes step-glow-b-558lwxl32h {
    0%, 100% { box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.15), 0 4px 12px rgba(99, 102, 241, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(168, 85, 247, 0.25), 0 6px 18px rgba(99, 102, 241, 0.6); }
}

.step.step-completed .step-dot[b-558lwxl32h] {
    background: #22c55e;
    border-color: #22c55e;
    color: #fff;
}

.step.step-completed .step-dot span[b-558lwxl32h] {
    display: none;
}

.step.step-completed .step-dot[b-558lwxl32h]::after {
    content: '';
    width: 12px;
    height: 6px;
    border-left: 2.5px solid #fff;
    border-bottom: 2.5px solid #fff;
    transform: rotate(-45deg) translateY(-2px);
}

.step-label[b-558lwxl32h] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.2px;
    transition: color 0.3s ease;
}

.step.step-active .step-label[b-558lwxl32h] { color: var(--text-primary); }
.step.step-completed .step-label[b-558lwxl32h] { color: #22c55e; }

.step-line[b-558lwxl32h] {
    flex: 1;
    height: 2px;
    background: var(--border);
    position: relative;
    margin: 0 -4px;
    margin-bottom: 22px;
    border-radius: 2px;
    overflow: hidden;
}

.step-line.step-line-active[b-558lwxl32h] {
    background: #22c55e;
}

.step-line[b-558lwxl32h]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.6), transparent);
    transform: translateX(-100%);
    animation: line-flow-b-558lwxl32h 1.6s linear infinite;
    opacity: 0;
}

.isync-root.is-running .step-line:not(.step-line-active)[b-558lwxl32h]::after {
    opacity: 1;
}

@keyframes line-flow-b-558lwxl32h {
    to { transform: translateX(100%); }
}

/* ───────────────────── PROGRESS BAR ───────────────────── */

.isync-progress-wrap[b-558lwxl32h] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.isync-progress-track[b-558lwxl32h] {
    height: 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

.isync-progress-fill[b-558lwxl32h] {
    height: 100%;
    background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
    border-radius: 999px;
    transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.5);
}

.isync-progress-fill.shimmer[b-558lwxl32h]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.35) 50%,
        transparent 100%);
    transform: translateX(-100%);
    animation: shimmer-b-558lwxl32h 1.6s linear infinite;
}

@keyframes shimmer-b-558lwxl32h {
    to { transform: translateX(100%); }
}

.isync-root.is-done.is-success .isync-progress-fill[b-558lwxl32h] {
    background: linear-gradient(90deg, #16a34a, #22c55e);
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.5);
}

.isync-root.is-done.is-error .isync-progress-fill[b-558lwxl32h] {
    background: linear-gradient(90deg, #dc2626, #ef4444);
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.5);
}

.isync-progress-meta[b-558lwxl32h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    min-height: 20px;
}

.meta-left[b-558lwxl32h] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.meta-current-label[b-558lwxl32h] {
    color: var(--text-muted);
    flex-shrink: 0;
}

.meta-current-value[b-558lwxl32h] {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.meta-current-detail[b-558lwxl32h] {
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.meta-pct[b-558lwxl32h] {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.meta-pct small[b-558lwxl32h] {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 1px;
}

/* ───────────────────── STAT CARDS ───────────────────── */

.isync-stats[b-558lwxl32h] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.stat-card[b-558lwxl32h] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.stat-card:hover[b-558lwxl32h] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.stat-icon[b-558lwxl32h] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--bg-input);
    color: var(--text-muted);
}

.stat-icon svg[b-558lwxl32h] {
    width: 20px;
    height: 20px;
}

.stat-body[b-558lwxl32h] {
    flex: 1;
    min-width: 0;
}

.stat-label[b-558lwxl32h] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-value[b-558lwxl32h] {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-variant-numeric: tabular-nums;
}

.stat-num[b-558lwxl32h] {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    transition: color 0.3s ease;
}

.stat-divider[b-558lwxl32h] {
    color: var(--text-muted);
    font-size: 15px;
    font-weight: 500;
}

.stat-total[b-558lwxl32h] {
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
}

/* Type-specific accents */
.stat-card.stat-rows[b-558lwxl32h] { border-left: 3px solid #6366f1; }
.stat-card.stat-rows .stat-icon[b-558lwxl32h] { background: rgba(99, 102, 241, 0.1); color: #6366f1; }

.stat-card.stat-uploaded[b-558lwxl32h] { border-left: 3px solid #22c55e; }
.stat-card.stat-uploaded .stat-icon[b-558lwxl32h] { background: rgba(34, 197, 94, 0.1); color: #22c55e; }
.stat-card.stat-uploaded .stat-num[b-558lwxl32h] { color: #22c55e; }

.stat-card.stat-skipped[b-558lwxl32h] { border-left: 3px solid #f59e0b; }
.stat-card.stat-skipped .stat-icon[b-558lwxl32h] { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.stat-card.stat-skipped .stat-num[b-558lwxl32h] { color: #f59e0b; }

.stat-card.stat-failed[b-558lwxl32h] { border-left: 3px solid #ef4444; }
.stat-card.stat-failed .stat-icon[b-558lwxl32h] { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.stat-card.stat-failed .stat-num[b-558lwxl32h] { color: #ef4444; }

/* Counter bump animation when stat changes */
@keyframes count-bump-b-558lwxl32h {
    0% { transform: scale(1); }
    35% { transform: scale(1.18); }
    100% { transform: scale(1); }
}

/* ───────────────────── COMPLETION BANNER ───────────────────── */

.isync-banner[b-558lwxl32h] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    animation: banner-in-b-558lwxl32h 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes banner-in-b-558lwxl32h {
    from { opacity: 0; transform: translateY(-6px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.banner-icon[b-558lwxl32h] {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.banner-body[b-558lwxl32h] {
    flex: 1;
    min-width: 0;
}

.banner-title[b-558lwxl32h] {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 2px;
}

.banner-detail[b-558lwxl32h] {
    font-size: 12.5px;
    opacity: 0.85;
    line-height: 1.5;
}

.banner-success[b-558lwxl32h] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.04));
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #16a34a;
}

.banner-error[b-558lwxl32h] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.04));
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #dc2626;
}

/* ───────────────────── EVENT LOG ───────────────────── */

.isync-events-section[b-558lwxl32h] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.events-header[b-558lwxl32h] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.events-title[b-558lwxl32h] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.events-count[b-558lwxl32h] {
    font-size: 11px;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--bg-input);
    color: var(--text-muted);
    border: 1px solid var(--border);
    font-variant-numeric: tabular-nums;
}

.isync-events[b-558lwxl32h] {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-input);
    padding: 6px;
    font-size: 12px;
    scrollbar-width: thin;
}

.events-empty[b-558lwxl32h] {
    padding: 14px;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
}

.event-row[b-558lwxl32h] {
    display: grid;
    grid-template-columns: 8px 64px 1fr;
    align-items: center;
    gap: 10px;
    padding: 5px 10px;
    border-radius: 6px;
    line-height: 1.45;
    transition: background 0.15s ease;
}

.event-row + .event-row[b-558lwxl32h] {
    margin-top: 2px;
}

.event-dot[b-558lwxl32h] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.5;
}

.event-time[b-558lwxl32h] {
    font-family: var(--font-mono);
    color: var(--text-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.event-msg[b-558lwxl32h] {
    word-break: break-word;
    color: var(--text-primary);
}

.event-row.event-info[b-558lwxl32h] { color: #6366f1; }
.event-row.event-info .event-msg[b-558lwxl32h] { color: var(--text-primary); }

.event-row.event-success[b-558lwxl32h] { color: #22c55e; }
.event-row.event-success .event-msg[b-558lwxl32h] { color: var(--text-primary); }
.event-row.event-success[b-558lwxl32h] { background: rgba(34, 197, 94, 0.06); }

.event-row.event-warning[b-558lwxl32h] { color: #f59e0b; }
.event-row.event-warning .event-msg[b-558lwxl32h] { color: var(--text-primary); }
.event-row.event-warning[b-558lwxl32h] { background: rgba(245, 158, 11, 0.06); }

.event-row.event-error[b-558lwxl32h] { color: #ef4444; }
.event-row.event-error .event-msg[b-558lwxl32h] { color: var(--text-primary); }
.event-row.event-error[b-558lwxl32h] { background: rgba(239, 68, 68, 0.06); }

/* New event slide-in */
@keyframes event-in-b-558lwxl32h {
    from { opacity: 0; transform: translateX(-6px); }
    to { opacity: 1; transform: translateX(0); }
}

.event-row:first-child[b-558lwxl32h] {
    animation: event-in-b-558lwxl32h 0.25s ease-out;
}

/* ───────────────────── RESPONSIVE ───────────────────── */

@media (max-width: 720px) {
    .isync-stats[b-558lwxl32h] {
        grid-template-columns: repeat(2, 1fr);
    }
    .step-label[b-558lwxl32h] {
        font-size: 10px;
    }
    .step[b-558lwxl32h] {
        min-width: 70px;
    }
}
/* /Components/Pages/Erp/Korgun/KorgunSetupWizard.razor.rz.scp.css */
/* Korgün Setup Wizard — proje tema değişkenleri kullanılır.
   Custom var (--bg-elevated vs.) YAZMA, sadece kanonik değişkenler:
   --bg-card / --border / --primary / --text-primary / --text-secondary
   --text-muted / --bg-input / --bg-hover / --radius-md / --radius-sm.
*/

[b-upakqhcn50] .wizard-header-icon.korgun {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    color: white;
}

[b-upakqhcn50] .korgun-wizard {
    max-width: 880px;
}

[b-upakqhcn50] .korgun-step {
    padding: 0 1.5rem 1.5rem 1.5rem;
}

[b-upakqhcn50] .step-header {
    margin-bottom: 1.5rem;
}

[b-upakqhcn50] .step-header h3 {
    margin: 0 0 0.5rem;
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 600;
}

[b-upakqhcn50] .step-description {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
}

[b-upakqhcn50] .form-section {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

[b-upakqhcn50] .form-section:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

[b-upakqhcn50] .section-title {
    margin: 0 0 0.5rem;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
}

[b-upakqhcn50] .section-description {
    margin: 0 0 1rem;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    line-height: 1.5;
}

[b-upakqhcn50] .form-grid {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

[b-upakqhcn50] .form-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.25rem;
}

@media (max-width: 640px) {
    [b-upakqhcn50] .form-grid-2col {
        grid-template-columns: 1fr;
    }
}

[b-upakqhcn50] .form-row {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

[b-upakqhcn50] .form-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

[b-upakqhcn50] .form-label .required {
    color: #ef4444;
    margin-left: 0.25rem;
}

[b-upakqhcn50] .form-help {
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.5;
}

[b-upakqhcn50] .form-help code {
    background: var(--bg-hover);
    color: var(--text-secondary);
    padding: 0.0625rem 0.375rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-family: 'SF Mono', Menlo, Monaco, monospace;
}

[b-upakqhcn50] .form-input {
    padding: 0.5rem 0.75rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: inherit;
    transition: border-color 0.15s ease;
}

[b-upakqhcn50] .form-input:focus {
    outline: none;
    border-color: var(--primary);
}

[b-upakqhcn50] select.form-input {
    cursor: pointer;
}

/* Info banner — sabit Renk/Beden uyarısı */
[b-upakqhcn50] .info-banner {
    display: flex;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    line-height: 1.5;
    margin-bottom: 1.25rem;
}

[b-upakqhcn50] .info-banner strong {
    color: var(--text-primary);
}

[b-upakqhcn50] .info-banner code {
    background: var(--bg-card);
    padding: 0.0625rem 0.375rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-family: 'SF Mono', Menlo, Monaco, monospace;
}

[b-upakqhcn50] .info-banner svg {
    flex-shrink: 0;
    color: var(--primary);
    margin-top: 0.125rem;
}

/* Attribute mapping tablosu */
[b-upakqhcn50] .attribute-table {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 0.75rem;
}

[b-upakqhcn50] .attribute-table-header {
    display: grid;
    grid-template-columns: 1fr 1.2fr 90px 50px;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    background: var(--bg-hover);
    border-bottom: 1px solid var(--border);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

[b-upakqhcn50] .attribute-table-row {
    display: grid;
    grid-template-columns: 1fr 1.2fr 90px 50px;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    align-items: center;
    border-bottom: 1px solid var(--border);
}

[b-upakqhcn50] .attribute-table-row:last-child {
    border-bottom: none;
}

[b-upakqhcn50] .attr-col-required {
    text-align: center;
}

[b-upakqhcn50] .attr-col-required input[type=checkbox] {
    width: 1.125rem;
    height: 1.125rem;
    cursor: pointer;
    accent-color: var(--primary);
}

[b-upakqhcn50] .attr-col-action {
    text-align: center;
}

[b-upakqhcn50] .btn-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

[b-upakqhcn50] .btn-remove:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

[b-upakqhcn50] .btn-add-attribute {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: var(--bg-hover);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

[b-upakqhcn50] .btn-add-attribute:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-input);
}
/* /Components/Pages/Erp/NebimV3/NebimSpSetupWizard.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════
   SP SETUP WIZARD - PREMIUM STYLES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Container Override */
.sp-wizard[b-yearbz71m5] {
    max-width: 1280px;
    width: 95vw;
    height: auto;
    max-height: 94vh;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════════════════════ */

.wizard-header-title[b-yearbz71m5] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.wizard-header-icon[b-yearbz71m5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    border-radius: 12px;
    color: white;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35);
}

.wizard-header-title h2[b-yearbz71m5] {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
}

.wizard-subtitle[b-yearbz71m5] {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   STEP HERO
   ═══════════════════════════════════════════════════════════════════════════════ */

.step-hero[b-yearbz71m5] {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.04) 100%);
    border-radius: 16px;
    margin-bottom: 24px;
    border: 1px solid rgba(99, 102, 241, 0.1);
}

.step-hero-icon[b-yearbz71m5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.step-hero-icon.warning[b-yearbz71m5] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.step-hero-icon.info[b-yearbz71m5] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

.step-hero-icon.success[b-yearbz71m5] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.step-hero-icon.purple[b-yearbz71m5] {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
}

.step-hero-icon.pink[b-yearbz71m5] {
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
    color: white;
}

.step-hero-content h3[b-yearbz71m5] {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.step-hero-content p[b-yearbz71m5] {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   INFO CARD
   ═══════════════════════════════════════════════════════════════════════════════ */

.sp-info-card[b-yearbz71m5] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    background: rgba(59, 130, 246, 0.08);
    border-radius: 12px;
    margin-bottom: 20px;
    border: 1px solid rgba(59, 130, 246, 0.15);
}

.sp-info-icon[b-yearbz71m5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(59, 130, 246, 0.15);
    border-radius: 10px;
    color: #3b82f6;
    flex-shrink: 0;
}

.sp-info-card p[b-yearbz71m5] {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LOADING
   ═══════════════════════════════════════════════════════════════════════════════ */

.sp-loading[b-yearbz71m5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 60px 20px;
}

.sp-loading-spinner[b-yearbz71m5] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: sp-spin-b-yearbz71m5 1s linear infinite;
}

@keyframes sp-spin-b-yearbz71m5 {
    to { transform: rotate(360deg); }
}

.sp-loading span[b-yearbz71m5] {
    font-size: 14px;
    color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ERROR CARD
   ═══════════════════════════════════════════════════════════════════════════════ */

.sp-error-card[b-yearbz71m5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 48px 24px;
    background: rgba(239, 68, 68, 0.06);
    border-radius: 16px;
    border: 1px solid rgba(239, 68, 68, 0.15);
}

.sp-error-icon[b-yearbz71m5] {
    color: #ef4444;
}

.sp-error-card h4[b-yearbz71m5] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #ef4444;
}

.sp-error-card p[b-yearbz71m5] {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
    max-width: 400px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   INSTRUCTIONS
   ═══════════════════════════════════════════════════════════════════════════════ */

.sp-instructions[b-yearbz71m5] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.sp-instruction-item[b-yearbz71m5] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border);
    transition: all 0.2s ease;
}

.sp-instruction-item:hover[b-yearbz71m5] {
    border-color: var(--primary);
    background: var(--bg-card-hover);
}

.sp-instruction-number[b-yearbz71m5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--primary);
    border-radius: 8px;
    color: white;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.sp-instruction-item span:last-child[b-yearbz71m5] {
    font-size: 14px;
    color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SQL CARD
   ═══════════════════════════════════════════════════════════════════════════════ */

.sp-sql-card[b-yearbz71m5] {
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border);
    overflow: hidden;
}

.sp-sql-header[b-yearbz71m5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}

.sp-sql-title[b-yearbz71m5] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.sp-copy-btn[b-yearbz71m5] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--primary);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sp-copy-btn:hover[b-yearbz71m5] {
    background: var(--primary-dark);
    transform: translateY(-1px);
}

.sp-copy-btn.copied[b-yearbz71m5] {
    background: #10b981;
}

.sp-sql-content[b-yearbz71m5] {
    padding: 16px 20px;
    min-height: 500px;
    max-height: 500px;
    overflow-y: auto;
    background: var(--bg-input, #1a1a2e);
}

.sp-sql-content pre[b-yearbz71m5] {
    margin: 0;
    background: transparent;
}

.sp-sql-content pre[b-yearbz71m5],
.sp-sql-content code[b-yearbz71m5] {
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', monospace;
    font-size: 12px;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
    color: #e2e8f0;
    background: transparent;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SELECTION HEADER
   ═══════════════════════════════════════════════════════════════════════════════ */

.sp-selection-header[b-yearbz71m5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.sp-selection-header h4[b-yearbz71m5] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.sp-selection-meta[b-yearbz71m5] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sp-selection-count[b-yearbz71m5] {
    font-size: 13px;
    color: var(--text-muted);
}

.sp-select-all-btn[b-yearbz71m5] {
    padding: 6px 14px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.sp-select-all-btn:hover[b-yearbz71m5] {
    border-color: var(--primary);
    color: var(--primary);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CARD GRID
   ═══════════════════════════════════════════════════════════════════════════════ */

.sp-card-grid[b-yearbz71m5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.sp-selection-card[b-yearbz71m5] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    background: var(--bg-card);
    border-radius: 12px;
    border: 2px solid var(--border);
    cursor: pointer;
    transition: all 0.25s ease;
}

.sp-selection-card:hover[b-yearbz71m5] {
    border-color: var(--primary-alpha);
    background: var(--bg-card-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.sp-selection-card.selected[b-yearbz71m5] {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.08);
}

.sp-card-check[b-yearbz71m5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 2px solid var(--border);
    background: transparent;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.sp-selection-card.selected .sp-card-check[b-yearbz71m5] {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.sp-card-icon[b-yearbz71m5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 10px;
    color: var(--primary);
    flex-shrink: 0;
}

.sp-card-content[b-yearbz71m5] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.sp-card-code[b-yearbz71m5] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.sp-card-desc[b-yearbz71m5] {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   WARNING CARD
   ═══════════════════════════════════════════════════════════════════════════════ */

.sp-warning-card[b-yearbz71m5] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    background: rgba(245, 158, 11, 0.08);
    border-radius: 12px;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.sp-warning-icon[b-yearbz71m5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(245, 158, 11, 0.15);
    border-radius: 10px;
    color: #f59e0b;
    flex-shrink: 0;
}

.sp-warning-card strong[b-yearbz71m5] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #f59e0b;
    margin-bottom: 4px;
}

.sp-warning-card p[b-yearbz71m5] {
    margin: 0;
    font-size: 12px;
    color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════════════════════════ */

.sp-empty-state[b-yearbz71m5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 24px;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px dashed var(--border);
    color: var(--text-muted);
}

.sp-empty-state.small[b-yearbz71m5] {
    padding: 24px;
    font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   OPTION CARDS
   ═══════════════════════════════════════════════════════════════════════════════ */

.sp-option-cards[b-yearbz71m5] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.sp-option-card[b-yearbz71m5] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: var(--bg-card);
    border-radius: 14px;
    border: 2px solid var(--border);
    cursor: pointer;
    transition: all 0.25s ease;
}

.sp-option-card:hover[b-yearbz71m5] {
    border-color: var(--primary-alpha);
    background: var(--bg-card-hover);
}

.sp-option-card.selected[b-yearbz71m5] {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.06);
}

.sp-option-radio[b-yearbz71m5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--border);
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.sp-option-card.selected .sp-option-radio[b-yearbz71m5] {
    border-color: var(--primary);
}

.sp-radio-dot[b-yearbz71m5] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: transparent;
    transition: all 0.2s ease;
}

.sp-option-card.selected .sp-radio-dot[b-yearbz71m5] {
    background: var(--primary);
}

.sp-option-icon[b-yearbz71m5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 12px;
    color: var(--primary);
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.sp-option-card.selected .sp-option-icon[b-yearbz71m5] {
    background: var(--primary);
    color: white;
}

.sp-option-content[b-yearbz71m5] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sp-option-content strong[b-yearbz71m5] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.sp-option-content span[b-yearbz71m5] {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FORM SECTION
   ═══════════════════════════════════════════════════════════════════════════════ */

.sp-form-section[b-yearbz71m5] {
    padding: 20px;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border);
}

.sp-form-row[b-yearbz71m5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.sp-form-group[b-yearbz71m5] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sp-form-group label[b-yearbz71m5] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.sp-form-group .form-select[b-yearbz71m5] {
    padding: 12px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.sp-form-group .form-select:focus[b-yearbz71m5] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-alpha);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CHIP LIST
   ═══════════════════════════════════════════════════════════════════════════════ */

.sp-chip-list[b-yearbz71m5] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.sp-chip[b-yearbz71m5] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sp-chip input[type="checkbox"][b-yearbz71m5] {
    display: none;
}

.sp-chip:hover[b-yearbz71m5] {
    border-color: var(--primary-alpha);
    background: var(--bg-card-hover);
}

.sp-chip.selected[b-yearbz71m5] {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.sp-chip-text[b-yearbz71m5] {
    font-size: 13px;
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   DYNAMIC SECTION (Level Rows)
   ═══════════════════════════════════════════════════════════════════════════════ */

.sp-dynamic-section[b-yearbz71m5] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sp-level-row[b-yearbz71m5] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border);
    animation: sp-slide-in-b-yearbz71m5 0.3s ease;
}

@keyframes sp-slide-in-b-yearbz71m5 {
    from {
        opacity: 0;
        transform: translateX(-12px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.sp-level-badge[b-yearbz71m5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    border-radius: 10px;
    color: white;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.sp-level-badge.pink[b-yearbz71m5] {
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
}

.sp-level-row .form-select[b-yearbz71m5] {
    flex: 1;
    padding: 12px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.sp-level-row .form-select:focus[b-yearbz71m5] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-alpha);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION TITLE
   ═══════════════════════════════════════════════════════════════════════════════ */

.sp-section-title[b-yearbz71m5] {
    margin: 0 0 16px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   COMPLETE HERO
   ═══════════════════════════════════════════════════════════════════════════════ */

.sp-complete-hero[b-yearbz71m5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 20px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(6, 182, 212, 0.04) 100%);
    border-radius: 20px;
    margin-bottom: 32px;
    border: 1px solid rgba(16, 185, 129, 0.15);
}

.sp-complete-icon[b-yearbz71m5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 20px;
    color: white;
    margin-bottom: 20px;
    box-shadow: 0 8px 32px rgba(16, 185, 129, 0.35);
    animation: sp-pulse-b-yearbz71m5 2s ease-in-out infinite;
}

@keyframes sp-pulse-b-yearbz71m5 {
    0%, 100% { transform: scale(1); box-shadow: 0 8px 32px rgba(16, 185, 129, 0.35); }
    50% { transform: scale(1.05); box-shadow: 0 12px 48px rgba(16, 185, 129, 0.5); }
}

.sp-complete-hero h3[b-yearbz71m5] {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.sp-complete-hero p[b-yearbz71m5] {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
    max-width: 400px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SUMMARY GRID
   ═══════════════════════════════════════════════════════════════════════════════ */

.sp-summary-grid[b-yearbz71m5] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.sp-summary-card[b-yearbz71m5] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: var(--bg-card);
    border-radius: 14px;
    border: 1px solid var(--border);
    transition: all 0.2s ease;
}

.sp-summary-card:hover[b-yearbz71m5] {
    border-color: var(--primary-alpha);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.sp-summary-icon[b-yearbz71m5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    flex-shrink: 0;
}

.sp-summary-icon.warehouses[b-yearbz71m5] {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

.sp-summary-icon.prices[b-yearbz71m5] {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.sp-summary-icon.categories[b-yearbz71m5] {
    background: rgba(139, 92, 246, 0.12);
    color: #8b5cf6;
}

.sp-summary-icon.attributes[b-yearbz71m5] {
    background: rgba(236, 72, 153, 0.12);
    color: #ec4899;
}

.sp-summary-content[b-yearbz71m5] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.sp-summary-label[b-yearbz71m5] {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.sp-summary-value[b-yearbz71m5] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    word-break: break-word;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SUMMARY DETAILS
   ═══════════════════════════════════════════════════════════════════════════════ */

.sp-summary-details[b-yearbz71m5] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    background: var(--bg-card);
    border-radius: 14px;
    border: 1px solid var(--border);
}

.sp-detail-row[b-yearbz71m5] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.sp-detail-row:last-child[b-yearbz71m5] {
    padding-bottom: 0;
    border-bottom: none;
}

.sp-detail-label[b-yearbz71m5] {
    flex-shrink: 0;
    width: 140px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
}

.sp-detail-value[b-yearbz71m5] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.sp-detail-path[b-yearbz71m5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.sp-path-item[b-yearbz71m5] {
    padding: 4px 10px;
    background: rgba(139, 92, 246, 0.1);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #8b5cf6;
}

.sp-path-arrow[b-yearbz71m5] {
    color: var(--text-muted);
    font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PRICE SECTIONS (3 Price Types)
   ═══════════════════════════════════════════════════════════════════════════════ */

.sp-price-sections[b-yearbz71m5] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sp-price-section[b-yearbz71m5] {
    background: var(--bg-card);
    border-radius: 14px;
    border: 1px solid var(--border);
    overflow: hidden;
}

.sp-price-header[b-yearbz71m5] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}

.sp-price-icon[b-yearbz71m5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
}

.sp-price-icon.cost[b-yearbz71m5] {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.sp-price-icon.list[b-yearbz71m5] {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

.sp-price-icon.sale[b-yearbz71m5] {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.sp-price-title[b-yearbz71m5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sp-price-title h4[b-yearbz71m5] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.sp-price-title span[b-yearbz71m5] {
    font-size: 12px;
    color: var(--text-muted);
}

.sp-price-config[b-yearbz71m5] {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sp-source-toggle[b-yearbz71m5] {
    display: flex;
    gap: 8px;
    padding: 4px;
    background: var(--bg-input);
    border-radius: 10px;
    width: fit-content;
}

.sp-toggle-btn[b-yearbz71m5] {
    padding: 8px 20px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.sp-toggle-btn:hover[b-yearbz71m5] {
    color: var(--text-primary);
}

.sp-toggle-btn.active[b-yearbz71m5] {
    background: var(--primary);
    color: white;
    box-shadow: 0 2px 8px var(--primary-alpha);
}

.sp-price-select[b-yearbz71m5] {
    min-width: 0;
}

.sp-price-select[b-yearbz71m5]  .searchable-select {
    width: 100%;
}

.sp-sale-price-grid[b-yearbz71m5] {
    max-height: 300px;
    overflow-y: auto;
    border-radius: 10px;
    border: 1px solid var(--border);
}

.sp-sale-price-grid[b-yearbz71m5]  .data-card {
    border: none;
    border-radius: 0;
}

.sp-sale-price-grid[b-yearbz71m5]  .data-table {
    font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   STEP 6: PUBLISHING RULES
   ═══════════════════════════════════════════════════════════════════════════════ */

.step-hero-icon.cyan[b-yearbz71m5] {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    box-shadow: 0 4px 16px rgba(6, 182, 212, 0.35);
}

.sp-option-cards.publish-rules[b-yearbz71m5] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sp-option-cards.publish-rules .sp-option-card[b-yearbz71m5] {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    gap: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sp-option-cards.publish-rules .sp-option-card:hover[b-yearbz71m5] {
    border-color: var(--primary);
}

.sp-option-cards.publish-rules .sp-option-card.selected[b-yearbz71m5] {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.04);
}

.sp-option-radio[b-yearbz71m5] {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-hover);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.sp-option-card.selected .sp-option-radio[b-yearbz71m5] {
    border-color: var(--primary);
    background: var(--primary);
}

.sp-radio-dot[b-yearbz71m5] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.sp-option-card.selected .sp-radio-dot[b-yearbz71m5] {
    opacity: 1;
}

.sp-option-icon[b-yearbz71m5] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-muted);
    border-radius: 10px;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.sp-option-card.selected .sp-option-icon[b-yearbz71m5] {
    background: rgba(99, 102, 241, 0.12);
    color: var(--primary);
}

.sp-option-content[b-yearbz71m5] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sp-option-content strong[b-yearbz71m5] {
    font-weight: 600;
    color: var(--text);
}

.sp-option-content span[b-yearbz71m5] {
    font-size: 13px;
    color: var(--text-muted);
}

/* Attribute Configuration */
.sp-attribute-config[b-yearbz71m5] {
    margin-top: 20px;
    padding: 20px;
    background: var(--bg-muted);
    border-radius: 12px;
    border: 1px solid var(--border);
}

.sp-section-title[b-yearbz71m5] {
    margin: 0 0 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.sp-form-row[b-yearbz71m5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.sp-form-group[b-yearbz71m5] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sp-form-group label[b-yearbz71m5] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sp-input[b-yearbz71m5] {
    padding: 10px 14px;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sp-input:focus[b-yearbz71m5] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.sp-input[b-yearbz71m5]::placeholder {
    color: var(--text-muted);
}

/* Example Card */
.sp-example-card[b-yearbz71m5] {
    margin-top: 16px;
    padding: 12px 16px;
    background: rgba(99, 102, 241, 0.06);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-muted);
}

.sp-example-icon[b-yearbz71m5] {
    color: var(--primary);
    flex-shrink: 0;
}

/* Summary Card - Publish */
.sp-summary-icon.publish[b-yearbz71m5] {
    background: rgba(6, 182, 212, 0.12);
    color: #06b6d4;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════
   DYNAMIC SQL SCRIPTS SECTION
   ═══════════════════════════════════════════════════════════════════════════════ */

.sp-dynamic-scripts[b-yearbz71m5] {
    margin-top: 28px;
    background: var(--bg-card);
    border-radius: 16px;
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.sp-dynamic-scripts-header[b-yearbz71m5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.04) 100%);
    border-bottom: 1px solid var(--border);
}

.sp-dynamic-scripts-title[b-yearbz71m5] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sp-dynamic-scripts-icon[b-yearbz71m5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    border-radius: 12px;
    color: white;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35);
}

.sp-dynamic-scripts-title h4[b-yearbz71m5] {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.sp-dynamic-scripts-title p[b-yearbz71m5] {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}

.sp-copy-scripts-btn[b-yearbz71m5] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35);
}

.sp-copy-scripts-btn:hover[b-yearbz71m5] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.45);
}

.sp-copy-scripts-btn.copied[b-yearbz71m5] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35);
}

/* Code Editor - macOS Style */
.sp-code-editor[b-yearbz71m5] {
    display: flex;
    flex-direction: column;
    border-radius: 0;
    overflow: hidden;
}

.sp-code-editor-header[b-yearbz71m5] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    background: #1e1e2e;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sp-code-editor-dots[b-yearbz71m5] {
    display: flex;
    gap: 8px;
}

.sp-code-editor-dots .dot[b-yearbz71m5] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.sp-code-editor-dots .dot.red[b-yearbz71m5] {
    background: #ff5f57;
    box-shadow: 0 0 8px rgba(255, 95, 87, 0.4);
}

.sp-code-editor-dots .dot.yellow[b-yearbz71m5] {
    background: #febc2e;
    box-shadow: 0 0 8px rgba(254, 188, 46, 0.4);
}

.sp-code-editor-dots .dot.green[b-yearbz71m5] {
    background: #28c840;
    box-shadow: 0 0 8px rgba(40, 200, 64, 0.4);
}

.sp-code-editor-filename[b-yearbz71m5] {
    font-family: 'SF Mono', 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.3px;
}

.sp-code-editor-body[b-yearbz71m5] {
    background: #0d0d14;
    padding: 0;
    min-height: 400px;
    max-height: 500px;
    overflow: auto;
}

/* Custom scrollbar for code editor */
.sp-code-editor-body[b-yearbz71m5]::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.sp-code-editor-body[b-yearbz71m5]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
}

.sp-code-editor-body[b-yearbz71m5]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
}

.sp-code-editor-body[b-yearbz71m5]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.15);
}

.sp-code-content[b-yearbz71m5] {
    margin: 0;
    padding: 20px 24px;
    background: transparent;
    counter-reset: line;
}

.sp-code-content code[b-yearbz71m5] {
    display: block;
    font-family: 'SF Mono', 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 13px;
    line-height: 1.8;
    color: #e2e8f0;
    white-space: pre;
    tab-size: 4;
    letter-spacing: 0.2px;
}

/* Syntax highlighting for SQL */
.sp-code-content code[b-yearbz71m5] {
    /* Keywords will be highlighted via JS or CSS pseudo-elements if needed */
    text-shadow: 0 0 1px rgba(226, 232, 240, 0.1);
}

/* Line numbers effect */
.sp-code-content[b-yearbz71m5]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 60px;
    background: rgba(255, 255, 255, 0.02);
    border-right: 1px solid rgba(255, 255, 255, 0.04);
}

/* Empty state for scripts */
.sp-scripts-empty[b-yearbz71m5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 60px 24px;
    background: #0d0d14;
    color: rgba(255, 255, 255, 0.4);
}

.sp-scripts-empty svg[b-yearbz71m5] {
    opacity: 0.3;
}

.sp-scripts-empty span[b-yearbz71m5] {
    font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Tablet */
@media (max-width: 1024px) {
    .sp-wizard[b-yearbz71m5] {
        width: 98vw;
        max-width: 98vw;
    }

    .wizard-header-icon[b-yearbz71m5] {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .wizard-header-icon svg[b-yearbz71m5] {
        width: 20px;
        height: 20px;
    }

    .wizard-header-title h2[b-yearbz71m5] {
        font-size: 18px;
    }

    .wizard-subtitle[b-yearbz71m5] {
        font-size: 12px;
    }

    .step-hero[b-yearbz71m5] {
        padding: 20px;
        gap: 16px;
        margin-bottom: 20px;
    }

    .step-hero-icon[b-yearbz71m5] {
        width: 48px;
        height: 48px;
    }

    .step-hero-icon svg[b-yearbz71m5] {
        width: 26px;
        height: 26px;
    }

    .sp-card-grid[b-yearbz71m5] {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 12px;
    }

    .sp-option-cards[b-yearbz71m5] {
        gap: 12px;
    }

    .sp-price-config[b-yearbz71m5] {
        padding: 14px 16px;
    }

    .sp-code-editor-body[b-yearbz71m5] {
        min-height: 300px;
        max-height: 400px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .sp-wizard[b-yearbz71m5] {
        width: 100vw;
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }

    /* Header */
    .wizard-header-title[b-yearbz71m5] {
        gap: 12px;
    }

    .wizard-header-icon[b-yearbz71m5] {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }

    .wizard-header-icon svg[b-yearbz71m5] {
        width: 18px;
        height: 18px;
    }

    .wizard-header-title h2[b-yearbz71m5] {
        font-size: 16px;
    }

    .wizard-subtitle[b-yearbz71m5] {
        font-size: 11px;
    }

    /* Step hero */
    .step-hero[b-yearbz71m5] {
        flex-direction: column;
        text-align: center;
        align-items: center;
        padding: 16px;
        gap: 12px;
        margin-bottom: 16px;
        border-radius: var(--radius);
    }

    .step-hero-icon[b-yearbz71m5] {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .step-hero-icon svg[b-yearbz71m5] {
        width: 24px;
        height: 24px;
    }

    .step-hero-content h3[b-yearbz71m5] {
        font-size: 16px;
    }

    .step-hero-content p[b-yearbz71m5] {
        font-size: 13px;
    }

    /* Grids - single column */
    .sp-option-cards[b-yearbz71m5] {
        grid-template-columns: 1fr;
    }

    .sp-form-row[b-yearbz71m5] {
        grid-template-columns: 1fr;
    }

    .sp-summary-grid[b-yearbz71m5] {
        grid-template-columns: 1fr;
    }

    .sp-card-grid[b-yearbz71m5] {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* Selection cards */
    .sp-selection-card[b-yearbz71m5] {
        padding: 12px;
    }

    .sp-card-icon svg[b-yearbz71m5] {
        width: 20px;
        height: 20px;
    }

    .sp-card-code[b-yearbz71m5] {
        font-size: 13px;
    }

    .sp-card-desc[b-yearbz71m5] {
        font-size: 11px;
    }

    /* Info cards */
    .sp-info-card[b-yearbz71m5] {
        padding: 12px;
        gap: 10px;
    }

    .sp-info-card p[b-yearbz71m5] {
        font-size: 13px;
    }

    .sp-warning-card[b-yearbz71m5] {
        padding: 12px;
        gap: 10px;
    }

    .sp-error-card[b-yearbz71m5] {
        padding: 20px;
    }

    /* Selection header */
    .sp-selection-header[b-yearbz71m5] {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

    .sp-selection-header h4[b-yearbz71m5] {
        font-size: 14px;
    }

    /* Price sections */
    .sp-price-header[b-yearbz71m5] {
        gap: 10px;
    }

    .sp-price-icon[b-yearbz71m5] {
        width: 36px;
        height: 36px;
    }

    .sp-price-title h4[b-yearbz71m5] {
        font-size: 14px;
    }

    .sp-price-title span[b-yearbz71m5] {
        font-size: 12px;
    }

    .sp-price-config[b-yearbz71m5] {
        padding: 12px;
        gap: 12px;
    }

    .sp-source-toggle[b-yearbz71m5] {
        flex-direction: column;
        gap: 6px;
    }

    .sp-toggle-btn[b-yearbz71m5] {
        justify-content: center;
        padding: 10px 12px;
        font-size: 12px;
    }

    /* Option cards */
    .sp-option-card[b-yearbz71m5] {
        padding: 14px;
    }

    .sp-option-cards.publish-rules .sp-option-card[b-yearbz71m5] {
        padding: 12px 14px;
        gap: 12px;
    }

    /* Scripts */
    .sp-dynamic-scripts-header[b-yearbz71m5] {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .sp-dynamic-scripts-title[b-yearbz71m5] {
        flex-direction: column;
        gap: 8px;
    }

    .sp-dynamic-scripts-title h4[b-yearbz71m5] {
        font-size: 14px;
    }

    .sp-dynamic-scripts-title p[b-yearbz71m5] {
        font-size: 12px;
    }

    .sp-copy-scripts-btn[b-yearbz71m5] {
        width: 100%;
        justify-content: center;
    }

    .sp-code-editor-header[b-yearbz71m5] {
        padding: 10px 14px;
        gap: 10px;
    }

    .sp-code-editor-dots .dot[b-yearbz71m5] {
        width: 10px;
        height: 10px;
    }

    .sp-code-editor-filename[b-yearbz71m5] {
        font-size: 11px;
    }

    .sp-code-editor-body[b-yearbz71m5] {
        min-height: 250px;
        max-height: 350px;
    }

    .sp-code-content[b-yearbz71m5] {
        font-size: 11px;
    }

    /* Instructions */
    .sp-instructions[b-yearbz71m5] {
        gap: 10px;
    }

    .sp-instruction-item[b-yearbz71m5] {
        font-size: 13px;
        gap: 10px;
    }

    .sp-instruction-number[b-yearbz71m5] {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    /* Summary */
    .sp-summary-card[b-yearbz71m5] {
        padding: 14px;
    }

    /* Footer */
    .wizard-footer[b-yearbz71m5] {
        padding: 12px 16px;
    }

    .wizard-footer .btn[b-yearbz71m5] {
        font-size: 13px;
        padding: 8px 14px;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .step-hero[b-yearbz71m5] {
        padding: 12px;
    }

    .step-hero-icon[b-yearbz71m5] {
        width: 38px;
        height: 38px;
    }

    .step-hero-content h3[b-yearbz71m5] {
        font-size: 15px;
    }

    .step-hero-content p[b-yearbz71m5] {
        font-size: 12px;
    }

    .sp-price-config[b-yearbz71m5] {
        padding: 10px;
    }

    .sp-toggle-btn[b-yearbz71m5] {
        padding: 8px 10px;
        font-size: 11px;
    }

    .sp-option-card[b-yearbz71m5] {
        padding: 12px;
    }

    .sp-card-grid[b-yearbz71m5] {
        gap: 8px;
    }

    .sp-code-editor-body[b-yearbz71m5] {
        min-height: 200px;
        max-height: 300px;
    }

    .sp-code-content[b-yearbz71m5] {
        font-size: 10px;
    }

    .wizard-footer .btn[b-yearbz71m5] {
        font-size: 12px;
        padding: 7px 12px;
    }
}
/* /Components/Pages/Finance/Settlements.razor.rz.scp.css */
/* Settlements Page - Elite Design */

/* Stats Grid */
.stats-grid[b-7sgkjdt5my] {
    display: grid;
    gap: 20px;
    margin-bottom: 24px;
}

.stats-grid-4[b-7sgkjdt5my] {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1200px) {
    .stats-grid-4[b-7sgkjdt5my] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.stat-card[b-7sgkjdt5my] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: all 0.2s ease;
}

.stat-card:hover[b-7sgkjdt5my] {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-sm);
}

.stat-icon[b-7sgkjdt5my] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon svg[b-7sgkjdt5my] {
    width: 24px;
    height: 24px;
}

.stat-icon.green[b-7sgkjdt5my] {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.stat-icon.red[b-7sgkjdt5my] {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.stat-icon.yellow[b-7sgkjdt5my] {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}

.stat-icon.blue[b-7sgkjdt5my] {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

.stat-content h3[b-7sgkjdt5my] {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
}

.stat-content h3 small[b-7sgkjdt5my] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    margin-left: 4px;
}

.stat-content p[b-7sgkjdt5my] {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 4px 0 0 0;
}

/* Filter Bar */
.filter-bar[b-7sgkjdt5my] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
}

.filter-bar-left[b-7sgkjdt5my] {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.filter-group[b-7sgkjdt5my] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-group label[b-7sgkjdt5my] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-group .form-select[b-7sgkjdt5my],
.filter-group .form-input[b-7sgkjdt5my] {
    min-width: 160px;
    height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-input);
    font-size: 14px;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.filter-group .form-select:hover[b-7sgkjdt5my],
.filter-group .form-input:hover[b-7sgkjdt5my] {
    border-color: var(--primary);
}

.filter-group .form-select:focus[b-7sgkjdt5my],
.filter-group .form-input:focus[b-7sgkjdt5my] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
}

/* Date Range Compact */
.date-range-compact[b-7sgkjdt5my] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.date-range-compact .form-input[b-7sgkjdt5my] {
    min-width: 140px;
}

.date-separator[b-7sgkjdt5my] {
    color: var(--text-muted);
    font-weight: 500;
}

/* Table Cell Styles */
.date-cell[b-7sgkjdt5my] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.date-cell small[b-7sgkjdt5my] {
    font-size: 12px;
    color: var(--text-muted);
}

/* Clickable Order Number */
.order-number[b-7sgkjdt5my] {
    font-weight: 600;
    color: var(--text-primary);
}

.order-number.clickable[b-7sgkjdt5my] {
    color: var(--primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.order-number.clickable:hover[b-7sgkjdt5my] {
    color: var(--primary-dark);
    text-decoration: underline;
}

.barcode-cell[b-7sgkjdt5my] {
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg-secondary);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}

/* Sortable Headers */
[b-7sgkjdt5my] th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 24px !important;
}

[b-7sgkjdt5my] th.sortable:hover {
    background: var(--bg-hover);
}

[b-7sgkjdt5my] th.sortable .sort-icon {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.3;
    width: 12px;
    height: 12px;
}

[b-7sgkjdt5my] th.sortable .sort-icon::before,
[b-7sgkjdt5my] th.sortable .sort-icon::after {
    content: '';
    position: absolute;
    left: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}

[b-7sgkjdt5my] th.sortable .sort-icon::before {
    top: 0;
    border-bottom: 5px solid currentColor;
}

[b-7sgkjdt5my] th.sortable .sort-icon::after {
    bottom: 0;
    border-top: 5px solid currentColor;
}

[b-7sgkjdt5my] th.sortable.sort-asc .sort-icon {
    opacity: 1;
}

[b-7sgkjdt5my] th.sortable.sort-asc .sort-icon::after {
    opacity: 0.3;
}

[b-7sgkjdt5my] th.sortable.sort-desc .sort-icon {
    opacity: 1;
}

[b-7sgkjdt5my] th.sortable.sort-desc .sort-icon::before {
    opacity: 0.3;
}

/* Column Header Colors */
[b-7sgkjdt5my] th.col-sale {
    background: rgba(16, 185, 129, 0.08);
}

[b-7sgkjdt5my] th.col-return {
    background: rgba(239, 68, 68, 0.08);
}

[b-7sgkjdt5my] th.col-discount {
    background: rgba(139, 92, 246, 0.08);
}

[b-7sgkjdt5my] th.col-coupon {
    background: rgba(236, 72, 153, 0.08);
}

[b-7sgkjdt5my] th.col-commission {
    background: rgba(245, 158, 11, 0.08);
}

[b-7sgkjdt5my] th.col-net {
    background: rgba(59, 130, 246, 0.08);
}

/* Amount Styles */
.amount-positive[b-7sgkjdt5my] {
    font-weight: 600;
    color: #10b981;
}

.amount-negative[b-7sgkjdt5my] {
    font-weight: 600;
    color: #ef4444;
}

.amount-commission[b-7sgkjdt5my] {
    font-weight: 600;
    color: #f59e0b;
}

.amount-net[b-7sgkjdt5my] {
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
}

.amount-net.positive[b-7sgkjdt5my] {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.amount-net.negative[b-7sgkjdt5my] {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.payment-period[b-7sgkjdt5my] {
    padding: 4px 8px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--text-secondary);
}

/* Totals Card */
.totals-card[b-7sgkjdt5my] {
    margin-top: 20px;
    padding: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.totals-grid[b-7sgkjdt5my] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

@media (max-width: 1200px) {
    .totals-grid[b-7sgkjdt5my] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ═══════════════════ RESPONSIVE ═══════════════════ */

/* Tablet */
@media (max-width: 1024px) {
    .stats-grid[b-7sgkjdt5my] {
        gap: 12px;
        margin-bottom: 16px;
    }

    .stat-card[b-7sgkjdt5my] {
        padding: 16px;
    }

    .stat-card:hover[b-7sgkjdt5my] {
        box-shadow: none;
    }

    .stat-icon[b-7sgkjdt5my] {
        width: 42px;
        height: 42px;
    }

    .stat-icon svg[b-7sgkjdt5my] {
        width: 20px;
        height: 20px;
    }

    .stat-content h3[b-7sgkjdt5my] {
        font-size: 20px;
    }

    /* Filter bar */
    .filter-bar[b-7sgkjdt5my] {
        padding: 14px 16px;
        gap: 12px;
        margin-bottom: 16px;
    }

    .filter-bar-left[b-7sgkjdt5my] {
        gap: 12px;
    }

    .filter-group .form-select[b-7sgkjdt5my],
    .filter-group .form-input[b-7sgkjdt5my] {
        min-width: 140px;
    }

    .date-range-compact .form-input[b-7sgkjdt5my] {
        min-width: 120px;
    }

    /* Totals */
    .totals-card[b-7sgkjdt5my] {
        padding: 16px;
        margin-top: 16px;
    }

    .totals-grid[b-7sgkjdt5my] {
        gap: 12px;
    }

    .total-value[b-7sgkjdt5my] {
        font-size: 16px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .stats-grid-4[b-7sgkjdt5my] {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 12px;
    }

    .stat-card[b-7sgkjdt5my] {
        padding: 14px;
        gap: 12px;
    }

    .stat-icon[b-7sgkjdt5my] {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }

    .stat-icon svg[b-7sgkjdt5my] {
        width: 18px;
        height: 18px;
    }

    .stat-content h3[b-7sgkjdt5my] {
        font-size: 18px;
    }

    .stat-content h3 small[b-7sgkjdt5my] {
        font-size: 12px;
    }

    .stat-content p[b-7sgkjdt5my] {
        font-size: 11px;
    }

    /* Filter bar - stack */
    .filter-bar[b-7sgkjdt5my] {
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
        gap: 12px;
        margin-bottom: 12px;
    }

    .filter-bar-left[b-7sgkjdt5my] {
        flex-direction: column;
        gap: 10px;
    }

    .filter-group[b-7sgkjdt5my] {
        width: 100%;
    }

    .filter-group .form-select[b-7sgkjdt5my],
    .filter-group .form-input[b-7sgkjdt5my] {
        min-width: auto;
        width: 100%;
    }

    .date-range-compact[b-7sgkjdt5my] {
        flex-direction: column;
        gap: 8px;
    }

    .date-range-compact .form-input[b-7sgkjdt5my] {
        min-width: auto;
        width: 100%;
    }

    .date-separator[b-7sgkjdt5my] {
        display: none;
    }

    /* Table amounts - smaller */
    .amount-positive[b-7sgkjdt5my],
    .amount-negative[b-7sgkjdt5my],
    .amount-commission[b-7sgkjdt5my],
    .amount-net[b-7sgkjdt5my] {
        font-size: 12px;
    }

    .order-number[b-7sgkjdt5my] {
        font-size: 12px;
    }

    .barcode-cell[b-7sgkjdt5my] {
        font-size: 11px;
    }

    .payment-period[b-7sgkjdt5my] {
        font-size: 11px;
    }

    /* Totals */
    .totals-card[b-7sgkjdt5my] {
        padding: 12px;
        margin-top: 12px;
    }

    .totals-grid[b-7sgkjdt5my] {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .total-item[b-7sgkjdt5my] {
        padding: 10px 12px;
    }

    .total-label[b-7sgkjdt5my] {
        font-size: 10px;
    }

    .total-value[b-7sgkjdt5my] {
        font-size: 15px;
    }

    /* Empty state */
    .empty-state[b-7sgkjdt5my] {
        padding: 40px 16px;
    }

    .empty-state-icon[b-7sgkjdt5my] {
        width: 52px;
        height: 52px;
    }

    .empty-state h3[b-7sgkjdt5my] {
        font-size: 16px;
    }

    .empty-state p[b-7sgkjdt5my] {
        font-size: 13px;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .stats-grid-4[b-7sgkjdt5my] {
        gap: 8px;
    }

    .stat-card[b-7sgkjdt5my] {
        padding: 12px;
        gap: 10px;
    }

    .stat-icon[b-7sgkjdt5my] {
        width: 34px;
        height: 34px;
    }

    .stat-icon svg[b-7sgkjdt5my] {
        width: 16px;
        height: 16px;
    }

    .stat-content h3[b-7sgkjdt5my] {
        font-size: 16px;
    }

    .stat-content p[b-7sgkjdt5my] {
        font-size: 10px;
    }

    /* Filter */
    .filter-bar[b-7sgkjdt5my] {
        padding: 10px;
    }

    .filter-group label[b-7sgkjdt5my] {
        font-size: 11px;
    }

    /* Totals */
    .totals-grid[b-7sgkjdt5my] {
        grid-template-columns: 1fr;
    }

    .total-value[b-7sgkjdt5my] {
        font-size: 14px;
    }
}

.total-item[b-7sgkjdt5my] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
}

.total-item.sale[b-7sgkjdt5my] {
    border-left: 3px solid #10b981;
}

.total-item.return[b-7sgkjdt5my] {
    border-left: 3px solid #ef4444;
}

.total-item.discount[b-7sgkjdt5my] {
    border-left: 3px solid #8b5cf6;
}

.total-item.coupon[b-7sgkjdt5my] {
    border-left: 3px solid #ec4899;
}

.total-item.commission[b-7sgkjdt5my] {
    border-left: 3px solid #f59e0b;
}

.total-item.net[b-7sgkjdt5my] {
    border-left: 3px solid #3b82f6;
    background: rgba(59, 130, 246, 0.08);
}

.total-label[b-7sgkjdt5my] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.total-value[b-7sgkjdt5my] {
    font-size: 18px;
    font-weight: 700;
}

.total-value.positive[b-7sgkjdt5my] {
    color: #10b981;
}

.total-value.negative[b-7sgkjdt5my] {
    color: #ef4444;
}

.total-value.commission[b-7sgkjdt5my] {
    color: #f59e0b;
}

/* Empty State */
.empty-state[b-7sgkjdt5my] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.empty-state-icon[b-7sgkjdt5my] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.empty-state-icon svg[b-7sgkjdt5my] {
    width: 32px;
    height: 32px;
    color: var(--text-muted);
}

.empty-state.error .empty-state-icon[b-7sgkjdt5my] {
    background: rgba(239, 68, 68, 0.12);
}

.empty-state.error .empty-state-icon svg[b-7sgkjdt5my] {
    color: #ef4444;
}

.empty-state h3[b-7sgkjdt5my] {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.empty-state p[b-7sgkjdt5my] {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
    max-width: 400px;
}

/* Text Alignment */
.text-end[b-7sgkjdt5my] {
    text-align: right !important;
}
/* /Components/Pages/Help/HelpCenter.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════ */
/* HELP CENTER - SIDEBAR + CONTENT LAYOUT                          */
/* ═══════════════════════════════════════════════════════════════ */

.help-layout[b-5tm47obzuh] {
    display: grid;
    grid-template-columns: 300px 1fr;
    height: calc(100vh - 73px);
    overflow: hidden;
}

/* ===== SOL PANEL ===== */
.help-sidebar[b-5tm47obzuh] {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    background: var(--bg-secondary);
    overflow: hidden;
}

.help-sidebar-header[b-5tm47obzuh] {
    padding: 20px 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.help-sidebar-header h2[b-5tm47obzuh] {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.help-home-btn[b-5tm47obzuh] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.help-home-btn:hover[b-5tm47obzuh] {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-alpha);
}

/* Mobil hızlı erişim — desktop'ta gizli */
.help-mobile-quick[b-5tm47obzuh] {
    display: none;
}

/* Arama */
.help-search-box[b-5tm47obzuh] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 16px;
    padding: 8px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s ease;
}

.help-search-box:focus-within[b-5tm47obzuh] {
    border-color: var(--primary);
}

.help-search-box svg[b-5tm47obzuh] {
    flex-shrink: 0;
    color: var(--text-muted);
}

.help-search-box input[b-5tm47obzuh] {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 13px;
    font-family: inherit;
    color: var(--text-primary);
    min-width: 0;
}

.help-search-box input[b-5tm47obzuh]::placeholder {
    color: var(--text-muted);
}

.help-search-clear[b-5tm47obzuh] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
}

.help-search-clear:hover[b-5tm47obzuh] {
    background: var(--bg-card);
    color: var(--text-primary);
}

/* Navigasyon */
.help-nav[b-5tm47obzuh] {
    flex: 1;
    overflow-y: auto;
    padding: 0 8px 16px;
}

.help-nav[b-5tm47obzuh]::-webkit-scrollbar { width: 4px; }
.help-nav[b-5tm47obzuh]::-webkit-scrollbar-track { background: transparent; }
.help-nav[b-5tm47obzuh]::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.help-nav-section[b-5tm47obzuh] {
    flex: 1;
    overflow-y: auto;
    padding: 0 8px 16px;
}

.help-nav-title[b-5tm47obzuh] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    padding: 8px 12px;
}

.help-nav-empty[b-5tm47obzuh] {
    padding: 16px 12px;
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
}

/* Kategori */
.help-nav-group[b-5tm47obzuh] {
    margin-bottom: 2px;
}

.help-nav-category[b-5tm47obzuh] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.help-nav-category:hover[b-5tm47obzuh] {
    background: var(--bg-input);
    color: var(--text-primary);
}

.help-nav-group.expanded .help-nav-category[b-5tm47obzuh] {
    color: var(--text-primary);
    font-weight: 600;
}

.help-nav-icon[b-5tm47obzuh] {
    flex-shrink: 0;
    color: var(--primary);
    opacity: 0.7;
}

.help-nav-group.expanded .help-nav-icon[b-5tm47obzuh] {
    opacity: 1;
}

.help-nav-category-title[b-5tm47obzuh] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.help-nav-count[b-5tm47obzuh] {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-input);
    padding: 1px 7px;
    border-radius: 10px;
}

.help-nav-chevron[b-5tm47obzuh] {
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.help-nav-group.expanded .help-nav-chevron[b-5tm47obzuh] {
    transform: rotate(180deg);
}

/* Makale Listesi */
.help-nav-articles[b-5tm47obzuh] {
    padding: 2px 0 4px 20px;
    animation: helpSlideDown-b-5tm47obzuh 0.15s ease;
}

@keyframes helpSlideDown-b-5tm47obzuh {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.help-nav-item[b-5tm47obzuh] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-radius: var(--radius-sm);
    border-left: 2px solid transparent;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
}

.help-nav-item:hover[b-5tm47obzuh] {
    background: var(--bg-input);
}

.help-nav-item.active[b-5tm47obzuh] {
    background: var(--primary-alpha);
    border-left-color: var(--primary);
}

.help-nav-item-title[b-5tm47obzuh] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.help-nav-item.active .help-nav-item-title[b-5tm47obzuh] {
    color: var(--primary);
    font-weight: 600;
}

.help-nav-item-desc[b-5tm47obzuh] {
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== SAĞ PANEL ===== */
.help-content[b-5tm47obzuh] {
    overflow-y: auto;
    padding: 32px;
    background: var(--bg-primary);
}

.help-content[b-5tm47obzuh]::-webkit-scrollbar { width: 6px; }
.help-content[b-5tm47obzuh]::-webkit-scrollbar-track { background: transparent; }
.help-content[b-5tm47obzuh]::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* Mobil geri butonu - desktop'ta gizli */
.help-mobile-back[b-5tm47obzuh] {
    display: none;
}

/* Makale */
.help-article[b-5tm47obzuh] {
    max-width: 100%;
}

.help-article-head[b-5tm47obzuh] {
    margin-bottom: 28px;
}

.help-article-cat-badge[b-5tm47obzuh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--primary-alpha);
    border-radius: 6px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 12px;
}

.help-article-head h1[b-5tm47obzuh] {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px;
    line-height: 1.3;
}

.help-article-desc[b-5tm47obzuh] {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Adımlar */
.help-steps[b-5tm47obzuh] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.help-step[b-5tm47obzuh] {
    display: flex;
    gap: 14px;
    padding: 18px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.15s ease;
}

.help-step:hover[b-5tm47obzuh] {
    border-color: var(--border-hover);
}

.help-step-num[b-5tm47obzuh] {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.help-step-body[b-5tm47obzuh] {
    flex: 1;
    min-width: 0;
}

.help-step-body h3[b-5tm47obzuh] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 6px;
}

.help-step-body p[b-5tm47obzuh] {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0;
}

/* Etiketler */
.help-article-tags[b-5tm47obzuh] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.help-tag[b-5tm47obzuh] {
    font-size: 11px;
    padding: 3px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-muted);
}

/* İlgili Makaleler */
.help-related[b-5tm47obzuh] {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.help-related h3[b-5tm47obzuh] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px;
}

.help-related-list[b-5tm47obzuh] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.help-related-item[b-5tm47obzuh] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}

.help-related-item:hover[b-5tm47obzuh] {
    border-color: var(--primary);
}

.help-related-title[b-5tm47obzuh] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.help-related-desc[b-5tm47obzuh] {
    font-size: 12px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== WELCOME PANEL ===== */
.help-welcome[b-5tm47obzuh] {
    padding: 8px 0;
}

.help-welcome-header[b-5tm47obzuh] {
    margin-bottom: 24px;
}

.help-welcome-header h2[b-5tm47obzuh] {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 6px;
}

.help-welcome-header p[b-5tm47obzuh] {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
}

/* Hızlı Erişim Grid */
.help-quick-grid[b-5tm47obzuh] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 32px;
}

.help-quick-card[b-5tm47obzuh] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
}

.help-quick-card:hover[b-5tm47obzuh] {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.help-quick-icon[b-5tm47obzuh] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.help-quick-icon.green[b-5tm47obzuh]  { background: rgba(16, 185, 129, 0.12); color: #10b981; }
.help-quick-icon.blue[b-5tm47obzuh]   { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }
.help-quick-icon.purple[b-5tm47obzuh] { background: rgba(139, 92, 246, 0.12); color: #8b5cf6; }
.help-quick-icon.orange[b-5tm47obzuh] { background: rgba(249, 115, 22, 0.12); color: #f97316; }
.help-quick-icon.pink[b-5tm47obzuh]   { background: rgba(236, 72, 153, 0.12); color: #ec4899; }
.help-quick-icon.cyan[b-5tm47obzuh]   { background: rgba(6, 182, 212, 0.12);  color: #06b6d4; }

.help-quick-card h4[b-5tm47obzuh] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.help-quick-card p[b-5tm47obzuh] {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

/* Popüler Makaleler */
.help-popular[b-5tm47obzuh] {
    border-top: 1px solid var(--border);
    padding-top: 24px;
}

.help-popular h3[b-5tm47obzuh] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px;
}

.help-popular-list[b-5tm47obzuh] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.help-popular-item[b-5tm47obzuh] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}

.help-popular-item:hover[b-5tm47obzuh] {
    border-color: var(--primary);
    background: var(--bg-card-hover);
}

.help-popular-info[b-5tm47obzuh] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.help-popular-title[b-5tm47obzuh] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.help-popular-desc[b-5tm47obzuh] {
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.help-popular-badge[b-5tm47obzuh] {
    font-size: 10px;
    font-weight: 500;
    color: var(--primary);
    background: var(--primary-alpha);
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════ */
/* RESPONSIVE                                                      */
/* ═══════════════════════════════════════════════════════════════ */

/* Tablet */
@media (max-width: 1024px) {
    .help-layout[b-5tm47obzuh] {
        grid-template-columns: 260px 1fr;
    }

    .help-content[b-5tm47obzuh] {
        padding: 24px;
    }

    .help-quick-grid[b-5tm47obzuh] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 768px) {
    .help-layout[b-5tm47obzuh] {
        grid-template-columns: 1fr;
        height: auto;
        min-height: calc(100vh - 73px);
    }

    /* Sidebar full width, content hidden by default */
    .help-sidebar[b-5tm47obzuh] {
        border-right: none;
        max-height: calc(100vh - 73px);
        overflow-y: auto;
    }

    .help-content[b-5tm47obzuh] {
        display: none;
        padding: 16px;
    }

    /* When article selected: hide sidebar, show content */
    .help-layout.has-article .help-sidebar[b-5tm47obzuh] {
        display: none;
    }

    .help-layout.has-article .help-content[b-5tm47obzuh] {
        display: block;
        min-height: calc(100vh - 73px);
    }

    /* Mobil geri butonu */
    .help-mobile-back[b-5tm47obzuh] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 12px;
        margin-bottom: 16px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: transparent;
        color: var(--text-secondary);
        font-family: inherit;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
    }

    .help-mobile-back:hover[b-5tm47obzuh] {
        border-color: var(--primary);
        color: var(--primary);
    }

    .help-sidebar-header[b-5tm47obzuh] {
        padding: 16px 16px 0;
    }

    .help-search-box[b-5tm47obzuh] {
        margin: 12px 12px;
    }

    .help-search-box input[b-5tm47obzuh] {
        font-size: 16px;
    }

    .help-nav[b-5tm47obzuh] {
        padding: 0 6px 16px;
    }

    .help-article-head h1[b-5tm47obzuh] {
        font-size: 22px;
    }

    .help-article-desc[b-5tm47obzuh] {
        font-size: 14px;
    }

    .help-step[b-5tm47obzuh] {
        padding: 14px 16px;
    }

    .help-step-body h3[b-5tm47obzuh] {
        font-size: 14px;
    }

    .help-step-body p[b-5tm47obzuh] {
        font-size: 13px;
    }

    .help-quick-grid[b-5tm47obzuh] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .help-quick-card[b-5tm47obzuh] {
        flex-direction: row;
        align-items: center;
        padding: 14px 16px;
        gap: 14px;
    }

    .help-quick-icon[b-5tm47obzuh] {
        width: 40px;
        height: 40px;
    }

    .help-quick-card p[b-5tm47obzuh] {
        display: none;
    }

    .help-popular-list[b-5tm47obzuh] {
        grid-template-columns: 1fr;
    }

    .help-welcome-header h2[b-5tm47obzuh] {
        font-size: 18px;
    }

    /* Mobil hızlı erişim */
    .help-mobile-quick[b-5tm47obzuh] {
        display: block;
        padding: 12px 16px 16px;
        border-top: 1px solid var(--border);
    }

    .help-mobile-quick-title[b-5tm47obzuh] {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--text-muted);
        margin-bottom: 8px;
        padding: 0 4px;
    }

    .help-mobile-quick-grid[b-5tm47obzuh] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .help-mobile-quick-item[b-5tm47obzuh] {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        font-family: inherit;
        font-size: 12px;
        font-weight: 500;
        color: var(--text-primary);
        text-align: left;
        cursor: pointer;
        transition: all 0.15s ease;
    }

    .help-mobile-quick-item:hover[b-5tm47obzuh] {
        border-color: var(--primary);
    }

    .hmq-icon[b-5tm47obzuh] {
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        flex-shrink: 0;
    }

    .hmq-icon.green[b-5tm47obzuh]  { background: rgba(16, 185, 129, 0.12); color: #10b981; }
    .hmq-icon.blue[b-5tm47obzuh]   { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }
    .hmq-icon.purple[b-5tm47obzuh] { background: rgba(139, 92, 246, 0.12); color: #8b5cf6; }
    .hmq-icon.pink[b-5tm47obzuh]   { background: rgba(236, 72, 153, 0.12); color: #ec4899; }
    .hmq-icon.orange[b-5tm47obzuh] { background: rgba(249, 115, 22, 0.12); color: #f97316; }
    .hmq-icon.cyan[b-5tm47obzuh]   { background: rgba(6, 182, 212, 0.12);  color: #06b6d4; }
}

/* Small mobile */
@media (max-width: 480px) {
    .help-content[b-5tm47obzuh] {
        padding: 12px;
    }

    .help-article-head h1[b-5tm47obzuh] {
        font-size: 20px;
    }

    .help-step[b-5tm47obzuh] {
        padding: 12px 14px;
        gap: 10px;
    }

    .help-step-num[b-5tm47obzuh] {
        width: 26px;
        height: 26px;
        font-size: 12px;
    }
}
/* /Components/Pages/Jobs/ScheduledJobs.razor.rz.scp.css */
/* ScheduledJobs page responsive */

@media (max-width: 768px) {
    .job-name .name[b-lmlrwsgr8f] {
        font-size: 13px;
    }

    .job-type-badge[b-lmlrwsgr8f] {
        font-size: 11px;
        padding: 3px 8px;
    }

    .status-badge[b-lmlrwsgr8f] {
        font-size: 11px;
        padding: 3px 8px;
    }

    .datetime[b-lmlrwsgr8f] {
        font-size: 12px;
    }

    .result-badge[b-lmlrwsgr8f] {
        font-size: 11px;
        gap: 4px;
    }

    .result-badge svg[b-lmlrwsgr8f] {
        width: 12px;
        height: 12px;
    }

    .action-buttons[b-lmlrwsgr8f] {
        gap: 2px;
    }

    .btn-icon[b-lmlrwsgr8f] {
        width: 30px;
        height: 30px;
    }

    .btn-icon svg[b-lmlrwsgr8f] {
        width: 14px;
        height: 14px;
    }

    .form-row[b-lmlrwsgr8f] {
        grid-template-columns: 1fr;
    }

    /* Modal form sections - tighter spacing */
    .form-section[b-lmlrwsgr8f] {
        margin-bottom: 16px;
        padding-bottom: 16px;
    }

    .form-section-title[b-lmlrwsgr8f] {
        font-size: 13px;
        margin-bottom: 12px;
    }

    /* Generated name - prevent overflow */
    .generated-name[b-lmlrwsgr8f] {
        flex-direction: column;
        gap: 4px;
        padding: 10px 12px;
    }

    .generated-name .value[b-lmlrwsgr8f] {
        font-size: 13px;
        word-break: break-all;
    }
}

@media (max-width: 480px) {
    .job-name .name[b-lmlrwsgr8f] {
        font-size: 12px;
    }

    .job-type-badge[b-lmlrwsgr8f],
    .status-badge[b-lmlrwsgr8f] {
        font-size: 10px;
        padding: 2px 6px;
    }

    .result-badge[b-lmlrwsgr8f] {
        font-size: 10px;
    }

    .btn-icon[b-lmlrwsgr8f] {
        width: 28px;
        height: 28px;
    }
}
/* /Components/Pages/Mappings/AttributeMappingPanel.razor.rz.scp.css */
/* Loading & Error States */
.modal-loading[b-44c6p6zlrp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px;
    color: var(--text-secondary);
}

.modal-loading .spinner[b-44c6p6zlrp] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-44c6p6zlrp 1s linear infinite;
}

.panel-error[b-44c6p6zlrp] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--bg-danger-subtle);
    border-radius: 8px;
    color: var(--danger);
}

@keyframes spin-b-44c6p6zlrp {
    to {
        transform: rotate(360deg);
    }
}

/* Container */
.attribute-mapping-container[b-44c6p6zlrp] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Toolbar */
.mapping-toolbar[b-44c6p6zlrp] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.mapping-info[b-44c6p6zlrp] {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Section Headers */
.section-header[b-44c6p6zlrp] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-top: 8px;
}

.section-header:first-child[b-44c6p6zlrp] {
    margin-top: 0;
}

.section-title[b-44c6p6zlrp] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.section-count[b-44c6p6zlrp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 20px;
    padding: 0 8px;
    background: var(--primary);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    color: white;
}

/* Mapping Grid */
.mapping-grid[b-44c6p6zlrp] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 55vh;
    overflow-y: auto;
    padding-right: 4px;
}

.value-mapping-grid[b-44c6p6zlrp] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 250px;
    max-height: 50vh;
    overflow-y: auto;
}

/* Mapping Row */
.mapping-row[b-44c6p6zlrp] {
    display: grid;
    grid-template-columns: 1fr auto 2fr;
    gap: 16px;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: all 0.15s ease;
}

.mapping-row:hover[b-44c6p6zlrp] {
    border-color: var(--primary-light);
}

.mapping-row.mapped[b-44c6p6zlrp] {
    background: rgba(16, 185, 129, 0.04);
    border-color: rgba(16, 185, 129, 0.3);
}

.mapping-row.mapped:hover[b-44c6p6zlrp] {
    border-color: var(--success);
}

/* Local Column (Left) */
.mapping-local[b-44c6p6zlrp] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.mapping-local strong[b-44c6p6zlrp] {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attr-name-row[b-44c6p6zlrp] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.attr-meta[b-44c6p6zlrp] {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Badges */
.badge[b-44c6p6zlrp] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    white-space: nowrap;
}

.badge-variant[b-44c6p6zlrp] {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
}

.badge-required[b-44c6p6zlrp] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

/* Arrow Column */
.mapping-arrow[b-44c6p6zlrp] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    flex-shrink: 0;
}

/* Platform Column (Right) */
.mapping-platform[b-44c6p6zlrp] {
    min-width: 0;
}

.mapping-controls[b-44c6p6zlrp] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.control-select[b-44c6p6zlrp],
.control-input[b-44c6p6zlrp] {
    flex: 1;
    min-width: 0;
}

.control-input .form-input[b-44c6p6zlrp] {
    width: 100%;
}

.control-or[b-44c6p6zlrp] {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Default Value Selected Indicator */
.control-select.has-default[b-44c6p6zlrp] {
    position: relative;
}

.control-select.has-default[b-44c6p6zlrp]::after {
    content: '✓';
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--success);
    font-size: 14px;
    font-weight: bold;
}

/* Value Mapping Button */
.btn-values[b-44c6p6zlrp] {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn-values:hover[b-44c6p6zlrp] {
    background: var(--bg-secondary);
    border-color: var(--primary);
    color: var(--primary);
}

.btn-values.has-mappings[b-44c6p6zlrp] {
    border-color: var(--success);
    color: var(--success);
}

/* Değer eşleşme durumu rozeti — butonun solunda, normal flex-item olarak duruyor.
   3 durum: complete (hepsi eşleşti) / partial (kısmi) / none (hiç eşleşmemiş). */
.value-badge[b-44c6p6zlrp] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    border: 1px solid transparent;
    line-height: 1;
}

.value-badge-complete[b-44c6p6zlrp] {
    background: rgba(16, 185, 129, 0.12);
    color: var(--success, #10b981);
    border-color: rgba(16, 185, 129, 0.35);
}

.value-badge-partial[b-44c6p6zlrp] {
    background: rgba(245, 158, 11, 0.12);
    color: var(--warning, #f59e0b);
    border-color: rgba(245, 158, 11, 0.35);
}

.value-badge-none[b-44c6p6zlrp] {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

/* =====================================================
   VALUE MAPPING MODAL - Premium Design
   ===================================================== */

.vm-modal[b-44c6p6zlrp] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 450px;
}

/* Header Card - Attribute Pair */
.vm-header-card[b-44c6p6zlrp] {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
}

.vm-attr-pair[b-44c6p6zlrp] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.vm-attr-box[b-44c6p6zlrp] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-primary);
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

.vm-attr-box.local[b-44c6p6zlrp] {
    border-left: 3px solid var(--primary);
}

.vm-attr-box.platform[b-44c6p6zlrp] {
    border-left: 3px solid var(--success);
}

.vm-attr-icon[b-44c6p6zlrp] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
}

.vm-attr-box.local .vm-attr-icon[b-44c6p6zlrp] {
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary);
}

.vm-attr-box.platform .vm-attr-icon[b-44c6p6zlrp] {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.vm-attr-content[b-44c6p6zlrp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.vm-attr-label[b-44c6p6zlrp] {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}

.vm-attr-name[b-44c6p6zlrp] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vm-attr-arrow[b-44c6p6zlrp] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

/* Controls Row - Stats & Filters */
.vm-controls[b-44c6p6zlrp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.vm-stats[b-44c6p6zlrp] {
    display: flex;
    gap: 8px;
}

.vm-stat[b-44c6p6zlrp] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.vm-stat-num[b-44c6p6zlrp] {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

.vm-stat-text[b-44c6p6zlrp] {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

.vm-stat.success .vm-stat-num[b-44c6p6zlrp] {
    color: var(--success);
}

.vm-stat.warning .vm-stat-num[b-44c6p6zlrp] {
    color: var(--warning);
}

.vm-actions[b-44c6p6zlrp] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Filter Pills */
.vm-filters[b-44c6p6zlrp] {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.vm-filter[b-44c6p6zlrp] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.vm-filter:hover[b-44c6p6zlrp] {
    color: var(--text-primary);
}

.vm-filter.active[b-44c6p6zlrp] {
    background: var(--bg-primary);
    color: var(--primary);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.vm-filter-count[b-44c6p6zlrp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 9px;
    font-size: 11px;
    font-weight: 600;
}

.vm-filter.active .vm-filter-count[b-44c6p6zlrp] {
    background: var(--primary);
    color: white;
}

/* Value List */
.vm-list[b-44c6p6zlrp] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 4px;
}

.vm-row[b-44c6p6zlrp] {
    display: grid;
    grid-template-columns: 1fr 40px 1.5fr;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: all 0.15s ease;
}

.vm-row:hover[b-44c6p6zlrp] {
    border-color: var(--primary-light);
}

.vm-row.mapped[b-44c6p6zlrp] {
    background: rgba(16, 185, 129, 0.03);
    border-color: rgba(16, 185, 129, 0.25);
}

.vm-row.mapped:hover[b-44c6p6zlrp] {
    border-color: var(--success);
}

.vm-local-value[b-44c6p6zlrp] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.vm-value-text[b-44c6p6zlrp] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vm-check[b-44c6p6zlrp] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: var(--success);
    border-radius: 50%;
    color: white;
    flex-shrink: 0;
}

.vm-arrow[b-44c6p6zlrp] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    opacity: 0.5;
}

.vm-row.mapped .vm-arrow[b-44c6p6zlrp] {
    color: var(--success);
    opacity: 1;
}

.vm-platform-value[b-44c6p6zlrp] {
    min-width: 0;
}

/* Empty State */
.vm-empty[b-44c6p6zlrp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 24px;
    text-align: center;
}

.vm-empty-icon[b-44c6p6zlrp] {
    color: var(--text-secondary);
    opacity: 0.4;
}

.vm-empty.success .vm-empty-icon[b-44c6p6zlrp] {
    color: var(--success);
    opacity: 0.7;
}

.vm-empty-text[b-44c6p6zlrp] {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Empty State */
.empty-state[b-44c6p6zlrp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 32px;
    color: var(--text-secondary);
    font-style: italic;
}

.empty-state svg[b-44c6p6zlrp] {
    color: var(--success);
    opacity: 0.7;
}
/* /Components/Pages/Mappings/AttributeMappingWizard.razor.rz.scp.css */
/* Wizard Container */
.wizard-container[b-ob2v3u2dkj] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-height: 400px;
}

/* Wizard Steps */
.wizard-steps[b-ob2v3u2dkj] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 16px 0;
    background: var(--bg-secondary);
    border-radius: 12px;
    margin: -16px -24px 0;
    padding: 24px;
}

.wizard-step[b-ob2v3u2dkj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.step-number[b-ob2v3u2dkj] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    font-weight: 600;
    font-size: 14px;
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.wizard-step.active .step-number[b-ob2v3u2dkj] {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.wizard-step.completed .step-number[b-ob2v3u2dkj] {
    background: var(--success);
    border-color: var(--success);
    color: white;
}

.step-label[b-ob2v3u2dkj] {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.wizard-step.active .step-label[b-ob2v3u2dkj] {
    color: var(--primary);
    font-weight: 600;
}

.wizard-step.completed .step-label[b-ob2v3u2dkj] {
    color: var(--success);
}

.wizard-step-line[b-ob2v3u2dkj] {
    width: 60px;
    height: 2px;
    background: var(--border-color);
    margin: 0 8px;
    margin-bottom: 24px;
    transition: background 0.3s ease;
}

.wizard-step-line.completed[b-ob2v3u2dkj] {
    background: var(--success);
}

/* Step Content */
.wizard-content[b-ob2v3u2dkj] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.step-content[b-ob2v3u2dkj] {
    flex: 1;
}

.step-content h3[b-ob2v3u2dkj] {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

.step-description[b-ob2v3u2dkj] {
    margin: 0 0 24px;
    color: var(--text-secondary);
    font-size: 14px;
}

/* Category Selection */
.category-selection[b-ob2v3u2dkj] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.select-all-row[b-ob2v3u2dkj] {
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.checkbox-label[b-ob2v3u2dkj] {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"][b-ob2v3u2dkj] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

.category-list[b-ob2v3u2dkj] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
    padding-right: 8px;
}

.category-item[b-ob2v3u2dkj] {
    padding: 12px 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.category-item:hover[b-ob2v3u2dkj] {
    border-color: var(--primary-light);
}

.category-item.selected[b-ob2v3u2dkj] {
    background: rgba(59, 130, 246, 0.04);
    border-color: var(--primary);
}

.category-item .checkbox-label[b-ob2v3u2dkj] {
    flex-wrap: wrap;
}

.category-name[b-ob2v3u2dkj] {
    font-weight: 500;
    color: var(--text-primary);
}

.category-path[b-ob2v3u2dkj] {
    font-size: 12px;
    color: var(--text-secondary);
    flex-basis: 100%;
    margin-left: 30px;
    margin-top: 4px;
}

/* Processing Step */
.processing-step[b-ob2v3u2dkj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 0;
}

.processing-icon[b-ob2v3u2dkj] {
    margin-bottom: 24px;
}

.spinner-large[b-ob2v3u2dkj] {
    width: 64px;
    height: 64px;
    border: 4px solid var(--border-color);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-ob2v3u2dkj 1s linear infinite;
}

@keyframes spin-b-ob2v3u2dkj {
    to {
        transform: rotate(360deg);
    }
}

.progress-container[b-ob2v3u2dkj] {
    width: 100%;
    max-width: 400px;
    margin: 24px 0;
}

.progress-bar[b-ob2v3u2dkj] {
    height: 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill[b-ob2v3u2dkj] {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-text[b-ob2v3u2dkj] {
    margin-top: 8px;
    font-size: 14px;
    color: var(--text-secondary);
}

.processing-stats[b-ob2v3u2dkj] {
    display: flex;
    gap: 32px;
    margin-top: 24px;
}

.stat-item[b-ob2v3u2dkj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.stat-value[b-ob2v3u2dkj] {
    font-size: 24px;
    font-weight: 700;
}

.stat-value.text-success[b-ob2v3u2dkj] {
    color: var(--success);
}

.stat-label[b-ob2v3u2dkj] {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Results */
.results-header[b-ob2v3u2dkj] {
    margin-bottom: 24px;
}

.results-stats[b-ob2v3u2dkj] {
    display: flex;
    gap: 16px;
    margin-top: 16px;
}

.stat-card[b-ob2v3u2dkj] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.stat-card.success[b-ob2v3u2dkj] {
    background: rgba(16, 185, 129, 0.06);
    border-color: rgba(16, 185, 129, 0.2);
}

.stat-card.success .stat-icon[b-ob2v3u2dkj] {
    color: var(--success);
}

.stat-card.warning[b-ob2v3u2dkj] {
    background: rgba(245, 158, 11, 0.06);
    border-color: rgba(245, 158, 11, 0.2);
}

.stat-card.warning .stat-icon[b-ob2v3u2dkj] {
    color: #f59e0b;
}

.stat-icon[b-ob2v3u2dkj] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-info[b-ob2v3u2dkj] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat-info .stat-value[b-ob2v3u2dkj] {
    font-size: 20px;
}

.stat-info .stat-label[b-ob2v3u2dkj] {
    font-size: 13px;
}

/* Unmatched Section */
.unmatched-section[b-ob2v3u2dkj] {
    margin-top: 24px;
}

.unmatched-section h4[b-ob2v3u2dkj] {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.section-description[b-ob2v3u2dkj] {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--text-secondary);
}

.unmatched-list[b-ob2v3u2dkj] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 8px;
}

.unmatched-item[b-ob2v3u2dkj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.unmatched-item:hover[b-ob2v3u2dkj] {
    border-color: var(--primary-light);
}

.unmatched-item.resolved[b-ob2v3u2dkj] {
    background: rgba(16, 185, 129, 0.04);
    border-color: rgba(16, 185, 129, 0.3);
}

.unmatched-info[b-ob2v3u2dkj] {
    flex: 1;
    min-width: 0;
}

.unmatched-category[b-ob2v3u2dkj] {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.unmatched-attr[b-ob2v3u2dkj] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.attr-name[b-ob2v3u2dkj] {
    font-weight: 500;
    color: var(--text-primary);
}

.badge[b-ob2v3u2dkj] {
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 4px;
}

.badge-required[b-ob2v3u2dkj] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.badge-variant[b-ob2v3u2dkj] {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
}

.unmatched-action[b-ob2v3u2dkj] {
    width: 250px;
    flex-shrink: 0;
}

.no-local-attr[b-ob2v3u2dkj] {
    font-size: 13px;
    color: var(--text-secondary);
    font-style: italic;
}

/* All Matched */
.all-matched[b-ob2v3u2dkj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    text-align: center;
}

.all-matched-icon[b-ob2v3u2dkj] {
    color: var(--success);
    margin-bottom: 16px;
}

.all-matched h4[b-ob2v3u2dkj] {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.all-matched p[b-ob2v3u2dkj] {
    margin: 0;
    color: var(--text-secondary);
}

/* Completion Step */
.completion-step[b-ob2v3u2dkj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 0;
}

.completion-icon[b-ob2v3u2dkj] {
    color: var(--success);
    margin-bottom: 24px;
}

.completion-stats[b-ob2v3u2dkj] {
    display: flex;
    gap: 48px;
    margin-top: 32px;
}

.completion-stat[b-ob2v3u2dkj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.completion-stat .stat-value[b-ob2v3u2dkj] {
    font-size: 32px;
    font-weight: 700;
    color: var(--primary);
}

.completion-stat .stat-label[b-ob2v3u2dkj] {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Footer */
.processing-note[b-ob2v3u2dkj] {
    font-size: 14px;
    color: var(--text-secondary);
    font-style: italic;
}
/* /Components/Pages/Mappings/BrandAutoMatchProgressModal.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   AutoMatch Progress Modal — sayaçlar, progress bar, olay logu
   ═══════════════════════════════════════════════════════════════ */
.match-empty[b-hj1x5ocvwl] {
    text-align: center;
    padding: 32px;
    color: var(--text-secondary);
    font-size: 14px;
}

/* Sayaç paneli — 5 stat yan yana */
.match-summary[b-hj1x5ocvwl] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.match-stat[b-hj1x5ocvwl] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 12px;
    text-align: center;
}

.match-stat .stat-label[b-hj1x5ocvwl] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.match-stat .stat-value[b-hj1x5ocvwl] {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.match-stat.success[b-hj1x5ocvwl] { border-color: rgba(16, 185, 129, 0.4); }
.match-stat.success .stat-value[b-hj1x5ocvwl] { color: var(--success); }

.match-stat.warning[b-hj1x5ocvwl] { border-color: rgba(245, 158, 11, 0.4); }
.match-stat.warning .stat-value[b-hj1x5ocvwl] { color: var(--warning); }

.match-stat.error[b-hj1x5ocvwl] { border-color: rgba(239, 68, 68, 0.4); }
.match-stat.error .stat-value[b-hj1x5ocvwl] { color: var(--danger); }

.match-stat.muted[b-hj1x5ocvwl] { opacity: 0.85; }

/* Progress bar */
.match-progress[b-hj1x5ocvwl] {
    height: 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 6px;
}

.match-progress-bar[b-hj1x5ocvwl] {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #10b981);
    transition: width 0.3s ease;
    border-radius: 4px;
}

.match-progress-text[b-hj1x5ocvwl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 8px;
}

.match-current strong[b-hj1x5ocvwl] {
    color: var(--text-primary);
}

.match-pct[b-hj1x5ocvwl] {
    font-weight: 600;
    color: var(--text-primary);
}

/* Tamamlandı banner */
.match-finished[b-hj1x5ocvwl] {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 16px;
}

.match-finished.success[b-hj1x5ocvwl] {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
    border-left: 3px solid var(--success);
}

.match-finished.error[b-hj1x5ocvwl] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
    border-left: 3px solid var(--danger);
}

.match-finished.cancelled[b-hj1x5ocvwl] {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
    border-left: 3px solid var(--warning);
}

/* Olay logu */
.match-events-header[b-hj1x5ocvwl] {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.match-events[b-hj1x5ocvwl] {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px;
    background: var(--bg-primary);
}

.match-event-empty[b-hj1x5ocvwl] {
    text-align: center;
    color: var(--text-muted);
    padding: 16px;
    font-size: 12px;
}

.match-event[b-hj1x5ocvwl] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.5;
}

.match-event:hover[b-hj1x5ocvwl] {
    background: var(--bg-secondary);
}

.match-event .event-time[b-hj1x5ocvwl] {
    color: var(--text-muted);
    font-family: monospace;
    font-size: 11px;
    flex-shrink: 0;
    min-width: 56px;
}

.match-event .event-msg[b-hj1x5ocvwl] {
    color: var(--text-primary);
    word-break: break-word;
}

.match-event.success .event-msg[b-hj1x5ocvwl] { color: var(--success); }
.match-event.warning .event-msg[b-hj1x5ocvwl] { color: var(--warning); }
.match-event.error .event-msg[b-hj1x5ocvwl] { color: var(--danger); }
.match-event.info .event-msg[b-hj1x5ocvwl] { color: var(--text-primary); }

/* Responsive */
@media (max-width: 768px) {
    .match-summary[b-hj1x5ocvwl] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/Pages/Mappings/BrandMappings.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   Platform Tabs (CategoryMappings'ten clone — scoped, brand sayfası için)
   ═══════════════════════════════════════════════════════════════ */
.platform-tabs[b-ukdjz2pkbq] {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    overflow-x: auto;
}

.platform-tab[b-ukdjz2pkbq] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.platform-tab:hover[b-ukdjz2pkbq] {
    border-color: var(--primary);
    color: var(--primary);
}

.platform-tab.active[b-ukdjz2pkbq] {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.platform-tab-logo[b-ukdjz2pkbq] {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

.platform-tab-initials[b-ukdjz2pkbq] {
    font-size: 11px;
    font-weight: 700;
    color: white;
}

.platform-tab-name[b-ukdjz2pkbq] {
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════
   Brand Info Cell
   ═══════════════════════════════════════════════════════════════ */
.category-info[b-ukdjz2pkbq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.category-info strong[b-ukdjz2pkbq] {
    font-weight: 600;
    color: var(--text-primary);
}

.category-info .category-path[b-ukdjz2pkbq] {
    font-size: 12px;
    color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════
   Stat / Status Badges
   ═══════════════════════════════════════════════════════════════ */
.stat-badge[b-ukdjz2pkbq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    min-width: 50px;
}

.stat-success[b-ukdjz2pkbq] {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
}

.stat-warning[b-ukdjz2pkbq] {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
}

.stat-none[b-ukdjz2pkbq] {
    background: var(--bg-secondary);
    color: var(--text-muted);
}

.th-status[b-ukdjz2pkbq] {
    width: 160px;
}

.th-actions[b-ukdjz2pkbq] {
    width: 140px;
    text-align: right;
}

.status-badge[b-ukdjz2pkbq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.status-complete[b-ukdjz2pkbq] {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.status-warning[b-ukdjz2pkbq] {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.status-none[b-ukdjz2pkbq] {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════
   Action Buttons (row level)
   ═══════════════════════════════════════════════════════════════ */
.action-buttons[b-ukdjz2pkbq] {
    display: inline-flex;
    gap: 6px;
    justify-content: flex-end;
}

.btn-icon[b-ukdjz2pkbq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-icon:hover[b-ukdjz2pkbq] {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(var(--primary-rgb, 59, 130, 246), 0.08);
}

.btn-icon.btn-warning[b-ukdjz2pkbq] {
    border-color: var(--warning);
    color: var(--warning);
}

.btn-icon.btn-warning:hover[b-ukdjz2pkbq] {
    background: rgba(245, 158, 11, 0.1);
}

.btn-icon.btn-danger[b-ukdjz2pkbq] {
    border-color: var(--danger);
    color: var(--danger);
}

.btn-icon.btn-danger:hover[b-ukdjz2pkbq] {
    background: rgba(239, 68, 68, 0.1);
}

/* ═══════════════════════════════════════════════════════════════
   Filter Card — checkbox satırı
   ═══════════════════════════════════════════════════════════════ */
.checkbox-inline[b-ukdjz2pkbq] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    color: var(--text-primary);
    padding: 8px 0;
}

.checkbox-inline input[type="checkbox"][b-ukdjz2pkbq] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--primary);
}

/* ═══════════════════════════════════════════════════════════════
   Modal Loading
   ═══════════════════════════════════════════════════════════════ */
.modal-loading[b-ukdjz2pkbq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 32px;
    color: var(--text-secondary);
}

.modal-loading .spinner[b-ukdjz2pkbq] {
    width: 28px;
    height: 28px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-ukdjz2pkbq 0.8s linear infinite;
}

@keyframes spin-b-ukdjz2pkbq {
    to {
        transform: rotate(360deg);
    }
}

/* ═══════════════════════════════════════════════════════════════
   Empty States (modal içi inline)
   ═══════════════════════════════════════════════════════════════ */
.empty-state[b-ukdjz2pkbq] {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-secondary);
    font-size: 14px;
}

.empty-state-inline[b-ukdjz2pkbq] {
    text-align: center;
    padding: 24px 16px;
    color: var(--text-secondary);
    font-size: 13px;
    background: var(--bg-secondary);
    border-radius: 6px;
}

/* ═══════════════════════════════════════════════════════════════
   Suggestion List — manuel arama & öneriler modal'ı
   ═══════════════════════════════════════════════════════════════ */
.suggestion-list[b-ukdjz2pkbq] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 420px;
    overflow-y: auto;
    padding: 4px;
    margin-top: 12px;
}

.suggestion-item[b-ukdjz2pkbq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
}

button.suggestion-item[b-ukdjz2pkbq] {
    width: 100%;
    font-family: inherit;
    color: inherit;
    font-size: inherit;
}

.suggestion-item:hover[b-ukdjz2pkbq] {
    border-color: var(--primary);
    background: var(--bg-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.suggestion-item > div:first-child[b-ukdjz2pkbq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.suggestion-item strong[b-ukdjz2pkbq] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    word-break: break-word;
}

.suggestion-item .category-path[b-ukdjz2pkbq] {
    font-size: 12px;
    color: var(--text-muted);
}

.suggestion-item .stat-badge[b-ukdjz2pkbq] {
    align-self: flex-start;
    margin-top: 2px;
}

.btn-pill[b-ukdjz2pkbq] {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: var(--primary);
    color: white;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.suggestion-item:hover .btn-pill[b-ukdjz2pkbq] {
    background: var(--primary-hover, var(--primary));
    filter: brightness(1.1);
}

/* Suggestion modal — Accept / Reject button group */
.suggestion-item .action-buttons[b-ukdjz2pkbq] {
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   Form group spacing (inline arama input alanı)
   ═══════════════════════════════════════════════════════════════ */
.form-group[b-ukdjz2pkbq] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.form-label[b-ukdjz2pkbq] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .platform-tabs[b-ukdjz2pkbq] {
        margin-bottom: 12px;
    }

    .platform-tab[b-ukdjz2pkbq] {
        padding: 8px 14px;
    }

    .platform-tab-logo[b-ukdjz2pkbq] {
        width: 24px;
        height: 24px;
    }

    .suggestion-item[b-ukdjz2pkbq] {
        flex-direction: column;
        align-items: stretch;
    }

    .suggestion-item .btn-pill[b-ukdjz2pkbq] {
        align-self: flex-end;
    }
}
/* /Components/Pages/Mappings/CategoryMappings.razor.rz.scp.css */
/* Platform Tabs */
.platform-tabs[b-fj9t624lbg] {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    overflow-x: auto;
}

.platform-tab[b-fj9t624lbg] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.platform-tab:hover[b-fj9t624lbg] {
    border-color: var(--primary);
    color: var(--primary);
}

.platform-tab.active[b-fj9t624lbg] {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.platform-tab .tab-count[b-fj9t624lbg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 20px;
    padding: 0 6px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
}

.platform-tab.active .tab-count[b-fj9t624lbg] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.platform-tab-logo[b-fj9t624lbg] {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

.platform-tab-logo.has-image[b-fj9t624lbg] {
    background-color: transparent !important;
}

.platform-tab-logo img[b-fj9t624lbg] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.platform-tab-initials[b-fj9t624lbg] {
    font-size: 10px;
    font-weight: 700;
    color: white;
}

.platform-tab-name[b-fj9t624lbg] {
    font-weight: 500;
}

/* Category Info */
.category-info[b-fj9t624lbg] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.category-info strong[b-fj9t624lbg] {
    font-weight: 600;
    color: var(--text-primary);
}

.category-info .category-path[b-fj9t624lbg] {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Tek satırda full path: Tekstil › Giyim › Pijama Takımı (leaf bold) */
.category-info .category-path-inline[b-fj9t624lbg] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-primary);
}

.category-info .category-path-inline strong[b-fj9t624lbg] {
    font-weight: 600;
    color: var(--text-primary);
}

.category-info .category-path-anc[b-fj9t624lbg] {
    color: var(--text-secondary);
    font-weight: 400;
}

.category-info .category-path-sep[b-fj9t624lbg] {
    color: var(--text-secondary);
    opacity: 0.6;
}

/* Platform Badge */
.platform-badge[b-fj9t624lbg] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--bg-secondary);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

/* Modal Loading */
.modal-loading[b-fj9t624lbg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px;
    color: var(--text-secondary);
}

.modal-loading .spinner[b-fj9t624lbg] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-fj9t624lbg 1s linear infinite;
}

@keyframes spin-b-fj9t624lbg {
    to {
        transform: rotate(360deg);
    }
}

/* Mapping Toolbar */
.mapping-toolbar[b-fj9t624lbg] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.mapping-info[b-fj9t624lbg] {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Mapping Grid */
.mapping-grid[b-fj9t624lbg] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 55vh;
    overflow-y: auto;
    padding-right: 8px;
}

.mapping-row[b-fj9t624lbg] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.mapping-local[b-fj9t624lbg] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mapping-local strong[b-fj9t624lbg] {
    font-weight: 600;
    color: var(--text-primary);
}

.mapping-local .category-path[b-fj9t624lbg] {
    font-size: 12px;
    color: var(--text-secondary);
}

.mapping-local .category-path-inline[b-fj9t624lbg] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-primary);
}

.mapping-local .category-path-inline strong[b-fj9t624lbg] {
    font-weight: 600;
    color: var(--text-primary);
}

.mapping-local .category-path-anc[b-fj9t624lbg] {
    color: var(--text-secondary);
    font-weight: 400;
}

.mapping-local .category-path-sep[b-fj9t624lbg] {
    color: var(--text-secondary);
    opacity: 0.6;
}

.mapping-arrow[b-fj9t624lbg] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.mapping-platform[b-fj9t624lbg] {
    min-width: 300px;
    overflow: visible;
}

/* Async Search */
.async-search[b-fj9t624lbg] {
    position: relative;
    overflow: visible;
}

.async-search-input-wrapper[b-fj9t624lbg] {
    position: relative;
    display: flex;
    align-items: center;
}

.async-search-input[b-fj9t624lbg] {
    width: 100%;
    padding-right: 36px;
}

.async-search.has-value .async-search-input[b-fj9t624lbg] {
    background: var(--bg-success-subtle);
    border-color: var(--success);
}

.async-search-spinner[b-fj9t624lbg] {
    position: absolute;
    right: 12px;
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-fj9t624lbg 1s linear infinite;
}

.async-search-clear[b-fj9t624lbg] {
    position: absolute;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.async-search-clear:hover[b-fj9t624lbg] {
    background: var(--bg-secondary);
    color: var(--danger);
}

/* Search Dropdown Overlay */
.search-dropdown-overlay[b-fj9t624lbg] {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: transparent;
}

.async-search-dropdown[b-fj9t624lbg] {
    position: fixed;
    max-height: 300px;
    overflow-y: auto;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.async-search-option[b-fj9t624lbg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    padding: 14px 20px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}

.async-search-option:last-child[b-fj9t624lbg] {
    border-bottom: none;
}

.async-search-option:hover[b-fj9t624lbg] {
    background: var(--bg-secondary);
}

.async-search-option .option-name[b-fj9t624lbg] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
}

.async-search-option .option-path[b-fj9t624lbg] {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Stat Columns */
.th-stat[b-fj9t624lbg] {
    width: 130px;
    text-align: center;
}

/* Stat Badges */
.stat-badge[b-fj9t624lbg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    min-width: 70px;
}

.stat-success[b-fj9t624lbg] {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
}

.stat-danger[b-fj9t624lbg] {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger);
}

.stat-warning[b-fj9t624lbg] {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
}

.stat-none[b-fj9t624lbg] {
    background: var(--bg-secondary);
    color: var(--text-muted);
}

/* Status Column */
.th-status[b-fj9t624lbg] {
    width: 160px;
}

/* Status Badges */
.status-badge[b-fj9t624lbg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.status-badge svg[b-fj9t624lbg] {
    flex-shrink: 0;
}

.status-complete[b-fj9t624lbg] {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.status-danger[b-fj9t624lbg] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.status-warning[b-fj9t624lbg] {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.status-none[b-fj9t624lbg] {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

/* Danger Button Style */
.btn-icon.btn-danger[b-fj9t624lbg] {
    border-color: var(--danger);
    color: var(--danger);
    animation: pulse-danger-b-fj9t624lbg 2s infinite;
}

.btn-icon.btn-danger:hover[b-fj9t624lbg] {
    background: rgba(239, 68, 68, 0.1);
}

@keyframes pulse-danger-b-fj9t624lbg {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0);
    }
}

/* Warning Button Style */
.btn-icon.btn-warning[b-fj9t624lbg] {
    border-color: var(--warning);
    color: var(--warning);
    animation: pulse-warning-b-fj9t624lbg 2s infinite;
}

.btn-icon.btn-warning:hover[b-fj9t624lbg] {
    background: rgba(245, 158, 11, 0.1);
}

@keyframes pulse-warning-b-fj9t624lbg {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(245, 158, 11, 0);
    }
}

/* ═══════════════════ RESPONSIVE ═══════════════════ */

/* Tablet */
@media (max-width: 1024px) {
    /* Platform tabs - scrollable */
    .platform-tabs[b-fj9t624lbg] {
        gap: 8px;
        margin-bottom: 12px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .platform-tabs[b-fj9t624lbg]::-webkit-scrollbar {
        display: none;
    }

    .platform-tab[b-fj9t624lbg] {
        padding: 8px 14px;
        font-size: 13px;
    }

    /* Category info */
    .category-info strong[b-fj9t624lbg] {
        font-size: 13px;
    }

    .category-info .category-path[b-fj9t624lbg] {
        font-size: 11px;
        max-width: 250px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Stat columns */
    .th-stat[b-fj9t624lbg] {
        width: 100px;
    }

    .th-status[b-fj9t624lbg] {
        width: 130px;
    }

    .status-badge[b-fj9t624lbg] {
        font-size: 11px;
        padding: 4px 8px;
        gap: 4px;
    }

    .status-badge svg[b-fj9t624lbg] {
        width: 12px;
        height: 12px;
    }

    /* Mapping modal grid */
    .mapping-row[b-fj9t624lbg] {
        grid-template-columns: 1fr auto 1fr;
        gap: 12px;
        padding: 10px 14px;
    }

    .mapping-platform[b-fj9t624lbg] {
        min-width: 240px;
    }

    .mapping-toolbar[b-fj9t624lbg] {
        gap: 12px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    /* Platform tabs */
    .platform-tabs[b-fj9t624lbg] {
        gap: 6px;
        margin-bottom: 10px;
        padding-bottom: 2px;
    }

    .platform-tab[b-fj9t624lbg] {
        padding: 7px 12px;
        font-size: 12px;
        gap: 6px;
    }

    .platform-tab-logo[b-fj9t624lbg] {
        width: 22px;
        height: 22px;
    }

    .platform-tab-name[b-fj9t624lbg] {
        font-size: 12px;
    }

    .tab-count[b-fj9t624lbg] {
        font-size: 10px;
        min-width: 20px;
        height: 18px;
        padding: 0 5px;
    }

    /* Category info */
    .category-info strong[b-fj9t624lbg] {
        font-size: 12px;
    }

    .category-info .category-path[b-fj9t624lbg] {
        font-size: 10px;
        max-width: 160px;
    }

    /* Stat badges */
    .stat-badge[b-fj9t624lbg] {
        font-size: 11px;
        padding: 3px 8px;
        min-width: 40px;
    }

    /* Status badges */
    .status-badge[b-fj9t624lbg] {
        font-size: 10px;
        padding: 4px 8px;
        gap: 4px;
    }

    .status-badge svg[b-fj9t624lbg] {
        width: 12px;
        height: 12px;
    }

    /* Action buttons */
    .action-buttons[b-fj9t624lbg] {
        gap: 4px;
    }

    .btn-icon[b-fj9t624lbg] {
        width: 32px;
        height: 32px;
    }

    .btn-icon svg[b-fj9t624lbg] {
        width: 16px;
        height: 16px;
    }

    /* Mapping modal - stack on mobile */
    .mapping-toolbar[b-fj9t624lbg] {
        flex-wrap: wrap;
        gap: 10px;
    }

    .mapping-info[b-fj9t624lbg] {
        font-size: 12px;
    }

    .mapping-row[b-fj9t624lbg] {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 12px;
    }

    .mapping-arrow[b-fj9t624lbg] {
        transform: rotate(90deg);
        justify-self: center;
    }

    .mapping-platform[b-fj9t624lbg] {
        min-width: auto;
    }

    .mapping-local strong[b-fj9t624lbg] {
        font-size: 13px;
    }

    .mapping-local .category-path[b-fj9t624lbg] {
        font-size: 11px;
    }

    /* Search dropdown */
    .async-search-dropdown[b-fj9t624lbg] {
        max-height: 250px;
    }

    .async-search-option[b-fj9t624lbg] {
        padding: 12px 14px;
    }

    .async-search-option .option-name[b-fj9t624lbg] {
        font-size: 13px;
    }

    .async-search-option .option-path[b-fj9t624lbg] {
        font-size: 11px;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .platform-tab[b-fj9t624lbg] {
        padding: 6px 10px;
        font-size: 11px;
    }

    .platform-tab-logo[b-fj9t624lbg] {
        width: 30px;
        height: 30px;
    }

    .platform-tab-name[b-fj9t624lbg] {
        font-size: 13px;
    }

    .category-info strong[b-fj9t624lbg] {
        font-size: 11px;
    }

    .category-info .category-path[b-fj9t624lbg] {
        max-width: 120px;
        font-size: 9px;
    }

    .stat-badge[b-fj9t624lbg] {
        font-size: 10px;
        padding: 2px 6px;
    }

    .status-badge span[b-fj9t624lbg] {
        display: none;
    }

    .mapping-toolbar[b-fj9t624lbg] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Components/Pages/Mappings/SmartMatchingWizard.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   SMART MATCHING WIZARD - Premium Design
   ═══════════════════════════════════════════════════════════════ */

.smart-wizard[b-lyjwc7bfxz] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-height: 500px;
}

/* ─────────────────────────────────────────────────────────────────
   Timeline Progress
   ───────────────────────────────────────────────────────────────── */
.wizard-timeline[b-lyjwc7bfxz] {
    position: relative;
    padding: 0 24px;
}

.timeline-track[b-lyjwc7bfxz] {
    position: absolute;
    top: 20px;
    left: 60px;
    right: 60px;
    height: 3px;
    background: var(--border-color);
    border-radius: 2px;
    z-index: 0;
}

.timeline-progress[b-lyjwc7bfxz] {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-light, #818cf8));
    border-radius: 2px;
    transition: width 0.5s ease;
}

.timeline-steps[b-lyjwc7bfxz] {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.timeline-step[b-lyjwc7bfxz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.step-indicator[b-lyjwc7bfxz] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-primary);
    border: 3px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.timeline-step.active .step-indicator[b-lyjwc7bfxz] {
    border-color: var(--primary);
    background: var(--primary);
    color: white;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
}

.timeline-step.completed .step-indicator[b-lyjwc7bfxz] {
    border-color: var(--success);
    background: var(--success);
    color: white;
}

.step-info[b-lyjwc7bfxz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
}

.step-title[b-lyjwc7bfxz] {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
}

.step-subtitle[b-lyjwc7bfxz] {
    font-size: 11px;
    color: var(--text-secondary);
}

.timeline-step.active .step-title[b-lyjwc7bfxz] {
    color: var(--primary);
}

.timeline-step.completed .step-title[b-lyjwc7bfxz] {
    color: var(--success);
}

/* ─────────────────────────────────────────────────────────────────
   Wizard Body
   ───────────────────────────────────────────────────────────────── */
.wizard-body[b-lyjwc7bfxz] {
    flex: 1;
    overflow: visible;
    min-height: 0;
}

.step-panel[b-lyjwc7bfxz] {
    min-height: 400px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 4px;
}

.animate-in[b-lyjwc7bfxz] {
    animation: fadeSlideIn-b-lyjwc7bfxz 0.4s ease;
}

@keyframes fadeSlideIn-b-lyjwc7bfxz {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ─────────────────────────────────────────────────────────────────
   Step 1: Category Selection
   ───────────────────────────────────────────────────────────────── */
.panel-header[b-lyjwc7bfxz] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
}

.header-icon[b-lyjwc7bfxz] {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--primary), var(--primary-light, #818cf8));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.header-text h2[b-lyjwc7bfxz] {
    margin: 0 0 4px 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

.header-text p[b-lyjwc7bfxz] {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
}

/* Quick Stats */
.quick-stats[b-lyjwc7bfxz] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.stat-pill[b-lyjwc7bfxz] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-secondary);
    border-radius: 24px;
    border: 1px solid var(--border-color);
}

.pill-value[b-lyjwc7bfxz] {
    font-weight: 700;
    font-size: 16px;
    color: var(--text-primary);
}

.pill-label[b-lyjwc7bfxz] {
    font-size: 12px;
    color: var(--text-secondary);
}

.stat-pill.selected[b-lyjwc7bfxz] {
    background: rgba(99, 102, 241, 0.1);
    border-color: var(--primary);
}

.stat-pill.selected .pill-value[b-lyjwc7bfxz] {
    color: var(--primary);
}

.stat-pill.warning[b-lyjwc7bfxz] {
    background: rgba(245, 158, 11, 0.1);
    border-color: var(--warning);
}

.stat-pill.warning .pill-value[b-lyjwc7bfxz] {
    color: var(--warning);
}

.stat-pill.info[b-lyjwc7bfxz] {
    background: rgba(59, 130, 246, 0.1);
    border-color: #3b82f6;
}

.stat-pill.info .pill-value[b-lyjwc7bfxz] {
    color: #3b82f6;
}

/* Filter Tabs */
.filter-tabs[b-lyjwc7bfxz] {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.filter-tab[b-lyjwc7bfxz] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-tab:hover[b-lyjwc7bfxz] {
    border-color: var(--primary);
    color: var(--primary);
}

.filter-tab.active[b-lyjwc7bfxz] {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.tab-count[b-lyjwc7bfxz] {
    padding: 2px 8px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.filter-tab.active .tab-count[b-lyjwc7bfxz] {
    background: rgba(255, 255, 255, 0.2);
}

/* Category Grid */
.category-grid[b-lyjwc7bfxz] {
    display: flex;
    flex-direction: column;
}

.grid-header[b-lyjwc7bfxz] {
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: 8px 8px 0 0;
    border: 1px solid var(--border-color);
    border-bottom: none;
}

.select-all-check[b-lyjwc7bfxz] {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.select-all-check input[b-lyjwc7bfxz] {
    display: none;
}

.checkmark[b-lyjwc7bfxz] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.select-all-check input:checked + .checkmark[b-lyjwc7bfxz],
.card-checkbox input:checked + .checkmark[b-lyjwc7bfxz] {
    background: var(--primary);
    border-color: var(--primary);
}

.select-all-check input:checked + .checkmark[b-lyjwc7bfxz]::after,
.card-checkbox input:checked + .checkmark[b-lyjwc7bfxz]::after {
    content: '';
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-bottom: 2px;
}

.grid-body[b-lyjwc7bfxz] {
    display: flex;
    flex-direction: column;
    max-height: 350px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 0 0 8px 8px;
}

/* Category Card */
.category-card[b-lyjwc7bfxz] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.category-card:last-child[b-lyjwc7bfxz] {
    border-bottom: none;
}

.category-card:hover[b-lyjwc7bfxz] {
    background: var(--bg-secondary);
}

.category-card.selected[b-lyjwc7bfxz] {
    background: rgba(99, 102, 241, 0.05);
}

.card-checkbox[b-lyjwc7bfxz] {
    cursor: pointer;
}

.card-checkbox input[b-lyjwc7bfxz] {
    display: none;
}

.card-content[b-lyjwc7bfxz] {
    flex: 1;
    min-width: 0;
}

.card-title[b-lyjwc7bfxz] {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-path[b-lyjwc7bfxz] {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 6px;
}

.card-stats[b-lyjwc7bfxz] {
    display: flex;
    gap: 8px;
}

.mini-stat[b-lyjwc7bfxz] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

.mini-stat.success[b-lyjwc7bfxz] {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.mini-stat.warning[b-lyjwc7bfxz] {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.mini-stat.info[b-lyjwc7bfxz] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.mini-stat.not-configured[b-lyjwc7bfxz] {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.status-indicator[b-lyjwc7bfxz] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.status-indicator.status-complete[b-lyjwc7bfxz] {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.status-indicator.status-danger[b-lyjwc7bfxz] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.status-indicator.status-warning[b-lyjwc7bfxz] {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.status-indicator.status-none[b-lyjwc7bfxz] {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

/* ─────────────────────────────────────────────────────────────────
   Step 2: Processing
   ───────────────────────────────────────────────────────────────── */
.processing-panel[b-lyjwc7bfxz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.processing-visual[b-lyjwc7bfxz] {
    text-align: center;
    margin-bottom: 32px;
}

.processing-rings[b-lyjwc7bfxz] {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 24px;
}

.ring[b-lyjwc7bfxz] {
    position: absolute;
    border-radius: 50%;
    border: 2px solid transparent;
}

.ring-1[b-lyjwc7bfxz] {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-top-color: var(--primary);
    animation: spin-b-lyjwc7bfxz 1.5s linear infinite;
}

.ring-2[b-lyjwc7bfxz] {
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
    border-right-color: var(--success);
    animation: spin-b-lyjwc7bfxz 2s linear infinite reverse;
}

.ring-3[b-lyjwc7bfxz] {
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
    border-bottom-color: var(--warning);
    animation: spin-b-lyjwc7bfxz 2.5s linear infinite;
}

@keyframes spin-b-lyjwc7bfxz {
    to { transform: rotate(360deg); }
}

.processing-icon[b-lyjwc7bfxz] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--primary);
}

.processing-visual h2[b-lyjwc7bfxz] {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
}

.processing-category[b-lyjwc7bfxz] {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.progress-bar-container[b-lyjwc7bfxz] {
    width: 100%;
    max-width: 400px;
}

.progress-bar[b-lyjwc7bfxz] {
    height: 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-fill[b-lyjwc7bfxz] {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-light, #818cf8));
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-text[b-lyjwc7bfxz] {
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
}

/* Live Stats */
.live-stats[b-lyjwc7bfxz] {
    display: flex;
    gap: 24px;
}

.live-stat[b-lyjwc7bfxz] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.stat-icon[b-lyjwc7bfxz] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon.categories[b-lyjwc7bfxz] {
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary);
}

.stat-icon.attributes[b-lyjwc7bfxz] {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.stat-icon.values[b-lyjwc7bfxz] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.stat-details[b-lyjwc7bfxz] {
    display: flex;
    flex-direction: column;
}

.stat-number[b-lyjwc7bfxz] {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.stat-label[b-lyjwc7bfxz] {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* ─────────────────────────────────────────────────────────────────
   Step 3: Results
   ───────────────────────────────────────────────────────────────── */
.results-panel[b-lyjwc7bfxz] {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 400px;
}

.results-header[b-lyjwc7bfxz] {
    margin-bottom: 20px;
}

.results-summary[b-lyjwc7bfxz] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.summary-card[b-lyjwc7bfxz] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.summary-card.success[b-lyjwc7bfxz] {
    border-left: 4px solid var(--success);
}

.summary-card.warning[b-lyjwc7bfxz] {
    border-left: 4px solid var(--warning);
}

.summary-card.info[b-lyjwc7bfxz] {
    border-left: 4px solid #3b82f6;
}

.summary-icon[b-lyjwc7bfxz] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.summary-card.success .summary-icon[b-lyjwc7bfxz] {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.summary-card.warning .summary-icon[b-lyjwc7bfxz] {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.summary-card.info .summary-icon[b-lyjwc7bfxz] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.summary-data[b-lyjwc7bfxz] {
    display: flex;
    flex-direction: column;
}

.summary-value[b-lyjwc7bfxz] {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.summary-label[b-lyjwc7bfxz] {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Category Accordion */
.category-accordion[b-lyjwc7bfxz] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 400px;
    overflow-y: auto;
}

.accordion-item[b-lyjwc7bfxz] {
    background: var(--bg-primary, #ffffff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    overflow: visible;
}

.accordion-item.has-unmatched[b-lyjwc7bfxz] {
    border-left: 3px solid var(--warning);
}

.accordion-item.complete[b-lyjwc7bfxz] {
    border-left: 3px solid var(--success);
}

.accordion-header[b-lyjwc7bfxz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

.accordion-header:hover[b-lyjwc7bfxz] {
    background: var(--bg-secondary);
}

.header-left[b-lyjwc7bfxz] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.expand-icon[b-lyjwc7bfxz] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: transform 0.2s ease;
}

.accordion-header.expanded .expand-icon[b-lyjwc7bfxz] {
    transform: rotate(180deg);
}

.category-name[b-lyjwc7bfxz] {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary, #1f2937);
}

.header-right[b-lyjwc7bfxz] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.badge-group[b-lyjwc7bfxz] {
    display: flex;
    gap: 6px;
}

.header-badge[b-lyjwc7bfxz] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

.header-badge.success[b-lyjwc7bfxz] {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.header-badge.warning[b-lyjwc7bfxz] {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.header-badge.info[b-lyjwc7bfxz] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.accordion-body[b-lyjwc7bfxz] {
    padding: 0 16px 16px;
    border-top: 1px solid var(--border-color);
    animation: slideDown-b-lyjwc7bfxz 0.2s ease;
}

@keyframes slideDown-b-lyjwc7bfxz {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Unmatched Sections */
.unmatched-section[b-lyjwc7bfxz] {
    margin-top: 16px;
}

.section-title[b-lyjwc7bfxz] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.unmatched-list[b-lyjwc7bfxz] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.unmatched-row[b-lyjwc7bfxz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.unmatched-row.resolved[b-lyjwc7bfxz] {
    background: rgba(16, 185, 129, 0.05);
    border-color: var(--success);
}

.row-info[b-lyjwc7bfxz] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.attr-name[b-lyjwc7bfxz] {
    font-weight: 500;
    font-size: 13px;
    color: var(--text-primary);
}

.attr-badges[b-lyjwc7bfxz] {
    display: flex;
    gap: 6px;
}

.attr-badge[b-lyjwc7bfxz] {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.attr-badge.required[b-lyjwc7bfxz] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.attr-badge.variant[b-lyjwc7bfxz] {
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary);
}

.row-action[b-lyjwc7bfxz] {
    min-width: 250px;
}

/* Values Section */
.values-section[b-lyjwc7bfxz] {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px dashed var(--border-color);
}

.value-groups[b-lyjwc7bfxz] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.value-group[b-lyjwc7bfxz] {
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.group-header[b-lyjwc7bfxz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.02);
    border-bottom: 1px solid var(--border-color);
}

.group-name[b-lyjwc7bfxz] {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
}

.group-count[b-lyjwc7bfxz] {
    font-size: 11px;
    color: var(--text-secondary);
}

.value-list[b-lyjwc7bfxz] {
    display: flex;
    flex-direction: column;
}

.value-row[b-lyjwc7bfxz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
}

.value-row:last-child[b-lyjwc7bfxz] {
    border-bottom: none;
}

.value-row.resolved[b-lyjwc7bfxz] {
    background: rgba(16, 185, 129, 0.03);
}

.value-name[b-lyjwc7bfxz] {
    font-size: 13px;
    color: var(--text-primary);
}

.value-action[b-lyjwc7bfxz] {
    min-width: 220px;
}

/* All Matched Message */
.all-matched-message[b-lyjwc7bfxz] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 32px;
    color: var(--success);
    font-weight: 500;
}

/* ─────────────────────────────────────────────────────────────────
   Step 4: Completion
   ───────────────────────────────────────────────────────────────── */
.completion-panel[b-lyjwc7bfxz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
    text-align: center;
}

.completion-visual[b-lyjwc7bfxz] {
    margin-bottom: 40px;
}

.completion-check[b-lyjwc7bfxz] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    color: var(--success);
    animation: scaleIn-b-lyjwc7bfxz 0.5s ease;
}

@keyframes scaleIn-b-lyjwc7bfxz {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.completion-visual h2[b-lyjwc7bfxz] {
    margin: 0 0 8px 0;
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
}

.completion-visual p[b-lyjwc7bfxz] {
    margin: 0;
    font-size: 15px;
    color: var(--text-secondary);
}

/* Final Stats */
.final-stats[b-lyjwc7bfxz] {
    display: flex;
    align-items: center;
    gap: 24px;
}

.final-stat[b-lyjwc7bfxz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.stat-circle[b-lyjwc7bfxz] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-circle.categories[b-lyjwc7bfxz] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(99, 102, 241, 0.05));
    border: 2px solid var(--primary);
}

.stat-circle.attributes[b-lyjwc7bfxz] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.05));
    border: 2px solid var(--success);
}

.stat-circle.values[b-lyjwc7bfxz] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.05));
    border: 2px solid #3b82f6;
}

.circle-value[b-lyjwc7bfxz] {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-name[b-lyjwc7bfxz] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.stat-divider[b-lyjwc7bfxz] {
    color: var(--text-muted);
    opacity: 0.3;
}

/* ─────────────────────────────────────────────────────────────────
   Footer
   ───────────────────────────────────────────────────────────────── */
.footer-note[b-lyjwc7bfxz] {
    font-size: 13px;
    color: var(--text-secondary);
    font-style: italic;
}

/* ─────────────────────────────────────────────────────────────────
   Responsive
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .quick-stats[b-lyjwc7bfxz] {
        flex-wrap: wrap;
    }

    .results-summary[b-lyjwc7bfxz] {
        grid-template-columns: repeat(2, 1fr);
    }

    .live-stats[b-lyjwc7bfxz] {
        flex-direction: column;
        width: 100%;
    }

    .live-stat[b-lyjwc7bfxz] {
        width: 100%;
    }

    .final-stats[b-lyjwc7bfxz] {
        flex-direction: column;
    }

    .stat-divider[b-lyjwc7bfxz] {
        transform: rotate(90deg);
    }
}
/* /Components/Pages/Orders/CargoLabel.razor.rz.scp.css */
*[b-w15git10gh] { margin: 0; padding: 0; box-sizing: border-box; }
body[b-w15git10gh] { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: #f5f5f5; }

.loading-container[b-w15git10gh], .error-container[b-w15git10gh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    gap: 16px;
}

.spinner[b-w15git10gh] {
    width: 40px;
    height: 40px;
    border: 3px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-w15git10gh 1s linear infinite;
}

@keyframes spin-b-w15git10gh { to { transform: rotate(360deg); } }

.error-container[b-w15git10gh] { color: #ef4444; }

.error-container button[b-w15git10gh] {
    padding: 8px 16px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.print-actions[b-w15git10gh] {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 20px;
    background: #f5f5f5;
}

.btn-print[b-w15git10gh], .btn-close[b-w15git10gh] {
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.btn-print[b-w15git10gh] { background: #3b82f6; color: white; }
.btn-print:hover[b-w15git10gh] { background: #2563eb; }
.btn-close[b-w15git10gh] { background: #e5e7eb; color: #374151; }
.btn-close:hover[b-w15git10gh] { background: #d1d5db; }

@media print {
    .no-print[b-w15git10gh] { display: none !important; }
    body[b-w15git10gh] { background: white; }
}
/* /Components/Pages/Orders/OrderDetail.razor.rz.scp.css */
.detail-header[b-wfxs9kbpcn] {
    position: sticky;
    top: 0;
    background: var(--bg-card-solid);
    border-bottom: 1px solid var(--border);
    padding: 20px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 100;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    gap: 20px;
    flex-wrap: wrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.header-left[b-wfxs9kbpcn] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.back-btn[b-wfxs9kbpcn] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.back-btn:hover[b-wfxs9kbpcn] {
    border-color: var(--primary);
    color: var(--primary);
}

.back-btn svg[b-wfxs9kbpcn] {
    width: 20px;
    height: 20px;
}

.nav-btn[b-wfxs9kbpcn] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    flex-shrink: 0;
}

.nav-btn:hover:not(.disabled)[b-wfxs9kbpcn] {
    border-color: var(--primary);
    color: var(--primary);
}

.nav-btn svg[b-wfxs9kbpcn] {
    width: 20px;
    height: 20px;
}

.nav-btn.disabled[b-wfxs9kbpcn] {
    opacity: 0.4;
    cursor: not-allowed;
}

.forward-btn[b-wfxs9kbpcn] {
    margin-left: 8px;
}

.order-header-info[b-wfxs9kbpcn] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.order-marketplace-badge[b-wfxs9kbpcn] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    color: var(--primary);
}

.order-header-text h1[b-wfxs9kbpcn] {
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
}

.order-id-badge[b-wfxs9kbpcn] {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--primary);
    background: var(--primary-alpha);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
}

.order-header-text p[b-wfxs9kbpcn] {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
}

.header-right[b-wfxs9kbpcn] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.detail-content[b-wfxs9kbpcn] {
    padding: 32px;
    max-width: 1400px;
    margin: 0 auto;
}

.detail-grid[b-wfxs9kbpcn] {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
}

.card[b-wfxs9kbpcn] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 24px;
}

.card-header[b-wfxs9kbpcn] {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-header h3[b-wfxs9kbpcn] {
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-header h3 svg[b-wfxs9kbpcn] {
    width: 20px;
    height: 20px;
    color: var(--primary);
}

.card-body[b-wfxs9kbpcn] {
    padding: 24px;
}

.status-badge[b-wfxs9kbpcn] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 600;
}

.status-badge .dot[b-wfxs9kbpcn] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-badge.large[b-wfxs9kbpcn] {
    padding: 12px 12px;
    font-size: 15px;
}

.status-badge.clickable[b-wfxs9kbpcn] {
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}

.status-badge.clickable:hover[b-wfxs9kbpcn] {
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.status-badge.clickable .edit-icon[b-wfxs9kbpcn] {
    opacity: 0;
    margin-left: 4px;
    transition: opacity 0.2s ease;
}

.status-badge.clickable:hover .edit-icon[b-wfxs9kbpcn] {
    opacity: 0.7;
}

/* Status Change Modal */
.status-change-modal[b-wfxs9kbpcn] {
    max-width: 450px;
}

.current-status-info[b-wfxs9kbpcn] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--bg-input);
    border-radius: var(--radius);
    margin-bottom: 20px;
}

.current-status-info .label[b-wfxs9kbpcn] {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
}

.current-status-info .status-badge[b-wfxs9kbpcn] {
    padding: 8px 14px;
    font-size: 13px;
}

.order-type-badge[b-wfxs9kbpcn] {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.order-type-badge.large[b-wfxs9kbpcn] {
    padding: 12px 24px;
    font-size: 13px;
}

.order-type-badge.retail[b-wfxs9kbpcn] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.order-type-badge.micro-export[b-wfxs9kbpcn] {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.order-type-badge.wholesale[b-wfxs9kbpcn] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

/* Order Source Badge */
.order-source-badge[b-wfxs9kbpcn] {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.order-source-badge.large[b-wfxs9kbpcn] {
    padding: 12px 24px;
    font-size: 13px;
}

.order-source-badge.marketplace[b-wfxs9kbpcn] {
    background: rgba(99, 102, 241, 0.15);
    color: #6366f1;
}

.order-source-badge.manual[b-wfxs9kbpcn] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.order-source-badge.resend[b-wfxs9kbpcn] {
    background: rgba(236, 72, 153, 0.15);
    color: #ec4899;
}

.order-summary[b-wfxs9kbpcn] {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 24px;
    flex-wrap: wrap;
}

.summary-item[b-wfxs9kbpcn] {
    text-align: center;
    padding: 0 24px;
    border-right: 1px solid var(--border);
}

.summary-item:last-child[b-wfxs9kbpcn] {
    border-right: none;
}

.summary-item h4[b-wfxs9kbpcn] {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 4px;
}

/* Shipping Header */
.shipping-header[b-wfxs9kbpcn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

/* Delivery Type Badge - Kargo Bilgileri kartında */
.delivery-type-badge[b-wfxs9kbpcn] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.delivery-type-badge.standard[b-wfxs9kbpcn] {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
}

.delivery-type-badge.fast[b-wfxs9kbpcn] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.delivery-type-badge svg[b-wfxs9kbpcn] {
    flex-shrink: 0;
}

/* Delivery Countdown Card */
.delivery-countdown-card[b-wfxs9kbpcn] {
    margin-bottom: 24px;
    overflow: hidden;
}

.delivery-countdown-card .countdown-content[b-wfxs9kbpcn] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
}

.delivery-countdown-card .countdown-icon[b-wfxs9kbpcn] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.delivery-countdown-card .countdown-icon svg[b-wfxs9kbpcn] {
    width: 24px;
    height: 24px;
}

.delivery-countdown-card.normal .countdown-icon[b-wfxs9kbpcn] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.delivery-countdown-card.warning .countdown-icon[b-wfxs9kbpcn] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.delivery-countdown-card.critical .countdown-icon[b-wfxs9kbpcn],
.delivery-countdown-card.expired .countdown-icon[b-wfxs9kbpcn] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.delivery-countdown-card .countdown-info[b-wfxs9kbpcn] {
    flex: 1;
}

.delivery-countdown-card .countdown-label[b-wfxs9kbpcn] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.delivery-countdown-card .countdown-value[b-wfxs9kbpcn] {
    font-size: 20px;
    font-weight: 800;
    font-family: var(--font-mono);
    letter-spacing: 1px;
}

.delivery-countdown-card.normal .countdown-value[b-wfxs9kbpcn] {
    color: #10b981;
}

.delivery-countdown-card.warning .countdown-value[b-wfxs9kbpcn] {
    color: #f59e0b;
}

.delivery-countdown-card.critical .countdown-value[b-wfxs9kbpcn] {
    color: #ef4444;
    animation: pulse-critical-b-wfxs9kbpcn 1s ease-in-out infinite;
}

.delivery-countdown-card.expired .countdown-value[b-wfxs9kbpcn] {
    color: #ef4444;
}

.delivery-countdown-card .countdown-divider[b-wfxs9kbpcn] {
    width: 1px;
    height: 48px;
    background: var(--border);
}

.delivery-countdown-card .countdown-date-info[b-wfxs9kbpcn] {
    text-align: right;
}

.delivery-countdown-card .countdown-date[b-wfxs9kbpcn] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.delivery-countdown-card .countdown-date .date-separator[b-wfxs9kbpcn] {
    margin: 0 4px;
    color: var(--text-muted);
}

.delivery-countdown-card .countdown-warning[b-wfxs9kbpcn] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    font-size: 12px;
    font-weight: 600;
}

.delivery-countdown-card.critical .countdown-warning[b-wfxs9kbpcn] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.delivery-countdown-card.expired .countdown-warning[b-wfxs9kbpcn] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

@keyframes pulse-critical-b-wfxs9kbpcn {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.summary-item p[b-wfxs9kbpcn] {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.products-list[b-wfxs9kbpcn] {
    display: flex;
    flex-direction: column;
}

.product-item[b-wfxs9kbpcn] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    transition: var(--transition);
    min-width: 0;
    overflow: hidden;
}

.product-item:last-child[b-wfxs9kbpcn] {
    border-bottom: none;
}

.product-item:hover[b-wfxs9kbpcn] {
    background: var(--bg-input);
}

.product-image[b-wfxs9kbpcn] {
    width: 72px;
    height: 72px;
    border-radius: var(--radius);
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-muted);
}

.product-image img[b-wfxs9kbpcn] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius);
}

.product-image svg[b-wfxs9kbpcn] {
    width: 32px;
    height: 32px;
}

.product-info[b-wfxs9kbpcn] {
    flex: 1;
    min-width: 0;
}

.product-info h4[b-wfxs9kbpcn] {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-info p[b-wfxs9kbpcn] {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.product-meta[b-wfxs9kbpcn] {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: var(--text-muted);
}

.product-pricing[b-wfxs9kbpcn] {
    text-align: right;
    flex-shrink: 0;
}

.product-pricing .price[b-wfxs9kbpcn] {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
}

.product-pricing .quantity[b-wfxs9kbpcn] {
    font-size: 13px;
    color: var(--text-muted);
}

.product-actions[b-wfxs9kbpcn] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding-left: 8px;
}

.product-actions .btn-icon-edit-small[b-wfxs9kbpcn] {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.product-item:hover .product-actions .btn-icon-edit-small[b-wfxs9kbpcn] {
    opacity: 1;
}

.order-totals[b-wfxs9kbpcn] {
    padding: 24px;
    background: var(--bg-input);
}

.total-row[b-wfxs9kbpcn] {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    font-size: 14px;
    color: var(--text-secondary);
}

.total-row .discount[b-wfxs9kbpcn] {
    color: #10b981;
}

.total-row .free-shipping[b-wfxs9kbpcn] {
    color: #10b981;
    font-weight: 600;
    background: rgba(16, 185, 129, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
}

.total-row.grand[b-wfxs9kbpcn] {
    border-top: 2px solid var(--border);
    margin-top: 12px;
    padding-top: 20px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.total-row.grand .amount[b-wfxs9kbpcn] {
    color: var(--primary);
}

.customer-card[b-wfxs9kbpcn] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--bg-input);
    border-radius: var(--radius);
    margin-bottom: 20px;
}

.customer-avatar[b-wfxs9kbpcn] {
    width: 56px;
    height: 56px;
    border-radius: var(--radius);
    background: var(--gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.customer-info h4[b-wfxs9kbpcn] {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.customer-info p[b-wfxs9kbpcn] {
    font-size: 13px;
    color: var(--text-muted);
}

.info-grid[b-wfxs9kbpcn] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.info-item[b-wfxs9kbpcn] {
    padding: 16px;
    background: var(--bg-input);
    border-radius: var(--radius);
}

.info-item.full[b-wfxs9kbpcn] {
    grid-column: 1 / -1;
}

.info-item label[b-wfxs9kbpcn] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.info-item p[b-wfxs9kbpcn] {
    font-size: 14px;
    font-weight: 500;
}

.info-item p.free[b-wfxs9kbpcn] {
    color: #10b981;
}

.timeline[b-wfxs9kbpcn] {
    position: relative;
    padding-left: 32px;
}

.timeline[b-wfxs9kbpcn]::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--border);
}

.timeline-item[b-wfxs9kbpcn] {
    position: relative;
    padding-bottom: 24px;
    min-width: 0; /* grid item overflow guard */
}

.timeline-item:last-child[b-wfxs9kbpcn] {
    padding-bottom: 0;
}

.timeline-dot[b-wfxs9kbpcn] {
    position: absolute;
    left: -32px;
    top: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.timeline-dot svg[b-wfxs9kbpcn] {
    width: 12px;
    height: 12px;
    color: var(--text-muted);
}

.timeline-item.completed .timeline-dot[b-wfxs9kbpcn] {
    background: var(--primary);
    border-color: var(--primary);
}

.timeline-item.completed .timeline-dot svg[b-wfxs9kbpcn] {
    color: white;
}

.timeline-item.active .timeline-dot[b-wfxs9kbpcn] {
    background: var(--primary-alpha);
    border-color: var(--primary);
    animation: pulse-b-wfxs9kbpcn 2s infinite;
}

.timeline-item.active .timeline-dot svg[b-wfxs9kbpcn] {
    color: var(--primary);
}

@keyframes pulse-b-wfxs9kbpcn {
    0%, 100% { box-shadow: 0 0 0 0 var(--primary-alpha); }
    50% { box-shadow: 0 0 0 8px transparent; }
}

.timeline-content h4[b-wfxs9kbpcn] {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

.timeline-content[b-wfxs9kbpcn] {
    min-width: 0;
}

.timeline-content p[b-wfxs9kbpcn] {
    font-size: 12px;
    color: var(--text-muted);
    /* Uzun hata mesajları (base64 stack trace, JSON-in-JSON) layout'u bozmasın */
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.timeline-content .time[b-wfxs9kbpcn] {
    font-size: 11px;
    color: var(--text-muted);
}

.timeline-meta[b-wfxs9kbpcn] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.performed-by[b-wfxs9kbpcn] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--primary);
    background: var(--primary-alpha);
    padding: 2px 8px;
    border-radius: 10px;
}

.performed-by i[b-wfxs9kbpcn] {
    font-size: 10px;
}

.shipping-card[b-wfxs9kbpcn] {
    padding: 20px;
    background: var(--bg-input);
    border-radius: var(--radius);
    margin-bottom: 20px;
}

.shipping-header[b-wfxs9kbpcn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.shipping-company[b-wfxs9kbpcn] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.shipping-logo[b-wfxs9kbpcn] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.shipping-logo svg[b-wfxs9kbpcn] {
    width: 20px;
    height: 20px;
}

.shipping-company h4[b-wfxs9kbpcn] {
    font-size: 15px;
    font-weight: 600;
}

.shipping-company p[b-wfxs9kbpcn] {
    font-size: 12px;
    color: var(--text-muted);
}

.tracking-number[b-wfxs9kbpcn] {
    font-family: var(--font-mono);
    font-size: 14px;
    padding: 10px 16px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 10px;
}

.tracking-number button[b-wfxs9kbpcn] {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    display: flex;
    transition: var(--transition);
}

.tracking-number button:hover[b-wfxs9kbpcn] {
    color: var(--primary);
}

/* Shipping Timeline */
.shipping-timeline[b-wfxs9kbpcn] {
    display: flex;
    align-items: flex-start;
    margin-top: 20px;
    padding: 0 8px;
}

.timeline-step[b-wfxs9kbpcn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
}

.timeline-step .step-marker[b-wfxs9kbpcn] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: 2px solid var(--border);
    color: var(--text-muted);
    transition: all 0.3s ease;
}

.timeline-step .step-marker svg[b-wfxs9kbpcn] {
    width: 18px;
    height: 18px;
}

.timeline-step.completed .step-marker[b-wfxs9kbpcn] {
    background: var(--success);
    border-color: var(--success);
    color: white;
}

.timeline-step.pending .step-marker[b-wfxs9kbpcn] {
    background: var(--bg-tertiary);
    border-color: var(--border);
    color: var(--text-muted);
}

.timeline-step .step-content[b-wfxs9kbpcn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
    text-align: center;
}

.timeline-step .step-title[b-wfxs9kbpcn] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.timeline-step.completed .step-title[b-wfxs9kbpcn] {
    color: var(--text-primary);
}

.timeline-step .step-date[b-wfxs9kbpcn] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.timeline-connector[b-wfxs9kbpcn] {
    flex: 0 0 auto;
    width: 60px;
    height: 2px;
    background: var(--border);
    margin-top: 17px;
}

.timeline-connector.completed[b-wfxs9kbpcn] {
    background: var(--success);
}

.note-content[b-wfxs9kbpcn] {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    padding: 16px;
    background: var(--bg-input);
    border-radius: var(--radius);
}

/* Product Item Enhancements */
.product-title-row[b-wfxs9kbpcn] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    min-width: 0;
    overflow: hidden;
}

.product-title-row h4[b-wfxs9kbpcn] {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-status[b-wfxs9kbpcn] {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}

.item-status.active[b-wfxs9kbpcn] { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.item-status.shipped[b-wfxs9kbpcn] { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.item-status.delivered[b-wfxs9kbpcn] { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.item-status.cancelled[b-wfxs9kbpcn] { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.item-status.returned[b-wfxs9kbpcn] { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }

.product-variants[b-wfxs9kbpcn] {
    display: flex;
    gap: 8px;
    margin: 6px 0;
}

.variant-tag[b-wfxs9kbpcn] {
    font-size: 11px;
    padding: 3px 8px;
    background: var(--bg-input);
    border-radius: 4px;
    color: var(--text-muted);
}

.price-breakdown[b-wfxs9kbpcn] {
    text-align: right;
    margin-bottom: 8px;
}

.unit-price[b-wfxs9kbpcn] {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.item-discount[b-wfxs9kbpcn] {
    font-size: 12px;
    color: #10b981;
}

.discount-breakdown[b-wfxs9kbpcn] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    font-size: 11px;
    margin-top: 4px;
}

.discount-breakdown .seller[b-wfxs9kbpcn] {
    color: #8b5cf6;
}

.discount-breakdown .platform[b-wfxs9kbpcn] {
    color: #f59e0b;
}

.total-price[b-wfxs9kbpcn] {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    text-align: right;
}

.commission[b-wfxs9kbpcn] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Discount Section */
.discounts-list[b-wfxs9kbpcn] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.discount-item[b-wfxs9kbpcn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: var(--bg-input);
    border-radius: var(--radius);
}

.discount-info[b-wfxs9kbpcn] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.discount-icon[b-wfxs9kbpcn] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.discount-icon svg[b-wfxs9kbpcn] {
    width: 20px;
    height: 20px;
}

.discount-icon.seller[b-wfxs9kbpcn] {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.discount-icon.platform[b-wfxs9kbpcn] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.discount-icon.shared[b-wfxs9kbpcn] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.discount-info h4[b-wfxs9kbpcn] {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
}

.discount-info p[b-wfxs9kbpcn] {
    font-size: 12px;
    color: var(--text-muted);
}

.discount-amount[b-wfxs9kbpcn] {
    font-size: 15px;
    font-weight: 700;
    color: #10b981;
}

.discount-total[b-wfxs9kbpcn] {
    font-size: 14px;
    font-weight: 700;
    color: #10b981;
}

.discount-summary[b-wfxs9kbpcn] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.discount-summary .summary-row[b-wfxs9kbpcn] {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 13px;
    color: var(--text-secondary);
}

/* Order Totals Enhancements */
.total-row.sub[b-wfxs9kbpcn] {
    font-size: 12px;
    color: var(--text-muted);
    padding: 6px 0 6px 16px;
}

.discount-detail-rows[b-wfxs9kbpcn] {
    border-left: 2px solid var(--border);
    margin-left: 8px;
}

.total-row.invoiceable[b-wfxs9kbpcn] {
    border-top: 1px dashed var(--border);
    margin-top: 8px;
    padding-top: 12px;
    font-style: italic;
    color: var(--text-muted);
}

/* Commission Row */
.total-row.commission-row[b-wfxs9kbpcn] {
    border-top: 1px solid var(--border);
    margin-top: 16px;
    padding-top: 16px;
    color: #f59e0b;
}

.total-row.commission-row span:first-child[b-wfxs9kbpcn] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.total-row.commission-row svg[b-wfxs9kbpcn] {
    color: #f59e0b;
}

.commission-rate[b-wfxs9kbpcn] {
    font-size: 12px;
    opacity: 0.8;
}

.commission-amount[b-wfxs9kbpcn] {
    font-weight: 600;
    color: #f59e0b;
}

/* Cost Row */
.total-row.cost-row[b-wfxs9kbpcn] {
    color: #8b5cf6;
}

.total-row.cost-row span:first-child[b-wfxs9kbpcn] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.total-row.cost-row svg[b-wfxs9kbpcn] {
    color: #8b5cf6;
}

.cost-amount[b-wfxs9kbpcn] {
    font-weight: 600;
    color: #8b5cf6;
}

/* Cost Row - Pending State */
.total-row.cost-row.pending[b-wfxs9kbpcn] {
    color: var(--text-muted);
    opacity: 0.7;
}

.total-row.cost-row.pending svg[b-wfxs9kbpcn] {
    color: var(--text-muted);
}

.total-row.cost-row.pending .pending-label[b-wfxs9kbpcn] {
    font-size: 11px;
    font-weight: 400;
    font-style: italic;
    opacity: 0.8;
}

.cost-amount.pending[b-wfxs9kbpcn] {
    font-weight: 500;
    color: var(--text-muted);
}

/* Seller Shipping Cost Row */
.total-row.seller-shipping-row[b-wfxs9kbpcn] {
    color: #ef4444;
}

.total-row.seller-shipping-row span:first-child[b-wfxs9kbpcn] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.total-row.seller-shipping-row svg[b-wfxs9kbpcn] {
    color: #ef4444;
}

.seller-shipping-amount[b-wfxs9kbpcn] {
    font-weight: 600;
    color: #ef4444;
}

.seller-shipping-detail-rows[b-wfxs9kbpcn] {
    border-left: 2px solid rgba(239, 68, 68, 0.3);
    margin-left: 8px;
}

.seller-shipping-detail-rows .total-row.sub[b-wfxs9kbpcn] {
    font-size: 12px;
    color: var(--text-muted);
    padding: 6px 0 6px 16px;
}

.seller-shipping-detail-rows .seller-shipping-amount[b-wfxs9kbpcn] {
    font-weight: 500;
    color: #ef4444;
    opacity: 0.8;
}

/* Seller Shipping Cost - Pending State */
.total-row.seller-shipping-row.pending[b-wfxs9kbpcn] {
    color: var(--text-muted);
    opacity: 0.7;
}

.total-row.seller-shipping-row.pending svg[b-wfxs9kbpcn] {
    color: var(--text-muted);
}

.total-row.seller-shipping-row.pending .pending-label[b-wfxs9kbpcn] {
    font-size: 11px;
    font-weight: 400;
    font-style: italic;
    opacity: 0.8;
}

.seller-shipping-amount.pending[b-wfxs9kbpcn] {
    font-weight: 500;
    color: var(--text-muted);
}

/* Net Profit Row */
.total-row.net-profit-row[b-wfxs9kbpcn] {
    border-top: 2px solid var(--primary);
    margin-top: 16px;
    padding-top: 16px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.total-row.net-profit-row span:first-child[b-wfxs9kbpcn] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.total-row.net-profit-row svg[b-wfxs9kbpcn] {
    color: #10b981;
}

.total-row.net-profit-row.loss svg[b-wfxs9kbpcn] {
    color: #ef4444;
}

.net-profit-amount[b-wfxs9kbpcn] {
    color: #10b981;
    font-weight: 700;
}

.net-profit-amount.loss[b-wfxs9kbpcn] {
    color: #ef4444;
}

/* COD Badge */
.cod-badge[b-wfxs9kbpcn] {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border-radius: 4px;
    text-transform: uppercase;
}

.empty-state[b-wfxs9kbpcn] {
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
}

.page-loading[b-wfxs9kbpcn], .page-error[b-wfxs9kbpcn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.page-error h2[b-wfxs9kbpcn] {
    font-size: 24px;
    font-weight: 700;
}

.page-error p[b-wfxs9kbpcn] {
    color: var(--text-muted);
}

/* KVKK Privacy Mode */
.privacy-blur[b-wfxs9kbpcn] {
    filter: blur(5px);
    user-select: none;
    transition: filter 0.2s ease;
}

.privacy-blur:hover[b-wfxs9kbpcn] {
    filter: blur(3px);
}

.privacy-indicator[b-wfxs9kbpcn] {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(239, 68, 68, 0.95);
    color: white;
    padding: 10px 16px;
    border-radius: var(--radius);
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
    z-index: 1000;
    animation: fadeIn-b-wfxs9kbpcn 0.3s ease;
}

@keyframes fadeIn-b-wfxs9kbpcn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Gift Package Card */
.gift-card[b-wfxs9kbpcn] {
    border-color: rgba(236, 72, 153, 0.3);
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.05) 0%, transparent 100%);
}

.gift-card .card-header h3 svg[b-wfxs9kbpcn] {
    color: #ec4899;
}

.gift-badge[b-wfxs9kbpcn] {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    background: rgba(236, 72, 153, 0.15);
    color: #ec4899;
    border-radius: 4px;
}

.gift-message[b-wfxs9kbpcn] {
    padding: 16px;
    background: var(--bg-input);
    border-radius: var(--radius);
    border-left: 3px solid #ec4899;
}

.gift-message label[b-wfxs9kbpcn] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.gift-message p[b-wfxs9kbpcn] {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary);
    font-style: italic;
}

.gift-message.empty p[b-wfxs9kbpcn] {
    color: var(--text-muted);
    font-style: normal;
}

/* Invoice Info */
.invoice-sent-badge[b-wfxs9kbpcn] {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border-radius: 4px;
}

.info-item p.mono[b-wfxs9kbpcn] {
    font-family: var(--font-mono);
    font-size: 12px;
    word-break: break-all;
}

.invoice-actions[b-wfxs9kbpcn] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.invoice-actions .btn-sm[b-wfxs9kbpcn] {
    padding: 8px 16px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ERP Integration */
.erp-status-list[b-wfxs9kbpcn] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.erp-status-item[b-wfxs9kbpcn] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--bg-input);
    border-radius: var(--radius);
}

.erp-status-icon[b-wfxs9kbpcn] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.erp-status-icon svg[b-wfxs9kbpcn] {
    width: 20px;
    height: 20px;
}

.erp-status-icon.synced[b-wfxs9kbpcn] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.erp-status-icon.failed[b-wfxs9kbpcn] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.erp-status-icon.pending[b-wfxs9kbpcn] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.erp-status-icon.not-synced[b-wfxs9kbpcn] {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.erp-status-info[b-wfxs9kbpcn] {
    flex: 1;
    min-width: 0;
}

.erp-status-info h4[b-wfxs9kbpcn] {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
}

.erp-status-info p[b-wfxs9kbpcn] {
    font-size: 12px;
    color: var(--text-muted);
}

.erp-number[b-wfxs9kbpcn] {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 2px 6px;
    background: var(--bg-card);
    border-radius: 4px;
    margin-top: 4px;
}

.erp-status-date[b-wfxs9kbpcn] {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Cancellation Card */
.cancellation-card[b-wfxs9kbpcn] {
    border-color: rgba(239, 68, 68, 0.3);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.05) 0%, transparent 100%);
}

.cancellation-card .card-header h3 svg[b-wfxs9kbpcn] {
    color: #ef4444;
}

/* ═══════════════════ RESPONSIVE ═══════════════════ */

@media (max-width: 1024px) {
    .detail-grid[b-wfxs9kbpcn] {
        grid-template-columns: 1fr;
    }

    .detail-content[b-wfxs9kbpcn] {
        padding: 20px;
    }
}

/* Tablet */
@media (max-width: 1024px) {
    .detail-header[b-wfxs9kbpcn] {
        padding: 16px 20px;
        gap: 12px;
    }

    .header-left[b-wfxs9kbpcn] {
        gap: 12px;
    }

    .order-header-text h1[b-wfxs9kbpcn] {
        font-size: 18px;
    }

    .order-header-text p[b-wfxs9kbpcn] {
        font-size: 12px;
    }

    .back-btn[b-wfxs9kbpcn],
    .nav-btn[b-wfxs9kbpcn] {
        width: 38px;
        height: 38px;
    }

    .header-right[b-wfxs9kbpcn] {
        gap: 8px;
    }

    .header-right .btn[b-wfxs9kbpcn] {
        padding: 8px 12px;
        font-size: 12px;
    }

    .detail-content[b-wfxs9kbpcn] {
        padding: 16px;
    }

    .card[b-wfxs9kbpcn] {
        padding: 16px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    /* Prevent horizontal overflow */
    .detail-content[b-wfxs9kbpcn] {
        padding: 12px !important;
        padding-bottom: 100px !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    .detail-grid[b-wfxs9kbpcn] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .left-column[b-wfxs9kbpcn],
    .right-column[b-wfxs9kbpcn] {
        max-width: 100% !important;
        overflow: hidden !important;
        min-width: 0 !important;
    }

    .card[b-wfxs9kbpcn] {
        max-width: 100% !important;
        overflow: hidden !important;
        margin-bottom: 12px !important;
        border-radius: var(--radius) !important;
    }

    .card-header[b-wfxs9kbpcn] {
        padding: 14px 16px !important;
    }

    .card-body[b-wfxs9kbpcn] {
        padding: 14px 16px !important;
    }

    .detail-header[b-wfxs9kbpcn] {
        padding: 12px 16px;
        gap: 10px;
    }

    .header-left[b-wfxs9kbpcn] {
        gap: 10px;
        flex: 1;
        min-width: 0;
    }

    .back-btn[b-wfxs9kbpcn] {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
    }

    .back-btn svg[b-wfxs9kbpcn] {
        width: 18px;
        height: 18px;
    }

    .order-marketplace-badge[b-wfxs9kbpcn] {
        display: none;
    }

    .order-header-text h1[b-wfxs9kbpcn] {
        font-size: 16px;
    }

    .order-header-text p[b-wfxs9kbpcn] {
        font-size: 11px;
    }

    .order-id-badge[b-wfxs9kbpcn] {
        font-size: 13px;
    }

    /* Header right - show only essential buttons */
    .header-right[b-wfxs9kbpcn] {
        gap: 6px;
        flex-shrink: 0;
    }

    /* Hide button text, keep icons */
    .header-right .btn[b-wfxs9kbpcn] {
        font-size: 0;
        padding: 8px;
        gap: 0;
        min-width: 36px;
        height: 36px;
    }

    .header-right .btn svg[b-wfxs9kbpcn] {
        width: 16px;
        height: 16px;
    }

    .header-right .btn .spinner[b-wfxs9kbpcn] {
        width: 16px;
        height: 16px;
    }

    .nav-btn[b-wfxs9kbpcn] {
        width: 36px;
        height: 36px;
    }

    .detail-content[b-wfxs9kbpcn] {
        padding: 12px;
        padding-bottom: 100px;
    }

    /* Order summary */
    .order-summary[b-wfxs9kbpcn] {
        flex-wrap: wrap;
        gap: 6px;
        padding: 12px;
    }

    /* Badges - compact, wrap */
    .order-summary .status-badge.large[b-wfxs9kbpcn],
    .order-summary .order-type-badge.large[b-wfxs9kbpcn],
    .order-summary .order-source-badge.large[b-wfxs9kbpcn] {
        font-size: 11px;
        padding: 4px 8px;
        white-space: nowrap;
    }

    /* Summary items - side by side as mini cards */
    .order-summary .summary-item[b-wfxs9kbpcn] {
        flex: 1;
        min-width: 80px;
        border-right: none;
        padding: 10px 12px;
        text-align: center;
        background: var(--bg-input);
        border-radius: var(--radius-sm);
    }

    .summary-item h4[b-wfxs9kbpcn] {
        font-size: 16px;
    }

    .summary-item p[b-wfxs9kbpcn] {
        font-size: 11px;
    }

    /* Cards */
    .card[b-wfxs9kbpcn] {
        padding: 14px;
        border-radius: var(--radius);
    }

    .card-header h3[b-wfxs9kbpcn] {
        font-size: 14px;
    }

    /* Info grid */
    .info-grid[b-wfxs9kbpcn] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .info-group label[b-wfxs9kbpcn] {
        font-size: 11px;
    }

    .info-group p[b-wfxs9kbpcn] {
        font-size: 13px;
    }

    /* Products list */
    .products-list[b-wfxs9kbpcn] {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* Product items */
    .product-item[b-wfxs9kbpcn] {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 12px 14px;
        max-width: 100%;
        overflow: hidden;
        box-sizing: border-box;
    }

    .product-image[b-wfxs9kbpcn] {
        width: 56px;
        height: 56px;
        flex-shrink: 0;
    }

    .product-info[b-wfxs9kbpcn] {
        width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    .product-title-row[b-wfxs9kbpcn] {
        flex-wrap: wrap;
        gap: 6px;
    }

    .product-title-row h4[b-wfxs9kbpcn] {
        font-size: 13px;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .product-meta[b-wfxs9kbpcn] {
        font-size: 11px;
        flex-wrap: wrap;
        word-break: break-all;
    }

    .product-meta span[b-wfxs9kbpcn] {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .product-variants[b-wfxs9kbpcn] {
        flex-wrap: wrap;
        gap: 4px;
    }

    .variant-tag[b-wfxs9kbpcn] {
        font-size: 11px;
    }

    .product-pricing[b-wfxs9kbpcn] {
        text-align: left;
        margin-top: 4px;
        width: 100%;
        overflow: hidden;
    }

    .price-breakdown[b-wfxs9kbpcn] {
        font-size: 12px;
        word-break: break-word;
    }

    .total-price[b-wfxs9kbpcn] {
        font-size: 15px;
    }

    .unit-price[b-wfxs9kbpcn] {
        font-size: 12px;
    }

    .discount-breakdown[b-wfxs9kbpcn] {
        flex-wrap: wrap;
        gap: 6px;
    }

    /* Order totals */
    .order-totals[b-wfxs9kbpcn] {
        padding: 12px 14px;
        max-width: 100%;
        overflow: hidden;
    }

    .total-row[b-wfxs9kbpcn] {
        font-size: 13px;
        gap: 8px;
    }

    .total-row span[b-wfxs9kbpcn] {
        min-width: 0;
        word-break: break-word;
    }

    .total-row[b-wfxs9kbpcn] {
        font-size: 13px;
    }

    .total-row.grand .amount[b-wfxs9kbpcn] {
        font-size: 16px;
    }

    /* Linked order */
    .linked-order-card[b-wfxs9kbpcn] {
        padding: 12px;
    }

    /* Address */
    .address-header[b-wfxs9kbpcn] {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Timeline */
    .timeline-item[b-wfxs9kbpcn] {
        padding-left: 28px;
    }

    .timeline-content h4[b-wfxs9kbpcn] {
        font-size: 13px;
    }

    .timeline-content p[b-wfxs9kbpcn] {
        font-size: 12px;
    }

    /* Cargo info */
    .cargo-details[b-wfxs9kbpcn] {
        gap: 8px;
    }

    .cargo-details .detail-item[b-wfxs9kbpcn] {
        font-size: 12px;
    }

    /* Edit modal on mobile */
    .edit-modal[b-wfxs9kbpcn] {
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: var(--radius) var(--radius) 0 0;
        max-height: 90vh;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .detail-header[b-wfxs9kbpcn] {
        padding: 10px 12px;
    }

    .order-header-text h1[b-wfxs9kbpcn] {
        font-size: 15px;
    }

    /* Hide forward nav on very small screens */
    .forward-btn[b-wfxs9kbpcn] {
        display: none;
    }

    .detail-content[b-wfxs9kbpcn] {
        padding: 10px;
        padding-bottom: 100px;
    }

    .product-image[b-wfxs9kbpcn] {
        width: 48px;
        height: 48px;
    }

    .product-title-row h4[b-wfxs9kbpcn] {
        font-size: 12px;
    }

    .order-summary[b-wfxs9kbpcn] {
        gap: 4px;
        padding: 10px;
    }

    .order-summary .status-badge.large[b-wfxs9kbpcn],
    .order-summary .order-type-badge.large[b-wfxs9kbpcn],
    .order-summary .order-source-badge.large[b-wfxs9kbpcn] {
        font-size: 11px;
        padding: 3px 6px;
    }

    .order-summary .summary-item[b-wfxs9kbpcn] {
        min-width: 70px;
        padding: 8px 10px;
    }

    .summary-item h4[b-wfxs9kbpcn] {
        font-size: 14px;
    }

    .summary-item p[b-wfxs9kbpcn] {
        font-size: 10px;
    }

    .total-row[b-wfxs9kbpcn] {
        font-size: 12px;
    }

    .total-row.grand .amount[b-wfxs9kbpcn] {
        font-size: 15px;
    }

    .info-group p[b-wfxs9kbpcn] {
        font-size: 12px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   MODAL OVERLAY
   ═══════════════════════════════════════════════════════════════ */

.modal-overlay[b-wfxs9kbpcn] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
}

.modal-container[b-wfxs9kbpcn] {
    background: var(--bg-card);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-height: 90vh;
    overflow: hidden;
    animation: modalSlideIn-b-wfxs9kbpcn 0.2s ease-out;
}

@keyframes modalSlideIn-b-wfxs9kbpcn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ═══════════════════════════════════════════════════════════════
   EDIT BUTTONS
   ═══════════════════════════════════════════════════════════════ */

.btn-icon-edit[b-wfxs9kbpcn] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-icon-edit:hover[b-wfxs9kbpcn] {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.btn-icon-edit-small[b-wfxs9kbpcn] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-icon-edit-small:hover[b-wfxs9kbpcn] {
    background: var(--primary);
    color: white;
}

.address-header[b-wfxs9kbpcn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.address-header label[b-wfxs9kbpcn] {
    margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════
   EDIT MODAL
   ═══════════════════════════════════════════════════════════════ */

.edit-modal[b-wfxs9kbpcn] {
    max-width: 500px;
    width: 95%;
}

.edit-modal.address-edit-modal[b-wfxs9kbpcn] {
    max-width: 600px;
}

.edit-modal .modal-header[b-wfxs9kbpcn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}

.edit-modal .modal-header h3[b-wfxs9kbpcn] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.edit-modal .modal-header h3 svg[b-wfxs9kbpcn] {
    color: var(--primary);
}

.edit-modal .modal-close[b-wfxs9kbpcn] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.edit-modal .modal-close:hover[b-wfxs9kbpcn] {
    background: var(--bg-input);
    color: var(--text-primary);
}

.edit-modal .modal-body[b-wfxs9kbpcn] {
    padding: 24px;
    max-height: 60vh;
    overflow-y: auto;
}

.edit-modal .form-grid[b-wfxs9kbpcn] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.edit-modal .form-group[b-wfxs9kbpcn] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.edit-modal .form-group.full-width[b-wfxs9kbpcn] {
    grid-column: 1 / -1;
}

.edit-modal .form-group label[b-wfxs9kbpcn] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.edit-modal .form-input[b-wfxs9kbpcn] {
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text-primary);
    transition: all 0.15s ease;
}

.edit-modal .form-input:focus[b-wfxs9kbpcn] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.edit-modal .form-divider[b-wfxs9kbpcn] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    margin: 8px 0;
}

.edit-modal .form-divider[b-wfxs9kbpcn]::before,
.edit-modal .form-divider[b-wfxs9kbpcn]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.edit-modal .form-divider span[b-wfxs9kbpcn] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.edit-modal .modal-footer[b-wfxs9kbpcn] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    background: var(--bg-input);
}

.edit-modal .btn-secondary[b-wfxs9kbpcn] {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.edit-modal .btn-secondary:hover:not(:disabled)[b-wfxs9kbpcn] {
    background: var(--bg-input);
}

.edit-modal .btn-primary[b-wfxs9kbpcn] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    border-radius: 6px;
    background: var(--primary);
    color: white;
    cursor: pointer;
    transition: all 0.15s ease;
}

.edit-modal .btn-primary:hover:not(:disabled)[b-wfxs9kbpcn] {
    background: var(--primary-hover);
}

.edit-modal .btn-primary:disabled[b-wfxs9kbpcn],
.edit-modal .btn-secondary:disabled[b-wfxs9kbpcn] {
    opacity: 0.6;
    cursor: not-allowed;
}

.spinner-small[b-wfxs9kbpcn] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-wfxs9kbpcn 0.8s linear infinite;
}

@keyframes spin-b-wfxs9kbpcn {
    to { transform: rotate(360deg); }
}

/* Linked Order Card */
.linked-order-card[b-wfxs9kbpcn] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 20px;
}

.linked-order-info[b-wfxs9kbpcn] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--radius);
    flex: 1;
    min-width: 200px;
}

.linked-order-info.resend-order[b-wfxs9kbpcn] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(124, 58, 237, 0.05) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.linked-order-info.original-order[b-wfxs9kbpcn] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.05) 100%);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.linked-order-icon[b-wfxs9kbpcn] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    flex-shrink: 0;
}

.linked-order-info.resend-order .linked-order-icon[b-wfxs9kbpcn] {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.linked-order-info.original-order .linked-order-icon[b-wfxs9kbpcn] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.linked-order-icon svg[b-wfxs9kbpcn] {
    width: 18px;
    height: 18px;
}

.linked-order-text[b-wfxs9kbpcn] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.linked-order-label[b-wfxs9kbpcn] {
    font-size: 12px;
    color: var(--text-secondary);
}

.linked-order-number[b-wfxs9kbpcn] {
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.linked-order-info.resend-order .linked-order-number[b-wfxs9kbpcn] {
    color: #8b5cf6;
}

.linked-order-info.original-order .linked-order-number[b-wfxs9kbpcn] {
    color: #10b981;
}

.linked-order-number:hover[b-wfxs9kbpcn] {
    text-decoration: underline;
}

/* Split parent: bu paket alt siparişlere bölündü (N children) */
.linked-order-info.split-parent[b-wfxs9kbpcn] {
    background: linear-gradient(135deg, rgba(111, 66, 193, 0.1) 0%, rgba(91, 33, 182, 0.05) 100%);
    border: 1px solid rgba(111, 66, 193, 0.25);
    align-items: flex-start;
}

.linked-order-info.split-parent .linked-order-icon[b-wfxs9kbpcn] {
    background: rgba(111, 66, 193, 0.15);
    color: #6f42c1;
}

.split-children-list[b-wfxs9kbpcn] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.split-child-link[b-wfxs9kbpcn] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(111, 66, 193, 0.12);
    border: 1px solid rgba(111, 66, 193, 0.25);
    border-radius: 999px;
    font-size: 13px;
    color: #6f42c1 !important;
    text-decoration: none;
    transition: all 0.15s;
}

.split-child-link:hover[b-wfxs9kbpcn] {
    background: rgba(111, 66, 193, 0.22);
    text-decoration: none;
}

.split-child-number[b-wfxs9kbpcn] {
    font-weight: 600;
}

.split-child-tracking[b-wfxs9kbpcn] {
    font-size: 11px;
    padding: 1px 6px;
    background: rgba(59, 130, 246, 0.15);
    color: #1d4ed8;
    border-radius: 999px;
    font-weight: 500;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    letter-spacing: 0.3px;
}

.split-child-status[b-wfxs9kbpcn] {
    font-size: 11px;
    padding: 1px 6px;
    background: rgba(111, 66, 193, 0.18);
    border-radius: 999px;
    font-weight: 500;
}

/* Split child: bu sipariş ana paketten bölünmüş */
.linked-order-info.split-child[b-wfxs9kbpcn] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(217, 119, 6, 0.05) 100%);
    border: 1px solid rgba(245, 158, 11, 0.25);
}

.linked-order-info.split-child .linked-order-icon[b-wfxs9kbpcn] {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
}

.linked-order-info.split-child .linked-order-number[b-wfxs9kbpcn] {
    color: #d97706;
}

/* Stock Reservation Status */
.stock-reservation-card[b-wfxs9kbpcn] {
    padding: 12px 16px;
}

.stock-reservation-row[b-wfxs9kbpcn] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.stock-reservation-item[b-wfxs9kbpcn] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 8px;
    flex: 1;
    min-width: 240px;
}

.stock-reservation-item.stock-reserved[b-wfxs9kbpcn] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.05) 100%);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.stock-reservation-item.stock-released[b-wfxs9kbpcn] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(22, 163, 74, 0.05) 100%);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.stock-reservation-icon[b-wfxs9kbpcn] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    flex-shrink: 0;
}

.stock-reservation-item.stock-reserved .stock-reservation-icon[b-wfxs9kbpcn] {
    background: rgba(59, 130, 246, 0.15);
    color: #2563eb;
}

.stock-reservation-item.stock-released .stock-reservation-icon[b-wfxs9kbpcn] {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
}

.stock-reservation-text[b-wfxs9kbpcn] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stock-reservation-label[b-wfxs9kbpcn] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.stock-reservation-date[b-wfxs9kbpcn] {
    font-size: 11px;
    color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════
   KALEM BAZLI MANUEL İNDİRİM BÖLÜMÜ (Order Item Edit Modal)
   ═══════════════════════════════════════════════════════════════ */
.item-discount-section[b-wfxs9kbpcn] {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--border-color, #e5e7eb);
}

.item-discount-header h4[b-wfxs9kbpcn] {
    margin: 0 0 0.5rem 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary, #111827);
}

.item-discount-list[b-wfxs9kbpcn] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
}

.item-discount-row[b-wfxs9kbpcn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    background: var(--bg-subtle, #f9fafb);
    border: 1px solid var(--border-color, #e5e7eb);
}

.item-discount-row.is-manual[b-wfxs9kbpcn] {
    background: #fffbeb;
    border-color: #fde68a;
}

.item-discount-row.is-platform[b-wfxs9kbpcn] {
    opacity: 0.85;
}

.item-discount-info[b-wfxs9kbpcn] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.item-discount-name[b-wfxs9kbpcn] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary, #111827);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-discount-source[b-wfxs9kbpcn] {
    font-size: 0.6875rem;
    color: var(--text-secondary, #6b7280);
}

.item-discount-amount[b-wfxs9kbpcn] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #dc2626;
    white-space: nowrap;
}

.item-discount-actions[b-wfxs9kbpcn] {
    display: flex;
    align-items: center;
    width: 28px;
    justify-content: center;
}

.btn-icon-delete-small[b-wfxs9kbpcn] {
    width: 26px;
    height: 26px;
    border: 1px solid #fecaca;
    background: #fff;
    color: #b91c1c;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    padding: 0;
}

.btn-icon-delete-small:hover:not(:disabled)[b-wfxs9kbpcn] {
    background: #fef2f2;
    border-color: #f87171;
}

.btn-icon-delete-small:disabled[b-wfxs9kbpcn] {
    opacity: 0.6;
    cursor: not-allowed;
}

.item-discount-locked[b-wfxs9kbpcn] {
    color: var(--text-secondary, #9ca3af);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.item-discount-empty[b-wfxs9kbpcn] {
    padding: 0.75rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--text-secondary, #6b7280);
    background: var(--bg-subtle, #f9fafb);
    border: 1px dashed var(--border-color, #e5e7eb);
    border-radius: 6px;
    margin-bottom: 0.75rem;
}

.item-discount-add-form[b-wfxs9kbpcn] {
    display: grid;
    grid-template-columns: 130px 1fr auto;
    gap: 0.5rem;
    align-items: end;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color, #e5e7eb);
}

.item-discount-add-form .form-group[b-wfxs9kbpcn] {
    margin: 0;
}

.item-discount-add-form .form-group label[b-wfxs9kbpcn] {
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
    color: var(--text-secondary, #6b7280);
}

.item-discount-add-btn[b-wfxs9kbpcn] {
    height: 38px;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .item-discount-add-form[b-wfxs9kbpcn] {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════ Depo / Warehouse Allocation ═══════════════ */
.warehouse-tag[b-wfxs9kbpcn] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-card-solid);
    font-size: 12px;
    color: var(--text-primary);
    white-space: nowrap;
}

.warehouse-tag--split[b-wfxs9kbpcn] {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.08);
    color: #b45309;
}

.warehouse-tag--missing[b-wfxs9kbpcn],
.warehouse-tag--zero[b-wfxs9kbpcn] {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
    color: #b91c1c;
}

.warehouse-tag--partial[b-wfxs9kbpcn] {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.08);
    color: #b45309;
}

.warehouse-summary[b-wfxs9kbpcn] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 16px;
}

.warehouse-summary__row[b-wfxs9kbpcn] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.warehouse-summary__row strong[b-wfxs9kbpcn] {
    color: var(--text-primary);
}

.warehouse-summary__icon[b-wfxs9kbpcn] {
    flex-shrink: 0;
    width: 18px;
    text-align: center;
    font-weight: 600;
}

.warehouse-summary__row--ok .warehouse-summary__icon[b-wfxs9kbpcn] { color: #16a34a; }
.warehouse-summary__row--warn .warehouse-summary__icon[b-wfxs9kbpcn] { color: #f59e0b; }
.warehouse-summary__row--err .warehouse-summary__icon[b-wfxs9kbpcn] { color: #ef4444; }

.warehouse-summary__detail[b-wfxs9kbpcn] {
    display: flex;
    justify-content: space-between;
    padding: 4px 0 4px 26px;
    font-size: 12px;
    color: var(--text-secondary);
    border-top: 1px dashed var(--border);
}

.warehouse-summary__qty[b-wfxs9kbpcn] {
    font-weight: 500;
    color: var(--text-primary);
}

.warehouse-tag-edit[b-wfxs9kbpcn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--bg-card-solid);
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: var(--transition);
}

.warehouse-tag-edit:hover[b-wfxs9kbpcn] {
    border-color: var(--primary);
    color: var(--primary);
    transform: scale(1.05);
}

.warehouse-tag-info.active[b-wfxs9kbpcn] {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-alpha);
}

/* Stock info popover (kalem altinda inline) */
.stock-info-popover[b-wfxs9kbpcn] {
    margin-top: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card-solid);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.stock-info-popover__header[b-wfxs9kbpcn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card-hover);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.stock-info-popover__close[b-wfxs9kbpcn] {
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
}

.stock-info-popover__close:hover[b-wfxs9kbpcn] {
    background: rgba(239, 68, 68, 0.1);
    color: #b91c1c;
}

.stock-info-popover__loading[b-wfxs9kbpcn],
.stock-info-popover__empty[b-wfxs9kbpcn] {
    padding: 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
}

.stock-info-table[b-wfxs9kbpcn] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.stock-info-table th[b-wfxs9kbpcn],
.stock-info-table td[b-wfxs9kbpcn] {
    padding: 6px 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}

.stock-info-table th[b-wfxs9kbpcn] {
    background: var(--bg-card-hover);
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.stock-info-table td.num[b-wfxs9kbpcn],
.stock-info-table th.num[b-wfxs9kbpcn] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.stock-info-table tfoot td[b-wfxs9kbpcn] {
    border-bottom: none;
    border-top: 2px solid var(--border);
    font-weight: 600;
    color: var(--text-primary);
}

.stock-info-name[b-wfxs9kbpcn] {
    color: var(--text-primary);
    font-weight: 500;
}

.stock-info-meta[b-wfxs9kbpcn] {
    color: var(--text-secondary);
    font-size: 10px;
    margin-top: 1px;
}

.stock-info-table tr.row-zero td.num[b-wfxs9kbpcn] {
    color: #b91c1c;
}

.stock-info-table tr.row-low td.num[b-wfxs9kbpcn] {
    color: #b45309;
}

/* Allocation modal */
.alloc-item-info[b-wfxs9kbpcn] {
    padding: 10px 12px;
    background: var(--bg-card-hover);
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
}

.alloc-warehouse-list[b-wfxs9kbpcn] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 280px;
    overflow-y: auto;
}

.alloc-warehouse-row[b-wfxs9kbpcn] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
}

.alloc-warehouse-row:hover[b-wfxs9kbpcn] {
    border-color: var(--primary);
    background: var(--bg-card-hover);
}

.alloc-warehouse-row--selected[b-wfxs9kbpcn] {
    border-color: var(--primary);
    background: var(--primary-alpha);
}

.alloc-warehouse-row input[type="radio"][b-wfxs9kbpcn] {
    flex-shrink: 0;
}

.alloc-warehouse-info[b-wfxs9kbpcn] {
    flex: 1;
    min-width: 0;
}

.alloc-warehouse-name[b-wfxs9kbpcn] {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 13px;
}

.alloc-warehouse-meta[b-wfxs9kbpcn] {
    display: flex;
    gap: 6px;
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.alloc-warehouse-stock[b-wfxs9kbpcn] {
    flex-shrink: 0;
    padding: 2px 8px;
    background: rgba(34, 197, 94, 0.12);
    color: #15803d;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.alloc-warehouse-stock--low[b-wfxs9kbpcn] {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
}

.alloc-warehouse-stock--zero[b-wfxs9kbpcn] {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
}

/* Allocation modal — liste editörü (split) */
.alloc-total-ok[b-wfxs9kbpcn] { color: #16a34a; }
.alloc-total-mismatch[b-wfxs9kbpcn] { color: #f59e0b; }
.alloc-total-over[b-wfxs9kbpcn] { color: #ef4444; font-weight: 700; }

.alloc-rows[b-wfxs9kbpcn] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.alloc-row[b-wfxs9kbpcn] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.alloc-row-wh[b-wfxs9kbpcn] {
    flex: 1;
    min-width: 0;
}

.alloc-row-qty[b-wfxs9kbpcn] {
    width: 90px;
    flex-shrink: 0;
}

.alloc-row-remove[b-wfxs9kbpcn] {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card-solid);
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
    transition: var(--transition);
}

.alloc-row-remove:hover:not(:disabled)[b-wfxs9kbpcn] {
    border-color: #ef4444;
    color: #ef4444;
}

.alloc-row-remove:disabled[b-wfxs9kbpcn] {
    opacity: 0.4;
    cursor: not-allowed;
}

.alloc-add-row[b-wfxs9kbpcn] {
    width: 100%;
    padding: 10px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition);
}

.alloc-add-row:hover[b-wfxs9kbpcn] {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-alpha);
}
/* /Components/Pages/Orders/Orders.razor.rz.scp.css */
/* Orders Table - Force horizontal scroll */
.data-card .data-table[b-23b57azc7v] {
    min-width: 2000px;
}

/* Column widths */
.order-id[b-23b57azc7v] {
    min-width: 180px;
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    white-space: nowrap;
}

.order-id.clickable[b-23b57azc7v] {
    cursor: pointer;
    transition: var(--transition);
    padding: 4px 8px;
    margin: -4px -8px;
    border-radius: var(--radius-sm);
}

.order-id.clickable:hover[b-23b57azc7v] {
    background: var(--primary-alpha);
    text-decoration: underline;
}

.order-customer[b-23b57azc7v] {
    min-width: 220px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.order-marketplace[b-23b57azc7v] {
    min-width: 180px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.order-amount[b-23b57azc7v] {
    min-width: 120px;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 700;
}

/* Financial Columns */
.order-cost[b-23b57azc7v],
.order-commission[b-23b57azc7v],
.order-shipping-cost[b-23b57azc7v] {
    min-width: 100px;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.order-cost.text-muted[b-23b57azc7v],
.order-commission.text-muted[b-23b57azc7v],
.order-shipping-cost.text-muted[b-23b57azc7v] {
    color: var(--text-muted);
    font-weight: 400;
}

.order-profit[b-23b57azc7v] {
    min-width: 120px;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.order-profit.profit[b-23b57azc7v] {
    color: #10b981;
}

.order-profit.loss[b-23b57azc7v] {
    color: #ef4444;
}

.order-profit .profit-margin[b-23b57azc7v] {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.8;
}

.status-badge[b-23b57azc7v] {
    min-width: 130px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.status-badge .dot[b-23b57azc7v] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.order-type-badge[b-23b57azc7v] {
    min-width: 110px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.order-type-badge.retail[b-23b57azc7v] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.order-type-badge.micro-export[b-23b57azc7v] {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.order-type-badge.wholesale[b-23b57azc7v] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

/* Order Source Badge */
.order-source-badge[b-23b57azc7v] {
    min-width: 90px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.order-source-badge.marketplace[b-23b57azc7v] {
    background: rgba(99, 102, 241, 0.15);
    color: #6366f1;
}

.order-source-badge.manual[b-23b57azc7v] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.order-source-badge.resend[b-23b57azc7v] {
    background: rgba(236, 72, 153, 0.15);
    color: #ec4899;
}

.cargo-info[b-23b57azc7v] {
    min-width: 240px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cargo-company[b-23b57azc7v] {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
}

.tracking-number[b-23b57azc7v] {
    white-space: nowrap;
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.delivery-cell[b-23b57azc7v] {
    min-width: 140px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.delivery-type-badge[b-23b57azc7v] {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    background: #8b5cf6;
    color: white;
    text-transform: uppercase;
    width: fit-content;
}

.delivery-info[b-23b57azc7v] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.delivery-date[b-23b57azc7v] {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
}

.delivery-status[b-23b57azc7v] {
    font-size: 11px;
    color: var(--text-muted);
}

.delivery-status.delivered[b-23b57azc7v] {
    color: #10b981;
    font-weight: 500;
}

.delivery-status.overdue[b-23b57azc7v] {
    color: #ef4444;
    font-weight: 500;
}

.delivery-status.urgent[b-23b57azc7v] {
    color: #f59e0b;
    font-weight: 500;
}

.delivery-info.overdue .delivery-date[b-23b57azc7v] {
    color: #ef4444;
}

.delivery-info.urgent .delivery-date[b-23b57azc7v] {
    color: #f59e0b;
}

/* Connection Status */
.connection-status[b-23b57azc7v] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 16px;
    border-radius: var(--radius-sm);
    font-size: 12px;
}

.connection-status.connected[b-23b57azc7v] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.connection-status.disconnected[b-23b57azc7v] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.status-dot[b-23b57azc7v] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.connection-status.connected .status-dot[b-23b57azc7v] {
    animation: pulse-b-23b57azc7v 2s infinite;
}

@keyframes pulse-b-23b57azc7v {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Sync Progress Container */
.sync-progress-container[b-23b57azc7v] {
    margin: 16px 0;
    padding: 16px;
    background: var(--bg-input);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

/* Sync Stage */
.sync-stage[b-23b57azc7v] {
    margin-bottom: 16px;
}

.sync-stage:last-child[b-23b57azc7v] {
    margin-bottom: 0;
}

.sync-stage.sub-stage[b-23b57azc7v] {
    margin-left: 16px;
    padding-left: 16px;
    border-left: 2px solid var(--border);
}

.sync-stage-header[b-23b57azc7v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.sync-stage-label[b-23b57azc7v] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.sync-stage-label svg[b-23b57azc7v] {
    color: var(--primary);
}

.sync-stage-count[b-23b57azc7v] {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
}

/* Progress Bar */
.sync-progress-bar[b-23b57azc7v] {
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.sync-progress-bar.main[b-23b57azc7v] {
    height: 10px;
}

.sync-progress-bar.sub[b-23b57azc7v] {
    height: 6px;
}

.sync-progress-fill[b-23b57azc7v] {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.sync-progress-detail[b-23b57azc7v] {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

/* Current Store */
.sync-current-store[b-23b57azc7v] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
}

/* Sync Message */
.sync-message[b-23b57azc7v] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: var(--radius);
    font-size: 14px;
}

.sync-message.syncing[b-23b57azc7v] {
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary);
}

.sync-message.success[b-23b57azc7v] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.sync-message.error[b-23b57azc7v] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.sync-message svg[b-23b57azc7v] {
    flex-shrink: 0;
}

/* Sync Results */
.sync-results[b-23b57azc7v] {
    margin-top: 16px;
    border-top: 1px solid var(--border);
    padding-top: 12px;
}

.sync-results-header[b-23b57azc7v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.sync-results-toggle[b-23b57azc7v] {
    background: none;
    border: none;
    color: var(--primary);
    cursor: pointer;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}

.sync-results-toggle:hover[b-23b57azc7v] {
    background: rgba(59, 130, 246, 0.1);
}

.sync-results-list[b-23b57azc7v] {
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sync-result-item[b-23b57azc7v] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
}

.sync-result-item.success[b-23b57azc7v] {
    background: rgba(16, 185, 129, 0.08);
}

.sync-result-item.error[b-23b57azc7v] {
    background: rgba(239, 68, 68, 0.08);
}

.sync-result-icon[b-23b57azc7v] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.sync-result-item.success .sync-result-icon[b-23b57azc7v] {
    color: #10b981;
}

.sync-result-item.error .sync-result-icon[b-23b57azc7v] {
    color: #ef4444;
}

.sync-result-content[b-23b57azc7v] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sync-result-store[b-23b57azc7v] {
    font-weight: 600;
    color: var(--text-primary);
}

.sync-result-counts[b-23b57azc7v] {
    font-size: 12px;
    color: var(--text-muted);
}

.sync-result-error[b-23b57azc7v] {
    font-size: 12px;
    color: #ef4444;
    word-break: break-word;
}

.form-hint[b-23b57azc7v] {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}

.sync-spinner[b-23b57azc7v] {
    animation: spin-b-23b57azc7v 1s linear infinite;
}

@keyframes spin-b-23b57azc7v {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Stats Grid */
.stats-grid[b-23b57azc7v] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.stats-grid.stats-grid-5[b-23b57azc7v] {
    grid-template-columns: repeat(5, 1fr);
}

.stat-card[b-23b57azc7v] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    transition: var(--transition);
}

.stat-card:hover[b-23b57azc7v] {
    border-color: var(--border-hover);
    transform: translateY(-2px);
}

.stat-icon[b-23b57azc7v] {
    width: 52px;
    height: 52px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon svg[b-23b57azc7v] {
    width: 26px;
    height: 26px;
}

.stat-icon.blue[b-23b57azc7v] { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.stat-icon.green[b-23b57azc7v] { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.stat-icon.yellow[b-23b57azc7v] { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.stat-icon.orange[b-23b57azc7v] { background: rgba(249, 115, 22, 0.15); color: #f97316; }
.stat-icon.red[b-23b57azc7v] { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

.stat-content h3[b-23b57azc7v] {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 4px;
}

.stat-content p[b-23b57azc7v] {
    font-size: 13px;
    color: var(--text-muted);
}

/* Filter Tabs */
.filter-tabs-container[b-23b57azc7v] {
    margin-bottom: 24px;
}

.filter-tabs[b-23b57azc7v] {
    display: flex;
    gap: 8px;
    padding: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: fit-content;
}

.filter-tab[b-23b57azc7v] {
    padding: 10px 18px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-tab:hover[b-23b57azc7v] {
    color: var(--text-primary);
    background: var(--bg-input);
}

.filter-tab.active[b-23b57azc7v] {
    background: var(--primary);
    color: white;
}

.filter-tab .count[b-23b57azc7v] {
    padding: 2px 8px;
    background: rgba(255,255,255,0.2);
    border-radius: 10px;
    font-size: 11px;
}

.filter-tab:not(.active) .count[b-23b57azc7v] {
    background: var(--bg-input);
}

/* Customer */
.customer-avatar[b-23b57azc7v] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
}

.customer-info h4[b-23b57azc7v] {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
}

.customer-info p[b-23b57azc7v] {
    font-size: 12px;
    color: var(--text-muted);
}

.customer-email[b-23b57azc7v] {
    font-size: 11px;
    color: var(--text-muted);
    opacity: 0.8;
}

/* Marketplace */
.marketplace-icon[b-23b57azc7v] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.marketplace-name[b-23b57azc7v] {
    font-size: 13px;
    font-weight: 500;
}

/* Product Image */
.th-image[b-23b57azc7v],
.td-image[b-23b57azc7v] {
    width: 60px;
    padding: 8px !important;
}

.product-image-container[b-23b57azc7v] {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.product-thumbnail[b-23b57azc7v] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    object-fit: cover;
    border: 1px solid var(--border);
}

.product-img-placeholder[b-23b57azc7v] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    background: var(--bg-input);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.item-count-badge[b-23b57azc7v] {
    position: absolute;
    bottom: -4px;
    right: -4px;
    background: var(--primary);
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

.product-count[b-23b57azc7v] {
    font-size: 13px;
    color: var(--text-muted);
}

/* Order Date */
.order-date[b-23b57azc7v] {
    font-size: 13px;
    color: var(--text-secondary);
}

.order-date span[b-23b57azc7v] {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
}

/* Table Actions */
.table-actions[b-23b57azc7v] {
    display: flex;
    gap: 8px;
}

.action-btn[b-23b57azc7v] {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.action-btn:hover[b-23b57azc7v] {
    background: var(--bg-input);
    color: var(--primary);
}

.action-btn.label-printed[b-23b57azc7v] {
    color: #10b981;
}

.action-btn.label-printed:hover[b-23b57azc7v] {
    color: #059669;
}

.action-btn svg[b-23b57azc7v] {
    width: 18px;
    height: 18px;
}

/* Date Range - Elite Style */
.date-range-inputs[b-23b57azc7v] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.date-input-wrapper[b-23b57azc7v] {
    position: relative;
    flex: 1;
}

.date-input-wrapper .date-icon[b-23b57azc7v] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    pointer-events: none;
    transition: color 0.2s ease;
    z-index: 1;
}

.date-input-wrapper input[type="date"][b-23b57azc7v] {
    width: 100%;
    padding: 10px 12px 10px 40px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-input);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    transition: all 0.2s ease;
    cursor: pointer;
}

.date-input-wrapper input[type="date"]:hover[b-23b57azc7v] {
    border-color: var(--primary);
    background: var(--bg-hover);
}

.date-input-wrapper input[type="date"]:focus[b-23b57azc7v] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
}

.date-input-wrapper:focus-within .date-icon[b-23b57azc7v] {
    color: var(--primary);
}

.date-input-wrapper input[type="date"][b-23b57azc7v]::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 12px;
    width: 20px;
    height: 20px;
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.date-input-wrapper input[type="date"]:hover[b-23b57azc7v]::-webkit-calendar-picker-indicator {
    opacity: 1;
}

.date-separator[b-23b57azc7v] {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 16px;
}

.date-input[b-23b57azc7v] {
    width: 140px;
}

/* Shipping Sync Result - Elite Style */
.shipping-sync-result[b-23b57azc7v] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    margin-top: 16px;
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    animation: slideIn-b-23b57azc7v 0.3s ease;
}

@keyframes slideIn-b-23b57azc7v {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.shipping-sync-result-icon[b-23b57azc7v] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.shipping-sync-result-icon svg[b-23b57azc7v] {
    width: 20px;
    height: 20px;
}

.shipping-sync-result.success .shipping-sync-result-icon[b-23b57azc7v] {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.shipping-sync-result.error .shipping-sync-result-icon[b-23b57azc7v] {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.shipping-sync-result-content[b-23b57azc7v] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.shipping-sync-result-title[b-23b57azc7v] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.shipping-sync-result-subtitle[b-23b57azc7v] {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.shipping-sync-result-subtitle.error[b-23b57azc7v] {
    color: #ef4444;
}

.shipping-sync-result-amount[b-23b57azc7v] {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}

.shipping-sync-result-amount strong[b-23b57azc7v] {
    color: var(--primary);
    font-weight: 600;
}

.form-row[b-23b57azc7v] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* KVKK Privacy Mode */
.privacy-blur[b-23b57azc7v] {
    filter: blur(5px);
    user-select: none;
    transition: filter 0.2s ease;
}

.privacy-blur:hover[b-23b57azc7v] {
    filter: blur(3px);
}

.privacy-indicator[b-23b57azc7v] {
    position: fixed;
    bottom: 0;
    right: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 201;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.1);
    width: fit-content;
}

@media (max-width: 1024px) {
    .privacy-indicator[b-23b57azc7v] {
        display: none;
    }
}

.privacy-indicator.active[b-23b57azc7v] {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
    color: #ef4444;
}

.privacy-indicator kbd[b-23b57azc7v] {
    background: var(--bg-input);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
}

/* Cargo Label Viewer */
.cargo-label-viewer[b-23b57azc7v] {
    height: 70vh;
    min-height: 500px;
}

/* Finance Button Override */
.btn-finance[b-23b57azc7v] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border: none;
    color: #fff;
}

.btn-finance:hover:not(:disabled)[b-23b57azc7v] {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    color: #fff;
}

.btn-finance svg[b-23b57azc7v] {
    color: #fff;
}

/* Dropdown Menu */
.dropdown-container[b-23b57azc7v] {
    position: relative;
    display: inline-block;
}

.dropdown-btn[b-23b57azc7v] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.dropdown-btn:hover[b-23b57azc7v] {
    border-color: var(--border-hover);
    background: var(--bg-input);
}

.dropdown-btn svg:first-child[b-23b57azc7v] {
    flex-shrink: 0;
}

.dropdown-arrow[b-23b57azc7v] {
    margin-left: 4px;
    transition: transform 0.2s ease;
}

.dropdown-backdrop[b-23b57azc7v] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}

.dropdown-menu[b-23b57azc7v] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 200px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    z-index: 1000;
    padding: 4px;
}

.dropdown-item[b-23b57azc7v] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    text-align: left;
}

.dropdown-item:hover[b-23b57azc7v] {
    background: var(--bg-input);
    color: var(--primary);
}

.dropdown-item svg[b-23b57azc7v] {
    flex-shrink: 0;
    color: var(--text-muted);
}

.dropdown-item:hover svg[b-23b57azc7v] {
    color: var(--primary);
}

/* Bulk Label Modal */
.bulk-label-info[b-23b57azc7v] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-input);
    border-radius: var(--radius);
    margin-bottom: 20px;
    font-size: 13px;
    color: var(--text-secondary);
}

.bulk-label-info .info-icon[b-23b57azc7v] {
    flex-shrink: 0;
    color: var(--primary);
}

.radio-group[b-23b57azc7v] {
    display: flex;
    gap: 20px;
}

.radio-label[b-23b57azc7v] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}

.radio-label input[type="radio"][b-23b57azc7v] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    cursor: pointer;
}

.bulk-label-preview[b-23b57azc7v] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 12px 16px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
}

.bulk-label-preview svg[b-23b57azc7v] {
    flex-shrink: 0;
}

/* Bulk Status Modal */
.bulk-status-info[b-23b57azc7v] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--primary-alpha);
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--primary);
}

.bulk-status-info svg[b-23b57azc7v] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

/* ========================================
   SYNC MODAL - PREMIUM DESIGN
   ======================================== */

/* Sync Settings (Before Sync Starts) */
.sync-settings[b-23b57azc7v] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sync-connection[b-23b57azc7v] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--radius);
    font-size: 12px;
    font-weight: 500;
}

.sync-connection.connected[b-23b57azc7v] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.sync-connection.disconnected[b-23b57azc7v] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.sync-connection-dot[b-23b57azc7v] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.sync-connection.connected .sync-connection-dot[b-23b57azc7v] {
    animation: pulse-b-23b57azc7v 2s infinite;
}

.sync-form-group[b-23b57azc7v] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sync-form-group label[b-23b57azc7v] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.sync-hint[b-23b57azc7v] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(59, 130, 246, 0.08);
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--primary);
}

.sync-hint svg[b-23b57azc7v] {
    flex-shrink: 0;
}

.sync-date-row[b-23b57azc7v] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.sync-mode-row[b-23b57azc7v] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    margin-bottom: 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.sync-mode-toggle[b-23b57azc7v] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.sync-mode-toggle input[type="checkbox"][b-23b57azc7v] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
    cursor: pointer;
}

.sync-mode-label[b-23b57azc7v] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.sync-mode-hint[b-23b57azc7v] {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
    padding-left: 26px;
}

/* Sync Panel (During and After Sync) */
.sync-panel[b-23b57azc7v] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Summary Header */
.sync-summary-header[b-23b57azc7v] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--bg-input);
    border-radius: var(--radius-lg);
}

.sync-summary-icon[b-23b57azc7v] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sync-summary-icon.syncing[b-23b57azc7v] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.sync-summary-icon.success[b-23b57azc7v] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.sync-summary-icon.partial[b-23b57azc7v] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.sync-summary-icon.error[b-23b57azc7v] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.sync-summary-text h4[b-23b57azc7v] {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--text-primary);
}

.sync-summary-text p[b-23b57azc7v] {
    font-size: 13px;
    color: var(--text-muted);
}

/* Overall Progress */
.sync-overall-progress[b-23b57azc7v] {
    padding: 16px;
    background: var(--bg-input);
    border-radius: var(--radius);
}

.sync-progress-header[b-23b57azc7v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.sync-progress-header span:first-child[b-23b57azc7v] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.sync-progress-count[b-23b57azc7v] {
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
}

.sync-progress-track[b-23b57azc7v] {
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.sync-progress-bar-fill[b-23b57azc7v] {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Stores Panel */
.sync-stores-panel[b-23b57azc7v] {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.sync-stores-header[b-23b57azc7v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: var(--bg-input);
    border-bottom: 1px solid var(--border);
}

.sync-stores-header span:first-child[b-23b57azc7v] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.sync-stores-badges[b-23b57azc7v] {
    display: flex;
    gap: 8px;
}

.sync-badge[b-23b57azc7v] {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
}

.sync-badge.success[b-23b57azc7v] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.sync-badge.error[b-23b57azc7v] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* Stores List */
.sync-stores-list[b-23b57azc7v] {
    max-height: 300px;
    overflow-y: auto;
}

.sync-store-item[b-23b57azc7v] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s ease;
}

.sync-store-item:last-child[b-23b57azc7v] {
    border-bottom: none;
}

.sync-store-item.syncing[b-23b57azc7v] {
    background: rgba(59, 130, 246, 0.05);
}

.sync-store-item.success[b-23b57azc7v] {
    background: rgba(16, 185, 129, 0.03);
}

.sync-store-item.error[b-23b57azc7v] {
    background: rgba(239, 68, 68, 0.03);
}

.sync-store-icon[b-23b57azc7v] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--bg-input);
    color: var(--text-muted);
}

.sync-store-item.syncing .sync-store-icon[b-23b57azc7v] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.sync-store-item.success .sync-store-icon[b-23b57azc7v] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.sync-store-item.error .sync-store-icon[b-23b57azc7v] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.sync-store-content[b-23b57azc7v] {
    flex: 1;
    min-width: 0;
}

.sync-store-name[b-23b57azc7v] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.sync-store-status-text[b-23b57azc7v] {
    font-size: 12px;
    color: var(--text-muted);
}

.sync-store-progress[b-23b57azc7v] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sync-store-progress-bar[b-23b57azc7v] {
    flex: 1;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
}

.sync-store-progress-fill[b-23b57azc7v] {
    height: 100%;
    background: #3b82f6;
    border-radius: 2px;
    transition: width 0.2s ease;
}

.sync-store-progress-text[b-23b57azc7v] {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}

.sync-store-result[b-23b57azc7v] {
    display: flex;
    gap: 12px;
    font-size: 12px;
}

.sync-store-result.success[b-23b57azc7v] {
    color: #10b981;
}

.sync-store-result.error[b-23b57azc7v] {
    color: #ef4444;
    word-break: break-word;
}

/* Spinner Animation */
.sync-spinner[b-23b57azc7v] {
    animation: spin-b-23b57azc7v 1s linear infinite;
}

@keyframes spin-b-23b57azc7v {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes pulse-b-23b57azc7v {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ========== RESPONSIVE ========== */

/* Large tablets / small desktops */
@media (max-width: 1400px) {
    .stats-grid[b-23b57azc7v] {
        grid-template-columns: repeat(3, 1fr);
    }

    .stats-grid.stats-grid-5[b-23b57azc7v] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablet */
@media (max-width: 1024px) {

    .stats-grid[b-23b57azc7v],
    .stats-grid.stats-grid-5[b-23b57azc7v] {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 16px;
    }

    .stat-card[b-23b57azc7v] {
        padding: 16px;
    }

    .stat-card:hover[b-23b57azc7v] {
        transform: none;
    }

    .stat-icon[b-23b57azc7v] {
        width: 44px;
        height: 44px;
    }

    .stat-icon svg[b-23b57azc7v] {
        width: 22px;
        height: 22px;
    }

    .stat-content h3[b-23b57azc7v] {
        font-size: 24px;
    }

    .stat-content p[b-23b57azc7v] {
        font-size: 12px;
    }

    /* Filter tabs - horizontal scroll */
    .filter-tabs-container[b-23b57azc7v] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -16px 16px;
        padding: 0 16px;
    }

    .filter-tabs[b-23b57azc7v] {
        width: max-content;
    }

    .filter-tab[b-23b57azc7v] {
        padding: 8px 14px;
        font-size: 12px;
        white-space: nowrap;
    }

    .filter-tab .count[b-23b57azc7v] {
        font-size: 10px;
        padding: 1px 6px;
    }

    /* Filter bar */
    .filter-bar[b-23b57azc7v] {
        padding: 10px 12px;
        gap: 8px;
    }

    .filter-bar-search[b-23b57azc7v] {
        max-width: none;
        flex: 1;
    }

    /* Quick action buttons in header */
    .order-customer[b-23b57azc7v] {
        min-width: 160px;
    }

    .order-marketplace[b-23b57azc7v] {
        min-width: 140px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .stats-grid[b-23b57azc7v],
    .stats-grid.stats-grid-5[b-23b57azc7v] {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 12px;
    }

    /* Make last stat card span full width when odd number of items */
    .stats-grid.stats-grid-5 .stat-card:last-child[b-23b57azc7v] {
        grid-column: 1 / -1;
    }

    .stat-card[b-23b57azc7v] {
        padding: 14px;
        gap: 12px;
    }

    .stat-icon[b-23b57azc7v] {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .stat-icon svg[b-23b57azc7v] {
        width: 20px;
        height: 20px;
    }

    .stat-content h3[b-23b57azc7v] {
        font-size: 20px;
        margin-bottom: 2px;
    }

    .stat-content p[b-23b57azc7v] {
        font-size: 11px;
    }

    /* Filter tabs */
    .filter-tabs-container[b-23b57azc7v] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -16px 12px;
        padding: 0 16px;
        scrollbar-width: none;
    }

    .filter-tabs-container[b-23b57azc7v]::-webkit-scrollbar {
        display: none;
    }

    .filter-tabs[b-23b57azc7v] {
        width: max-content;
        gap: 4px;
        padding: 3px;
    }

    .filter-tab[b-23b57azc7v] {
        padding: 7px 12px;
        font-size: 12px;
        white-space: nowrap;
        gap: 6px;
    }

    .filter-tab .count[b-23b57azc7v] {
        font-size: 10px;
        padding: 1px 5px;
    }

    /* Filter bar */
    .filter-bar[b-23b57azc7v] {
        padding: 10px 12px;
        gap: 8px;
        margin-bottom: 12px;
    }

    .filter-bar-search[b-23b57azc7v] {
        max-width: none;
        flex: 1;
    }

    /* Filter button: show icon + badge, hide text label */
    .filter-btn[b-23b57azc7v] {
        padding: 10px 14px;
        gap: 8px;
    }

    .filter-btn > span:not(.filter-badge)[b-23b57azc7v] {
        display: none;
    }

    .filter-btn > svg[b-23b57azc7v] {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    /* Dropdown arrow hide */
    .dropdown-arrow[b-23b57azc7v] {
        display: none;
    }

    /* Dropdown menu - full width aligned left */
    .dropdown-menu[b-23b57azc7v] {
        left: 0;
        right: auto;
        min-width: 180px;
    }

    /* Customer cell */
    .order-customer[b-23b57azc7v] {
        min-width: 150px;
        gap: 8px;
    }

    .customer-avatar[b-23b57azc7v] {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .customer-info h4[b-23b57azc7v] {
        font-size: 13px;
    }

    .customer-email[b-23b57azc7v] {
        display: none;
    }

    /* Marketplace cell */
    .order-marketplace[b-23b57azc7v] {
        min-width: 120px;
        gap: 8px;
    }

    .marketplace-icon[b-23b57azc7v] {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }

    .marketplace-name[b-23b57azc7v] {
        font-size: 12px;
    }

    /* Order id */
    .order-id[b-23b57azc7v] {
        min-width: 140px;
        font-size: 12px;
    }

    /* Amount */
    .order-amount[b-23b57azc7v] {
        min-width: 90px;
        font-size: 13px;
    }

    /* Financial columns */
    .order-cost[b-23b57azc7v],
    .order-commission[b-23b57azc7v],
    .order-shipping-cost[b-23b57azc7v] {
        min-width: 80px;
        font-size: 12px;
    }

    .order-profit[b-23b57azc7v] {
        min-width: 90px;
        font-size: 12px;
    }

    .order-profit .profit-margin[b-23b57azc7v] {
        font-size: 10px;
    }

    /* Status badge */
    .status-badge[b-23b57azc7v] {
        min-width: 100px;
        padding: 4px 10px;
        font-size: 11px;
    }

    /* Type/Source badges */
    .order-type-badge[b-23b57azc7v],
    .order-source-badge[b-23b57azc7v] {
        min-width: 80px;
        padding: 3px 8px;
        font-size: 10px;
    }

    /* Cargo info */
    .cargo-info[b-23b57azc7v] {
        min-width: 160px;
    }

    .cargo-company[b-23b57azc7v] {
        font-size: 11px;
    }

    .tracking-number[b-23b57azc7v] {
        font-size: 10px;
    }

    /* Delivery cell */
    .delivery-cell[b-23b57azc7v] {
        min-width: 110px;
    }

    .delivery-date[b-23b57azc7v] {
        font-size: 11px;
    }

    .delivery-status[b-23b57azc7v] {
        font-size: 10px;
    }

    .delivery-type-badge[b-23b57azc7v] {
        font-size: 9px;
        padding: 1px 5px;
    }

    /* Order date */
    .order-date[b-23b57azc7v] {
        font-size: 12px;
    }

    .order-date span[b-23b57azc7v] {
        font-size: 11px;
    }

    /* Product image */
    .product-image-container[b-23b57azc7v] {
        width: 38px;
        height: 38px;
    }

    .product-thumbnail[b-23b57azc7v] {
        width: 38px;
        height: 38px;
    }

    .product-img-placeholder[b-23b57azc7v] {
        width: 38px;
        height: 38px;
    }

    .item-count-badge[b-23b57azc7v] {
        font-size: 9px;
        padding: 1px 4px;
    }

    /* Actions */
    .action-btn[b-23b57azc7v] {
        width: 32px;
        height: 32px;
    }

    .action-btn svg[b-23b57azc7v] {
        width: 16px;
        height: 16px;
    }

    .table-actions[b-23b57azc7v] {
        gap: 4px;
    }

    /* Form row */
    .form-row[b-23b57azc7v] {
        grid-template-columns: 1fr;
    }

    /* Sync modal */
    .sync-date-row[b-23b57azc7v] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .sync-summary-header[b-23b57azc7v] {
        flex-direction: column;
        text-align: center;
        padding: 16px;
        gap: 12px;
    }

    .sync-summary-icon[b-23b57azc7v] {
        width: 48px;
        height: 48px;
    }

    .sync-summary-text h4[b-23b57azc7v] {
        font-size: 15px;
    }

    .sync-summary-text p[b-23b57azc7v] {
        font-size: 12px;
    }

    .sync-overall-progress[b-23b57azc7v] {
        padding: 12px;
    }

    .sync-store-item[b-23b57azc7v] {
        padding: 12px;
        gap: 10px;
    }

    .sync-store-icon[b-23b57azc7v] {
        width: 28px;
        height: 28px;
    }

    .sync-store-name[b-23b57azc7v] {
        font-size: 13px;
    }

    .sync-store-result[b-23b57azc7v] {
        font-size: 11px;
        gap: 8px;
    }

    .sync-badge[b-23b57azc7v] {
        font-size: 10px;
        padding: 3px 8px;
    }

    /* Shipping cost sync */
    .date-range-inputs[b-23b57azc7v] {
        flex-direction: column;
        gap: 8px;
    }

    .date-separator[b-23b57azc7v] {
        display: none;
    }

    .shipping-sync-result[b-23b57azc7v] {
        flex-direction: column;
        text-align: center;
        padding: 14px;
        gap: 10px;
    }

    .shipping-sync-result-title[b-23b57azc7v] {
        font-size: 14px;
    }

    .shipping-sync-result-subtitle[b-23b57azc7v] {
        font-size: 12px;
    }

    /* Cargo label viewer */
    .cargo-label-viewer[b-23b57azc7v] {
        height: 60vh;
        min-height: 350px;
    }

    /* Document progress */
    .document-progress-content[b-23b57azc7v] {
        padding: 24px 16px;
        gap: 16px;
    }

    .document-progress-stage[b-23b57azc7v] {
        font-size: 15px;
    }

    .document-progress-bar-container[b-23b57azc7v] {
        width: 100%;
        max-width: 260px;
    }

    /* Bulk label */
    .radio-group[b-23b57azc7v] {
        flex-direction: column;
        gap: 12px;
    }

    .bulk-label-info[b-23b57azc7v] {
        padding: 12px;
        font-size: 12px;
        gap: 10px;
    }

    .bulk-status-info[b-23b57azc7v] {
        padding: 10px 12px;
        font-size: 12px;
    }

    /* Document type selection */
    .document-type-group[b-23b57azc7v] {
        grid-template-columns: 1fr;
    }

    .document-type-group .radio-label[b-23b57azc7v] {
        padding: 12px;
    }

    /* Switch */
    .switch-hint[b-23b57azc7v] {
        margin-left: 0;
        margin-top: 8px;
    }

    /* Connection status */
    .sync-connection[b-23b57azc7v] {
        padding: 8px 12px;
        font-size: 11px;
    }

    .sync-hint[b-23b57azc7v] {
        font-size: 11px;
        padding: 6px 10px;
    }

    .sync-form-group label[b-23b57azc7v] {
        font-size: 12px;
    }

    .sync-description[b-23b57azc7v] {
        font-size: 13px;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .stats-grid[b-23b57azc7v],
    .stats-grid.stats-grid-5[b-23b57azc7v] {
        gap: 8px;
        margin-bottom: 10px;
    }

    .stat-card[b-23b57azc7v] {
        padding: 12px;
        gap: 10px;
    }

    .stat-icon[b-23b57azc7v] {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }

    .stat-icon svg[b-23b57azc7v] {
        width: 18px;
        height: 18px;
    }

    .stat-content h3[b-23b57azc7v] {
        font-size: 18px;
    }

    .stat-content p[b-23b57azc7v] {
        font-size: 10px;
    }

    /* Filter bar */
    .filter-bar[b-23b57azc7v] {
        padding: 8px 10px;
    }

    /* Filter tabs */
    .filter-tab[b-23b57azc7v] {
        padding: 6px 10px;
        font-size: 11px;
    }

    /* Card header and body */
    .card-header[b-23b57azc7v] {
        padding: 12px;
    }

    .card-body[b-23b57azc7v] {
        padding: 12px;
    }

    /* Order id */
    .order-id[b-23b57azc7v] {
        min-width: 120px;
        font-size: 11px;
    }

    /* Sync modal */
    .sync-summary-header[b-23b57azc7v] {
        padding: 12px;
    }

    .sync-summary-icon[b-23b57azc7v] {
        width: 40px;
        height: 40px;
    }

    .sync-summary-text h4[b-23b57azc7v] {
        font-size: 14px;
    }

    .sync-store-item[b-23b57azc7v] {
        padding: 10px;
    }

    .sync-stores-header[b-23b57azc7v] {
        padding: 10px 12px;
    }

    /* Document progress */
    .document-progress-content[b-23b57azc7v] {
        padding: 20px 12px;
    }

    .document-progress-stage[b-23b57azc7v] {
        font-size: 14px;
    }

    .document-progress-bar-container[b-23b57azc7v] {
        width: 100%;
    }

}

/* Document Type Selection */
.document-type-group[b-23b57azc7v] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.document-type-group .radio-label[b-23b57azc7v] {
    flex-direction: column;
    gap: 0;
    padding: 16px;
    background: var(--bg-input);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    transition: var(--transition);
}

.document-type-group .radio-label:hover[b-23b57azc7v] {
    border-color: var(--border-hover);
    background: var(--bg-card);
}

.document-type-group .radio-label.selected[b-23b57azc7v] {
    border-color: var(--primary);
    background: rgba(59, 130, 246, 0.08);
}

.document-type-group .radio-label input[type="radio"][b-23b57azc7v] {
    display: none;
}

.document-type-group .radio-content[b-23b57azc7v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.document-type-group .radio-content svg[b-23b57azc7v] {
    color: var(--text-muted);
    transition: color 0.15s ease;
}

.document-type-group .radio-label.selected .radio-content svg[b-23b57azc7v] {
    color: var(--primary);
}

.document-type-group .radio-content span[b-23b57azc7v] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.document-type-group .radio-label.selected .radio-content span[b-23b57azc7v] {
    color: var(--primary);
}

/* Form Divider */
.form-divider[b-23b57azc7v] {
    border: none;
    border-top: 1px solid var(--border);
    margin: 20px 0;
}

/* Loading Templates */
.loading-templates[b-23b57azc7v] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--bg-input);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--text-muted);
}

.spinner-sm[b-23b57azc7v] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-23b57azc7v 0.8s linear infinite;
}

/* No Templates Warning */
.no-templates-warning[b-23b57azc7v] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--radius);
    font-size: 13px;
    color: #f59e0b;
}

.no-templates-warning svg[b-23b57azc7v] {
    flex-shrink: 0;
}

/* Document Progress Overlay */
.document-progress-overlay[b-23b57azc7v] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.document-progress-content[b-23b57azc7v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 40px;
    text-align: center;
}

.document-progress-icon[b-23b57azc7v] {
    color: var(--primary);
}

.document-progress-icon .progress-spinner[b-23b57azc7v] {
    animation: spin-b-23b57azc7v 1.2s linear infinite;
}

.document-progress-stage[b-23b57azc7v] {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.document-progress-bar-container[b-23b57azc7v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 300px;
}

.document-progress-bar[b-23b57azc7v] {
    width: 100%;
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.document-progress-fill[b-23b57azc7v] {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.document-progress-count[b-23b57azc7v] {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
}

.document-progress-message[b-23b57azc7v] {
    font-size: 13px;
    color: var(--text-muted);
    max-width: 400px;
}

/* Send to Picking Switch */
.send-to-picking-switch[b-23b57azc7v] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.switch-label[b-23b57azc7v] {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.switch-label input[type="checkbox"][b-23b57azc7v] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-slider[b-23b57azc7v] {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--border);
    border-radius: 12px;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.switch-slider[b-23b57azc7v]::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 0.2s ease;
}

.switch-label input[type="checkbox"]:checked + .switch-slider[b-23b57azc7v] {
    background: var(--primary);
}

.switch-label input[type="checkbox"]:checked + .switch-slider[b-23b57azc7v]::before {
    transform: translateX(20px);
}

.switch-label input[type="checkbox"]:focus + .switch-slider[b-23b57azc7v] {
    box-shadow: 0 0 0 3px var(--primary-alpha);
}

.switch-text[b-23b57azc7v] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.switch-hint[b-23b57azc7v] {
    display: block;
    margin-top: 6px;
    margin-left: 56px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* FILTER BAR                                                                   */
/* ═══════════════════════════════════════════════════════════════════════════ */

.filter-bar[b-23b57azc7v] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 16px;
}

.filter-bar-search[b-23b57azc7v] {
    flex: 1;
    max-width: 400px;
}

.search-input-wrapper[b-23b57azc7v] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input-wrapper .search-icon[b-23b57azc7v] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    width: 16px;
    height: 16px;
    pointer-events: none;
}

.search-input-wrapper .search-input[b-23b57azc7v] {
    padding-left: 38px;
    width: 100%;
}

.filter-btn[b-23b57azc7v] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-weight: 500;
    white-space: nowrap;
}

.filter-btn svg[b-23b57azc7v] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.filter-btn.has-filters[b-23b57azc7v] {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-alpha);
}

.filter-badge[b-23b57azc7v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 600;
    color: white;
    background: var(--primary);
    border-radius: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* FILTER MODAL                                                                 */
/* ═══════════════════════════════════════════════════════════════════════════ */

.filter-modal-content[b-23b57azc7v] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.filter-modal-content .form-group[b-23b57azc7v] {
    margin-bottom: 0;
}

.filter-modal-content .form-group label[b-23b57azc7v] {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.filter-modal-content .date-range-inputs[b-23b57azc7v] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-modal-content .date-input[b-23b57azc7v] {
    flex: 1;
}

.filter-modal-content .date-separator[b-23b57azc7v] {
    color: var(--text-muted);
    font-weight: 500;
}

/* ════════════════════════════════════════════════════════════════
   Filter Editor + Sort Editor + Record Count
   ════════════════════════════════════════════════════════════════ */

.filter-editor-section[b-23b57azc7v] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.filter-editor-section-header[b-23b57azc7v] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.filter-editor-section-header.is-sticky[b-23b57azc7v] {
    position: sticky;
    top: -1px;
    z-index: 2;
    background: var(--bg-card);
    padding-top: 8px;
}

.filter-editor-section-header h4[b-23b57azc7v] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.filter-editor-section-title[b-23b57azc7v] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.filter-editor-section-badge[b-23b57azc7v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 11px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* DataGrid "Depo" kolonu — siparişin allocations'ından gruplanmış warehouse rozetleri.
   OrderDetail'daki warehouse-tag stiliyle paralel ama liste hücresine sığacak şekilde kompakt. */
.warehouse-chip-stripe[b-23b57azc7v] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.warehouse-chip[b-23b57azc7v] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.warehouse-chip--missing[b-23b57azc7v] {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

/* Active filter chip stripe — filter-bar altı */
.active-filter-chips[b-23b57azc7v] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 16px;
}

.active-filter-chip[b-23b57azc7v] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 320px;
    padding: 4px 4px 4px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 14px;
    font-size: 12px;
    color: var(--text-secondary);
    transition: var(--transition);
}

.active-filter-chip:hover[b-23b57azc7v] {
    border-color: var(--border-hover);
    color: var(--text-primary);
}

.active-filter-chip-text[b-23b57azc7v] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.active-filter-chip-remove[b-23b57azc7v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
}

.active-filter-chip-remove:hover[b-23b57azc7v] {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

/* Modal footer layout — sol Reset / sağ uyarı+Cancel+Apply */
.modal-footer-actions[b-23b57azc7v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.modal-footer-right[b-23b57azc7v] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Modal footer — Apply yanındaki eksik koşul uyarısı */
.modal-footer-warning[b-23b57azc7v] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--radius-sm);
    color: #ef4444;
    font-size: 12px;
    font-weight: 500;
}

.filter-editor-hint[b-23b57azc7v] {
    font-size: 12px;
    color: var(--text-muted);
}

.filter-editor-sort[b-23b57azc7v] { margin-top: 8px; }

.filter-editor-section-divider[b-23b57azc7v] {
    text-align: center;
    margin: 16px 0 12px;
    position: relative;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.filter-editor-section-divider[b-23b57azc7v]::before,
.filter-editor-section-divider[b-23b57azc7v]::after {
    content: "";
    position: absolute;
    top: 50%;
    width: calc(50% - 100px);
    height: 1px;
    background: var(--border);
}
.filter-editor-section-divider[b-23b57azc7v]::before { left: 0; }
.filter-editor-section-divider[b-23b57azc7v]::after { right: 0; }

.record-count-badge[b-23b57azc7v] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text-primary);
    transition: var(--transition);
}
.record-count-badge:hover[b-23b57azc7v] { border-color: var(--primary); background: var(--primary-alpha); }
.record-count-badge svg[b-23b57azc7v] { color: var(--primary); }
.record-count-label[b-23b57azc7v] { color: var(--text-secondary); font-weight: 500; }
.record-count-value[b-23b57azc7v] { font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════ */
/* SELECTION BANNER                                    */
/* ═══════════════════════════════════════════════════ */
.selection-banner[b-23b57azc7v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.10) 0%, rgba(139, 92, 246, 0.10) 100%);
    border: 1px solid rgba(59, 130, 246, 0.30);
    border-radius: var(--radius);
    margin-bottom: 16px;
    animation: selectionBannerSlideDown-b-23b57azc7v 0.2s ease-out;
}

@keyframes selectionBannerSlideDown-b-23b57azc7v {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.selection-info[b-23b57azc7v] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.4;
    min-width: 0;
}

.selection-info svg[b-23b57azc7v] {
    color: #3b82f6;
    flex-shrink: 0;
}

.selection-info strong[b-23b57azc7v] {
    color: #3b82f6;
    font-weight: 700;
}

.selection-actions[b-23b57azc7v] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.btn-select-all[b-23b57azc7v],
.btn-clear-selection[b-23b57azc7v] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.btn-select-all[b-23b57azc7v] {
    background: #3b82f6;
    color: #fff;
}

.btn-select-all:hover[b-23b57azc7v] {
    background: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.25);
}

.btn-clear-selection[b-23b57azc7v] {
    background: var(--bg-input);
    color: var(--text-secondary);
    border-color: var(--border);
}

.btn-clear-selection:hover[b-23b57azc7v] {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-hover);
}

.btn-select-all svg[b-23b57azc7v],
.btn-clear-selection svg[b-23b57azc7v] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .selection-banner[b-23b57azc7v] {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px;
    }

    .selection-actions[b-23b57azc7v] {
        width: 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .selection-banner[b-23b57azc7v] {
        padding: 10px 12px;
        margin-bottom: 12px;
    }

    .selection-info[b-23b57azc7v] {
        font-size: 13px;
    }

    .selection-actions[b-23b57azc7v] {
        gap: 6px;
    }

    .btn-select-all[b-23b57azc7v],
    .btn-clear-selection[b-23b57azc7v] {
        flex: 1;
        justify-content: center;
        padding: 7px 10px;
        font-size: 12px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   BULK ACTION DROPDOWN (ERP grup butonu — Products.razor pattern)
   Kanonik theme variables: --bg-card / --border / --primary
   / --text-primary / --text-secondary / --bg-input / --radius
   ═══════════════════════════════════════════════════════════════ */

.bulk-action-dropdown[b-23b57azc7v] {
    position: relative;
    display: inline-block;
}

.bulk-action-caret[b-23b57azc7v] {
    margin-left: 4px;
    transition: transform 150ms ease;
}

.bulk-action-dropdown.is-open .bulk-action-caret[b-23b57azc7v] {
    transform: rotate(180deg);
}

.bulk-action-menu[b-23b57azc7v] {
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    min-width: 320px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.06);
    padding: 6px;
    display: none;
    z-index: 1100;
}

.bulk-action-dropdown.is-open .bulk-action-menu[b-23b57azc7v] {
    display: block;
}

.bulk-action-item[b-23b57azc7v] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    color: var(--text-primary);
    transition: background 120ms ease;
}

    .bulk-action-item:hover:not(:disabled)[b-23b57azc7v] {
        background: var(--bg-input);
    }

    .bulk-action-item:disabled[b-23b57azc7v] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .bulk-action-item svg[b-23b57azc7v] {
        flex-shrink: 0;
        margin-top: 2px;
        color: var(--text-secondary);
    }

    .bulk-action-item.primary svg[b-23b57azc7v] {
        color: var(--primary);
    }

.bulk-action-item-text[b-23b57azc7v] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

    .bulk-action-item-text strong[b-23b57azc7v] {
        font-size: 13px;
        font-weight: 600;
        color: var(--text-primary);
    }

    .bulk-action-item-text small[b-23b57azc7v] {
        font-size: 12px;
        color: var(--text-secondary);
        line-height: 1.35;
    }

.bulk-action-divider[b-23b57azc7v] {
    height: 1px;
    background: var(--border);
    margin: 6px 4px;
}

.bulk-action-backdrop[b-23b57azc7v] {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 1090;
}

/* ═══════════════════════════════════════════════════════════════
   ORDER ACTIONS DROPDOWN (Sayfa header — Yeni / Sipariş Çek / Kargo Bedeli)
   Gradient call-to-action, renkli ikon arka planları, slide hover.
   ═══════════════════════════════════════════════════════════════ */

.order-actions-dropdown[b-23b57azc7v] {
    position: relative;
    display: inline-flex;
}

.order-actions-trigger[b-23b57azc7v] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(139, 92, 246, 0.35), 0 2px 6px rgba(99, 102, 241, 0.25);
    transition: transform 160ms ease, box-shadow 160ms ease;
}

    .order-actions-trigger:hover[b-23b57azc7v] {
        transform: translateY(-1px);
        box-shadow: 0 10px 24px rgba(139, 92, 246, 0.45), 0 4px 10px rgba(99, 102, 241, 0.3);
    }

    .order-actions-trigger:active[b-23b57azc7v] {
        transform: translateY(0);
    }

    .order-actions-trigger svg[b-23b57azc7v] {
        flex-shrink: 0;
    }

.order-actions-glow[b-23b57azc7v] {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.25) 50%, transparent 70%);
    transform: translateX(-100%);
    pointer-events: none;
    transition: transform 600ms ease;
}

.order-actions-trigger:hover .order-actions-glow[b-23b57azc7v] {
    transform: translateX(100%);
}

.order-actions-caret[b-23b57azc7v] {
    margin-left: 2px;
    transition: transform 180ms ease;
}

.order-actions-trigger.is-open .order-actions-caret[b-23b57azc7v] {
    transform: rotate(180deg);
}

.order-actions-menu[b-23b57azc7v] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 320px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18), 0 6px 14px rgba(0, 0, 0, 0.08);
    padding: 6px;
    z-index: 1100;
    animation: order-actions-fadein-b-23b57azc7v 160ms ease;
}

@keyframes order-actions-fadein-b-23b57azc7v {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.order-actions-item[b-23b57azc7v] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    color: var(--text-primary);
    transition: background 140ms ease, transform 140ms ease;
}

    .order-actions-item:hover[b-23b57azc7v] {
        background: var(--bg-input);
        transform: translateX(2px);
    }

.order-actions-icon[b-23b57azc7v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    flex-shrink: 0;
    color: #ffffff;
}

    .order-actions-icon--success[b-23b57azc7v] {
        background: linear-gradient(135deg, #10b981, #059669);
        box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
    }

    .order-actions-icon--primary[b-23b57azc7v] {
        background: linear-gradient(135deg, #3b82f6, #6366f1);
        box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
    }

    .order-actions-icon--finance[b-23b57azc7v] {
        background: linear-gradient(135deg, #f59e0b, #ea580c);
        box-shadow: 0 4px 10px rgba(245, 158, 11, 0.3);
    }

    .order-actions-icon--cyan[b-23b57azc7v] {
        background: linear-gradient(135deg, #06b6d4, #0891b2);
        box-shadow: 0 4px 10px rgba(6, 182, 212, 0.3);
    }

    .order-actions-icon--teal[b-23b57azc7v] {
        background: linear-gradient(135deg, #14b8a6, #0d9488);
        box-shadow: 0 4px 10px rgba(20, 184, 166, 0.3);
    }

.order-actions-text[b-23b57azc7v] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

    .order-actions-text strong[b-23b57azc7v] {
        font-size: 13.5px;
        font-weight: 600;
        color: var(--text-primary);
        line-height: 1.25;
    }

    .order-actions-text small[b-23b57azc7v] {
        font-size: 12px;
        color: var(--text-secondary);
        line-height: 1.35;
    }

.order-actions-divider[b-23b57azc7v] {
    height: 1px;
    background: var(--border);
    margin: 6px 4px;
}
/* /Components/Pages/Organization/Warehouses.razor.rz.scp.css */
/* Warehouses page responsive */

@media (max-width: 768px) {
    .code-badge[b-5c2m3313li] {
        font-size: 12px;
        padding: 3px 8px;
    }

    .priority-badge[b-5c2m3313li] {
        font-size: 12px;
    }

    .form-section[b-5c2m3313li] {
        padding: 14px;
    }

    .form-row[b-5c2m3313li] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .code-badge[b-5c2m3313li] {
        font-size: 11px;
        padding: 2px 6px;
    }

    .priority-badge[b-5c2m3313li] {
        font-size: 11px;
    }

    .form-section[b-5c2m3313li] {
        padding: 12px;
    }
}
/* /Components/Pages/Products/AttributeImportWizard.razor.rz.scp.css */
/* ===== ATTRIBUTE IMPORT WIZARD STYLES ===== */
/* Matches BulkProductImportWizard design */

.wizard-container-wide[b-z7wghvn5xr] {
    max-width: 1350px;
}

/* ===== STEP CONTENT ===== */
.wizard-step-content h3.step-title[b-z7wghvn5xr] {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.step-description[b-z7wghvn5xr] {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 24px;
}

/* ===== STATS CARDS ===== */
.preview-stats[b-z7wghvn5xr] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card[b-z7wghvn5xr] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.stat-icon[b-z7wghvn5xr] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon.variant[b-z7wghvn5xr] { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.stat-icon.image[b-z7wghvn5xr] { background: rgba(168, 85, 247, 0.1); color: #a855f7; }
.stat-icon.stock[b-z7wghvn5xr] { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.stat-icon.price[b-z7wghvn5xr] { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }

.stat-content[b-z7wghvn5xr] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat-value[b-z7wghvn5xr] {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.stat-label[b-z7wghvn5xr] {
    font-size: 12px;
    color: var(--text-muted);
}

.stat-matched[b-z7wghvn5xr] {
    font-size: 11px;
    color: #10b981;
}

/* ===== IMPORT RESULT BANNERS ===== */
.import-result[b-z7wghvn5xr] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    border-radius: var(--radius);
    margin-bottom: 24px;
}

.import-result.success[b-z7wghvn5xr] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.import-result.error[b-z7wghvn5xr] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.import-result.warning[b-z7wghvn5xr] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.import-result div[b-z7wghvn5xr] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.import-result strong[b-z7wghvn5xr] {
    font-size: 15px;
}

.import-result span[b-z7wghvn5xr] {
    font-size: 13px;
}

/* ===== CATEGORY CARDS ===== */
.category-cards-list[b-z7wghvn5xr] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.category-card[b-z7wghvn5xr] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: var(--transition);
}

.category-card:hover[b-z7wghvn5xr] {
    border-color: var(--border-hover);
}

.category-card.skipped[b-z7wghvn5xr] {
    opacity: 0.6;
}

/* Category Card Header */
.category-card-header[b-z7wghvn5xr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    background: var(--bg-input);
    border-bottom: 1px solid var(--border);
}

.category-info[b-z7wghvn5xr] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.category-info .category-name[b-z7wghvn5xr] {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

.category-info .category-path[b-z7wghvn5xr] {
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Action Pills */
.category-actions[b-z7wghvn5xr] {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.action-pill[b-z7wghvn5xr] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
    background: var(--bg-primary);
    color: var(--text-muted);
}

.action-pill:hover[b-z7wghvn5xr] {
    border-color: var(--border-hover);
    color: var(--text-primary);
}

.action-pill.active.match[b-z7wghvn5xr] {
    background: rgba(16, 185, 129, 0.15);
    border-color: #10b981;
    color: #10b981;
}

.action-pill.active.create[b-z7wghvn5xr] {
    background: rgba(245, 158, 11, 0.15);
    border-color: #f59e0b;
    color: #f59e0b;
}

.action-pill.active.skip[b-z7wghvn5xr] {
    background: rgba(107, 114, 128, 0.15);
    border-color: #6b7280;
    color: #6b7280;
}

.action-pill svg[b-z7wghvn5xr] {
    width: 14px;
    height: 14px;
}

/* Category Card Body */
.category-card-body[b-z7wghvn5xr] {
    padding: 12px 16px;
}

.category-select-row[b-z7wghvn5xr] {
    max-width: 500px;
}

.match-status[b-z7wghvn5xr] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
}

.match-status.matched[b-z7wghvn5xr] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

/* Create Row - Side by Side */
.create-row[b-z7wghvn5xr] {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.create-select[b-z7wghvn5xr] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 280px;
    flex: 1;
    max-width: 400px;
}

.create-select :deep(.searchable-select)[b-z7wghvn5xr] {
    height: 42px;
}

.create-label[b-z7wghvn5xr] {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
}

.create-preview[b-z7wghvn5xr] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--text-secondary);
    height: 42px;
    box-sizing: border-box;
}

.create-preview svg[b-z7wghvn5xr] {
    color: #f59e0b;
    flex-shrink: 0;
}

.create-preview strong[b-z7wghvn5xr] {
    font-weight: 600;
    color: #f59e0b;
}

/* Skip Notice */
.skip-notice[b-z7wghvn5xr] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-input);
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-muted);
}

/* ===== ATTRIBUTE CARDS (Step 3) ===== */
.attribute-cards-list[b-z7wghvn5xr] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.attribute-card[b-z7wghvn5xr] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: var(--transition);
}

.attribute-card:hover[b-z7wghvn5xr] {
    border-color: var(--border-hover);
}

.attribute-card.skipped[b-z7wghvn5xr] {
    opacity: 0.6;
}

/* Attribute Card Header */
.attribute-card-header[b-z7wghvn5xr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    background: var(--bg-input);
    border-bottom: 1px solid var(--border);
}

.attribute-card .attribute-info[b-z7wghvn5xr] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.attribute-name-row[b-z7wghvn5xr] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.attribute-card .attribute-name[b-z7wghvn5xr] {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

.attribute-meta[b-z7wghvn5xr] {
    font-size: 11px;
    color: var(--text-muted);
}

.attr-badge[b-z7wghvn5xr] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 500;
}

.attr-badge.variant[b-z7wghvn5xr] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.attr-badge.required[b-z7wghvn5xr] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

/* Attribute Header Right */
.attribute-header-right[b-z7wghvn5xr] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Action Pills - Reuse from category */
.attribute-actions[b-z7wghvn5xr] {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* Large Badge for Required */
.attr-badge-large[b-z7wghvn5xr] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

.attr-badge-large.required[b-z7wghvn5xr] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Attribute Card Body */
.attribute-card-body[b-z7wghvn5xr] {
    padding: 12px 16px;
}

.attribute-select-row[b-z7wghvn5xr] {
    max-width: 500px;
}

/* Attribute Values Section */
.attribute-values-section[b-z7wghvn5xr] {
    border-top: 1px solid var(--border);
    padding: 12px 16px;
}

.values-header[b-z7wghvn5xr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.values-title[b-z7wghvn5xr] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.values-header-right[b-z7wghvn5xr] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.hide-matched-toggle[b-z7wghvn5xr] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
}

.hide-matched-toggle input[type="checkbox"][b-z7wghvn5xr] {
    width: 14px;
    height: 14px;
    accent-color: var(--primary);
    cursor: pointer;
}

.hide-matched-toggle:hover[b-z7wghvn5xr] {
    color: var(--text-secondary);
}

.values-count[b-z7wghvn5xr] {
    font-size: 11px;
    color: #10b981;
    font-weight: 500;
}

.value-chip.new[b-z7wghvn5xr] {
    background: rgba(59, 130, 246, 0.08);
    border: 1px dashed rgba(59, 130, 246, 0.3);
    color: #3b82f6;
}

/* ===== VALUES GRID (Step 3 - Attribute Values) ===== */
.values-grid-container[b-z7wghvn5xr] {
    max-height: 500px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.values-grid[b-z7wghvn5xr] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    display: table;
}

.values-grid thead[b-z7wghvn5xr] {
    display: table-header-group;
    background: var(--bg-input);
    position: sticky;
    top: 0;
    z-index: 1;
}

.values-grid tbody[b-z7wghvn5xr] {
    display: table-row-group;
}

.values-grid tr[b-z7wghvn5xr] {
    display: table-row;
}

.values-grid th[b-z7wghvn5xr],
.values-grid td[b-z7wghvn5xr] {
    display: table-cell;
}

.values-grid th[b-z7wghvn5xr] {
    padding: 8px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}

.values-grid tbody tr[b-z7wghvn5xr] {
    transition: background-color 0.15s ease;
}

.values-grid tbody tr:hover[b-z7wghvn5xr] {
    background: var(--bg-input);
}

.values-grid tbody tr.matched[b-z7wghvn5xr] {
    background: rgba(16, 185, 129, 0.04);
}

.values-grid tbody tr:not(:last-child) td[b-z7wghvn5xr] {
    border-bottom: 1px solid var(--border);
}

.values-grid td[b-z7wghvn5xr] {
    padding: 6px 12px;
    vertical-align: middle;
}

/* Values Grid Columns */
.values-grid .col-value-name[b-z7wghvn5xr] {
    min-width: 150px;
}

.values-grid .col-value-action[b-z7wghvn5xr] {
    width: 200px;
}

.values-grid .col-value-match[b-z7wghvn5xr] {
    min-width: 180px;
}

/* Bulk Action Header */
.bulk-action-header[b-z7wghvn5xr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.bulk-action-buttons[b-z7wghvn5xr] {
    display: flex;
    gap: 2px;
}

.bulk-btn[b-z7wghvn5xr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 3px;
    cursor: pointer;
    transition: var(--transition);
    background: var(--bg-primary);
    color: var(--text-muted);
}

.bulk-btn:hover:not(:disabled)[b-z7wghvn5xr] {
    transform: scale(1.1);
}

.bulk-btn:disabled[b-z7wghvn5xr] {
    opacity: 0.4;
    cursor: not-allowed;
}

.bulk-btn.match:hover:not(:disabled)[b-z7wghvn5xr] {
    background: rgba(16, 185, 129, 0.15);
    border-color: #10b981;
    color: #10b981;
}

.bulk-btn.create:hover:not(:disabled)[b-z7wghvn5xr] {
    background: rgba(245, 158, 11, 0.15);
    border-color: #f59e0b;
    color: #f59e0b;
}

.bulk-btn.skip:hover:not(:disabled)[b-z7wghvn5xr] {
    background: rgba(239, 68, 68, 0.15);
    border-color: #ef4444;
    color: #ef4444;
}

/* Smart Color Button - Dikkat çekici */
.bulk-btn.smart-color[b-z7wghvn5xr] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 50%, #f59e0b 100%);
    border: none;
    border-radius: 4px;
    color: white;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(139, 92, 246, 0.3);
    animation: color-pulse-b-z7wghvn5xr 2s ease-in-out infinite;
}

.bulk-btn.smart-color:hover[b-z7wghvn5xr] {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(139, 92, 246, 0.4);
}

.bulk-btn.smart-color:active[b-z7wghvn5xr] {
    transform: translateY(0);
}

.bulk-btn.smart-color .smart-btn-text[b-z7wghvn5xr] {
    display: inline;
}

@keyframes color-pulse-b-z7wghvn5xr {
    0%, 100% {
        box-shadow: 0 2px 4px rgba(139, 92, 246, 0.3);
    }
    50% {
        box-shadow: 0 2px 8px rgba(236, 72, 153, 0.4);
    }
}

.value-name-text[b-z7wghvn5xr] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
    font-weight: 500;
}

/* Value Action Pills */
.value-action-pills[b-z7wghvn5xr] {
    display: flex;
    gap: 4px;
}

.value-pill[b-z7wghvn5xr] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
    background: var(--bg-primary);
    color: var(--text-muted);
}

.value-pill:hover:not(:disabled)[b-z7wghvn5xr] {
    border-color: var(--border-hover);
    color: var(--text-primary);
}

.value-pill:disabled[b-z7wghvn5xr] {
    opacity: 0.5;
    cursor: not-allowed;
}

.value-pill.active.match[b-z7wghvn5xr] {
    background: rgba(16, 185, 129, 0.15);
    border-color: #10b981;
    color: #10b981;
}

.value-pill.active.create[b-z7wghvn5xr] {
    background: rgba(245, 158, 11, 0.15);
    border-color: #f59e0b;
    color: #f59e0b;
}

.value-pill.active.skip[b-z7wghvn5xr] {
    background: rgba(107, 114, 128, 0.15);
    border-color: #6b7280;
    color: #6b7280;
}

.value-pill svg[b-z7wghvn5xr] {
    width: 12px;
    height: 12px;
}

/* Value Match Select Wrapper */
.value-match-wrapper[b-z7wghvn5xr] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.value-match-check[b-z7wghvn5xr] {
    color: #10b981;
    flex-shrink: 0;
}

/* Value Match Select */
.value-match-select[b-z7wghvn5xr] {
    flex: 1;
    padding: 5px 8px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    min-width: 140px;
}

.value-match-select.matched[b-z7wghvn5xr] {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.05);
}

.value-match-select:focus[b-z7wghvn5xr] {
    outline: none;
    border-color: var(--primary);
}

/* Value Matched Badge */
.value-matched-badge[b-z7wghvn5xr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 4px;
    font-size: 12px;
    color: #10b981;
}

/* Value Create Badge */
.value-create-badge[b-z7wghvn5xr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(245, 158, 11, 0.08);
    border-radius: 4px;
    font-size: 12px;
    color: #f59e0b;
}

/* Value No Match */
.value-no-match[b-z7wghvn5xr] {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}

/* Value Skip Badge */
.value-skip-badge[b-z7wghvn5xr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--bg-input);
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-muted);
}

/* Values Grid Skipped Row */
.values-grid tbody tr.skipped[b-z7wghvn5xr] {
    opacity: 0.6;
    background: var(--bg-input);
}

/* Values Hidden Info */
.values-hidden-info[b-z7wghvn5xr] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px dashed rgba(16, 185, 129, 0.3);
    border-radius: var(--radius-sm);
    margin-top: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #10b981;
}

/* ===== BRAND CARDS (Step 4) ===== */
.brand-cards-list[b-z7wghvn5xr] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.brand-card[b-z7wghvn5xr] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: var(--transition);
}

.brand-card:hover[b-z7wghvn5xr] {
    border-color: var(--border-hover);
}

.brand-card.skipped[b-z7wghvn5xr] {
    opacity: 0.6;
}

/* Brand Card Header */
.brand-card-header[b-z7wghvn5xr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    background: var(--bg-input);
    border-bottom: 1px solid var(--border);
}

.brand-info[b-z7wghvn5xr] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.brand-info .brand-name[b-z7wghvn5xr] {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

/* Brand Actions - Reuse action-pill */
.brand-actions[b-z7wghvn5xr] {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* Brand Card Body */
.brand-card-body[b-z7wghvn5xr] {
    padding: 12px 16px;
}

.brand-select-row[b-z7wghvn5xr] {
    max-width: 500px;
}

/* ===== FORM COMPACT ===== */
.form-group-compact[b-z7wghvn5xr] {
    margin-bottom: 0;
}

.form-group-compact label[b-z7wghvn5xr] {
    display: block;
    font-size: 11px;
    font-weight: 500;
    margin-bottom: 4px;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* ===== VALUE CHIPS ===== */
.value-mappings[b-z7wghvn5xr] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.value-mappings-header[b-z7wghvn5xr] {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.value-chips[b-z7wghvn5xr] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.value-chip[b-z7wghvn5xr] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--bg-input);
    border-radius: 12px;
    font-size: 12px;
    color: var(--text-secondary);
}

.value-chip.matched[b-z7wghvn5xr] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.value-chip.more[b-z7wghvn5xr] {
    color: var(--text-muted);
}

/* ===== BADGES ===== */
.badge[b-z7wghvn5xr] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}

.badge-success[b-z7wghvn5xr] { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.badge-info[b-z7wghvn5xr] { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.badge-warning[b-z7wghvn5xr] { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.badge-muted[b-z7wghvn5xr] { background: var(--bg-input); color: var(--text-muted); }

/* ===== ATTR SECTIONS ===== */
.attr-section-header[b-z7wghvn5xr] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.attr-section-title[b-z7wghvn5xr] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}

.attr-section-badge[b-z7wghvn5xr] {
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
}

.attr-section-badge.required[b-z7wghvn5xr] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.attr-section-badge.optional[b-z7wghvn5xr] {
    background: var(--bg-input);
    color: var(--text-muted);
}

/* ===== WIZARD EMPTY ===== */
.wizard-empty[b-z7wghvn5xr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px;
    color: var(--text-muted);
    text-align: center;
}

/* ===== WIZARD STEP WIDE ===== */
.wizard-step-wide[b-z7wghvn5xr] {
    max-width: 100%;
}

/* ===== PREVIEW STEP ===== */
.import-result-banner[b-z7wghvn5xr] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 32px;
    border-radius: var(--radius);
    margin-bottom: 24px;
}

.import-result-banner.success[b-z7wghvn5xr] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.import-result-banner.error[b-z7wghvn5xr] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.result-icon[b-z7wghvn5xr] {
    flex-shrink: 0;
}

.result-content h2[b-z7wghvn5xr] {
    margin: 0 0 8px 0;
    font-size: 24px;
}

.result-content p[b-z7wghvn5xr] {
    margin: 0;
    font-size: 14px;
    opacity: 0.9;
}

.result-stats-grid[b-z7wghvn5xr] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.result-stat-card[b-z7wghvn5xr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    border-radius: var(--radius);
    text-align: center;
}

.result-stat-card.success[b-z7wghvn5xr] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.result-stat-card .stat-number[b-z7wghvn5xr] {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 8px;
}

.result-stat-card .stat-text[b-z7wghvn5xr] {
    font-size: 13px;
    opacity: 0.9;
}

.preview-header-banner[b-z7wghvn5xr] {
    padding: 20px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: var(--radius);
    margin-bottom: 24px;
}

.preview-header-content[b-z7wghvn5xr] {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #3b82f6;
}

.preview-icon[b-z7wghvn5xr] {
    flex-shrink: 0;
}

.preview-header-content h3[b-z7wghvn5xr] {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
}

.preview-header-content p[b-z7wghvn5xr] {
    margin: 0;
    font-size: 13px;
    opacity: 0.9;
}

.mapping-summary-grid[b-z7wghvn5xr] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.mapping-summary-card[b-z7wghvn5xr] {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.summary-card-header[b-z7wghvn5xr] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--bg-input);
    border-bottom: 1px solid var(--border);
}

.summary-icon[b-z7wghvn5xr] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.summary-icon.category[b-z7wghvn5xr] { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.summary-icon.attribute[b-z7wghvn5xr] { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.summary-icon.brand[b-z7wghvn5xr] { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }

.summary-title[b-z7wghvn5xr] {
    font-weight: 600;
    font-size: 14px;
}

.summary-card-body[b-z7wghvn5xr] {
    padding: 16px;
}

.summary-stat-row[b-z7wghvn5xr] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.item-badge[b-z7wghvn5xr] {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.item-badge.new[b-z7wghvn5xr] { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.item-badge.matched[b-z7wghvn5xr] { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.item-badge.skip[b-z7wghvn5xr] { background: var(--bg-input); color: var(--text-muted); }

.confirm-notice-card[b-z7wghvn5xr] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: var(--radius);
    color: #b45309;
}

.notice-icon[b-z7wghvn5xr] {
    flex-shrink: 0;
}

.notice-content strong[b-z7wghvn5xr] {
    display: block;
    margin-bottom: 4px;
}

.notice-content p[b-z7wghvn5xr] {
    margin: 0;
    font-size: 13px;
}

/* ===== WIZARD LOADING ===== */
.wizard-loading[b-z7wghvn5xr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 60px;
    color: var(--text-muted);
}

.spinner[b-z7wghvn5xr] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-z7wghvn5xr 1s linear infinite;
}

@keyframes spin-b-z7wghvn5xr {
    to { transform: rotate(360deg); }
}

.wizard-error[b-z7wghvn5xr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 60px;
    color: #ef4444;
    text-align: center;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
    .preview-stats[b-z7wghvn5xr] {
        grid-template-columns: repeat(2, 1fr);
    }

    .attribute-mappings-grid[b-z7wghvn5xr] {
        grid-template-columns: 1fr;
    }

    .result-stats-grid[b-z7wghvn5xr] {
        grid-template-columns: repeat(2, 1fr);
    }

    .mapping-summary-grid[b-z7wghvn5xr] {
        grid-template-columns: 1fr;
    }
}

/* ===== TABLET ===== */
@media (max-width: 1024px) {
    /* Category card header - stack on tablet */
    .category-card-header[b-z7wghvn5xr] {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .category-actions[b-z7wghvn5xr] {
        width: 100%;
    }

    .category-actions .action-pill[b-z7wghvn5xr] {
        flex: 1;
        justify-content: center;
    }

    /* Attribute card header - stack */
    .attribute-card-header[b-z7wghvn5xr] {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .attribute-header-right[b-z7wghvn5xr] {
        width: 100%;
        flex-wrap: wrap;
    }

    .attribute-actions[b-z7wghvn5xr] {
        width: 100%;
    }

    .attribute-actions .action-pill[b-z7wghvn5xr] {
        flex: 1;
        justify-content: center;
    }

    /* Values grid - make action pills wrap */
    .value-action-pills[b-z7wghvn5xr] {
        flex-wrap: wrap;
    }

    /* Create row */
    .create-row[b-z7wghvn5xr] {
        flex-direction: column;
        align-items: stretch;
    }

    .create-select[b-z7wghvn5xr] {
        min-width: 0;
        max-width: 100%;
    }

    .create-preview[b-z7wghvn5xr] {
        width: 100%;
        box-sizing: border-box;
    }

    /* Category select */
    .category-select-row[b-z7wghvn5xr],
    .attribute-select-row[b-z7wghvn5xr] {
        max-width: 100%;
    }

    /* Import result banner */
    .import-result-banner[b-z7wghvn5xr] {
        padding: 20px;
        gap: 16px;
    }

    .result-content h2[b-z7wghvn5xr] {
        font-size: 20px;
    }

    /* Values header */
    .values-header[b-z7wghvn5xr] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .values-header-right[b-z7wghvn5xr] {
        width: 100%;
        justify-content: space-between;
    }
}

/* ===== CATEGORY ATTRIBUTES SECTION ===== */
.category-attributes-section[b-z7wghvn5xr] {
    border-top: 1px solid var(--border);
}

.attributes-header[b-z7wghvn5xr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--bg-input);
}

.attributes-title[b-z7wghvn5xr] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.attributes-count[b-z7wghvn5xr] {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    padding: 2px 8px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 10px;
}

/* ===== ATTRIBUTE GRID TABLE ===== */
.attr-grid-container[b-z7wghvn5xr] {
    overflow: hidden;
}

.attr-grid[b-z7wghvn5xr] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    display: table;
}

.attr-grid thead[b-z7wghvn5xr] {
    display: table-header-group;
    background: var(--bg-input);
}

.attr-grid tbody[b-z7wghvn5xr] {
    display: table-row-group;
}

.attr-grid tr[b-z7wghvn5xr] {
    display: table-row;
}

.attr-grid th[b-z7wghvn5xr],
.attr-grid td[b-z7wghvn5xr] {
    display: table-cell;
}

.attr-grid th[b-z7wghvn5xr] {
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}

.attr-grid tbody tr[b-z7wghvn5xr] {
    transition: background-color 0.15s ease;
}

.attr-grid tbody tr:hover[b-z7wghvn5xr] {
    background: var(--bg-input);
}

.attr-grid tbody tr.selected[b-z7wghvn5xr] {
    background: rgba(59, 130, 246, 0.04);
}

.attr-grid tbody tr:not(:last-child) td[b-z7wghvn5xr] {
    border-bottom: 1px solid var(--border);
}

.attr-grid td[b-z7wghvn5xr] {
    padding: 8px 12px;
    vertical-align: middle;
}

/* Columns */
.attr-grid .col-checkbox[b-z7wghvn5xr] {
    width: 40px;
    text-align: center;
}

.attr-grid .col-name[b-z7wghvn5xr] {
    min-width: 150px;
}

.attr-grid .col-toggle[b-z7wghvn5xr] {
    width: 44px;
    text-align: center;
}

.attr-grid .col-dimtype[b-z7wghvn5xr] {
    width: 140px;
}

/* Checkbox styling */
.attr-grid input[type="checkbox"][b-z7wghvn5xr] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
    cursor: pointer;
}

/* Attribute name */
.attr-name-text[b-z7wghvn5xr] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
}

/* Grid Toggle Button */
.grid-toggle[b-z7wghvn5xr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    background: var(--bg-primary);
    border: 1px solid var(--border);
}

.grid-toggle:hover[b-z7wghvn5xr] {
    border-color: var(--border-hover);
    background: var(--bg-input);
}

.grid-toggle.active.variant[b-z7wghvn5xr] {
    background: rgba(59, 130, 246, 0.15);
    border-color: var(--primary);
    color: var(--primary);
}

.grid-toggle.active.required[b-z7wghvn5xr] {
    background: rgba(16, 185, 129, 0.15);
    border-color: #10b981;
    color: #10b981;
}

.grid-toggle input[b-z7wghvn5xr] {
    display: none;
}

.grid-toggle .toggle-icon[b-z7wghvn5xr] {
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.grid-toggle.disabled[b-z7wghvn5xr] {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--bg-input);
}

/* DimType Select */
.dimtype-select[b-z7wghvn5xr] {
    width: 100%;
    padding: 6px 8px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
}

.dimtype-select:focus[b-z7wghvn5xr] {
    outline: none;
    border-color: var(--primary);
}

.dimtype-na[b-z7wghvn5xr] {
    color: var(--text-muted);
    font-size: 12px;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
    .preview-stats[b-z7wghvn5xr] {
        grid-template-columns: 1fr;
    }

    .result-stats-grid[b-z7wghvn5xr] {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Step titles */
    .wizard-step-content h3.step-title[b-z7wghvn5xr] {
        font-size: 16px;
    }

    .step-description[b-z7wghvn5xr] {
        font-size: 13px;
        margin-bottom: 16px;
    }

    /* Stat cards - compact */
    .stat-card[b-z7wghvn5xr] {
        padding: 12px 14px;
        gap: 12px;
    }

    .stat-icon[b-z7wghvn5xr] {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .stat-icon svg[b-z7wghvn5xr] {
        width: 20px;
        height: 20px;
    }

    .stat-value[b-z7wghvn5xr] {
        font-size: 20px;
    }

    /* Import result */
    .import-result[b-z7wghvn5xr] {
        padding: 14px;
        gap: 12px;
    }

    .import-result svg[b-z7wghvn5xr] {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    .import-result strong[b-z7wghvn5xr] {
        font-size: 14px;
    }

    /* Category cards */
    .category-card-header[b-z7wghvn5xr] {
        padding: 10px 12px;
    }

    .category-card-body[b-z7wghvn5xr] {
        padding: 10px 12px;
    }

    .category-info .category-name[b-z7wghvn5xr] {
        font-size: 13px;
    }

    /* Action pills - smaller on mobile */
    .action-pill[b-z7wghvn5xr] {
        padding: 5px 10px;
        font-size: 11px;
        gap: 4px;
    }

    .action-pill svg[b-z7wghvn5xr] {
        width: 12px;
        height: 12px;
    }

    /* Attribute card */
    .attribute-card-header[b-z7wghvn5xr] {
        padding: 10px 12px;
    }

    .attribute-card-body[b-z7wghvn5xr] {
        padding: 10px 12px;
    }

    .attribute-card .attribute-name[b-z7wghvn5xr] {
        font-size: 13px;
    }

    /* Required badge - compact */
    .attr-badge-large[b-z7wghvn5xr] {
        padding: 4px 8px;
        font-size: 10px;
    }

    /* ===== ATTR GRID TABLE → CARD LAYOUT ===== */
    .attr-grid-container[b-z7wghvn5xr] {
        overflow-x: visible;
    }

    .attr-grid[b-z7wghvn5xr] {
        display: block;
    }

    .attr-grid thead[b-z7wghvn5xr] {
        display: none;
    }

    .attr-grid tbody[b-z7wghvn5xr] {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .attr-grid tbody tr[b-z7wghvn5xr] {
        display: grid;
        grid-template-columns: auto 1fr auto auto auto;
        align-items: center;
        gap: 0 8px;
        padding: 10px 12px;
        border-bottom: 1px solid var(--border);
    }

    .attr-grid tbody tr:last-child[b-z7wghvn5xr] {
        border-bottom: none;
    }

    .attr-grid td[b-z7wghvn5xr] {
        display: flex;
        align-items: center;
        padding: 0;
        border: none !important;
    }

    .attr-grid td.col-checkbox[b-z7wghvn5xr] {
        grid-row: 1;
        grid-column: 1;
    }

    .attr-grid td.col-name[b-z7wghvn5xr] {
        grid-row: 1;
        grid-column: 2;
        min-width: 0;
    }

    .attr-grid td.col-toggle[b-z7wghvn5xr] {
        grid-row: 1;
    }

    .attr-grid td.col-dimtype[b-z7wghvn5xr] {
        grid-row: 2;
        grid-column: 2 / -1;
        width: 100%;
        margin-top: 6px;
    }

    .attr-grid td.col-dimtype:has(.dimtype-na)[b-z7wghvn5xr] {
        display: none;
    }

    .dimtype-select[b-z7wghvn5xr] {
        width: 100%;
    }

    /* ===== VALUES GRID TABLE → CARD LAYOUT ===== */
    .attribute-values-section[b-z7wghvn5xr] {
        padding: 10px 12px;
    }

    .values-grid-container[b-z7wghvn5xr] {
        max-height: 400px;
        border: none;
        border-radius: 0;
    }

    .values-grid[b-z7wghvn5xr] {
        display: block;
    }

    .values-grid thead[b-z7wghvn5xr] {
        display: none;
    }

    .values-grid tbody[b-z7wghvn5xr] {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .values-grid tbody tr[b-z7wghvn5xr] {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 10px 12px;
        background: var(--bg-input);
        border: 1px solid var(--border);
        border-radius: var(--radius);
    }

    .values-grid td[b-z7wghvn5xr] {
        display: flex;
        align-items: center;
        padding: 0;
        border: none !important;
    }

    .values-grid td.col-value-name[b-z7wghvn5xr] {
        min-width: 0;
    }

    .values-grid td.col-value-name[b-z7wghvn5xr]::before {
        display: none;
    }

    .value-name-text[b-z7wghvn5xr] {
        font-size: 14px;
        font-weight: 600;
        white-space: normal;
    }

    .values-grid td.col-value-action[b-z7wghvn5xr] {
        width: 100%;
    }

    .value-action-pills[b-z7wghvn5xr] {
        width: 100%;
    }

    .value-pill[b-z7wghvn5xr] {
        flex: 1;
        justify-content: center;
        padding: 6px 8px;
    }

    .values-grid td.col-value-match[b-z7wghvn5xr] {
        width: 100%;
        min-width: 0;
    }

    .value-match-wrapper[b-z7wghvn5xr] {
        width: 100%;
    }

    .value-match-select[b-z7wghvn5xr] {
        width: 100%;
        min-width: 0;
    }

    /* Bulk action buttons in values header */
    .bulk-action-header[b-z7wghvn5xr] {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .bulk-action-buttons[b-z7wghvn5xr] {
        gap: 4px;
    }

    .bulk-btn[b-z7wghvn5xr] {
        width: 24px;
        height: 24px;
    }

    .bulk-btn.smart-color[b-z7wghvn5xr] {
        padding: 4px 8px;
        font-size: 10px;
    }

    .bulk-btn.smart-color .smart-btn-text[b-z7wghvn5xr] {
        display: none;
    }

    /* Hide matched toggle */
    .hide-matched-toggle[b-z7wghvn5xr] {
        font-size: 11px;
    }

    /* Values hidden info */
    .values-hidden-info[b-z7wghvn5xr] {
        font-size: 12px;
        padding: 8px 10px;
    }

    /* ===== PREVIEW STEP ===== */
    .import-result-banner[b-z7wghvn5xr] {
        flex-direction: column;
        text-align: center;
        padding: 20px 16px;
        gap: 12px;
    }

    .result-content h2[b-z7wghvn5xr] {
        font-size: 18px;
    }

    .result-content p[b-z7wghvn5xr] {
        font-size: 13px;
    }

    .result-stat-card[b-z7wghvn5xr] {
        padding: 14px;
    }

    .result-stat-card .stat-number[b-z7wghvn5xr] {
        font-size: 24px;
    }

    .result-stat-card .stat-text[b-z7wghvn5xr] {
        font-size: 12px;
    }

    .preview-header-banner[b-z7wghvn5xr] {
        padding: 14px;
        margin-bottom: 16px;
    }

    .preview-header-content[b-z7wghvn5xr] {
        gap: 12px;
    }

    .preview-header-content h3[b-z7wghvn5xr] {
        font-size: 14px;
    }

    .preview-header-content p[b-z7wghvn5xr] {
        font-size: 12px;
    }

    .preview-icon svg[b-z7wghvn5xr] {
        width: 24px;
        height: 24px;
    }

    .mapping-summary-card[b-z7wghvn5xr] {
        border-radius: var(--radius);
    }

    .summary-card-header[b-z7wghvn5xr] {
        padding: 10px 12px;
    }

    .summary-icon[b-z7wghvn5xr] {
        width: 28px;
        height: 28px;
        border-radius: 6px;
    }

    .summary-icon svg[b-z7wghvn5xr] {
        width: 14px;
        height: 14px;
    }

    .summary-title[b-z7wghvn5xr] {
        font-size: 13px;
    }

    .summary-card-body[b-z7wghvn5xr] {
        padding: 12px;
    }

    .summary-stat-row[b-z7wghvn5xr] {
        gap: 6px;
    }

    .item-badge[b-z7wghvn5xr] {
        font-size: 11px;
        padding: 3px 8px;
    }

    .confirm-notice-card[b-z7wghvn5xr] {
        padding: 14px;
        gap: 12px;
    }

    .confirm-notice-card .notice-icon svg[b-z7wghvn5xr] {
        width: 20px;
        height: 20px;
    }

    .notice-content p[b-z7wghvn5xr] {
        font-size: 12px;
    }

    /* Wizard empty/loading */
    .wizard-empty[b-z7wghvn5xr],
    .wizard-loading[b-z7wghvn5xr] {
        padding: 32px 16px;
    }

    .wizard-empty svg[b-z7wghvn5xr],
    .wizard-loading svg[b-z7wghvn5xr] {
        width: 36px;
        height: 36px;
    }

    /* Category attributes section */
    .attributes-header[b-z7wghvn5xr] {
        padding: 8px 12px;
    }

    .attributes-title[b-z7wghvn5xr] {
        font-size: 11px;
    }
}

/* ===== SMALL MOBILE ===== */
@media (max-width: 480px) {
    .result-stats-grid[b-z7wghvn5xr] {
        grid-template-columns: 1fr;
    }

    /* Action pills - icon only */
    .action-pill[b-z7wghvn5xr] {
        padding: 6px 8px;
        font-size: 0;
        gap: 0;
    }

    .action-pill svg[b-z7wghvn5xr] {
        width: 16px;
        height: 16px;
    }

    /* Attribute actions row */
    .attribute-header-right[b-z7wghvn5xr] {
        gap: 8px;
    }

    .attribute-actions .action-pill[b-z7wghvn5xr] {
        font-size: 11px;
        gap: 4px;
    }

    .category-actions .action-pill[b-z7wghvn5xr] {
        font-size: 11px;
        gap: 4px;
    }

    /* Value pills - icon only on very small */
    .value-pill[b-z7wghvn5xr] {
        padding: 5px 6px;
        font-size: 0;
        gap: 0;
    }

    .value-pill svg[b-z7wghvn5xr] {
        width: 14px;
        height: 14px;
    }

    /* Attr grid - tighter */
    .attr-grid tbody tr[b-z7wghvn5xr] {
        padding: 8px 10px;
        grid-template-columns: auto 1fr auto auto;
        gap: 0 6px;
    }

    /* Hide dimtype column on very small - too cramped */
    .attr-grid td.col-dimtype[b-z7wghvn5xr] {
        grid-column: 1 / -1;
    }

    .grid-toggle[b-z7wghvn5xr] {
        width: 26px;
        height: 26px;
    }

    /* Stat cards */
    .stat-card[b-z7wghvn5xr] {
        padding: 10px 12px;
        gap: 10px;
    }

    .stat-icon[b-z7wghvn5xr] {
        width: 36px;
        height: 36px;
    }

    .stat-value[b-z7wghvn5xr] {
        font-size: 18px;
    }

    .stat-label[b-z7wghvn5xr] {
        font-size: 11px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* MAĞAZA PICKER — wizard header altı sticky bölge                          */
/* ═══════════════════════════════════════════════════════════════════════ */
.wizard-store-picker[b-z7wghvn5xr] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 24px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
}

.wizard-store-picker-label[b-z7wghvn5xr] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--text-primary);
}

.wizard-store-picker-label .required[b-z7wghvn5xr] {
    color: #ef4444;
}

.wizard-store-picker-hint[b-z7wghvn5xr] {
    font-size: 12px;
    color: var(--text-muted);
}

/* Empty state — mağaza seçilmemişken adımlar yerine gösterilir */
.wizard-empty-state[b-z7wghvn5xr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 24px;
    color: var(--text-muted);
    text-align: center;
}

.wizard-empty-state svg[b-z7wghvn5xr] {
    opacity: 0.4;
}

.wizard-empty-state h3[b-z7wghvn5xr] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-secondary);
}

.wizard-empty-state p[b-z7wghvn5xr] {
    margin: 0;
    max-width: 360px;
    font-size: 13px;
    line-height: 1.5;
}
/* /Components/Pages/Products/BatchTrendyolScrapeModal.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   Batch Trendyol Scrape Modal — 3-arc spinner + rich progress + preview
   ═══════════════════════════════════════════════════════════════ */

.bts-empty[b-mvyjyokfm0] {
    text-align: center;
    padding: 32px;
    color: var(--text-secondary);
    font-size: 14px;
}

/* ─────────── STEP 0: ARAMA YÖNTEMİ SEÇİCİ ─────────── */
.bts-method-picker[b-mvyjyokfm0] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 8px 4px;
}

.bts-method-title[b-mvyjyokfm0] {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.bts-method-help[b-mvyjyokfm0] {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.bts-method-options[b-mvyjyokfm0] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bts-method-option[b-mvyjyokfm0] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    background: var(--bg-primary);
}

.bts-method-option:hover[b-mvyjyokfm0] {
    border-color: var(--primary);
    background: var(--bg-secondary);
}

.bts-method-option.selected[b-mvyjyokfm0] {
    border-color: var(--primary);
    background: rgba(59, 130, 246, 0.06);
}

.bts-method-option input[type="radio"][b-mvyjyokfm0] {
    margin-top: 3px;
    accent-color: var(--primary);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.bts-method-content[b-mvyjyokfm0] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.bts-method-name[b-mvyjyokfm0] {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.bts-method-desc[b-mvyjyokfm0] {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.45;
}

.bts-method-note[b-mvyjyokfm0] {
    background: rgba(245, 158, 11, 0.08);
    border-left: 3px solid #f59e0b;
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-primary);
    line-height: 1.5;
}

.bts-method-note strong[b-mvyjyokfm0] {
    color: #f59e0b;
}

/* ─────────── PROGRESS STAGE ─────────── */
.bts-progress-stage[b-mvyjyokfm0] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ─── 3-arc circular spinner ─── */
.bts-spinner-wrap[b-mvyjyokfm0] {
    display: flex;
    justify-content: center;
    padding: 20px 0 8px;
}

.bts-tri-spinner[b-mvyjyokfm0] {
    position: relative;
    width: 140px;
    height: 140px;
}

.bts-arc[b-mvyjyokfm0] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 4px solid transparent;
    box-sizing: border-box;
}

/* Yay 1 — primary (mavi) — üstten saat yönünde */
.bts-arc-1[b-mvyjyokfm0] {
    border-top-color: var(--primary);
    border-right-color: var(--primary);
    animation: bts-spin-1-b-mvyjyokfm0 1.4s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

/* Yay 2 — success (yeşil) — orta halka, yavaş ters yön */
.bts-arc-2[b-mvyjyokfm0] {
    inset: 14px;
    border-top-color: #10b981;
    border-left-color: #10b981;
    animation: bts-spin-2-b-mvyjyokfm0 1.8s cubic-bezier(0.5, 0, 0.5, 1) infinite reverse;
}

/* Yay 3 — accent (turuncu) — iç halka, hızlı */
.bts-arc-3[b-mvyjyokfm0] {
    inset: 28px;
    border-top-color: #f59e0b;
    border-bottom-color: #f59e0b;
    animation: bts-spin-3-b-mvyjyokfm0 1.0s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

@keyframes bts-spin-1-b-mvyjyokfm0 {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes bts-spin-2-b-mvyjyokfm0 {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes bts-spin-3-b-mvyjyokfm0 {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Tamamlandığında animasyonu durdur, üç yayı tam çember yap */
.bts-tri-spinner.done .bts-arc-1[b-mvyjyokfm0],
.bts-tri-spinner.done .bts-arc-2[b-mvyjyokfm0],
.bts-tri-spinner.done .bts-arc-3[b-mvyjyokfm0] {
    animation: none;
}

/* Duraklatılmış — animasyon dur, görsel yarı opaklık */
.bts-tri-spinner.paused .bts-arc-1[b-mvyjyokfm0],
.bts-tri-spinner.paused .bts-arc-2[b-mvyjyokfm0],
.bts-tri-spinner.paused .bts-arc-3[b-mvyjyokfm0] {
    animation-play-state: paused;
    opacity: 0.4;
}

.bts-spinner-paused-tag[b-mvyjyokfm0] {
    margin-top: 6px;
    padding: 2px 8px;
    background: #f59e0b;
    color: white;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    border-radius: 999px;
}
.bts-tri-spinner.done .bts-arc-1[b-mvyjyokfm0] {
    border-color: var(--primary);
    opacity: 0.7;
}
.bts-tri-spinner.done .bts-arc-2[b-mvyjyokfm0] {
    border-color: #10b981;
    opacity: 0.7;
}
.bts-tri-spinner.done .bts-arc-3[b-mvyjyokfm0] {
    border-color: #f59e0b;
    opacity: 0.7;
}

/* Spinner merkezi — yüzde + sayaç */
.bts-spinner-center[b-mvyjyokfm0] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.bts-spinner-pct[b-mvyjyokfm0] {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.bts-spinner-pct-label[b-mvyjyokfm0] {
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
}

/* ─── Sayaç paneli — 4 stat ─── */
.bts-stats[b-mvyjyokfm0] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.bts-stat[b-mvyjyokfm0] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 12px;
    text-align: center;
    transition: transform 0.18s, box-shadow 0.18s;
}

.bts-stat-num[b-mvyjyokfm0] {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.bts-stat-lbl[b-mvyjyokfm0] {
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
}

.bts-stat.success[b-mvyjyokfm0] { border-color: rgba(16, 185, 129, 0.4); }
.bts-stat.success .bts-stat-num[b-mvyjyokfm0] { color: #10b981; }

.bts-stat.warn[b-mvyjyokfm0] { border-color: rgba(245, 158, 11, 0.4); }
.bts-stat.warn .bts-stat-num[b-mvyjyokfm0] { color: #f59e0b; }

.bts-stat.danger[b-mvyjyokfm0] { border-color: rgba(239, 68, 68, 0.4); }
.bts-stat.danger .bts-stat-num[b-mvyjyokfm0] { color: #ef4444; }

.bts-stat.info[b-mvyjyokfm0] { border-color: rgba(59, 130, 246, 0.4); }
.bts-stat.info .bts-stat-num[b-mvyjyokfm0] { color: var(--primary); }

/* ─── Linear progress bar ─── */
.bts-bar[b-mvyjyokfm0] {
    height: 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    overflow: hidden;
}

.bts-bar-fill[b-mvyjyokfm0] {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #10b981);
    transition: width 0.3s ease;
    border-radius: 4px;
}

.bts-bar-info[b-mvyjyokfm0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--text-secondary);
    flex-wrap: wrap;
    gap: 8px;
}

.bts-current strong[b-mvyjyokfm0] {
    color: var(--text-primary);
}

.bts-elapsed[b-mvyjyokfm0] {
    font-weight: 600;
    color: var(--text-primary);
}

/* ─── Tamamlandı banner ─── */
.bts-finished[b-mvyjyokfm0] {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
}

.bts-finished.success[b-mvyjyokfm0] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border-left: 3px solid #10b981;
}
.bts-finished.error[b-mvyjyokfm0] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border-left: 3px solid #ef4444;
}
.bts-finished.cancelled[b-mvyjyokfm0] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border-left: 3px solid #f59e0b;
}

/* ─── Olay logu ─── */
.bts-events-header[b-mvyjyokfm0] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.bts-events[b-mvyjyokfm0] {
    max-height: 38vh;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px;
    background: var(--bg-primary);
}

.bts-event-empty[b-mvyjyokfm0] {
    text-align: center;
    color: var(--text-secondary);
    opacity: 0.7;
    padding: 14px;
    font-size: 12px;
}

.bts-event[b-mvyjyokfm0] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.5;
}

.bts-event:hover[b-mvyjyokfm0] {
    background: var(--bg-secondary);
}

.bts-event-time[b-mvyjyokfm0] {
    color: var(--text-secondary);
    opacity: 0.7;
    font-family: ui-monospace, monospace;
    font-size: 11px;
    flex-shrink: 0;
    min-width: 56px;
}

.bts-event.success .bts-event-msg[b-mvyjyokfm0] { color: #10b981; }
.bts-event.warning .bts-event-msg[b-mvyjyokfm0] { color: #f59e0b; }
.bts-event.error .bts-event-msg[b-mvyjyokfm0] { color: #ef4444; }
.bts-event.info .bts-event-msg[b-mvyjyokfm0] { color: var(--text-primary); }

/* ═════════ PREVIEW STAGE ═════════ */
.bts-summary[b-mvyjyokfm0] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 12px;
}

.bts-summary-selected[b-mvyjyokfm0] {
    color: var(--primary);
    font-weight: 600;
}

.bts-summary-actions[b-mvyjyokfm0] {
    margin-left: auto;
    display: flex;
    gap: 12px;
}

.bts-link[b-mvyjyokfm0] {
    background: none;
    border: none;
    color: var(--primary);
    cursor: pointer;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
}

.bts-link:hover[b-mvyjyokfm0] {
    text-decoration: underline;
}

.bts-matches[b-mvyjyokfm0] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 480px;
    overflow-y: auto;
    padding-right: 6px;
}

.bts-match[b-mvyjyokfm0] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.bts-match:hover[b-mvyjyokfm0] {
    border-color: var(--primary);
    background: var(--bg-secondary);
}

.bts-match.approved[b-mvyjyokfm0] {
    border-color: var(--primary);
    background: rgba(59, 130, 246, 0.05);
}

.bts-match-check[b-mvyjyokfm0] {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: white;
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    margin-top: 2px;
}

.bts-match.approved .bts-match-check[b-mvyjyokfm0] {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.bts-match-info[b-mvyjyokfm0] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bts-match-our[b-mvyjyokfm0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-primary);
}

.bts-match-our strong[b-mvyjyokfm0] {
    color: var(--text-primary);
}

.bts-match-sku[b-mvyjyokfm0] {
    font-family: ui-monospace, monospace;
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: 4px;
}

.bts-match-group[b-mvyjyokfm0] {
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.bts-match-found[b-mvyjyokfm0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.bts-match-arrow[b-mvyjyokfm0] {
    color: var(--text-secondary);
    opacity: 0.6;
}

.bts-match-trendyol-name[b-mvyjyokfm0] {
    color: var(--text-primary);
    font-weight: 500;
}

.bts-match-brand[b-mvyjyokfm0] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
}

.bts-match-bc[b-mvyjyokfm0] {
    font-family: ui-monospace, monospace;
    font-size: 11px;
    opacity: 0.75;
}

.bts-match-bc-row[b-mvyjyokfm0] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(16, 185, 129, 0.08);
    border-left: 3px solid #10b981;
    border-radius: 4px;
    font-size: 12px;
    margin-top: 2px;
}

.bts-match-bc-label[b-mvyjyokfm0] {
    color: var(--text-secondary);
    font-weight: 600;
}

.bts-match-bc-code[b-mvyjyokfm0] {
    font-family: ui-monospace, monospace;
    font-size: 13px;
    font-weight: 700;
    color: #059669;
    background: white;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid rgba(16, 185, 129, 0.3);
    user-select: all;
}

.bts-match-thumbs[b-mvyjyokfm0] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.bts-match-thumbs img[b-mvyjyokfm0] {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--border-color);
}

.bts-match-more[b-mvyjyokfm0] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--border-color);
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--bg-secondary);
}

/* ═════════ RESULT STAGE ═════════ */
.bts-result[b-mvyjyokfm0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 20px;
}

.bts-result-icon[b-mvyjyokfm0] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bts-result-icon.success[b-mvyjyokfm0] {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.bts-result-icon.warn[b-mvyjyokfm0] {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}

.bts-result-title[b-mvyjyokfm0] {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.bts-result-stats[b-mvyjyokfm0] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
    max-width: 480px;
}

.bts-result-errors[b-mvyjyokfm0] {
    width: 100%;
    background: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 12px;
}

.bts-result-errors h4[b-mvyjyokfm0] {
    margin: 0 0 6px;
    font-size: 12px;
    color: #ef4444;
}

.bts-result-errors ul[b-mvyjyokfm0] {
    margin: 0;
    padding-left: 18px;
    color: var(--text-secondary);
}

/* Responsive */
@media (max-width: 768px) {
    .bts-stats[b-mvyjyokfm0] { grid-template-columns: repeat(2, 1fr); }
    .bts-result-stats[b-mvyjyokfm0] { grid-template-columns: repeat(3, 1fr); }
    .bts-tri-spinner[b-mvyjyokfm0] { width: 110px; height: 110px; }
    .bts-spinner-pct[b-mvyjyokfm0] { font-size: 22px; }
}
/* /Components/Pages/Products/BulkBarcodeMatchModal.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════ */
/* BULK MATCH MODAL — multi-strategy + 3-arc spinner                    */
/* ═══════════════════════════════════════════════════════════════════ */

/* ─── Layout ─── */
.bm-picker[b-2okmrda3ik], .bm-progress[b-2okmrda3ik], .bm-result[b-2okmrda3ik] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* STEP 0 — STRATEGY PICKER                                             */
/* ═══════════════════════════════════════════════════════════════════ */
.bm-picker__intro[b-2okmrda3ik] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--primary-alpha, rgba(59, 130, 246, 0.08));
    border: 1px solid var(--primary, #3b82f6);
    border-radius: 8px;
    color: var(--text-primary);
}

.bm-picker__intro svg[b-2okmrda3ik] {
    flex-shrink: 0;
    color: var(--primary, #3b82f6);
    margin-top: 1px;
}

.bm-picker__intro h4[b-2okmrda3ik] {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.bm-picker__intro p[b-2okmrda3ik] {
    margin: 0;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.55;
}

.bm-picker__intro p strong[b-2okmrda3ik] {
    color: var(--text-primary);
}

.bm-strategies[b-2okmrda3ik] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bm-strategy[b-2okmrda3ik] {
    position: relative;
    display: block;
    padding: 14px 16px 14px 44px;
    background: var(--bg-card, var(--bg-secondary));
    border: 1px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.bm-strategy:hover[b-2okmrda3ik] {
    border-color: var(--border-hover, var(--border-color));
    transform: translateY(-1px);
}

.bm-strategy input[type="checkbox"][b-2okmrda3ik] {
    position: absolute;
    top: 18px;
    left: 16px;
    width: 18px;
    height: 18px;
    accent-color: var(--primary, #3b82f6);
    cursor: pointer;
}

.bm-strategy.selected[b-2okmrda3ik] {
    background: var(--bg-card-hover, var(--bg-secondary));
}

.bm-strategy.selected.success[b-2okmrda3ik] {
    border-color: #10b981;
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.2) inset;
}

.bm-strategy.selected.info[b-2okmrda3ik] {
    border-color: var(--primary, #3b82f6);
    box-shadow: 0 0 0 1px var(--primary-alpha, rgba(59, 130, 246, 0.2)) inset;
}

.bm-strategy__head[b-2okmrda3ik] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.bm-strategy__title[b-2okmrda3ik] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.bm-strategy__order[b-2okmrda3ik] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
}

.bm-strategy.selected .bm-strategy__order[b-2okmrda3ik] {
    background: var(--primary, #3b82f6);
    border-color: var(--primary, #3b82f6);
    color: white;
}

.bm-strategy__chip[b-2okmrda3ik] {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bm-strategy__chip.success[b-2okmrda3ik] {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.bm-strategy__chip.info[b-2okmrda3ik] {
    background: var(--primary-alpha, rgba(59, 130, 246, 0.12));
    color: var(--primary, #3b82f6);
}

.bm-strategy__desc[b-2okmrda3ik] {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 8px;
}

.bm-strategy__example[b-2okmrda3ik] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 11px;
}

.bm-strategy__example code[b-2okmrda3ik] {
    padding: 3px 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: var(--font-mono, monospace);
}

.bm-strategy__arrow[b-2okmrda3ik] {
    color: var(--text-muted, var(--text-secondary));
    font-weight: 600;
}

/* Picker → alternatif barkod uyarısı */
.bm-picker__alt-note[b-2okmrda3ik] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(168, 85, 247, 0.08);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-primary);
}

.bm-picker__alt-note svg[b-2okmrda3ik] {
    flex-shrink: 0;
    color: #a855f7;
    margin-top: 1px;
}

.bm-picker__alt-note strong[b-2okmrda3ik] {
    color: #a855f7;
    font-weight: 700;
    margin-right: 4px;
}

.bm-picker__alt-note em[b-2okmrda3ik] {
    font-style: normal;
    font-weight: 600;
    color: #a855f7;
}

.bm-picker__alt-note code[b-2okmrda3ik] {
    padding: 1px 6px;
    background: rgba(168, 85, 247, 0.12);
    border-radius: 4px;
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    color: #a855f7;
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* STEP 1 — 3-ARC SPINNER                                               */
/* ═══════════════════════════════════════════════════════════════════ */
.bm-progress[b-2okmrda3ik] {
    align-items: center;
    padding: 24px 0 16px;
}

.bm-tri-spinner[b-2okmrda3ik] {
    position: relative;
    width: 160px;
    height: 160px;
    margin-bottom: 8px;
}

.bm-arc[b-2okmrda3ik] {
    position: absolute;
    inset: 0;
    border: 4px solid transparent;
    border-radius: 50%;
}

.bm-arc-1[b-2okmrda3ik] {
    border-top-color: var(--primary, #3b82f6);
    border-right-color: var(--primary, #3b82f6);
    animation: bm-spin-b-2okmrda3ik 1.4s linear infinite;
}

.bm-arc-2[b-2okmrda3ik] {
    inset: 14px;
    border-top-color: #10b981;
    border-left-color: #10b981;
    animation: bm-spin-b-2okmrda3ik 1.8s linear infinite reverse;
}

.bm-arc-3[b-2okmrda3ik] {
    inset: 28px;
    border-top-color: #f59e0b;
    border-bottom-color: #f59e0b;
    animation: bm-spin-b-2okmrda3ik 1.1s linear infinite;
}

@keyframes bm-spin-b-2okmrda3ik {
    to { transform: rotate(360deg); }
}

.bm-tri-center[b-2okmrda3ik] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    pointer-events: none;
}

.bm-tri-icon[b-2okmrda3ik] {
    color: var(--primary, #3b82f6);
    animation: bm-pulse-b-2okmrda3ik 1.6s ease-in-out infinite;
}

@keyframes bm-pulse-b-2okmrda3ik {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

.bm-tri-label[b-2okmrda3ik] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.bm-progress__hint[b-2okmrda3ik] {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
}

.bm-progress__strategies[b-2okmrda3ik] {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.bm-progress__strategies li[b-2okmrda3ik] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: 11px;
    color: var(--text-secondary);
}

.bm-progress__dot[b-2okmrda3ik] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: bm-pulse-dot-b-2okmrda3ik 1.4s ease-in-out infinite;
}

.bm-progress__dot.success[b-2okmrda3ik] { background: #10b981; }
.bm-progress__dot.info[b-2okmrda3ik] { background: var(--primary, #3b82f6); }

@keyframes bm-pulse-dot-b-2okmrda3ik {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* STEP 2 — RESULT                                                      */
/* ═══════════════════════════════════════════════════════════════════ */

/* Stats grid */
.bm-stats[b-2okmrda3ik] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.bm-stat[b-2okmrda3ik] {
    padding: 12px 14px;
    background: var(--bg-card, var(--bg-secondary));
    border: 1px solid var(--border-color);
    border-radius: 10px;
    border-left-width: 3px;
}

.bm-stat__label[b-2okmrda3ik] {
    font-size: 10px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
    margin-bottom: 4px;
}

.bm-stat__value[b-2okmrda3ik] {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}

.bm-stat.info[b-2okmrda3ik]       { border-left-color: var(--primary, #3b82f6); }
.bm-stat.info .bm-stat__value[b-2okmrda3ik] { color: var(--primary, #3b82f6); }

.bm-stat.success[b-2okmrda3ik]    { border-left-color: #10b981; }
.bm-stat.success .bm-stat__value[b-2okmrda3ik] { color: #10b981; }

.bm-stat.muted[b-2okmrda3ik]      { border-left-color: #6b7280; }
.bm-stat.muted .bm-stat__value[b-2okmrda3ik] { color: var(--text-secondary); }

.bm-stat.warning[b-2okmrda3ik]    { border-left-color: #f59e0b; }
.bm-stat.warning .bm-stat__value[b-2okmrda3ik] { color: #f59e0b; }

/* Banner */
.bm-banner[b-2okmrda3ik] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
}

.bm-banner.success[b-2okmrda3ik] {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #10b981;
}

.bm-banner.alt[b-2okmrda3ik] {
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.32);
    color: #a855f7;
    align-items: flex-start;
    line-height: 1.5;
}

.bm-banner.alt em[b-2okmrda3ik] {
    font-style: normal;
    font-weight: 600;
}

.bm-banner.alt svg[b-2okmrda3ik] {
    flex-shrink: 0;
    margin-top: 2px;
}

.bm-banner strong[b-2okmrda3ik] {
    font-weight: 700;
}

/* Strategy breakdown */
.bm-breakdown[b-2okmrda3ik] {
    padding: 10px 14px;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.bm-breakdown__title[b-2okmrda3ik] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 8px;
}

.bm-breakdown__items[b-2okmrda3ik] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bm-breakdown__item[b-2okmrda3ik] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--bg-card, var(--bg-secondary));
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: 11px;
    color: var(--text-primary);
}

.bm-breakdown__count[b-2okmrda3ik] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 6px;
    background: var(--bg-secondary);
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
}

.bm-breakdown__item.success .bm-breakdown__count[b-2okmrda3ik] {
    background: #10b981;
    color: white;
}

.bm-breakdown__item.info .bm-breakdown__count[b-2okmrda3ik] {
    background: var(--primary, #3b82f6);
    color: white;
}

/* Tabs */
.bm-tabs[b-2okmrda3ik] {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.bm-tab[b-2okmrda3ik] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.bm-tab:hover[b-2okmrda3ik] {
    color: var(--text-primary);
    background: var(--bg-primary);
}

.bm-tab__count[b-2okmrda3ik] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 6px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
}

.bm-tab.is-active.bm-tab--success[b-2okmrda3ik] {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}
.bm-tab.is-active.bm-tab--success .bm-tab__count[b-2okmrda3ik] {
    background: #10b981;
    color: white;
    border-color: #10b981;
}

.bm-tab.is-active.bm-tab--warning[b-2okmrda3ik] {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}
.bm-tab.is-active.bm-tab--warning .bm-tab__count[b-2okmrda3ik] {
    background: #f59e0b;
    color: white;
    border-color: #f59e0b;
}

/* Search */
.bm-search[b-2okmrda3ik] {
    position: relative;
    display: flex;
    align-items: center;
}

.bm-search svg[b-2okmrda3ik] {
    position: absolute;
    left: 12px;
    color: var(--text-secondary);
    pointer-events: none;
}

.bm-search input[b-2okmrda3ik] {
    width: 100%;
    padding: 9px 12px 9px 36px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-primary);
}

.bm-search input:focus[b-2okmrda3ik] {
    outline: none;
    border-color: var(--primary, #3b82f6);
    background: var(--bg-card, var(--bg-secondary));
}

/* List + rows */
.bm-list[b-2okmrda3ik] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 400px;
    overflow-y: auto;
    padding: 2px;
}

.bm-row[b-2okmrda3ik] {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-card, var(--bg-secondary));
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: all 0.15s ease;
}

.bm-row.matched[b-2okmrda3ik] {
    border-left: 3px solid #10b981;
}

.bm-row.unmatched[b-2okmrda3ik] {
    grid-template-columns: 1fr;
    border-left: 3px solid #f59e0b;
}

.bm-row:hover[b-2okmrda3ik] {
    border-color: var(--border-hover, var(--border-color));
}

.bm-row__left[b-2okmrda3ik], .bm-row__right[b-2okmrda3ik] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.bm-row__line[b-2okmrda3ik] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
    color: var(--text-primary);
}

.bm-row__line strong[b-2okmrda3ik] {
    font-weight: 600;
}

.bm-row__line.meta[b-2okmrda3ik] {
    font-size: 11px;
    color: var(--text-secondary);
}

.bm-row__line code[b-2okmrda3ik] {
    padding: 2px 6px;
    background: var(--bg-secondary);
    border-radius: 4px;
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    color: var(--text-primary);
}

.bm-row__label[b-2okmrda3ik] {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted, var(--text-secondary));
    font-weight: 600;
}

.bm-pill[b-2okmrda3ik] {
    padding: 2px 8px !important;
    background: var(--primary-alpha, rgba(59, 130, 246, 0.12)) !important;
    color: var(--primary, #3b82f6) !important;
    font-weight: 600;
    border-radius: 999px !important;
}

.bm-row__arrow[b-2okmrda3ik] {
    font-size: 18px;
    color: var(--text-muted, var(--text-secondary));
    font-weight: 600;
}

.bm-row__strategy[b-2okmrda3ik] {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bm-row__strategy.success[b-2okmrda3ik] {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.bm-row__strategy.info[b-2okmrda3ik] {
    background: var(--primary-alpha, rgba(59, 130, 246, 0.12));
    color: var(--primary, #3b82f6);
}

/* Alternatif barkod chip — eklenen variant'lar için */
.bm-row.has-alt[b-2okmrda3ik] {
    border-left-color: #a855f7;
    background: linear-gradient(
        to right,
        rgba(168, 85, 247, 0.05) 0,
        rgba(168, 85, 247, 0.02) 50%,
        var(--bg-card, var(--bg-secondary)) 100%
    );
}

.bm-row__alt[b-2okmrda3ik] {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    margin-top: 2px;
    background: rgba(168, 85, 247, 0.1);
    border: 1px dashed rgba(168, 85, 247, 0.4);
    border-radius: 6px;
    font-size: 11px;
    color: #a855f7;
    font-weight: 500;
    width: fit-content;
}

.bm-row__alt svg[b-2okmrda3ik] {
    flex-shrink: 0;
}

/* Empty state */
.bm-empty[b-2okmrda3ik] {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-secondary);
    font-size: 13px;
    background: var(--bg-secondary);
    border: 1px dashed var(--border-color);
    border-radius: 8px;
}

@media (max-width: 768px) {
    .bm-stats[b-2okmrda3ik] { grid-template-columns: repeat(2, 1fr); }
    .bm-row[b-2okmrda3ik] { grid-template-columns: 1fr; }
    .bm-row.matched[b-2okmrda3ik] { grid-template-columns: 1fr; }
    .bm-row__arrow[b-2okmrda3ik] { display: none; }
}
/* /Components/Pages/Products/BulkImportImagesWizard.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════
   Bulk Import Images Wizard — site theme uyumlu
   ════════════════════════════════════════════════════════════════ */

.bii-wizard[b-jslwmwuwwk] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 500px;
    position: relative;
}

/* Stepper */
.bii-stepper[b-jslwmwuwwk] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 8px 0 16px;
}

.bii-step[b-jslwmwuwwk] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    border-radius: var(--radius);
    color: var(--text-muted);
    transition: var(--transition);
}

.bii-step.active[b-jslwmwuwwk] {
    color: var(--text-primary);
}

.bii-step.completed[b-jslwmwuwwk] {
    color: var(--primary);
}

.bii-step-num[b-jslwmwuwwk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-input);
    color: var(--text-muted);
    font-weight: 700;
    font-size: 13px;
    border: 1px solid var(--border);
    transition: var(--transition);
}

.bii-step.active .bii-step-num[b-jslwmwuwwk] {
    background: var(--gradient);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 0 0 4px var(--primary-alpha);
}

.bii-step.completed .bii-step-num[b-jslwmwuwwk] {
    background: var(--primary);
    color: #fff;
    border-color: transparent;
}

.bii-step-label[b-jslwmwuwwk] {
    font-size: 13px;
    font-weight: 500;
}

.bii-step-line[b-jslwmwuwwk] {
    width: 60px;
    height: 2px;
    background: var(--border);
    transition: background 0.3s;
}

.bii-step-line.completed[b-jslwmwuwwk] {
    background: var(--primary);
}

/* Step content */
.bii-step-content[b-jslwmwuwwk] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Info box */
.bii-info-box[b-jslwmwuwwk] {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    background: var(--primary-alpha);
    border: 1px solid var(--primary);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.5;
}

.bii-info-box svg[b-jslwmwuwwk] {
    color: var(--primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.bii-info-warn[b-jslwmwuwwk] {
    color: #f59e0b;
    font-weight: 500;
}

/* Preview summary stats */
.bii-preview-summary[b-jslwmwuwwk] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.bii-stat[b-jslwmwuwwk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-align: center;
}

.bii-stat-value[b-jslwmwuwwk] {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.bii-stat-label[b-jslwmwuwwk] {
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bii-stat.success .bii-stat-value[b-jslwmwuwwk] { color: #10b981; }
.bii-stat.warn .bii-stat-value[b-jslwmwuwwk] { color: #f59e0b; }
.bii-stat.info .bii-stat-value[b-jslwmwuwwk] { color: var(--primary); }

/* Toolbar */
.bii-preview-toolbar[b-jslwmwuwwk] {
    display: flex;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.bii-tool-btn[b-jslwmwuwwk] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    cursor: pointer;
    transition: var(--transition);
}

.bii-tool-btn:hover[b-jslwmwuwwk] {
    border-color: var(--primary);
    color: var(--primary);
}

/* Preview list */
.bii-preview-list[b-jslwmwuwwk] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 4px;
}

.bii-product-card[b-jslwmwuwwk] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    transition: var(--transition);
}

.bii-product-card.skipped[b-jslwmwuwwk] {
    opacity: 0.6;
    background: var(--bg-input);
}

.bii-product-card.no-match[b-jslwmwuwwk] {
    opacity: 0.7;
    border-style: dashed;
}

.bii-product-header[b-jslwmwuwwk] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.bii-product-info[b-jslwmwuwwk] {
    flex: 1;
    min-width: 0;
}

.bii-product-name[b-jslwmwuwwk] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bii-product-sku[b-jslwmwuwwk] {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    margin-top: 2px;
}

.bii-badge[b-jslwmwuwwk] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

.bii-badge.success[b-jslwmwuwwk] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.bii-badge.warn[b-jslwmwuwwk] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.bii-badge.muted[b-jslwmwuwwk] {
    background: var(--bg-input);
    color: var(--text-muted);
}

/* Groups */
.bii-groups[b-jslwmwuwwk] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.bii-group-header[b-jslwmwuwwk] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}

.bii-group-label[b-jslwmwuwwk] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.bii-group-count[b-jslwmwuwwk] {
    font-size: 11px;
    color: var(--text-muted);
}

/* Thumb grid */
.bii-thumbs[b-jslwmwuwwk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 6px;
}

.bii-thumb[b-jslwmwuwwk] {
    position: relative;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    overflow: hidden;
    aspect-ratio: 1;
    transition: var(--transition);
    background: var(--bg-input);
}

.bii-thumb input[type="checkbox"][b-jslwmwuwwk] {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 2;
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
    cursor: pointer;
}

.bii-thumb img[b-jslwmwuwwk] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bii-thumb.selected[b-jslwmwuwwk] {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-alpha);
}

.bii-thumb:hover[b-jslwmwuwwk] {
    transform: scale(1.04);
}

.bii-primary-tag[b-jslwmwuwwk] {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.7);
    color: #fbbf24;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    z-index: 2;
}

/* Loading overlay */
.bii-loading[b-jslwmwuwwk] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: #fff;
    z-index: 10;
    border-radius: var(--radius);
}

.bii-spinner[b-jslwmwuwwk] {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: bii-spin-b-jslwmwuwwk 0.8s linear infinite;
}

@keyframes bii-spin-b-jslwmwuwwk {
    to { transform: rotate(360deg); }
}

/* Result step */
.bii-result[b-jslwmwuwwk] {
    align-items: center;
    text-align: center;
    padding: 30px 20px;
}

.bii-result-icon[b-jslwmwuwwk] {
    margin-bottom: 16px;
}

.bii-result-icon.success[b-jslwmwuwwk] { color: #10b981; }
.bii-result-icon.warn[b-jslwmwuwwk] { color: #f59e0b; }

.bii-result-title[b-jslwmwuwwk] {
    margin: 0 0 24px;
    font-size: 22px;
    color: var(--text-primary);
}

.bii-result-stats[b-jslwmwuwwk] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    width: 100%;
    max-width: 600px;
}

.bii-result-stat[b-jslwmwuwwk] {
    padding: 16px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.bii-result-stat-num[b-jslwmwuwwk] {
    font-size: 28px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.bii-result-stat-lbl[b-jslwmwuwwk] {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-top: 4px;
}

.bii-result-stat.success .bii-result-stat-num[b-jslwmwuwwk] { color: #10b981; }
.bii-result-stat.info .bii-result-stat-num[b-jslwmwuwwk] { color: var(--primary); }
.bii-result-stat.warn .bii-result-stat-num[b-jslwmwuwwk] { color: #f59e0b; }
.bii-result-stat.danger .bii-result-stat-num[b-jslwmwuwwk] { color: #ef4444; }

.bii-result-errors[b-jslwmwuwwk] {
    margin-top: 24px;
    width: 100%;
    max-width: 600px;
    text-align: left;
}

.bii-result-errors h4[b-jslwmwuwwk] {
    margin: 0 0 8px;
    font-size: 13px;
    color: #ef4444;
}

.bii-result-errors ul[b-jslwmwuwwk] {
    margin: 0;
    padding-left: 20px;
    font-size: 12px;
    color: var(--text-secondary);
}

/* Footer */
.bii-footer[b-jslwmwuwwk] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.bii-footer-spacer[b-jslwmwuwwk] {
    flex: 1;
}
/* /Components/Pages/Products/BulkProductImportWizard.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════ */
/* BULK PRODUCT IMPORT WIZARD - STEP-BASED DESIGN                    */
/* ══════════════════════════════════════════════════════════════════ */

.wizard-container-wide[b-qfty9g9gst] {
    max-width: 1200px;
    height: 90vh;
    max-height: 850px;
    display: flex;
    flex-direction: column;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* HEADER                                                              */
/* ═══════════════════════════════════════════════════════════════════ */

.header-title[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-title h2[b-qfty9g9gst] {
    margin: 0;
}

.mapping-alert[b-qfty9g9gst] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
}

.mapping-alert:hover[b-qfty9g9gst] {
    background: rgba(245, 158, 11, 0.15);
}

/* ═══════════════════════════════════════════════════════════════════ */
/* WIZARD STEPS                                                        */
/* ═══════════════════════════════════════════════════════════════════ */

.wizard-steps[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-input);
}

.step[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-number[b-qfty9g9gst] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2px solid var(--border);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.step-label[b-qfty9g9gst] {
    font-size: 13px;
    color: var(--text-muted);
    transition: color 0.2s ease;
}

.step.active .step-number[b-qfty9g9gst] {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

.step.active .step-label[b-qfty9g9gst] {
    color: #3b82f6;
    font-weight: 500;
}

.step.completed .step-number[b-qfty9g9gst] {
    background: #10b981;
    border-color: #10b981;
    color: white;
}

.step.completed .step-label[b-qfty9g9gst] {
    color: #10b981;
}

.step-line[b-qfty9g9gst] {
    width: 40px;
    height: 2px;
    background: var(--border);
    margin: 0 8px;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* PRODUCT LIST VIEW (STEP 1)                                          */
/* ═══════════════════════════════════════════════════════════════════ */

.product-list-view[b-qfty9g9gst] {
    padding: 16px;
    overflow-y: auto;
    height: 100%;
}

/* Status filter panel — Reddedilmiş/Onay Bekleyen/Arşivlenmiş/Pasif switch'leri */
.status-filter-panel[b-qfty9g9gst] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 16px;
}

.status-filter-header[b-qfty9g9gst] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 12px;
}

.status-filter-header strong[b-qfty9g9gst] {
    font-size: 14px;
    color: var(--text-primary);
}

.status-filter-header small[b-qfty9g9gst] {
    font-size: 12px;
    color: var(--text-muted);
}

.status-filter-grid[b-qfty9g9gst] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.product-list-view .data-card[b-qfty9g9gst] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.product-list-view .table-container[b-qfty9g9gst] {
    overflow-x: auto;
}

.product-list-view .data-table[b-qfty9g9gst] {
    width: 100%;
    border-collapse: collapse;
}

.product-list-view .data-table thead[b-qfty9g9gst] {
    background: var(--bg-input);
    border-bottom: 1px solid var(--border);
}

.product-list-view .data-table th[b-qfty9g9gst] {
    padding: 12px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.product-list-view .data-table th.th-checkbox[b-qfty9g9gst] {
    width: 48px;
    padding: 12px;
}

.product-list-view .data-table th.th-actions[b-qfty9g9gst] {
    width: 50px;
}

.product-list-view .data-table tbody tr[b-qfty9g9gst] {
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.product-list-view .data-table tbody tr:last-child[b-qfty9g9gst] {
    border-bottom: none;
}

.product-list-view .data-table tbody tr:hover[b-qfty9g9gst] {
    background: var(--bg-hover);
}

.product-list-view .data-table tbody tr.selected[b-qfty9g9gst] {
    background: transparent;
}

.product-list-view .data-table tbody tr.excluded[b-qfty9g9gst] {
    opacity: 0.5;
    background: var(--bg-input);
}

.product-list-view .data-table td[b-qfty9g9gst] {
    padding: 12px 16px;
    vertical-align: middle;
}

/* Custom Checkbox */
.product-list-view .custom-checkbox[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.product-list-view .custom-checkbox input[b-qfty9g9gst] {
    display: none;
}

.product-list-view .custom-checkbox .checkmark[b-qfty9g9gst] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-radius: 4px;
    background: var(--bg-card);
    position: relative;
    transition: all 0.15s ease;
}

.product-list-view .custom-checkbox input:checked + .checkmark[b-qfty9g9gst] {
    background: var(--primary);
    border-color: var(--primary);
}

.product-list-view .custom-checkbox input:checked + .checkmark[b-qfty9g9gst]::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Product Thumbnail */
.product-list-view .product-thumb[b-qfty9g9gst] {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
    background: var(--bg-input);
}

.product-list-view .product-thumb-placeholder[b-qfty9g9gst] {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

/* Product Info Cell */
.product-list-view .product-info[b-qfty9g9gst] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.product-list-view .product-title[b-qfty9g9gst] {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.3;
}

.product-list-view .product-category[b-qfty9g9gst] {
    font-size: 12px;
    color: var(--text-muted);
}

/* Brand */
.product-list-view .brand-name[b-qfty9g9gst] {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Badges */
.product-list-view .variant-badge[b-qfty9g9gst] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    background: var(--bg-input);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

.product-list-view .stock-badge[b-qfty9g9gst] {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.product-list-view .stock-badge.in-stock[b-qfty9g9gst] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.product-list-view .stock-badge.out-of-stock[b-qfty9g9gst] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Price */
.product-list-view .price-text[b-qfty9g9gst] {
    font-size: 13px;
    font-weight: 500;
    color: #10b981;
}

/* Action Button */
.product-list-view .action-btn[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.product-list-view .action-btn:hover[b-qfty9g9gst] {
    background: var(--bg-input);
    color: var(--text-primary);
}

.product-list-view .text-center[b-qfty9g9gst] {
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* PRODUCT DETAIL VIEW (STEP 2)                                        */
/* ═══════════════════════════════════════════════════════════════════ */

.product-detail-view[b-qfty9g9gst] {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.loading-variants[b-qfty9g9gst] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 100%;
    color: var(--text-muted);
}

.detail-layout[b-qfty9g9gst] {
    display: flex;
    height: 100%;
    overflow: hidden;
}

.detail-layout.full-width[b-qfty9g9gst] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.detail-layout.full-width .variants-section[b-qfty9g9gst] {
    width: 100%;
    flex: 1;
    display: block;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scroll-behavior: auto;
}

.product-header-card[b-qfty9g9gst] {
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid var(--border);
}

.product-main-image[b-qfty9g9gst] {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    border-radius: 8px;
    object-fit: cover;
}

.product-main-image.no-image[b-qfty9g9gst] {
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.product-header-info[b-qfty9g9gst] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.product-header-info h3[b-qfty9g9gst] {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

/* Editable Fields */
.editable-field[b-qfty9g9gst] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.editable-field label[b-qfty9g9gst] {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.title-input[b-qfty9g9gst] {
    width: 100%;
    padding: 8px 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    transition: all 0.15s ease;
}

.title-input:focus[b-qfty9g9gst] {
    outline: none;
    border-color: #3b82f6;
    background: var(--bg-card);
}

.title-input:hover[b-qfty9g9gst] {
    border-color: var(--border-hover);
}

.category-field[b-qfty9g9gst] {
    margin-top: 4px;
}

.original-category[b-qfty9g9gst] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

.header-meta[b-qfty9g9gst] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.header-meta .meta-row[b-qfty9g9gst] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
    font-size: 12px;
    padding: 6px 10px;
    background: var(--bg-input);
    border-radius: 6px;
    border-left: 3px solid transparent;
}

.header-meta .meta-row.matched[b-qfty9g9gst] {
    border-left-color: #10b981;
}

.header-meta .meta-row.missing[b-qfty9g9gst] {
    border-left-color: #f59e0b;
    background: rgba(245, 158, 11, 0.05);
}

.header-meta .meta-label[b-qfty9g9gst] {
    font-weight: 500;
    color: var(--text-secondary);
}

.header-meta .meta-value[b-qfty9g9gst] {
    color: var(--text-primary);
}

.header-meta .meta-status[b-qfty9g9gst] {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: auto;
}

.header-meta .meta-row.missing .meta-status[b-qfty9g9gst] {
    color: #f59e0b;
}

.meta-edit-btn[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    margin-left: auto;
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.meta-edit-btn:hover[b-qfty9g9gst] {
    background: #ef4444;
    border-color: #ef4444;
    color: white;
}

/* Category Filter Info */
.category-filter-info[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    margin: 0 16px 8px;
    background: rgba(59, 130, 246, 0.08);
    border-radius: 6px;
    font-size: 12px;
    color: #3b82f6;
}

/* Empty Attributes */
.empty-attributes[b-qfty9g9gst] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 20px;
    color: var(--text-muted);
    text-align: center;
    font-size: 13px;
}

/* Attributes Section */
.attributes-section[b-qfty9g9gst] {
    padding: 16px;
    overflow-y: auto;
}

.section-header[b-qfty9g9gst] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.section-header h4[b-qfty9g9gst] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.attribute-count[b-qfty9g9gst] {
    font-size: 12px;
    color: var(--text-muted);
}

.attributes-list[b-qfty9g9gst] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.attribute-item[b-qfty9g9gst] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px 14px;
    background: var(--bg-input);
    border-radius: 6px;
    transition: all 0.15s ease;
    border-left: 3px solid transparent;
    gap: 12px;
}

.attribute-item:hover[b-qfty9g9gst] {
    background: var(--bg-card);
}

.attribute-item.mapped[b-qfty9g9gst] {
    border-left-color: #10b981;
}

.attribute-item.create[b-qfty9g9gst] {
    border-left-color: #3b82f6;
}

.attribute-item.skip[b-qfty9g9gst] {
    border-left-color: #6b7280;
    opacity: 0.6;
}

.attribute-item.unmapped[b-qfty9g9gst] {
    border-left-color: #f59e0b;
}

.attribute-item.empty[b-qfty9g9gst] {
    border-left-color: #f59e0b;
    background: rgba(245, 158, 11, 0.05);
}

.attr-value-tag.empty-value[b-qfty9g9gst] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    font-style: italic;
    border-color: rgba(245, 158, 11, 0.3);
}

.attr-info[b-qfty9g9gst] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.attr-name-row[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.attr-name[b-qfty9g9gst] {
    font-size: 13px;
    font-weight: 500;
}

.attr-values[b-qfty9g9gst] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.attr-value-tag[b-qfty9g9gst] {
    padding: 2px 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 11px;
    color: var(--text-secondary);
}

.attr-value-more[b-qfty9g9gst] {
    font-size: 11px;
    color: var(--text-muted);
    padding: 2px 4px;
}

.edited-badge[b-qfty9g9gst] {
    color: #f59e0b;
    font-weight: bold;
}

.attr-tag[b-qfty9g9gst] {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
}

.attr-tag.variant[b-qfty9g9gst] {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.attr-tag.required[b-qfty9g9gst] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.attr-tag.dimtype[b-qfty9g9gst] {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.attr-tag.varies-color[b-qfty9g9gst] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.1), rgba(168, 85, 247, 0.1));
    color: #a855f7;
    border: 1px solid rgba(168, 85, 247, 0.2);
}

.attr-tag.varies-color svg[b-qfty9g9gst] {
    flex-shrink: 0;
}

.attr-tag.conflict[b-qfty9g9gst] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.attr-tag.conflict svg[b-qfty9g9gst] {
    flex-shrink: 0;
}

/* Çakışan Değerler */
.attribute-item.has-conflict[b-qfty9g9gst] {
    border-left-color: #f59e0b;
    background: rgba(245, 158, 11, 0.03);
}

/* Renge Göre Değişen Özellikler */
.attribute-item.varies-by-color[b-qfty9g9gst] {
    border-left-color: #a855f7;
    background: rgba(168, 85, 247, 0.03);
}

.attr-values.color-specific[b-qfty9g9gst] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.attr-value-tag.with-color[b-qfty9g9gst] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px 2px 4px;
    background: var(--bg-muted);
    border-radius: 4px;
    font-size: 11px;
}

.attr-value-tag.with-color .color-indicator[b-qfty9g9gst] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    color: white;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
}

.attr-actions[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.edit-btn[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.edit-btn:hover[b-qfty9g9gst] {
    background: #2563eb;
}

.edit-btn svg[b-qfty9g9gst] {
    flex-shrink: 0;
}

.mapping-status[b-qfty9g9gst] {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
}

.mapping-status.matched[b-qfty9g9gst] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.mapping-status.create[b-qfty9g9gst] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.mapping-status.skip[b-qfty9g9gst] {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

.mapping-status.unmapped[b-qfty9g9gst] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.attr-mapping svg[b-qfty9g9gst] {
    color: var(--text-muted);
}

/* Variants Section (Right) */
.variants-section[b-qfty9g9gst] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.grid-header-fields[b-qfty9g9gst] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.grid-header-fields .editable-field[b-qfty9g9gst] {
    width: 100%;
}

/* Product Header Row - Image + Info */
.product-header-row[b-qfty9g9gst] {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.product-image-container[b-qfty9g9gst] {
    flex-shrink: 0;
}

.product-thumb-lg[b-qfty9g9gst] {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--bg-input);
    border: 1px solid var(--border);
}

.product-thumb-lg.no-image[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.product-info-fields[b-qfty9g9gst] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Brand Inline */
.brand-inline[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.brand-label[b-qfty9g9gst] {
    color: var(--text-muted);
    font-weight: 500;
}

.brand-value-inline[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-primary);
    font-weight: 500;
}

.brand-value-inline.matched[b-qfty9g9gst] {
    color: #10b981;
}

.brand-value-inline.unmapped[b-qfty9g9gst] {
    color: #f59e0b;
}

.brand-mapped-to[b-qfty9g9gst] {
    color: var(--text-muted);
    font-weight: 400;
}

.brand-edit-btn-sm[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.brand-edit-btn-sm:hover[b-qfty9g9gst] {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

/* Product Details Row */
.product-details-row[b-qfty9g9gst] {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.product-details-row .editable-field.flex-2[b-qfty9g9gst] {
    flex: 2;
    min-width: 200px;
}

.product-details-row .editable-field.compact[b-qfty9g9gst] {
    flex: 0 0 auto;
    min-width: 100px;
}

/* Variants Header */
.variants-header[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin: 0 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px 8px 0 0;
    flex-shrink: 0;
}

.variants-title[b-qfty9g9gst] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.variants-count[b-qfty9g9gst] {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-muted);
}

/* Variants Cards Wrapper */
.variants-cards-wrapper[b-qfty9g9gst] {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ══════════════════════════════════════════════════════════════════════════════ */
/* BULK ACTION TOOLBAR                                                            */
/* ══════════════════════════════════════════════════════════════════════════════ */

.bulk-action-toolbar[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin: 0 12px 12px;
    background: rgba(59, 130, 246, 0.05);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 8px;
    flex-shrink: 0;
}

.bulk-action-label[b-qfty9g9gst] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

.bulk-action-controls[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    flex-wrap: wrap;
}

.bulk-action-controls :deep(.searchable-select)[b-qfty9g9gst] {
    min-width: 150px;
    max-width: 200px;
}

.bulk-arrow[b-qfty9g9gst] {
    color: var(--text-muted);
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════ */
/* VARIANTS GRID                                                                   */
/* ══════════════════════════════════════════════════════════════════════════════ */

.variants-grid-wrapper[b-qfty9g9gst] {
    min-height: 500px;
    margin: 0 12px 12px;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
}

.variants-grid[b-qfty9g9gst] {
    display: flex;
    flex-direction: column;
    min-width: max-content;
}

/* Grid Header */
.variant-grid-header[b-qfty9g9gst] {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-input);
    border-bottom: 2px solid var(--border);
}

.variant-grid-header > .grid-col[b-qfty9g9gst] {
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Grid Rows */
.variant-grid-row[b-qfty9g9gst] {
    display: flex;
    border-bottom: 1px solid var(--border);
    transition: background 0.1s ease;
}

.variant-grid-row:hover[b-qfty9g9gst] {
    background: var(--bg-hover);
}

.variant-grid-row.deselected[b-qfty9g9gst] {
    opacity: 0.5;
    background: var(--bg-input);
}

.variant-grid-row > .grid-col[b-qfty9g9gst] {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    min-height: 56px;
    flex-shrink: 0;
}

/* Grid Columns */
.grid-col.col-checkbox[b-qfty9g9gst] {
    width: 50px;
    justify-content: center;
}

.grid-col.col-image[b-qfty9g9gst] {
    width: 60px;
    justify-content: center;
}

.grid-col.col-variant-name[b-qfty9g9gst] {
    min-width: 200px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.grid-col.col-attribute[b-qfty9g9gst] {
    min-width: 180px;
    width: 200px;
}

.grid-col.col-attribute :deep(.searchable-select)[b-qfty9g9gst] {
    width: 100%;
}

.grid-col.col-attribute :deep(.searchable-select-trigger)[b-qfty9g9gst] {
    padding: 8px 12px;
    min-height: 36px;
    font-size: 13px;
}

.grid-col.col-attribute :deep(.searchable-select-value)[b-qfty9g9gst] {
    font-size: 13px;
}

.grid-col.col-attribute :deep(.searchable-select-value.placeholder)[b-qfty9g9gst] {
    font-size: 13px;
    color: var(--text-muted);
}

/* Dropdown'ın grid içinde düzgün görünmesi için */
.grid-col.col-attribute :deep(.searchable-select-dropdown)[b-qfty9g9gst] {
    min-width: 220px;
    max-width: 300px;
    z-index: 1100;
}

/* Dropdown options scroll davranışı */
.grid-col.col-attribute :deep(.searchable-select-options)[b-qfty9g9gst] {
    overscroll-behavior: contain;
    scroll-behavior: auto;
}

/* Search input focus scroll engellemesi */
.grid-col.col-attribute :deep(.searchable-select-search input)[b-qfty9g9gst] {
    scroll-margin: 0;
}

/* Grid row'un dropdown açıldığında overflow'a izin vermesi */
.variant-grid-row[b-qfty9g9gst] {
    position: relative;
    z-index: 1;
}

.variant-grid-row:has(.searchable-select.open)[b-qfty9g9gst] {
    z-index: 100;
}

.grid-col.col-stock[b-qfty9g9gst] {
    width: 80px;
    justify-content: center;
}

.grid-col.col-price[b-qfty9g9gst] {
    width: 100px;
    justify-content: flex-end;
}

.grid-col.col-barcode[b-qfty9g9gst] {
    width: 150px;
}

.required-dot[b-qfty9g9gst] {
    color: #ef4444;
    margin-left: 2px;
}

/* Variant Grid Image */
.variant-grid-image[b-qfty9g9gst] {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    object-fit: cover;
    background: var(--bg-input);
    border: 1px solid var(--border);
}

.variant-grid-image.no-image[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

/* Variant Name Cell */
.variant-name-cell[b-qfty9g9gst] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex-wrap: nowrap;
}

.variant-dims[b-qfty9g9gst] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Dim Chips */
.dim-chip[b-qfty9g9gst] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.dim-chip:hover[b-qfty9g9gst] {
    background: var(--bg-hover);
    border-color: var(--border-hover);
}

.dim-chip.main[b-qfty9g9gst] {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.2);
    color: #8b5cf6;
}

.dim-chip.mapped[b-qfty9g9gst] {
    border-color: #10b981;
}

.dim-chip.mapped[b-qfty9g9gst]::after {
    content: "✓";
    margin-left: 4px;
    color: #10b981;
    font-size: 10px;
}

/* Stock & Price */
.stock-value[b-qfty9g9gst] {
    font-size: 13px;
    font-weight: 500;
}

.stock-value.in-stock[b-qfty9g9gst] {
    color: #10b981;
}

.stock-value.out-of-stock[b-qfty9g9gst] {
    color: #ef4444;
}

.price-value[b-qfty9g9gst] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.barcode-value[b-qfty9g9gst] {
    font-size: 12px;
    color: var(--text-secondary);
    font-family: monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attr-value-text[b-qfty9g9gst] {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Variant Card (legacy, keep for compatibility) */
.variant-card[b-qfty9g9gst] {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.15s ease;
    min-height: 150px;
}

.variant-card:hover[b-qfty9g9gst] {
    border-color: var(--border-hover);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.variant-card.excluded[b-qfty9g9gst] {
    opacity: 0.5;
    background: var(--bg-input);
}

/* Variant Card Header - 100% width */
.variant-card-header[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-input);
    border-bottom: 1px solid var(--border);
}

.variant-name[b-qfty9g9gst] {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.variant-card-meta[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Variant Card Body */
.variant-card-body[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 14px;
}

.variant-card-image[b-qfty9g9gst] {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
    background: var(--bg-input);
    flex-shrink: 0;
}

.variant-card-image.no-image[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

/* Variant Dims Row */
.variant-dims-row[b-qfty9g9gst] {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    min-width: 0;
}

.variant-dim-item[b-qfty9g9gst] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.variant-dim-item .dim-label[b-qfty9g9gst],
.variant-barcode .dim-label[b-qfty9g9gst] {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Variant Barcode */
.variant-barcode[b-qfty9g9gst] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

.variant-barcode .barcode-value[b-qfty9g9gst] {
    font-size: 12px;
    font-family: monospace;
    color: var(--text-secondary);
    padding: 6px 10px;
    background: var(--bg-input);
    border-radius: 4px;
}

/* Variant Card Footer - Varyant Adı */
.variant-card-footer[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-input);
    border-top: 1px solid var(--border);
}

.variant-card-footer .footer-label[b-qfty9g9gst] {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
}

.variant-name-wrapper[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    flex: 1;
    position: relative;
}

.variant-name-input[b-qfty9g9gst] {
    font-size: 12px;
    color: var(--text);
    padding: 6px 32px 6px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    flex: 1;
    transition: border-color 0.15s ease;
}

.variant-name-input:focus[b-qfty9g9gst] {
    outline: none;
    border-color: #3b82f6;
}

.variant-name-input[b-qfty9g9gst]::placeholder {
    color: var(--text-muted);
    font-style: italic;
}

.variant-name-refresh-btn[b-qfty9g9gst] {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.variant-name-refresh-btn:hover[b-qfty9g9gst] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.variant-name-refresh-btn:active[b-qfty9g9gst] {
    transform: translateY(-50%) scale(0.9);
}

.variant-name-refresh-btn svg[b-qfty9g9gst] {
    transition: transform 0.3s ease;
}

.variant-name-refresh-btn:hover svg[b-qfty9g9gst] {
    transform: rotate(45deg);
}

/* Variant Table Custom Checkbox */
.variants-section .custom-checkbox[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.variants-section .custom-checkbox input[b-qfty9g9gst] {
    display: none;
}

.variants-section .custom-checkbox .checkmark[b-qfty9g9gst] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-radius: 4px;
    background: var(--bg-card);
    position: relative;
    transition: all 0.15s ease;
}

.variants-section .custom-checkbox input:checked + .checkmark[b-qfty9g9gst] {
    background: var(--primary);
    border-color: var(--primary);
}

.variants-section .custom-checkbox input:checked + .checkmark[b-qfty9g9gst]::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.variants-section .th-checkbox[b-qfty9g9gst] {
    width: 48px;
    padding: 12px;
}

/* Variant Table Row States */
.variants-table tbody tr.selected[b-qfty9g9gst] {
    background: transparent;
}

.variants-table tbody tr.excluded[b-qfty9g9gst] {
    opacity: 0.5;
    background: var(--bg-input);
}

/* Variant Table Stock Badge */
.variants-table .stock-badge[b-qfty9g9gst] {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.variants-table .stock-badge.in-stock[b-qfty9g9gst] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.variants-table .stock-badge.out-of-stock[b-qfty9g9gst] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Variant Table Price */
.variants-table .price-text[b-qfty9g9gst] {
    font-size: 13px;
    font-weight: 500;
    color: #10b981;
}

.variants-table .text-center[b-qfty9g9gst] {
    text-align: center;
}

/* Variant Thumbnail */
.variant-thumb-placeholder[b-qfty9g9gst] {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.variant-actions[b-qfty9g9gst] {
    display: flex;
    gap: 12px;
}

.link-btn[b-qfty9g9gst] {
    background: none;
    border: none;
    color: #3b82f6;
    font-size: 12px;
    cursor: pointer;
    padding: 0;
}

.link-btn:hover[b-qfty9g9gst] {
    text-decoration: underline;
}

.variants-table-wrapper[b-qfty9g9gst] {
    flex: 1;
    overflow: auto;
}

.variants-table[b-qfty9g9gst] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.variants-table thead[b-qfty9g9gst] {
    position: sticky;
    top: 0;
    z-index: 1;
}

.variants-table th[b-qfty9g9gst] {
    padding: 12px 16px;
    background: var(--bg-input);
    border-bottom: 1px solid var(--border);
    font-weight: 500;
    font-size: 12px;
    color: var(--text-muted);
    text-align: left;
}

.variants-table td[b-qfty9g9gst] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.variants-table tbody tr[b-qfty9g9gst] {
    transition: background 0.15s ease;
}

.variants-table tbody tr:hover[b-qfty9g9gst] {
    background: var(--bg-input);
}

.variants-table tbody tr.excluded[b-qfty9g9gst] {
    opacity: 0.4;
    background: var(--bg-input);
}

.col-select[b-qfty9g9gst] { width: 40px; }
.col-image[b-qfty9g9gst] { width: 50px; }
.col-dim[b-qfty9g9gst] { min-width: 80px; }
.col-barcode[b-qfty9g9gst] { width: 140px; }
.col-price[b-qfty9g9gst] { width: 90px; text-align: right; font-weight: 500; }
.col-stock[b-qfty9g9gst] { width: 60px; text-align: right; color: var(--text-secondary); }

.dim-value[b-qfty9g9gst] {
    display: inline-block;
    padding: 4px 10px;
    background: var(--bg-input);
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-secondary);
}

.dim-value.main-dim[b-qfty9g9gst] {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
    font-weight: 500;
}

.inline-input[b-qfty9g9gst] {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-card);
    font-size: 12px;
    font-family: monospace;
    color: var(--text-primary);
    transition: border-color 0.15s ease;
}

.inline-input:focus[b-qfty9g9gst] {
    outline: none;
    border-color: #3b82f6;
}

.inline-input:hover[b-qfty9g9gst] {
    border-color: var(--border-hover);
}

.variant-thumb[b-qfty9g9gst] {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    object-fit: cover;
}

.variant-thumb.no-image[b-qfty9g9gst] {
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.variant-attrs[b-qfty9g9gst] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.variant-attr-value[b-qfty9g9gst] {
    padding: 3px 8px;
    background: var(--bg-input);
    border-radius: 4px;
    font-size: 11px;
    color: var(--text-secondary);
}

.variants-summary[b-qfty9g9gst] {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background: var(--bg-input);
    font-size: 12px;
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════ */
/* ATTRIBUTE MODAL                                                     */
/* ═══════════════════════════════════════════════════════════════════ */

.modal-overlay[b-qfty9g9gst] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.attribute-modal[b-qfty9g9gst] {
    width: 480px;
    max-width: 90vw;
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    overflow: hidden;
}

.attribute-modal-wide[b-qfty9g9gst] {
    width: 680px;
}

.modal-two-col[b-qfty9g9gst] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.modal-col[b-qfty9g9gst] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mode-options-compact[b-qfty9g9gst] {
    display: flex;
    gap: 8px;
}

.mode-chip[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--bg-input);
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.15s ease;
}

.mode-chip:hover[b-qfty9g9gst] {
    background: var(--bg-card);
}

.mode-chip.selected[b-qfty9g9gst] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.mode-chip input[type="radio"][b-qfty9g9gst] {
    display: none;
}

/* Inline (colorVal row) için kompakt varyant */
.mode-chip.mini[b-qfty9g9gst] {
    padding: 4px 10px;
    font-size: 11px;
    border: 1px solid var(--border);
}

.mode-chip-pair[b-qfty9g9gst] {
    display: inline-flex;
    gap: 4px;
    flex-shrink: 0;
}

.value-edit-list[b-qfty9g9gst] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 250px;
    overflow-y: auto;
    padding: 4px;
}

.value-edit-row[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bg-input);
    border-radius: 6px;
}

.value-original[b-qfty9g9gst] {
    flex: 1;
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
}

.value-edit-row svg[b-qfty9g9gst] {
    flex-shrink: 0;
    color: var(--text-muted);
}

.value-input[b-qfty9g9gst] {
    flex: 2;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-card);
    font-size: 12px;
    color: var(--text-primary);
}

.value-input:focus[b-qfty9g9gst] {
    outline: none;
    border-color: #3b82f6;
}

.value-input.edited[b-qfty9g9gst] {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.05);
}

.value-count[b-qfty9g9gst] {
    flex-shrink: 0;
    padding: 2px 8px;
    background: var(--bg-card);
    border-radius: 10px;
    font-size: 10px;
    color: var(--text-muted);
}

/* Renk Bazlı Değer Düzenleme */
.color-value-edit-list[b-qfty9g9gst] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 300px;
    overflow-y: auto;
    padding: 4px;
}

.color-value-edit-row[b-qfty9g9gst] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    background: var(--bg-input);
    border-radius: 8px;
    border-left: 3px solid #a855f7;
}

.color-label[b-qfty9g9gst] {
    display: flex;
    align-items: center;
}

.color-badge[b-qfty9g9gst] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    color: white;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.color-value-input-group[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.color-value-input-group .value-original[b-qfty9g9gst] {
    min-width: 80px;
    flex: 0 0 auto;
}

.color-value-input-group svg[b-qfty9g9gst] {
    flex-shrink: 0;
    color: var(--text-muted);
}

.color-value-input-group .value-input[b-qfty9g9gst],
.color-value-input-group :deep(.searchable-select)[b-qfty9g9gst] {
    flex: 1;
}

.no-values[b-qfty9g9gst] {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

/* Çakışan Değerler Stilleri */
.conflict-label[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.conflict-warning[b-qfty9g9gst] {
    color: #f59e0b;
    font-size: 14px;
}

.conflict-value-list[b-qfty9g9gst] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
    padding: 4px;
}

.conflict-value-row[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-input);
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}

.conflict-value-row:hover[b-qfty9g9gst] {
    background: var(--bg-hover);
}

.conflict-value-row.selected[b-qfty9g9gst] {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.08);
}

.conflict-value-row input[type="radio"][b-qfty9g9gst] {
    width: 16px;
    height: 16px;
    accent-color: #3b82f6;
    cursor: pointer;
}

.conflict-value-name[b-qfty9g9gst] {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
}

.conflict-value-count[b-qfty9g9gst] {
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg-card);
    padding: 4px 8px;
    border-radius: 12px;
}

.conflict-hint[b-qfty9g9gst] {
    margin: 8px 0 0 0;
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}

/* Mevcut Değer Gösterimi */
.current-value-display[b-qfty9g9gst] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    background: var(--bg-input);
    border-radius: 8px;
    margin-bottom: 16px;
}

.current-value-tag[b-qfty9g9gst] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
}

.current-value-tag small[b-qfty9g9gst] {
    color: var(--text-muted);
    font-weight: 400;
}

.current-value-tag.empty[b-qfty9g9gst] {
    color: var(--text-muted);
    font-style: italic;
}

.value-change-section[b-qfty9g9gst] {
    padding: 16px;
    background: rgba(59, 130, 246, 0.05);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 8px;
}

.modal-header[b-qfty9g9gst] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.modal-header h3[b-qfty9g9gst] {
    margin: 0;
    font-size: 16px;
}

.modal-close[b-qfty9g9gst] {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
}

.modal-close:hover[b-qfty9g9gst] {
    background: var(--bg-input);
    color: var(--text-primary);
}

.modal-body[b-qfty9g9gst] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-group[b-qfty9g9gst] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label[b-qfty9g9gst] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.readonly-value[b-qfty9g9gst] {
    padding: 10px 12px;
    background: var(--bg-input);
    border-radius: 6px;
    font-size: 14px;
    color: var(--text-primary);
}

.mode-options[b-qfty9g9gst] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mode-option[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-input);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mode-option:hover[b-qfty9g9gst] {
    background: var(--bg-card);
}

.mode-option.selected[b-qfty9g9gst] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.mode-option input[type="radio"][b-qfty9g9gst] {
    width: 16px;
    height: 16px;
}

.mode-option span[b-qfty9g9gst] {
    font-size: 13px;
}

.attribute-info[b-qfty9g9gst] {
    display: flex;
    gap: 8px;
}

.attribute-info .badge[b-qfty9g9gst] {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.attribute-info .badge.variant[b-qfty9g9gst] {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.attribute-info .badge.required[b-qfty9g9gst] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.modal-footer[b-qfty9g9gst] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    background: var(--bg-input);
}

/* Empty Value Selection Section */
.empty-value-section[b-qfty9g9gst] {
    padding: 16px;
    background: rgba(245, 158, 11, 0.05);
    border: 1px dashed rgba(245, 158, 11, 0.3);
    border-radius: var(--radius);
    margin-top: 12px;
}

.empty-value-hint[b-qfty9g9gst] {
    margin: 0 0 12px 0;
    color: #f59e0b;
    font-size: 13px;
    font-weight: 500;
}

.empty-value-section .form-group[b-qfty9g9gst] {
    margin-bottom: 12px;
}

.empty-value-section .form-group:last-child[b-qfty9g9gst] {
    margin-bottom: 0;
}

.empty-value-section .form-group label[b-qfty9g9gst] {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* SETTINGS VIEW (STEP 3)                                              */
/* ═══════════════════════════════════════════════════════════════════ */

.settings-view[b-qfty9g9gst] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 20px;
    max-width: 700px;
    margin: 0 auto;
    overflow-y: auto;
}

.missing-mappings-section[b-qfty9g9gst] {
    padding: 16px;
    background: rgba(245, 158, 11, 0.05);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: var(--radius);
}

.missing-mappings-section .section-header[b-qfty9g9gst] {
    margin-bottom: 16px;
}

.missing-mappings-section .section-header.warning[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #f59e0b;
}

.missing-mappings-section .section-header h4[b-qfty9g9gst] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.mapping-group[b-qfty9g9gst] {
    margin-bottom: 16px;
}

.mapping-group:last-child[b-qfty9g9gst] {
    margin-bottom: 0;
}

.mapping-group h5[b-qfty9g9gst] {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.mapping-row[b-qfty9g9gst] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 10px 14px;
    background: var(--bg-card);
    border-radius: 6px;
    margin-bottom: 8px;
}

.mapping-row:last-child[b-qfty9g9gst] {
    margin-bottom: 0;
}

.mapping-source[b-qfty9g9gst] {
    font-size: 13px;
    font-weight: 500;
    min-width: 150px;
}

.mapping-target[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.btn-icon[b-qfty9g9gst] {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.btn-icon:hover[b-qfty9g9gst] {
    border-color: #10b981;
    color: #10b981;
}

.settings-section[b-qfty9g9gst] {
    padding: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.settings-section .section-title[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}

.settings-section .section-title svg[b-qfty9g9gst] {
    color: #3b82f6;
}

.settings-grid[b-qfty9g9gst] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.setting-item[b-qfty9g9gst] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.setting-item label[b-qfty9g9gst] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.setting-item small[b-qfty9g9gst] {
    font-size: 11px;
    color: var(--text-muted);
}

.required[b-qfty9g9gst] {
    color: #ef4444;
}

.settings-row[b-qfty9g9gst] {
    display: flex;
    gap: 24px;
}

.switch-item[b-qfty9g9gst] {
    flex: 1;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* SUMMARY VIEW (STEP 4)                                               */
/* ═══════════════════════════════════════════════════════════════════ */

.summary-view[b-qfty9g9gst] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    max-width: 600px;
    margin: 0 auto;
}

.summary-header[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.summary-header svg[b-qfty9g9gst] {
    color: #3b82f6;
    flex-shrink: 0;
}

.summary-header h3[b-qfty9g9gst] {
    margin: 0;
    font-size: 18px;
}

.summary-header p[b-qfty9g9gst] {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--text-muted);
}

.summary-grid[b-qfty9g9gst] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.summary-card[b-qfty9g9gst] {
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: center;
}

.summary-card .card-header[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 12px;
    margin-bottom: 8px;
}

.summary-card .card-value[b-qfty9g9gst] {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
}

.summary-card .card-sub[b-qfty9g9gst] {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.sku-prefix-section[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 12px;
}

.sku-prefix-section label[b-qfty9g9gst] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

.sku-prefix-section small[b-qfty9g9gst] {
    font-size: 12px;
    color: var(--text-muted);
}

.summary-details[b-qfty9g9gst] {
    padding: 16px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.detail-row[b-qfty9g9gst] {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.detail-row:last-child[b-qfty9g9gst] {
    border-bottom: none;
}

.detail-label[b-qfty9g9gst] {
    font-size: 13px;
    color: var(--text-secondary);
}

.detail-value[b-qfty9g9gst] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.summary-notice[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(59, 130, 246, 0.08);
    border-radius: var(--radius);
    font-size: 13px;
    color: #3b82f6;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* RESULT VIEW (STEP 5)                                                */
/* ═══════════════════════════════════════════════════════════════════ */

.result-view[b-qfty9g9gst] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    max-width: 500px;
    margin: 0 auto;
}

.result-banner[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    border-radius: var(--radius);
}

.result-banner.success[b-qfty9g9gst] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.result-banner.error[b-qfty9g9gst] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.result-icon svg[b-qfty9g9gst] {
    stroke-width: 1.5;
}

.result-text h3[b-qfty9g9gst] {
    margin: 0;
    font-size: 18px;
}

.result-text p[b-qfty9g9gst] {
    margin: 4px 0 0;
    font-size: 14px;
    opacity: 0.8;
}

.result-stats[b-qfty9g9gst] {
    display: flex;
    gap: 12px;
}

.result-stat[b-qfty9g9gst] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px;
    border-radius: var(--radius);
    text-align: center;
}

.result-stat.success[b-qfty9g9gst] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.result-stat.error[b-qfty9g9gst] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.result-stat.warning[b-qfty9g9gst] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.stat-num[b-qfty9g9gst] {
    font-size: 28px;
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* FOOTER                                                              */
/* ═══════════════════════════════════════════════════════════════════ */

.selection-info[b-qfty9g9gst] {
    font-size: 13px;
    color: var(--text-muted);
    margin-right: 8px;
}

.product-nav-buttons[b-qfty9g9gst] {
    display: flex;
    gap: 8px;
    margin-right: 16px;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* EMPTY STATE & LOADING                                               */
/* ═══════════════════════════════════════════════════════════════════ */

.wizard-loading[b-qfty9g9gst] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 60px 20px;
    min-height: 400px;
}

.wizard-loading .spinner[b-qfty9g9gst] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--bg-input);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-qfty9g9gst 1s linear infinite;
}

.wizard-loading span[b-qfty9g9gst] {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
    text-align: center;
}

@keyframes spin-b-qfty9g9gst {
    to { transform: rotate(360deg); }
}

.empty-state[b-qfty9g9gst] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    color: var(--text-muted);
    font-size: 14px;
}

.import-progress-info[b-qfty9g9gst] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 400px;
    max-width: 90%;
    margin-top: 20px;
    padding: 20px;
    background: var(--bg-card);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.progress-bar-container[b-qfty9g9gst] {
    width: 100%;
    height: 12px;
    background: var(--bg-input);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.progress-bar[b-qfty9g9gst] {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    transition: width 0.3s ease;
    position: relative;
}

.progress-bar[b-qfty9g9gst]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    animation: shimmer-b-qfty9g9gst 2s infinite;
}

@keyframes shimmer-b-qfty9g9gst {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.import-count[b-qfty9g9gst] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
}

.import-count[b-qfty9g9gst]::before {
    content: '📦 ';
}

/* ═══════════════════════════════════════════════════════════════════ */
/* RESPONSIVE                                                          */
/* ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 1000px) {
    .detail-layout[b-qfty9g9gst] {
        flex-direction: column;
    }

    .variants-section[b-qfty9g9gst] {
        flex: 1;
        min-height: 0;
    }

    .product-details-row[b-qfty9g9gst] {
        flex-direction: column;
        gap: 12px;
    }

    .product-details-row .editable-field.flex-2[b-qfty9g9gst],
    .product-details-row .editable-field.compact[b-qfty9g9gst] {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 800px) {
    .wizard-steps[b-qfty9g9gst] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .step-line[b-qfty9g9gst] {
        display: none;
    }

    .step-label[b-qfty9g9gst] {
        display: none;
    }

    .settings-grid[b-qfty9g9gst] {
        grid-template-columns: 1fr;
    }

    .settings-row[b-qfty9g9gst] {
        flex-direction: column;
        gap: 16px;
    }

    .summary-grid[b-qfty9g9gst] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .product-header-row[b-qfty9g9gst] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .product-info-fields[b-qfty9g9gst] {
        width: 100%;
    }

    .brand-inline[b-qfty9g9gst] {
        justify-content: center;
        flex-wrap: wrap;
    }

    .attribute-modal[b-qfty9g9gst] {
        width: 95vw;
    }

    .result-stats[b-qfty9g9gst] {
        flex-direction: column;
    }

    .product-nav-buttons[b-qfty9g9gst] {
        display: none;
    }

    .bulk-action-toolbar[b-qfty9g9gst] {
        flex-direction: column;
        align-items: stretch;
    }

    .bulk-action-controls[b-qfty9g9gst] {
        flex-direction: column;
    }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* DIM VALUE BUTTON & MODAL                                            */
/* ═══════════════════════════════════════════════════════════════════ */

.dim-value-btn[b-qfty9g9gst] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--bg-input);
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.dim-value-btn:hover[b-qfty9g9gst] {
    background: var(--bg-card);
    border-color: var(--border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.dim-value-btn.main-dim[b-qfty9g9gst] {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
    font-weight: 500;
}

.dim-value-btn.main-dim:hover[b-qfty9g9gst] {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.3);
}

.dim-value-btn.mapped[b-qfty9g9gst] {
    border-color: rgba(16, 185, 129, 0.3);
}

.dim-value-btn.mapped .check-icon[b-qfty9g9gst] {
    color: #10b981;
}

.dim-value.empty[b-qfty9g9gst] {
    padding: 4px 10px;
    color: var(--text-muted);
    font-size: 12px;
}

.dim-value-btn.empty-dim[b-qfty9g9gst] {
    background: rgba(245, 158, 11, 0.1);
    border: 1px dashed rgba(245, 158, 11, 0.4);
    color: #f59e0b;
}

.dim-value-btn.empty-dim:hover[b-qfty9g9gst] {
    background: rgba(245, 158, 11, 0.15);
    border-color: #f59e0b;
}

.dim-value-btn.empty-dim.main-dim[b-qfty9g9gst] {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.4);
    color: #8b5cf6;
}

.dim-value-btn.empty-dim.main-dim:hover[b-qfty9g9gst] {
    background: rgba(139, 92, 246, 0.15);
    border-color: #8b5cf6;
}

.dim-value-btn .empty-label[b-qfty9g9gst] {
    font-style: italic;
    font-size: 11px;
}

/* Dim Value Modal Content */
.dim-value-modal-content[b-qfty9g9gst] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dim-value-header[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dim-type-badge[b-qfty9g9gst] {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.dim-type-badge.main[b-qfty9g9gst] {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.dim-type-badge.secondary[b-qfty9g9gst] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.variant-count-info[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

.readonly-value.highlighted[b-qfty9g9gst] {
    background: var(--bg-input);
    border: 1px solid var(--border);
    font-weight: 500;
}

.mapping-preview[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13px;
}

.mapping-preview.success[b-qfty9g9gst] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.mapping-preview svg[b-qfty9g9gst] {
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* NEW FEATURES: Required fields, VAT, Description, Variants, etc.     */
/* ═══════════════════════════════════════════════════════════════════ */

/* Required Field Indicator */
.editable-field.required label[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.required-mark[b-qfty9g9gst] {
    color: #ef4444;
    font-weight: bold;
}

.validation-error[b-qfty9g9gst] {
    font-size: 11px;
    color: #ef4444;
    margin-top: 4px;
}

/* KDV Controls Row */
.editable-field-row[b-qfty9g9gst] {
    display: flex;
    gap: 16px;
    align-items: flex-end;
}

.editable-field.compact[b-qfty9g9gst] {
    flex: 1;
}

.editable-field.compact .form-select[b-qfty9g9gst] {
    width: 100%;
    padding: 8px 12px;
    font-size: 13px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
}

.editable-field.compact .form-select:focus[b-qfty9g9gst] {
    outline: none;
    border-color: #3b82f6;
}

.switch-label[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px 12px;
    background: var(--bg-input);
    border-radius: 6px;
    font-size: 13px;
    transition: all 0.15s ease;
}

.switch-label:hover[b-qfty9g9gst] {
    background: var(--bg-card);
}

.switch-label input[type="checkbox"][b-qfty9g9gst] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Toggle Switch */
.switch[b-qfty9g9gst] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.switch input[b-qfty9g9gst] {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch .slider[b-qfty9g9gst] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border);
    transition: 0.2s;
    border-radius: 24px;
}

.switch .slider[b-qfty9g9gst]:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.2s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.switch input:checked + .slider[b-qfty9g9gst] {
    background-color: #22c55e;
}

.switch input:checked + .slider[b-qfty9g9gst]:before {
    transform: translateX(20px);
}

.switch input:focus + .slider[b-qfty9g9gst] {
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
}

/* Product Info Tabs */
.product-info-tabs[b-qfty9g9gst] {
    margin: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-card);
    flex-shrink: 0;
}

.product-info-tabs .tab-header[b-qfty9g9gst] {
    display: flex;
    gap: 0;
    background: var(--bg-input);
    border-bottom: 1px solid var(--border);
}

.product-info-tabs .tab-btn[b-qfty9g9gst] {
    padding: 10px 20px;
    background: transparent;
    border: none;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.product-info-tabs .tab-btn:hover[b-qfty9g9gst] {
    color: var(--text-primary);
    background: var(--bg-card);
}

.product-info-tabs .tab-btn.active[b-qfty9g9gst] {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
    background: var(--bg-card);
}

.product-info-tabs .tab-content[b-qfty9g9gst] {
    padding: 0;
}

.product-info-tabs .tab-content .grid-header-fields[b-qfty9g9gst] {
    margin: 0;
    padding: 16px;
    border: none;
    border-radius: 0;
}

.description-tab-content[b-qfty9g9gst] {
    padding: 16px;
}

.description-tab-content[b-qfty9g9gst]  .rich-editor-container {
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}

.description-tab-content[b-qfty9g9gst]  .editor-content {
    min-height: 200px;
    max-height: 300px;
    overflow-y: auto;
}

/* Description Section */
.description-section[b-qfty9g9gst] {
    margin: 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.description-section details[b-qfty9g9gst] {
    background: var(--bg-card);
}

.description-section summary[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-input);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    user-select: none;
    transition: background 0.15s ease;
}

.description-section summary:hover[b-qfty9g9gst] {
    background: var(--bg-card);
}

.description-section summary svg[b-qfty9g9gst] {
    transition: transform 0.2s ease;
    color: var(--text-muted);
}

.description-section details[open] summary svg[b-qfty9g9gst] {
    transform: rotate(180deg);
}

.description-content[b-qfty9g9gst] {
    padding: 16px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
    max-height: 200px;
    overflow-y: auto;
    border-top: 1px solid var(--border);
}

/* Variant Checkbox */
.variant-checkbox[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.variant-checkbox input[b-qfty9g9gst] {
    display: none;
}

.variant-checkbox .checkmark[b-qfty9g9gst] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-radius: 4px;
    background: var(--bg-card);
    position: relative;
    transition: all 0.15s ease;
}

.variant-checkbox input:checked + .checkmark[b-qfty9g9gst] {
    background: var(--primary);
    border-color: var(--primary);
}

.variant-checkbox input:checked + .checkmark[b-qfty9g9gst]::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Variant Card Deselected State */
.variant-card.deselected[b-qfty9g9gst] {
    opacity: 0.5;
    background: var(--bg-input);
}

.variant-card.deselected .variant-card-header[b-qfty9g9gst] {
    background: rgba(107, 114, 128, 0.1);
}

/* Variants Header Enhanced */
.variants-header[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-input);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.variants-title-section[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.variants-actions[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-link[b-qfty9g9gst] {
    background: none;
    border: none;
    color: #3b82f6;
    font-size: 12px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.btn-link:hover[b-qfty9g9gst] {
    background: rgba(59, 130, 246, 0.1);
    text-decoration: none;
}

.action-divider[b-qfty9g9gst] {
    color: var(--border);
    font-size: 12px;
}

/* Variants Warning */
.variants-warning[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    margin: 0 12px 8px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 6px;
    font-size: 12px;
    color: #ef4444;
    flex-shrink: 0;
}

/* Apply to All Section */
.apply-to-all-section[b-qfty9g9gst] {
    margin-top: 16px;
    padding: 12px 16px;
    background: rgba(59, 130, 246, 0.05);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 6px;
}

.apply-to-all-checkbox[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #3b82f6;
}

.apply-to-all-checkbox input[type="checkbox"][b-qfty9g9gst] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.apply-to-all-hint[b-qfty9g9gst] {
    display: block;
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-muted);
    padding-left: 26px;
}

/* Platform Value Display */
.platform-value[b-qfty9g9gst] {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 4px;
}

.platform-hint[b-qfty9g9gst] {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: normal;
    margin-left: 4px;
}

/* Readonly Field */
.readonly-field[b-qfty9g9gst] {
    padding: 8px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-primary);
}

.readonly-field .text-muted[b-qfty9g9gst] {
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════ */
/* BRAND SECTION                                                        */
/* ═══════════════════════════════════════════════════════════════════ */

.brand-section[b-qfty9g9gst] {
    padding: 16px;
    border-bottom: 1px solid var(--border);
}

.brand-section .section-header[b-qfty9g9gst] {
    margin-bottom: 10px;
}

.brand-section .section-header h4[b-qfty9g9gst] {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.brand-item[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-input);
    border-radius: 8px;
    border-left: 3px solid transparent;
    transition: all 0.15s ease;
}

.brand-item:hover[b-qfty9g9gst] {
    background: var(--bg-card);
}

.brand-item.mapped[b-qfty9g9gst] {
    border-left-color: #10b981;
}

.brand-item.create[b-qfty9g9gst] {
    border-left-color: #3b82f6;
}

.brand-item.unmapped[b-qfty9g9gst] {
    border-left-color: #f59e0b;
    background: rgba(245, 158, 11, 0.05);
}

.brand-info[b-qfty9g9gst] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.brand-value[b-qfty9g9gst] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brand-mapping[b-qfty9g9gst] {
    font-size: 12px;
    color: var(--text-muted);
}

.brand-mapping.matched[b-qfty9g9gst] {
    color: #10b981;
}

.brand-mapping.unmapped[b-qfty9g9gst] {
    color: #f59e0b;
}

.brand-edit-btn[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.brand-edit-btn:hover[b-qfty9g9gst] {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* ATTRIBUTES INFO BANNER                                               */
/* ═══════════════════════════════════════════════════════════════════ */

.attributes-info-banner[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin: 16px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 8px;
    font-size: 13px;
    color: #3b82f6;
}

.attributes-info-banner svg[b-qfty9g9gst] {
    flex-shrink: 0;
    color: #3b82f6;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* DUPLICATE PRODUCTS PANEL                                            */
/* ═══════════════════════════════════════════════════════════════════ */

.duplicate-alert[b-qfty9g9gst] {
    margin-bottom: 16px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(139, 92, 246, 0.04) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: var(--radius);
    overflow: hidden;
}

.duplicate-alert-header[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.duplicate-alert-header:hover[b-qfty9g9gst] {
    background: rgba(139, 92, 246, 0.05);
}

.duplicate-alert .alert-icon[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(139, 92, 246, 0.15);
    border-radius: 8px;
    color: #8b5cf6;
    flex-shrink: 0;
}

.duplicate-alert .alert-content[b-qfty9g9gst] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.duplicate-alert .alert-content strong[b-qfty9g9gst] {
    font-size: 14px;
    color: var(--text-primary);
}

.duplicate-alert .alert-subtitle[b-qfty9g9gst] {
    font-size: 12px;
    color: var(--text-muted);
}

.duplicate-alert .alert-toggle[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.duplicate-alert .alert-toggle:hover[b-qfty9g9gst] {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.duplicate-alert .alert-toggle svg[b-qfty9g9gst] {
    transition: transform 0.2s ease;
}

.duplicate-alert .alert-toggle svg.rotated[b-qfty9g9gst] {
    transform: rotate(180deg);
}

/* Duplicate Groups Container */
.duplicate-groups[b-qfty9g9gst] {
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 300px;
    overflow-y: auto;
}

/* Individual Duplicate Group Card */
.duplicate-group-card[b-qfty9g9gst] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.duplicate-group-card .group-header[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-input);
    border-bottom: 1px solid var(--border);
}

.duplicate-group-card .group-title[b-qfty9g9gst] {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.duplicate-group-card .group-count[b-qfty9g9gst] {
    font-size: 11px;
    color: var(--text-muted);
    padding: 2px 8px;
    background: var(--bg-card);
    border-radius: 10px;
}

.duplicate-group-card .btn-dissolve[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.duplicate-group-card .btn-dissolve:hover[b-qfty9g9gst] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Group Products List */
.group-products[b-qfty9g9gst] {
    display: flex;
    flex-direction: column;
}

.group-product[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s ease;
}

.group-product:last-child[b-qfty9g9gst] {
    border-bottom: none;
}

.group-product:hover[b-qfty9g9gst] {
    background: var(--bg-input);
}

.group-product.is-primary[b-qfty9g9gst] {
    background: rgba(16, 185, 129, 0.05);
}

.group-product.is-duplicate[b-qfty9g9gst] {
    opacity: 0.85;
}

/* Radio Button for Primary Selection */
.group-product .product-select[b-qfty9g9gst] {
    flex-shrink: 0;
}

.group-product .radio-label[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.group-product .radio-label input[type="radio"][b-qfty9g9gst] {
    display: none;
}

.group-product .radio-mark[b-qfty9g9gst] {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-radius: 50%;
    position: relative;
    transition: all 0.15s ease;
}

.group-product .radio-label input[type="radio"]:checked + .radio-mark[b-qfty9g9gst] {
    border-color: #10b981;
    background: #10b981;
}

.group-product .radio-label input[type="radio"]:checked + .radio-mark[b-qfty9g9gst]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
}

/* Product Thumbnail */
.group-product .product-thumb-sm[b-qfty9g9gst] {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-input);
    flex-shrink: 0;
}

.group-product .product-thumb-sm img[b-qfty9g9gst] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Product Details */
.group-product .product-details[b-qfty9g9gst] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.group-product .product-name[b-qfty9g9gst] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.group-product .product-meta[b-qfty9g9gst] {
    font-size: 11px;
    color: var(--text-muted);
}

/* Product Status */
.group-product .product-status[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.group-product .badge[b-qfty9g9gst] {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.group-product .badge-primary[b-qfty9g9gst] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.group-product .badge-secondary[b-qfty9g9gst] {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.group-product .btn-remove[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.group-product .btn-remove:hover[b-qfty9g9gst] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* VARYANT SEVİYESİ DUPLİKE PANELİ                                     */
/* ═══════════════════════════════════════════════════════════════════ */

.variant-duplicate-alert[b-qfty9g9gst] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.03));
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
}

.variant-duplicate-alert .duplicate-alert-header[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.variant-duplicate-alert .duplicate-alert-header:hover[b-qfty9g9gst] {
    background: rgba(245, 158, 11, 0.05);
}

.variant-duplicate-alert .alert-icon[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(245, 158, 11, 0.15);
    border-radius: 10px;
    color: #f59e0b;
    flex-shrink: 0;
}

.variant-duplicate-alert .alert-content[b-qfty9g9gst] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.variant-duplicate-alert .alert-content strong[b-qfty9g9gst] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.variant-duplicate-alert .alert-subtitle[b-qfty9g9gst] {
    font-size: 12px;
    color: var(--text-muted);
}

.variant-duplicate-alert .alert-toggle[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.variant-duplicate-alert .alert-toggle:hover[b-qfty9g9gst] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.variant-duplicate-alert .alert-toggle svg[b-qfty9g9gst] {
    transition: transform 0.2s ease;
}

.variant-duplicate-alert .alert-toggle svg.rotated[b-qfty9g9gst] {
    transform: rotate(180deg);
}

.variant-duplicate-groups[b-qfty9g9gst] {
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
}

.product-variant-duplicates[b-qfty9g9gst] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
}

.product-variant-duplicates .product-header[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.product-variant-duplicates .product-thumb[b-qfty9g9gst] {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.product-variant-duplicates .product-title[b-qfty9g9gst] {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-variant-duplicates .group-count[b-qfty9g9gst] {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg-input);
    padding: 3px 8px;
    border-radius: 10px;
}

.dimension-groups[b-qfty9g9gst] {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dimension-group[b-qfty9g9gst] {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 10px;
}

.dimension-group .dimension-label[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.dimension-group .dimension-label strong[b-qfty9g9gst] {
    font-size: 12px;
    color: var(--text-primary);
}

.dimension-group .variant-count[b-qfty9g9gst] {
    font-size: 11px;
    color: var(--text-muted);
}

.variant-options[b-qfty9g9gst] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.variant-option[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.variant-option:hover[b-qfty9g9gst] {
    border-color: rgba(245, 158, 11, 0.3);
}

.variant-option.is-primary[b-qfty9g9gst] {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.05);
}

.variant-option.is-duplicate[b-qfty9g9gst] {
    opacity: 0.85;
}

.variant-option input[type="radio"][b-qfty9g9gst] {
    width: 16px;
    height: 16px;
    accent-color: #10b981;
    flex-shrink: 0;
}

.variant-option .variant-info[b-qfty9g9gst] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.variant-option .barcode[b-qfty9g9gst] {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    font-family: monospace;
}

.variant-option .variant-stats[b-qfty9g9gst] {
    display: flex;
    gap: 8px;
}

.variant-option .stat[b-qfty9g9gst] {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
}

.variant-option .stat.good[b-qfty9g9gst] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.variant-option .stat.warning[b-qfty9g9gst] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.variant-option .stat.danger[b-qfty9g9gst] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.variant-option .badge[b-qfty9g9gst] {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.variant-option .badge-success[b-qfty9g9gst] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.variant-option .badge-secondary[b-qfty9g9gst] {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* VARYANT DUPLİKE PANELİ - INLINE (Ürün Detay İçinde)                */
/* ═══════════════════════════════════════════════════════════════════ */

.variant-duplicate-alert-inline[b-qfty9g9gst] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.03));
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 10px;
    margin-bottom: 12px;
    padding: 12px;
}

.alert-header-inline[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.alert-header-inline .alert-icon[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(245, 158, 11, 0.15);
    border-radius: 8px;
    color: #f59e0b;
    flex-shrink: 0;
}

.alert-header-inline .alert-text[b-qfty9g9gst] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.alert-header-inline .alert-text strong[b-qfty9g9gst] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.alert-header-inline .alert-text span[b-qfty9g9gst] {
    font-size: 11px;
    color: var(--text-muted);
}

.duplicate-groups-inline[b-qfty9g9gst] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dup-group-inline[b-qfty9g9gst] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
}

.dup-group-label[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--border-color);
}

.dup-group-label strong[b-qfty9g9gst] {
    font-size: 12px;
    color: var(--text-primary);
}

.dup-count[b-qfty9g9gst] {
    font-size: 10px;
    color: var(--text-muted);
    background: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: 8px;
}

.dup-options[b-qfty9g9gst] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dup-option[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 12px;
}

.dup-option:hover[b-qfty9g9gst] {
    border-color: rgba(245, 158, 11, 0.4);
}

.dup-option.primary[b-qfty9g9gst] {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.08);
}

.dup-option input[type="radio"][b-qfty9g9gst] {
    width: 14px;
    height: 14px;
    accent-color: #10b981;
    flex-shrink: 0;
    margin: 0;
}

.dup-barcode[b-qfty9g9gst] {
    font-family: monospace;
    font-weight: 500;
    color: var(--text-primary);
}

.dup-stat[b-qfty9g9gst] {
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 4px;
}

.dup-stat.good[b-qfty9g9gst] {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.dup-stat.warn[b-qfty9g9gst] {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}

.dup-stat.danger[b-qfty9g9gst] {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.dup-badge[b-qfty9g9gst] {
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.dup-badge.badge-primary[b-qfty9g9gst] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.dup-badge.badge-alt[b-qfty9g9gst] {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* PRODUCT LIST DUPLICATE PANEL                                                     */
/* ═══════════════════════════════════════════════════════════════════════════════ */

.variant-cell[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
}

.duplicate-indicator[b-qfty9g9gst] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: none;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.duplicate-indicator:hover[b-qfty9g9gst] {
    background: rgba(245, 158, 11, 0.25);
    transform: scale(1.05);
}

.duplicate-indicator svg[b-qfty9g9gst] {
    flex-shrink: 0;
}

.duplicate-panel-row[b-qfty9g9gst] {
    background: rgba(245, 158, 11, 0.03) !important;
}

.duplicate-panel-row:hover[b-qfty9g9gst] {
    background: rgba(245, 158, 11, 0.05) !important;
}

.duplicate-panel-row td[b-qfty9g9gst] {
    padding: 0 !important;
}

.duplicate-panel[b-qfty9g9gst] {
    padding: 12px 16px;
    border-top: 1px solid rgba(245, 158, 11, 0.2);
}

.duplicate-panel-header[b-qfty9g9gst] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-bottom: 12px;
}

.duplicate-panel-header .panel-title[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #f59e0b;
}

.duplicate-panel-header .panel-info[b-qfty9g9gst] {
    font-size: 11px;
    color: var(--text-secondary);
    flex: 1;
}

.btn-recalculate[b-qfty9g9gst] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-recalculate:hover[b-qfty9g9gst] {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.3);
}

.btn-recalculate svg[b-qfty9g9gst] {
    flex-shrink: 0;
}

.duplicate-groups[b-qfty9g9gst] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.duplicate-group[b-qfty9g9gst] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    background: var(--surface-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-primary);
}

.group-dimension[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.group-dimension .dim-label[b-qfty9g9gst] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    padding: 2px 8px;
    background: rgba(139, 92, 246, 0.12);
    border-radius: 4px;
}

.group-dimension .variant-count[b-qfty9g9gst] {
    font-size: 10px;
    color: var(--text-secondary);
}

.group-variants[b-qfty9g9gst] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dup-variant[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--surface-tertiary);
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}

.dup-variant:hover[b-qfty9g9gst] {
    border-color: var(--border-secondary);
    background: var(--surface-hover);
}

.dup-variant.primary[b-qfty9g9gst] {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.08);
}

.dup-variant .variant-info[b-qfty9g9gst] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.dup-variant .barcode[b-qfty9g9gst] {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.dup-variant .sku[b-qfty9g9gst] {
    font-size: 10px;
    color: var(--text-secondary);
}

.dup-variant .variant-stats[b-qfty9g9gst] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.dup-variant .price[b-qfty9g9gst] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.dup-variant .qty[b-qfty9g9gst] {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 10px;
}

.dup-variant .qty.in-stock[b-qfty9g9gst] {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.dup-variant .qty.out-of-stock[b-qfty9g9gst] {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.suggested-badge[b-qfty9g9gst] {
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border-radius: 4px;
    text-transform: uppercase;
}

/* Custom radio for duplicate variants */
.custom-radio[b-qfty9g9gst] {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.custom-radio input[type="radio"][b-qfty9g9gst] {
    display: none;
}

.radiomark[b-qfty9g9gst] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-secondary);
    border-radius: 50%;
    transition: all 0.15s ease;
    position: relative;
}

.custom-radio input[type="radio"]:checked + .radiomark[b-qfty9g9gst] {
    border-color: #10b981;
}

.custom-radio input[type="radio"]:checked + .radiomark[b-qfty9g9gst]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
}
/* /Components/Pages/Products/CdnImageUploadModal.razor.rz.scp.css */
.cdn-upload-modal[b-c9p7g7ry6r] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cdn-upload-info[b-c9p7g7ry6r] {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
}

.cdn-upload-stats[b-c9p7g7ry6r] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

    .cdn-upload-stats .stat-card[b-c9p7g7ry6r] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        padding: 1rem 0.75rem;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius);
    }

    .cdn-upload-stats .stat-card .stat-value[b-c9p7g7ry6r] {
        font-size: 1.5rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .cdn-upload-stats .stat-card .stat-label[b-c9p7g7ry6r] {
        font-size: 0.75rem;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

.cdn-upload-summary[b-c9p7g7ry6r] {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.cdn-upload-loading[b-c9p7g7ry6r] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.cdn-upload-spinner[b-c9p7g7ry6r] {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: cdn-upload-spin-b-c9p7g7ry6r 0.8s linear infinite;
}

@keyframes cdn-upload-spin-b-c9p7g7ry6r {
    to {
        transform: rotate(360deg);
    }
}
/* /Components/Pages/Products/CdnOrphanCleanupModal.razor.rz.scp.css */
.cdn-cleanup-modal[b-3j7oyvbxns] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cdn-cleanup-info[b-3j7oyvbxns] {
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.5;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
}

    .cdn-cleanup-info code[b-3j7oyvbxns] {
        background: var(--bg-card);
        padding: 0.1rem 0.35rem;
        border-radius: 0.25rem;
        font-size: 0.85em;
        border: 1px solid var(--border);
    }

.cdn-cleanup-safety[b-3j7oyvbxns] {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.5;
}

    .cdn-cleanup-safety ul[b-3j7oyvbxns] {
        margin: 0.5rem 0 0;
        padding-left: 1.25rem;
    }

    .cdn-cleanup-safety li + li[b-3j7oyvbxns] {
        margin-top: 0.25rem;
    }

.cdn-cleanup-warning[b-3j7oyvbxns] {
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.4;
    padding: 0 0.25rem;
}
/* /Components/Pages/Products/MarketplaceUpdateModal.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════ */
/* WIZARD LAYOUT — sabit yükseklik (sekme geçişlerinde zıplama önleme)  */
/* ═══════════════════════════════════════════════════════════════════ */

/* Body sabit yükseklik: 50vh. Step içeriği bunun içinde scroll'lanır.
   Sekme arası geçişte modal boyutu sabit kalır, kullanıcı zıplama görmez. */
.wizard-body[b-riec8dj0rq] {
    height: 50vh;
    overflow-y: auto;
    padding: 16px 0;
}

.wizard-step-content[b-riec8dj0rq] {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Store Selection */
.store-selection-list[b-riec8dj0rq] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.store-card[b-riec8dj0rq] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition);
}

.store-card:hover:not(.disabled)[b-riec8dj0rq] {
    border-color: var(--primary);
    background: var(--bg-card-hover);
}

/* Seçili durumun belirgin görselleri: kalın primary border + halo (outline) + sol şerit + hafif bg.
   Memory: kanonik tema değişkenleri (--primary, --bg-card-hover) — dark mode'da da görünür. */
.store-card.selected[b-riec8dj0rq] {
    border-color: var(--primary);
    background: var(--bg-card-hover);
    box-shadow: 0 0 0 1px var(--primary), 0 4px 12px var(--primary-alpha);
    position: relative;
}

.store-card.selected[b-riec8dj0rq]::before {
    content: "";
    position: absolute;
    left: -1px;
    top: -1px;
    bottom: -1px;
    width: 4px;
    background: var(--primary);
    border-top-left-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
}

.store-card.disabled[b-riec8dj0rq] {
    opacity: 0.6;
    cursor: not-allowed;
}

.store-select-indicator[b-riec8dj0rq] {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-muted);
    transition: var(--transition);
}

.store-card.selected .store-select-indicator[b-riec8dj0rq] {
    border-color: var(--primary);
    background: var(--primary);
    color: #ffffff;
}

.store-icon[b-riec8dj0rq] {
    width: 40px;
    height: 40px;
    border-radius: 0.5rem;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.store-details[b-riec8dj0rq] {
    flex: 1;
    min-width: 0;
}

.store-name[b-riec8dj0rq] {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.store-meta[b-riec8dj0rq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.platform-name[b-riec8dj0rq] {
    color: var(--text-secondary);
}

.listing-badge .approved[b-riec8dj0rq] {
    color: var(--success-color);
    font-size: 0.75rem;
    font-weight: 500;
}

.listing-badge .pending[b-riec8dj0rq] {
    color: var(--warning-color);
    font-size: 0.75rem;
    font-weight: 500;
}

.no-listing[b-riec8dj0rq] {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.store-warning[b-riec8dj0rq] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: var(--warning-bg);
    color: var(--warning-color);
    border-radius: 0.25rem;
    font-size: 0.75rem;
}

/* Preview Stats */
.preview-stats-bar[b-riec8dj0rq] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.stat-chip[b-riec8dj0rq] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
}

.stat-chip.ready[b-riec8dj0rq] {
    background: var(--success-bg);
    color: var(--success-color);
}

.stat-chip.warning[b-riec8dj0rq] {
    background: var(--warning-bg);
    color: var(--warning-color);
}

/* Preview Warnings */
.preview-warnings[b-riec8dj0rq] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--warning-bg);
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.warning-item[b-riec8dj0rq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--warning-color);
    font-size: 0.875rem;
}

/* Preview Product List */
.preview-product-list[b-riec8dj0rq] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 400px;
    overflow-y: auto;
}

.preview-product-card[b-riec8dj0rq] {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    align-items: center;
}

.preview-product-card.not-ready[b-riec8dj0rq] {
    opacity: 0.7;
    background: var(--bg-tertiary);
}

.preview-product-card .product-image[b-riec8dj0rq] {
    width: 60px;
    height: 60px;
    border-radius: 0.375rem;
    overflow: hidden;
    background: var(--bg-tertiary);
}

.preview-product-card .product-image img[b-riec8dj0rq] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-product-card .no-image[b-riec8dj0rq] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.preview-product-card .product-info[b-riec8dj0rq] {
    min-width: 0;
}

.preview-product-card .product-title[b-riec8dj0rq] {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preview-product-card .product-meta[b-riec8dj0rq] {
    display: flex;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.preview-product-card .product-mapping-status[b-riec8dj0rq] {
    display: flex;
    gap: 0.75rem;
    font-size: 0.75rem;
}

.preview-product-card .attr-count[b-riec8dj0rq] {
    color: var(--text-secondary);
}

.preview-product-card .content-id[b-riec8dj0rq] {
    color: var(--primary-color);
    font-family: var(--font-mono);
}

.product-status[b-riec8dj0rq] {
    flex-shrink: 0;
}

.status-badge[b-riec8dj0rq] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-badge.ready[b-riec8dj0rq] {
    background: var(--success-bg);
    color: var(--success-color);
}

.status-badge.not-ready[b-riec8dj0rq] {
    background: var(--warning-bg);
    color: var(--warning-color);
}

.product-issues[b-riec8dj0rq] {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
    margin-top: 0.5rem;
}

.issue-tag[b-riec8dj0rq] {
    font-size: 0.7rem;
    padding: 0.125rem 0.5rem;
    background: var(--danger-bg);
    color: var(--danger-color);
    border-radius: 9999px;
}

/* Result Step */
.step-result[b-riec8dj0rq] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.result-container[b-riec8dj0rq] {
    text-align: center;
    max-width: 400px;
}

.result-icon[b-riec8dj0rq] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.result-icon.success[b-riec8dj0rq] {
    background: var(--success-bg);
    color: var(--success-color);
}

.result-icon.failure[b-riec8dj0rq] {
    background: var(--danger-bg);
    color: var(--danger-color);
}

.result-container h3[b-riec8dj0rq] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.result-container p[b-riec8dj0rq] {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.result-stats[b-riec8dj0rq] {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.result-stat[b-riec8dj0rq] {
    text-align: center;
}

.result-stat .stat-value[b-riec8dj0rq] {
    display: block;
    font-size: 2rem;
    font-weight: 700;
}

.result-stat.success .stat-value[b-riec8dj0rq] {
    color: var(--success-color);
}

.result-stat.failure .stat-value[b-riec8dj0rq] {
    color: var(--danger-color);
}

.result-stat .stat-label[b-riec8dj0rq] {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.batch-info[b-riec8dj0rq] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--bg-secondary);
    border-radius: 0.5rem;
    font-size: 0.875rem;
}

.batch-info code[b-riec8dj0rq] {
    font-family: var(--font-mono);
    color: var(--primary-color);
}

.result-errors[b-riec8dj0rq] {
    margin-top: 1.5rem;
    text-align: left;
    padding: 1rem;
    background: var(--danger-bg);
    border-radius: 0.5rem;
}

.result-errors h4[b-riec8dj0rq] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--danger-color);
    margin-bottom: 0.75rem;
}

.error-item[b-riec8dj0rq] {
    display: flex;
    justify-content: space-between;
    padding: 0.375rem 0;
    font-size: 0.8rem;
    border-bottom: 1px solid var(--border-color);
}

.error-item:last-child[b-riec8dj0rq] {
    border-bottom: none;
}

.error-barcode[b-riec8dj0rq] {
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.error-message[b-riec8dj0rq] {
    color: var(--danger-color);
}

/* Empty State */
.empty-state[b-riec8dj0rq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--text-muted);
}

.empty-state svg[b-riec8dj0rq] {
    margin-bottom: 1rem;
}

.empty-state p[b-riec8dj0rq] {
    font-size: 0.875rem;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* YENİ — UX REDESIGN                                                  */
/* ═══════════════════════════════════════════════════════════════════ */

/* Inline loading — modal'ın body kısmında, stepper/footer açık kalsın */
.wizard-inline-loading[b-riec8dj0rq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 24px;
    color: var(--text-secondary);
}

.wizard-inline-loading .spinner[b-riec8dj0rq] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-riec8dj0rq 0.8s linear infinite;
}

@keyframes spin-b-riec8dj0rq {
    to { transform: rotate(360deg); }
}

/* Empty state inline (tab/filter sonucu boş olduğunda) */
.empty-state-inline[b-riec8dj0rq] {
    padding: 32px 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

/* Step 1 — Mağaza arama */
.store-search-wrapper[b-riec8dj0rq] {
    position: relative;
    margin-bottom: 12px;
}

.store-search-icon[b-riec8dj0rq] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.store-search-input[b-riec8dj0rq] {
    width: 100%;
    padding: 9px 12px 9px 36px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
}

.store-search-input:focus[b-riec8dj0rq] {
    outline: none;
    border-color: var(--primary);
}

/* Tek mağaza otomatik seçim ipucu */
.auto-select-hint[b-riec8dj0rq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: var(--radius-sm);
    color: #10b981;
    font-size: 12px;
    margin-bottom: 12px;
}

/* Step 2 — Sticky summary bar */
.preview-summary-sticky[b-riec8dj0rq] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-card);
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}

.preview-stats-bar .stat-chip[b-riec8dj0rq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    margin-right: 8px;
}

.preview-stats-bar .stat-chip strong[b-riec8dj0rq] {
    font-size: 14px;
}

.preview-stats-bar .stat-chip.total[b-riec8dj0rq] {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

.preview-stats-bar .stat-chip.ready[b-riec8dj0rq] {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #10b981;
}

.preview-stats-bar .stat-chip.warning[b-riec8dj0rq] {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #f59e0b;
}

.preview-stats-bar .stat-chip.muted[b-riec8dj0rq] {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-muted);
}

/* Step 2 — Filter tab'ları */
.preview-filter-tabs[b-riec8dj0rq] {
    display: flex;
    gap: 4px;
    margin-top: 10px;
}

.preview-filter-tabs .filter-tab[b-riec8dj0rq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
}

.preview-filter-tabs .filter-tab:hover:not(:disabled)[b-riec8dj0rq] {
    border-color: var(--border-hover);
    color: var(--text-primary);
}

.preview-filter-tabs .filter-tab.active[b-riec8dj0rq] {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.preview-filter-tabs .filter-tab:disabled[b-riec8dj0rq] {
    opacity: 0.4;
    cursor: not-allowed;
}

.preview-filter-tabs .filter-tab .count[b-riec8dj0rq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    background: var(--bg-input);
    border-radius: 9px;
    font-size: 11px;
    font-weight: 600;
}

.preview-filter-tabs .filter-tab.active .count[b-riec8dj0rq] {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* Step 2 — Per-ürün exclude checkbox */
.product-exclude-toggle[b-riec8dj0rq] {
    display: inline-flex;
    align-items: center;
    padding: 0 8px 0 0;
    cursor: pointer;
}

.product-exclude-toggle input[type="checkbox"][b-riec8dj0rq] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary);
}

.product-exclude-toggle input[type="checkbox"]:disabled[b-riec8dj0rq] {
    cursor: not-allowed;
}

.preview-product-card.excluded[b-riec8dj0rq] {
    opacity: 0.5;
    background: var(--bg-input);
}

.pending-tag[b-riec8dj0rq] {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 10px;
    font-size: 11px;
    color: #f59e0b;
}

/* Step 3 — sonuç hint + hata gruplama */
.result-hint[b-riec8dj0rq] {
    margin-top: 12px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
    max-width: 420px;
}

.error-groups[b-riec8dj0rq] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.error-group[b-riec8dj0rq] {
    padding: 10px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.error-group-header[b-riec8dj0rq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.error-code[b-riec8dj0rq] {
    padding: 2px 8px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--radius-sm);
    font-size: 11px;
    color: #ef4444;
    font-family: var(--font-mono, monospace);
}

.error-count[b-riec8dj0rq] {
    font-size: 12px;
    color: var(--text-muted);
}

.error-sample[b-riec8dj0rq] {
    font-size: 12px;
    color: var(--text-secondary);
}
/* /Components/Pages/Products/MissingAttributesWizard.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════ */
/* Missing Attributes Wizard - Step 2 Enhanced Styles                   */
/* ═══════════════════════════════════════════════════════════════════ */

/* Attribute Filter Bar */
.attribute-filter-bar[b-hi3b84g8mr] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.attribute-filter-bar .filter-label[b-hi3b84g8mr] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

.attribute-filter-bar .attribute-chips[b-hi3b84g8mr] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
}

.attribute-filter-bar .attr-chip[b-hi3b84g8mr] {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.attribute-filter-bar .attr-chip:hover[b-hi3b84g8mr] {
    border-color: var(--primary);
    color: var(--primary);
}

.attribute-filter-bar .attr-chip.active[b-hi3b84g8mr] {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* New Layout V2 */
.assign-layout-v2[b-hi3b84g8mr] {
    display: flex;
    gap: 20px;
    height: 520px;
}

/* Sidebar V2 */
.assign-sidebar-v2[b-hi3b84g8mr] {
    min-width: 280px;
    max-width: 320px;
    flex: 0 0 30%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar-header-v2[b-hi3b84g8mr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}

.sidebar-header-v2 .header-title[b-hi3b84g8mr] {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.sidebar-header-v2 .header-count[b-hi3b84g8mr] {
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg-card);
    padding: 3px 8px;
    border-radius: 12px;
}

.sidebar-list-v2[b-hi3b84g8mr] {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

/* Product Card V2 */
.product-card-v2[b-hi3b84g8mr] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    background: var(--bg-secondary);
    border: 1px solid transparent;
    border-radius: 8px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.product-card-v2:hover[b-hi3b84g8mr] {
    background: var(--bg-card);
    border-color: var(--border);
}

.product-card-v2.active[b-hi3b84g8mr] {
    background: rgba(99, 102, 241, 0.08);
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}

.product-card-v2.completed[b-hi3b84g8mr] {
    background: rgba(16, 185, 129, 0.05);
}

.product-card-v2.completed.active[b-hi3b84g8mr] {
    background: rgba(16, 185, 129, 0.1);
    border-color: #059669;
}

.product-info-v2[b-hi3b84g8mr] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.product-name-v2[b-hi3b84g8mr] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-meta-v2[b-hi3b84g8mr] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}

.product-meta-v2 .sku[b-hi3b84g8mr] {
    color: var(--text-muted);
    font-family: monospace;
}

.product-meta-v2 .category[b-hi3b84g8mr] {
    color: var(--text-secondary);
    background: var(--bg-card);
    padding: 2px 6px;
    border-radius: 4px;
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-progress-v2[b-hi3b84g8mr] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.progress-bar-v2[b-hi3b84g8mr] {
    flex: 1;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill-v2[b-hi3b84g8mr] {
    height: 100%;
    background: var(--primary);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.product-card-v2.completed .progress-fill-v2[b-hi3b84g8mr] {
    background: #059669;
}

.progress-stats-v2[b-hi3b84g8mr] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.progress-text-v2[b-hi3b84g8mr] {
    font-size: 11px;
    font-family: monospace;
    color: var(--text-muted);
}

.progress-stats-v2 .check-icon[b-hi3b84g8mr] {
    color: #059669;
}

/* Form Area V2 */
.assign-form-v2[b-hi3b84g8mr] {
    flex: 1;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.form-header-v2[b-hi3b84g8mr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
}

.form-title-v2[b-hi3b84g8mr] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.form-title-v2 .product-name[b-hi3b84g8mr] {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary);
}

.form-title-v2 .product-sku[b-hi3b84g8mr] {
    font-size: 12px;
    color: var(--text-muted);
    font-family: monospace;
    background: var(--bg-card);
    padding: 3px 8px;
    border-radius: 4px;
}

.form-stats-v2 .stat-item[b-hi3b84g8mr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}

.attributes-list-v2[b-hi3b84g8mr] {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

/* Attribute Card V2 */
.attribute-card-v2[b-hi3b84g8mr] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 12px;
    transition: all 0.15s ease;
}

.attribute-card-v2.assigned[b-hi3b84g8mr] {
    background: rgba(16, 185, 129, 0.04);
    border-color: rgba(16, 185, 129, 0.25);
}

.attr-header-v2[b-hi3b84g8mr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.attr-title-v2[b-hi3b84g8mr] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.attr-title-v2 .attr-name[b-hi3b84g8mr] {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.attr-title-v2 .required-badge[b-hi3b84g8mr] {
    color: #dc2626;
    font-weight: bold;
}

.attr-type-badge[b-hi3b84g8mr] {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    background: var(--bg-card);
    color: var(--text-secondary);
}

.attr-type-badge.select[b-hi3b84g8mr] {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
}

.attr-type-badge.text[b-hi3b84g8mr] {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.attr-type-badge.number[b-hi3b84g8mr] {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.attr-type-badge.boolean[b-hi3b84g8mr] {
    background: rgba(139, 92, 246, 0.1);
    color: #7c3aed;
}

.attr-type-badge.date[b-hi3b84g8mr] {
    background: rgba(236, 72, 153, 0.1);
    color: #db2777;
}

.apply-all-btn-v2[b-hi3b84g8mr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.apply-all-btn-v2:hover[b-hi3b84g8mr] {
    background: var(--primary-dark);
    transform: translateY(-1px);
}

.attr-input-v2[b-hi3b84g8mr] {
    margin-top: 4px;
}

.attr-input-v2 .form-input[b-hi3b84g8mr] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    background: var(--bg-card);
    transition: all 0.15s ease;
}

.attr-input-v2 .form-input:focus[b-hi3b84g8mr] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.attr-variants-info[b-hi3b84g8mr] {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-light);
    font-size: 11px;
    color: var(--text-muted);
}

/* Scrollbar Styling */
.sidebar-list-v2[b-hi3b84g8mr]::-webkit-scrollbar,
.attributes-list-v2[b-hi3b84g8mr]::-webkit-scrollbar {
    width: 6px;
}

.sidebar-list-v2[b-hi3b84g8mr]::-webkit-scrollbar-track,
.attributes-list-v2[b-hi3b84g8mr]::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-list-v2[b-hi3b84g8mr]::-webkit-scrollbar-thumb,
.attributes-list-v2[b-hi3b84g8mr]::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

.sidebar-list-v2[b-hi3b84g8mr]::-webkit-scrollbar-thumb:hover,
.attributes-list-v2[b-hi3b84g8mr]::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}
/* /Components/Pages/Products/PriceGroups.razor.rz.scp.css */
/* PriceGroups page responsive */

@media (max-width: 768px) {
    .currency-badge[b-1tyqa55rmd] {
        font-size: 11px;
        padding: 3px 8px;
    }
}

@media (max-width: 480px) {
    .currency-badge[b-1tyqa55rmd] {
        font-size: 10px;
        padding: 2px 6px;
    }
}
/* /Components/Pages/Products/ProductEditModal.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════ */
/* PRODUCT EDIT MODAL - VARIANT ATTRIBUTES                             */
/* ═══════════════════════════════════════════════════════════════════ */

/* Kategori readonly path: Tekstil › Giyim › Pijama Takımı (leaf bold) */
.form-input-readonly .category-path-inline[b-p3oo6buah0] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
    line-height: 1.4;
}

.form-input-readonly .category-path-inline strong[b-p3oo6buah0] {
    font-weight: 600;
    color: var(--text-primary);
}

.form-input-readonly .category-path-anc[b-p3oo6buah0] {
    color: var(--text-secondary);
    font-weight: 400;
}

.form-input-readonly .category-path-sep[b-p3oo6buah0] {
    color: var(--text-secondary);
    opacity: 0.6;
}

/* Variant Attribute Row (expanded inline) */
.variant-attribute-row[b-p3oo6buah0] {
    background: var(--bg-input);
}

.variant-attribute-row > td[b-p3oo6buah0] {
    padding: 0 !important;
    border-bottom: 2px solid var(--primary);
}

/* Attributes Panel Container */
.variant-attributes-panel[b-p3oo6buah0] {
    padding: 20px;
    background: linear-gradient(135deg, var(--bg-input) 0%, var(--bg-card) 100%);
    border-left: 3px solid var(--primary);
    margin: 8px 12px 12px 12px;
    border-radius: var(--radius);
}

/* Panel Header */
.variant-attrs-header[b-p3oo6buah0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.variant-attrs-header h4[b-p3oo6buah0] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.variant-attrs-header h4[b-p3oo6buah0]::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 16px;
    background: var(--primary);
    border-radius: 2px;
}

/* Variant Title Section */
.variant-title-section[b-p3oo6buah0] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    border: 1px solid var(--border);
}

.variant-title-section .attr-label[b-p3oo6buah0] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.variant-title-section .attr-label svg[b-p3oo6buah0] {
    color: var(--primary);
}

.title-input-wrapper[b-p3oo6buah0] {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.variant-title-input[b-p3oo6buah0] {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text-primary);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.variant-title-input:focus[b-p3oo6buah0] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

.variant-title-input[b-p3oo6buah0]::placeholder {
    color: var(--text-muted);
}

.title-regenerate-btn[b-p3oo6buah0] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.title-regenerate-btn:hover[b-p3oo6buah0] {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.title-regenerate-btn:active[b-p3oo6buah0] {
    transform: scale(0.95);
}

.title-regenerate-btn:disabled[b-p3oo6buah0] {
    cursor: not-allowed;
    opacity: 0.6;
}

.title-regenerate-btn.loading[b-p3oo6buah0] {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.title-regenerate-btn .spinner[b-p3oo6buah0] {
    animation: spin-b-p3oo6buah0 1s linear infinite;
}

@keyframes spin-b-p3oo6buah0 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Two Column Layout for Attributes */
.variant-attrs-grid[b-p3oo6buah0] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 24px;
}

@media (max-width: 900px) {
    .variant-attrs-grid[b-p3oo6buah0] {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* RESPONSIVE                                                         */
/* ═══════════════════════════════════════════════════════════════════ */

/* Tablet */
@media (max-width: 1024px) {
    /* Images layout - stack */
    .images-layout[b-p3oo6buah0] {
        flex-direction: column;
        gap: 16px;
        padding: 16px;
        min-height: auto;
    }

    .images-layout.has-groups .image-pool-section[b-p3oo6buah0] {
        width: 100%;
    }

    .image-pool-grid[b-p3oo6buah0] {
        max-height: 200px;
    }

    .images-layout.no-groups .image-pool-grid[b-p3oo6buah0] {
        max-height: 300px;
    }

    .image-groups-list[b-p3oo6buah0] {
        max-height: 350px;
    }

    /* Variant attributes */
    .variant-attributes-panel[b-p3oo6buah0] {
        padding: 14px;
        margin: 6px 8px 8px 8px;
    }

    /* Store barcodes */
    .store-barcode-item[b-p3oo6buah0] {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    /* Tab content */
    .tab-content-inner[b-p3oo6buah0] {
        padding: 0;
    }

    /* Form rows - stack */
    .form-row[b-p3oo6buah0] {
        flex-direction: column;
        gap: 0;
    }

    .form-row .form-col[b-p3oo6buah0] {
        flex: 1 1 100% !important;
    }

    .form-row-30-70[b-p3oo6buah0],
    .form-row-30[b-p3oo6buah0] {
        grid-template-columns: 1fr;
    }

    .form-row.form-row-3[b-p3oo6buah0] {
        flex-direction: column;
    }

    .form-row.form-row-3 .form-col[b-p3oo6buah0] {
        flex: 1 1 100% !important;
    }

    .form-section-title[b-p3oo6buah0] {
        font-size: 13px;
        margin-top: 8px;
    }

    /* Input with button */
    .input-with-btn[b-p3oo6buah0] {
        gap: 4px;
    }

    .input-btn[b-p3oo6buah0] {
        min-width: 36px;
    }

    /* Readonly field */
    .form-input-readonly[b-p3oo6buah0] {
        padding: 10px 12px;
        font-size: 13px;
    }

    /* Switch aligned */
    .switch-field-aligned[b-p3oo6buah0] {
        margin-top: 0;
    }

    .switch-field-aligned label[b-p3oo6buah0] {
        display: none;
    }

    /* Variant attributes */
    .variant-attributes-panel[b-p3oo6buah0] {
        padding: 12px;
        margin: 4px 0 8px 0;
        border-left-width: 2px;
    }

    .variant-attrs-header[b-p3oo6buah0] {
        padding-bottom: 12px;
        margin-bottom: 12px;
    }

    .variant-attrs-header h4[b-p3oo6buah0] {
        font-size: 13px;
    }

    .variant-attrs-grid[b-p3oo6buah0] {
        gap: 12px;
    }

    .variant-attr-item[b-p3oo6buah0] {
        padding: 10px;
    }

    .variant-attr-item .attr-label[b-p3oo6buah0] {
        font-size: 11px;
    }

    .variant-title-section[b-p3oo6buah0] {
        padding: 10px 12px;
        margin-bottom: 12px;
    }

    .title-input-wrapper[b-p3oo6buah0] {
        flex-direction: column;
        gap: 6px;
    }

    /* Attribute sections */
    .attr-section[b-p3oo6buah0] {
        margin-bottom: 14px;
    }

    .attr-section-title[b-p3oo6buah0] {
        font-size: 10px;
        margin-bottom: 10px;
    }

    /* Images layout */
    .images-layout[b-p3oo6buah0] {
        flex-direction: column;
        gap: 14px;
        padding: 12px;
        min-height: auto;
    }

    .images-layout.has-groups .image-pool-section[b-p3oo6buah0] {
        width: 100%;
    }

    .image-pool-section[b-p3oo6buah0] {
        padding: 12px;
    }

    .image-pool-grid[b-p3oo6buah0] {
        grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
        gap: 6px;
        max-height: 180px;
    }

    .images-layout.no-groups .image-pool-grid[b-p3oo6buah0] {
        grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
        max-height: 250px;
    }

    .image-groups-section[b-p3oo6buah0] {
        padding: 12px;
    }

    .image-groups-list[b-p3oo6buah0] {
        max-height: 300px;
        gap: 12px;
    }

    .image-group-card[b-p3oo6buah0] {
        padding: 10px;
    }

    .group-header[b-p3oo6buah0] {
        margin-bottom: 8px;
        padding-bottom: 6px;
    }

    .group-label[b-p3oo6buah0] {
        font-size: 12px;
    }

    .group-images[b-p3oo6buah0] {
        gap: 6px;
    }

    .group-image-item[b-p3oo6buah0] {
        width: 56px;
        height: 56px;
    }

    .section-header[b-p3oo6buah0] {
        font-size: 12px;
        padding-bottom: 8px;
        margin-bottom: 8px;
    }

    .pool-hint[b-p3oo6buah0] {
        font-size: 10px;
        padding: 6px 10px;
    }

    /* Image action buttons - always visible on touch */
    .image-pool-item .image-actions[b-p3oo6buah0],
    .group-image-item .image-actions[b-p3oo6buah0] {
        opacity: 1;
    }

    .image-action-btn[b-p3oo6buah0] {
        width: 24px;
        height: 24px;
    }

    /* Store barcodes */
    .store-barcode-item[b-p3oo6buah0] {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 10px;
    }

    .store-barcode-item .barcode-info[b-p3oo6buah0] {
        width: 100%;
    }

    .store-barcode-item .barcode-actions[b-p3oo6buah0] {
        width: 100%;
        justify-content: flex-end;
    }

    /* Modal error */
    .modal-error[b-p3oo6buah0] {
        font-size: 12px;
    }

    /* ===== VARIANTS TAB ===== */

    /* Variant toolbar */
    .variant-toolbar[b-p3oo6buah0] {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 10px 12px;
    }

    .variant-info-left[b-p3oo6buah0] {
        justify-content: space-between;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .btn-add-variant[b-p3oo6buah0] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .btn-add-variant.empty-cta[b-p3oo6buah0] {
        margin-top: 12px;
    }

    /* Variant satır sil butonu — md altında küçük padding override (global stil için aşağıya bkz.) */
    .th-row-actions[b-p3oo6buah0] { width: 44px; }
    .td-row-actions[b-p3oo6buah0] { text-align: center; padding: 2px 4px; }
    .btn-row-delete[b-p3oo6buah0] { padding: 5px 10px; font-size: 11px; }

    .bulk-assign-group[b-p3oo6buah0] {
        gap: 8px;
        flex-wrap: wrap;
    }

    .bulk-assign-label[b-p3oo6buah0] {
        font-size: 12px;
        width: 100%;
    }

    .bulk-assign-item[b-p3oo6buah0] {
        flex: 1;
        min-width: 0;
    }

    .bulk-item-label[b-p3oo6buah0] {
        font-size: 11px;
    }

    .bulk-input[b-p3oo6buah0] {
        flex: 1;
        width: auto;
        min-width: 0;
    }

    .bulk-assign-group .btn-sm[b-p3oo6buah0] {
        width: 100%;
        justify-content: center;
        font-size: 12px;
    }

    /* ===== VARIANT TABLE → CARD LAYOUT ===== */

    .variant-table-container[b-p3oo6buah0] {
        max-height: none !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    .variant-edit-table[b-p3oo6buah0] {
        display: block !important;
        width: 100% !important;
        border: none !important;
    }

    .variant-edit-table thead[b-p3oo6buah0] {
        display: none !important;
    }

    .variant-edit-table tbody[b-p3oo6buah0] {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    /* ---- CARD (each tr) ---- */
    .variant-edit-table tbody tr[b-p3oo6buah0] {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0 !important;
        padding: 0 !important;
        background: var(--bg-input) !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--radius) !important;
        position: relative !important;
        transition: none !important;
        overflow: hidden !important;
    }

    .variant-edit-table tbody tr:hover[b-p3oo6buah0],
    .variant-edit-table tbody tr.selected[b-p3oo6buah0],
    .variant-edit-table tbody tr.row-dim[b-p3oo6buah0] {
        background: var(--bg-input) !important;
        opacity: 1 !important;
    }

    /* ---- TD reset ---- */
    .variant-edit-table td[b-p3oo6buah0],
    .variant-edit-table tbody tr td[b-p3oo6buah0],
    .variant-edit-table tbody tr td:first-child[b-p3oo6buah0] {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 10px 12px !important;
        border: none !important;
        border-bottom: 1px solid var(--border) !important;
        background: transparent !important;
        position: static !important;
        left: auto !important;
        right: auto !important;
        z-index: auto !important;
        vertical-align: top !important;
    }

    /* ---- Labels ---- */
    .variant-edit-table td[b-p3oo6buah0]::before {
        display: block !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        color: var(--text-muted) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        line-height: 1 !important;
        margin-bottom: 4px !important;
    }

    /* ---- 1. Checkbox → top-right ---- */
    .variant-edit-table td.td-checkbox[b-p3oo6buah0],
    .variant-edit-table tbody tr td.td-checkbox[b-p3oo6buah0] {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        width: auto !important;
        padding: 0 !important;
        border: none !important;
        border-bottom: none !important;
        flex-direction: row !important;
        z-index: 2 !important;
    }
    .variant-edit-table td.td-checkbox[b-p3oo6buah0]::before { content: none !important; }

    /* ---- 2. Variant name → FULL ROW HEADER ---- */
    .variant-edit-table td:nth-child(2)[b-p3oo6buah0] {
        grid-column: 1 / -1 !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 14px !important;
        background: var(--bg-card) !important;
    }
    .variant-edit-table td:nth-child(2)[b-p3oo6buah0]::before { content: none !important; }

    .variant-info[b-p3oo6buah0] {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        min-width: 0 !important;
    }

    .variant-name-text[b-p3oo6buah0] {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: var(--text-primary) !important;
        white-space: normal !important;
        overflow: visible !important;
        max-width: none !important;
    }

    .color-swatch-small[b-p3oo6buah0] {
        width: 18px !important;
        height: 18px !important;
        flex-shrink: 0 !important;
        border-radius: 4px !important;
    }

    /* ---- 3. SKU → 100% ---- */
    .variant-edit-table td.td-sku[b-p3oo6buah0] {
        grid-column: 1 / -1 !important;
    }
    .variant-edit-table td.td-sku[b-p3oo6buah0]::before { content: "SKU" !important; }

    /* ---- 4. Fiyat → sol %50 ---- */
    .variant-edit-table td:nth-child(4)[b-p3oo6buah0] {
        border-right: 1px solid var(--border) !important;
    }
    .variant-edit-table td:nth-child(4)[b-p3oo6buah0]::before { content: "Fiyat" !important; }

    /* ---- 5. Adet → sağ %50 ---- */
    .variant-edit-table td:nth-child(5)[b-p3oo6buah0]::before { content: "Adet" !important; }

    /* ---- 6. Sanal Stok → sol %50 ---- */
    .variant-edit-table td:nth-child(6)[b-p3oo6buah0] {
        border-right: 1px solid var(--border) !important;
    }
    .variant-edit-table td:nth-child(6)[b-p3oo6buah0]::before { content: "Sanal Stok" !important; }

    /* ---- 7. Kullanılabilir → sağ %50 ---- */
    .variant-edit-table td:nth-child(7)[b-p3oo6buah0]::before { content: "Kullanılabilir" !important; }

    /* ---- 8. Barkod → 100% ---- */
    .variant-edit-table td:nth-child(8)[b-p3oo6buah0] {
        grid-column: 1 / -1 !important;
    }
    .variant-edit-table td:nth-child(8)[b-p3oo6buah0]::before { content: "Barkod" !important; }

    /* ---- 9. ERP Kodu → 100% ---- */
    .variant-edit-table td:nth-child(9)[b-p3oo6buah0] {
        grid-column: 1 / -1 !important;
    }
    .variant-edit-table td:nth-child(9)[b-p3oo6buah0]::before { content: "ERP Kodu" !important; }

    /* ---- 10. Durum → sol %50 ---- */
    .variant-edit-table td.td-status[b-p3oo6buah0] {
        border-right: 1px solid var(--border) !important;
    }
    .variant-edit-table td.td-status[b-p3oo6buah0]::before { content: "Durum" !important; }

    /* Durum checkbox görünür yap */
    .variant-edit-table td.td-status .custom-checkbox[b-p3oo6buah0] {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .variant-edit-table td.td-status .custom-checkbox input[type="checkbox"][b-p3oo6buah0] {
        width: 18px !important;
        height: 18px !important;
        accent-color: var(--primary) !important;
        cursor: pointer !important;
        display: block !important;
        opacity: 1 !important;
        position: static !important;
    }

    .variant-edit-table td.td-status .custom-checkbox .checkmark[b-p3oo6buah0] {
        display: none !important;
    }

    /* ---- 11. Özellikler → sağ %50 ---- */
    .variant-edit-table td.td-attrs[b-p3oo6buah0]::before { content: "Özellikler" !important; }

    .attr-summary-btn[b-p3oo6buah0] {
        font-size: 12px !important;
        padding: 8px 12px !important;
        width: 100% !important;
        justify-content: center !important;
        border-radius: 6px !important;
    }

    /* ---- Inputs ---- */
    .variant-edit-table .form-input-sm[b-p3oo6buah0] {
        width: 100% !important;
        min-width: 0 !important;
        padding: 8px 10px !important;
        font-size: 13px !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
        background: var(--bg-card) !important;
        border: 1px solid var(--border) !important;
    }

    .variant-edit-table .form-input-sm:focus[b-p3oo6buah0] {
        border-color: var(--primary) !important;
    }

    .variant-edit-table .input-with-btn[b-p3oo6buah0] {
        width: 100% !important;
    }

    .variant-edit-table .input-with-btn .form-input-sm[b-p3oo6buah0] {
        flex: 1 !important;
    }

    .variant-edit-table .input-btn[b-p3oo6buah0] {
        min-width: 34px !important;
        height: 34px !important;
    }

    /* Son satır border-bottom kaldır */
    .variant-edit-table td.td-status[b-p3oo6buah0],
    .variant-edit-table td.td-attrs[b-p3oo6buah0] {
        border-bottom: none !important;
    }

    /* ---- ATTRIBUTE EXPANDED ROW ---- */
    .variant-attribute-row[b-p3oo6buah0],
    .variant-edit-table tbody tr.variant-attribute-row[b-p3oo6buah0] {
        display: block !important;
        padding: 0 !important;
        border: 1px solid var(--primary) !important;
        border-top: none !important;
        border-radius: 0 0 var(--radius) var(--radius) !important;
        margin-top: -12px !important;
        background: var(--bg-card) !important;
    }

    .variant-attribute-row > td[b-p3oo6buah0],
    .variant-edit-table tbody tr.variant-attribute-row > td[b-p3oo6buah0] {
        display: block !important;
    }

    .variant-attributes-panel[b-p3oo6buah0] {
        margin: 0 !important;
        border-radius: 0 !important;
        border-left-width: 2px !important;
        padding: 12px !important;
    }

    /* Variant pagination */
    .variant-pagination[b-p3oo6buah0] {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 8px 0 !important;
    }

    /* Attrs grid */
    .variant-attrs-grid[b-p3oo6buah0] {
        gap: 10px !important;
    }

    .variant-attr-item[b-p3oo6buah0] {
        padding: 10px !important;
    }

    /* ===== IMAGES TAB ===== */

    .images-layout[b-p3oo6buah0] {
        padding: 0 !important;
    }

    .images-layout.has-groups .image-pool-section[b-p3oo6buah0] {
        width: 100% !important;
    }

    /* Empty state in tabs */
    .tab-content-wide .empty-state[b-p3oo6buah0],
    .tab-content-images .empty-state[b-p3oo6buah0] {
        padding: 32px 16px;
    }

    .tab-content-wide .empty-state svg[b-p3oo6buah0] {
        width: 40px;
        height: 40px;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .image-pool-grid[b-p3oo6buah0] {
        grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    }

    .group-image-item[b-p3oo6buah0] {
        width: 48px;
        height: 48px;
    }

    .variant-attributes-panel[b-p3oo6buah0] {
        padding: 10px;
    }

    .variant-attr-item[b-p3oo6buah0] {
        padding: 8px;
    }

    .image-action-btn[b-p3oo6buah0] {
        width: 26px;
        height: 26px;
    }

    .store-barcode-item .store-name[b-p3oo6buah0] {
        font-size: 11px;
    }

    .store-barcode-item .barcode-value[b-p3oo6buah0] {
        font-size: 12px;
    }

    /* Variant toolbar */
    .variant-toolbar[b-p3oo6buah0] {
        padding: 8px 10px;
    }

    .bulk-assign-group[b-p3oo6buah0] {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        width: 100%;
    }

    .bulk-assign-label[b-p3oo6buah0] {
        display: none;
    }

    .bulk-assign-item[b-p3oo6buah0] {
        width: 100%;
    }

    .bulk-input[b-p3oo6buah0] {
        flex: 1;
        width: auto;
    }

    .variant-table-container[b-p3oo6buah0] {
        max-height: 350px;
    }

    /* Cards 2-column on very small screens */
    .variant-edit-table tbody tr[b-p3oo6buah0] {
        grid-template-columns: 1fr 1fr !important;
    }

    .variant-edit-table td[b-p3oo6buah0] {
        padding: 8px 10px !important;
    }

    .variant-edit-table .td-number[b-p3oo6buah0] {
        width: 100% !important;
    }

    .variant-edit-table td:nth-child(2)[b-p3oo6buah0] {
        padding: 10px 12px !important;
    }

    .variant-edit-table .form-input-sm[b-p3oo6buah0] {
        padding: 7px 8px !important;
        font-size: 12px !important;
    }

    /* All fields after qty become full row */
    .variant-edit-table td:nth-child(6)[b-p3oo6buah0],
    .variant-edit-table td:nth-child(7)[b-p3oo6buah0] {
        grid-column: 1 !important;
    }

    .variant-edit-table td.td-status[b-p3oo6buah0] {
        border-right: none !important;
    }

    .variant-edit-table td.td-attrs[b-p3oo6buah0] {
        grid-column: 1 / -1 !important;
    }
}

/* Attribute Sections */
.attr-section[b-p3oo6buah0] {
    margin-bottom: 20px;
}

.attr-section:last-child[b-p3oo6buah0] {
    margin-bottom: 0;
}

.attr-section-title[b-p3oo6buah0] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
}

.attr-section-title .badge[b-p3oo6buah0] {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: none;
    letter-spacing: 0;
}

.attr-section-title .badge-variant[b-p3oo6buah0] {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.attr-section-title .badge-standard[b-p3oo6buah0] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

/* Individual Attribute Item */
.variant-attr-item[b-p3oo6buah0] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: var(--transition);
}

.variant-attr-item:hover[b-p3oo6buah0] {
    border-color: var(--border-hover);
}

.variant-attr-item.is-variant[b-p3oo6buah0] {
    border-left: 3px solid #8b5cf6;
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.05) 0%, var(--bg-card) 100%);
}

/* Attribute Label */
.attr-label[b-p3oo6buah0] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.attr-label .required[b-p3oo6buah0] {
    color: #ef4444;
}

.attr-label .badge[b-p3oo6buah0] {
    font-size: 9px;
    padding: 2px 5px;
    border-radius: 3px;
    font-weight: 500;
}

.attr-label .badge-sm[b-p3oo6buah0] {
    font-size: 9px;
}

.attr-label .badge-info[b-p3oo6buah0] {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

/* Attribute Input Row */
.attr-input-row[b-p3oo6buah0] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.attr-input-row > *:first-child[b-p3oo6buah0] {
    flex: 1;
    min-width: 0;
}

/* Apply to All Button */
.attr-input-row .btn-xs[b-p3oo6buah0] {
    flex-shrink: 0;
    padding: 6px;
    border-radius: var(--radius-sm);
}

.attr-input-row .btn-xs:hover[b-p3oo6buah0] {
    background: var(--primary);
    color: white;
}

/* Color Preview in Dropdown */
.attr-color-option[b-p3oo6buah0] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.attr-color-swatch[b-p3oo6buah0] {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

/* Variant Info Display */
.variant-info[b-p3oo6buah0] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 350px;
}

.color-swatch-small[b-p3oo6buah0] {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.variant-name-text[b-p3oo6buah0] {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* Attributes Column */
.th-attrs[b-p3oo6buah0],
.td-attrs[b-p3oo6buah0] {
    width: 90px;
    text-align: center;
}

/* Attribute Summary Button */
.attr-summary-btn[b-p3oo6buah0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-input);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.attr-summary-btn:hover[b-p3oo6buah0] {
    border-color: var(--primary);
    background: var(--bg-card);
}

.attr-summary-btn .attr-count[b-p3oo6buah0] {
    font-family: var(--font-mono);
}

.attr-summary-btn svg[b-p3oo6buah0] {
    transition: transform 0.2s ease;
    opacity: 0.6;
}

.attr-summary-btn svg.rotated[b-p3oo6buah0] {
    transform: rotate(180deg);
}

/* Empty state - no attributes filled */
.attr-summary-btn.empty[b-p3oo6buah0] {
    color: var(--text-muted);
    border-color: var(--border);
}

.attr-summary-btn.empty .attr-count[b-p3oo6buah0] {
    color: #ef4444;
}

/* Partial - some attributes filled */
.attr-summary-btn.partial[b-p3oo6buah0] {
    color: var(--text-secondary);
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.08);
}

.attr-summary-btn.partial .attr-count[b-p3oo6buah0] {
    color: #f59e0b;
}

/* All filled - complete */
.attr-summary-btn.all-filled[b-p3oo6buah0] {
    color: var(--text-secondary);
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.08);
}

.attr-summary-btn.all-filled .attr-count[b-p3oo6buah0] {
    color: #10b981;
}

/* Empty badge for no attributes available */
.attr-badge[b-p3oo6buah0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 4px;
}

.attr-badge-empty[b-p3oo6buah0] {
    color: var(--text-muted);
}

/* Quick Info Bar */
.variant-quick-attrs[b-p3oo6buah0] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.quick-attr-badge[b-p3oo6buah0] {
    font-size: 10px;
    padding: 2px 6px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-muted);
    white-space: nowrap;
}

.quick-attr-badge.has-value[b-p3oo6buah0] {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
    color: #10b981;
}

/* Empty Attributes State */
.attrs-empty-state[b-p3oo6buah0] {
    text-align: center;
    padding: 24px;
    color: var(--text-muted);
    font-size: 13px;
}

/* Compact Mode for Many Attributes */
.variant-attrs-compact .variant-attr-item[b-p3oo6buah0] {
    padding: 8px 10px;
}

.variant-attrs-compact .attr-label[b-p3oo6buah0] {
    font-size: 11px;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* IMAGE POOL + GROUPS LAYOUT                                         */
/* ═══════════════════════════════════════════════════════════════════ */

.tab-content-images[b-p3oo6buah0] {
    padding: 0 !important;
}

.images-layout[b-p3oo6buah0] {
    display: flex;
    gap: 24px;
    padding: 20px;
    min-height: 400px;
}

.images-layout.no-groups[b-p3oo6buah0] {
    flex-direction: column;
}

.images-layout.has-groups .image-pool-section[b-p3oo6buah0] {
    width: 400px;
    flex-shrink: 0;
}

.images-layout.has-groups .image-groups-section[b-p3oo6buah0] {
    flex: 1;
    min-width: 0;
}

/* Section Header */
.section-header[b-p3oo6buah0] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.section-header .badge[b-p3oo6buah0] {
    font-size: 11px;
    padding: 2px 8px;
    background: var(--bg-input);
    border-radius: 10px;
    color: var(--text-muted);
    font-weight: 500;
}

/* Barkoddan Resim Çek butonu */
.btn-import-barcode[b-p3oo6buah0] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-import-barcode:hover:not(:disabled)[b-p3oo6buah0] {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(59, 130, 246, 0.05);
}

.btn-import-barcode:disabled[b-p3oo6buah0] {
    opacity: 0.4;
    cursor: not-allowed;
}

.empty-cta-group[b-p3oo6buah0] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Image Pool */
.image-pool-section[b-p3oo6buah0] {
    background: var(--bg-input);
    border-radius: var(--radius);
    padding: 16px;
    border: 1px dashed var(--border);
}

.image-pool-grid[b-p3oo6buah0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
    min-height: 120px;
    max-height: 445px;
    overflow-y: auto;
    padding-right: 4px;
}

.image-pool-grid[b-p3oo6buah0]::-webkit-scrollbar {
    width: 6px;
}

.image-pool-grid[b-p3oo6buah0]::-webkit-scrollbar-track {
    background: var(--bg-input);
    border-radius: 3px;
}

.image-pool-grid[b-p3oo6buah0]::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

.image-pool-grid[b-p3oo6buah0]::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.images-layout.no-groups .image-pool-grid[b-p3oo6buah0] {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    max-height: 400px;
}

.image-pool-item[b-p3oo6buah0] {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: grab;
    border: 2px solid transparent;
    transition: all 0.15s ease;
    background: var(--bg-card);
}

.image-pool-item:hover[b-p3oo6buah0] {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.image-pool-item:active[b-p3oo6buah0] {
    cursor: grabbing;
}

.image-pool-item img[b-p3oo6buah0] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-pool-item.is-assigned[b-p3oo6buah0] {
    opacity: 0.7;
}

.image-pool-item.is-assigned:hover[b-p3oo6buah0] {
    opacity: 1;
}

/* Drop target indicator for reordering */
.image-pool-item.drop-target[b-p3oo6buah0],
.group-image-item.drop-target[b-p3oo6buah0] {
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.15);
    transform: scale(1.05);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3);
}

.image-pool-item .image-actions[b-p3oo6buah0] {
    position: absolute;
    top: 4px;
    right: 4px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.image-pool-item:hover .image-actions[b-p3oo6buah0] {
    opacity: 1;
}

.assigned-badge[b-p3oo6buah0] {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: var(--primary);
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
}

.pool-hint[b-p3oo6buah0] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 8px 12px;
    background: rgba(59, 130, 246, 0.08);
    border-radius: var(--radius);
    font-size: 11px;
    color: #3b82f6;
}

/* Image Groups */
.image-groups-section[b-p3oo6buah0] {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 16px;
    border: 1px solid var(--border);
}

.image-groups-list[b-p3oo6buah0] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 445px;
    overflow-y: auto;
    padding-right: 4px;
}

.image-groups-list[b-p3oo6buah0]::-webkit-scrollbar {
    width: 6px;
}

.image-groups-list[b-p3oo6buah0]::-webkit-scrollbar-track {
    background: var(--bg-input);
    border-radius: 3px;
}

.image-groups-list[b-p3oo6buah0]::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

.image-groups-list[b-p3oo6buah0]::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.image-group-card[b-p3oo6buah0] {
    background: var(--bg-input);
    border-radius: var(--radius);
    padding: 12px;
    border: 2px dashed var(--border);
    transition: all 0.15s ease;
}

.image-group-card:hover[b-p3oo6buah0] {
    border-color: var(--primary);
}

.group-header[b-p3oo6buah0] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.group-header .color-preview[b-p3oo6buah0] {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.group-label[b-p3oo6buah0] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.group-count[b-p3oo6buah0] {
    font-size: 12px;
    color: var(--text-muted);
    margin-left: auto;
}

.group-images[b-p3oo6buah0] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 60px;
}

.group-image-item[b-p3oo6buah0] {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: grab;
    border: 2px solid transparent;
    transition: all 0.15s ease;
}

.group-image-item:hover[b-p3oo6buah0] {
    border-color: var(--primary);
}

.group-image-item img[b-p3oo6buah0] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.group-image-item.is-primary[b-p3oo6buah0] {
    border-color: #10b981;
}

.group-image-item .image-actions[b-p3oo6buah0] {
    position: absolute;
    top: 2px;
    right: 2px;
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.group-image-item:hover .image-actions[b-p3oo6buah0] {
    opacity: 1;
}

.image-action-btn[b-p3oo6buah0] {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    transition: background 0.15s ease;
}

.image-action-btn:hover[b-p3oo6buah0] {
    background: rgba(0, 0, 0, 0.8);
}

.image-action-btn.set-primary-btn:hover[b-p3oo6buah0] {
    background: #10b981;
}

.image-action-btn.delete-btn:hover[b-p3oo6buah0],
.image-action-btn.remove-btn:hover[b-p3oo6buah0] {
    background: #ef4444;
}

.primary-badge-mini[b-p3oo6buah0] {
    position: absolute;
    bottom: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #10b981;
    border-radius: 4px;
    color: white;
}

.group-empty-drop[b-p3oo6buah0] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 60px;
    color: var(--text-muted);
    font-size: 12px;
}

.group-empty-drop svg[b-p3oo6buah0] {
    opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* STORE BARCODES SECTION                                              */
/* ═══════════════════════════════════════════════════════════════════ */

.store-barcodes-section[b-p3oo6buah0] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--border);
}

.store-barcodes-section .attr-section-title[b-p3oo6buah0] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.store-barcodes-section .add-barcode-btn[b-p3oo6buah0] {
    margin-left: auto;
}

.store-barcodes-list[b-p3oo6buah0] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.store-barcode-item[b-p3oo6buah0] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.store-barcode-item .barcode-info[b-p3oo6buah0] {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.store-barcode-item .store-name[b-p3oo6buah0] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    padding: 2px 8px;
    background: rgba(139, 92, 246, 0.12);
    border-radius: 4px;
}

.store-barcode-item .barcode-value[b-p3oo6buah0] {
    font-size: 13px;
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.store-barcode-item .external-id[b-p3oo6buah0] {
    font-size: 11px;
    color: var(--text-secondary);
}

.store-barcode-item .barcode-note[b-p3oo6buah0] {
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
}

.store-barcode-item .barcode-actions[b-p3oo6buah0] {
    display: flex;
    gap: 4px;
}

.store-barcodes-empty[b-p3oo6buah0] {
    padding: 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    background: var(--bg-input);
    border-radius: 6px;
}

/* Store Barcode Modal Form */
.store-barcode-form[b-p3oo6buah0] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.store-barcode-form .form-group[b-p3oo6buah0] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.store-barcode-form label[b-p3oo6buah0] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.store-barcode-form .required[b-p3oo6buah0] {
    color: #ef4444;
}

.store-barcode-form textarea[b-p3oo6buah0] {
    resize: vertical;
    min-height: 60px;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* VMD — VARIANT MASTER-DETAIL LAYOUT (20% sidebar / 80% scroll)       */
/* ═══════════════════════════════════════════════════════════════════ */
.vmd-layout[b-p3oo6buah0] {
    display: grid;
    grid-template-columns: minmax(220px, 20%) 1fr;
    gap: 16px;
    height: calc(100vh - 320px);
    min-height: 480px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 10px);
    background: var(--bg-card);
    overflow: hidden;
}

/* ── LEFT — sidebar ──────────────────────────────────────────────── */
.vmd-sidebar[b-p3oo6buah0] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--bg-input);
    border-right: 1px solid var(--border);
}

.vmd-sidebar-header[b-p3oo6buah0] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
    flex-shrink: 0;
}

.vmd-sidebar-count[b-p3oo6buah0] {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    background: var(--bg-input);
    padding: 2px 8px;
    border-radius: 999px;
    min-width: 28px;
    text-align: center;
}

.vmd-sort-select[b-p3oo6buah0] {
    flex: 1;
    min-width: 0;
    padding: 6px 8px;
    font-size: 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
}

.vmd-sort-select:focus[b-p3oo6buah0] {
    outline: none;
    border-color: var(--primary);
}

.vmd-sort-dir-btn[b-p3oo6buah0] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 11px;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.vmd-sort-dir-btn:hover[b-p3oo6buah0] {
    color: var(--primary);
    border-color: var(--primary);
}

.vmd-sidebar-search[b-p3oo6buah0] {
    position: relative;
    display: flex;
    align-items: center;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
}

.vmd-search-icon[b-p3oo6buah0] {
    position: absolute;
    left: 16px;
    color: var(--text-muted);
    pointer-events: none;
}

.vmd-search-input[b-p3oo6buah0] {
    flex: 1;
    height: 28px;
    padding: 0 28px 0 28px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 12px;
    outline: none;
    transition: border-color .15s ease;
}

.vmd-search-input[b-p3oo6buah0]::placeholder {
    color: var(--text-muted);
}

.vmd-search-input:focus[b-p3oo6buah0] {
    border-color: var(--primary);
}

.vmd-search-input[b-p3oo6buah0]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.vmd-search-clear[b-p3oo6buah0] {
    position: absolute;
    right: 14px;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.vmd-search-clear:hover[b-p3oo6buah0] {
    color: var(--primary);
}

.vmd-list[b-p3oo6buah0] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vmd-list-item[b-p3oo6buah0] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.06s ease;
    user-select: none;
}

.vmd-list-item:hover[b-p3oo6buah0] {
    background: var(--bg-card);
    border-color: var(--border);
}

.vmd-list-item.active[b-p3oo6buah0] {
    background: rgba(var(--primary-rgb, 59, 130, 246), 0.10);
    border-color: var(--primary);
    box-shadow: inset 3px 0 0 var(--primary);
}

.vmd-list-item.is-inactive[b-p3oo6buah0] {
    opacity: 0.6;
}

.vmd-list-item .custom-checkbox[b-p3oo6buah0] {
    flex-shrink: 0;
}

.vmd-list-item .color-swatch-small[b-p3oo6buah0] {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.vmd-item-text[b-p3oo6buah0] {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.vmd-item-name[b-p3oo6buah0] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
}

.vmd-list-item.active .vmd-item-name[b-p3oo6buah0] {
    color: var(--primary);
}

.vmd-item-meta[b-p3oo6buah0] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.2;
}

.vmd-item-sku[b-p3oo6buah0] {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 11px;
    color: var(--text-secondary);
}

.vmd-item-attr[b-p3oo6buah0] {
    padding: 1px 6px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 10px;
    background: var(--bg-input);
}

.vmd-item-attr.all-filled[b-p3oo6buah0] {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
}

.vmd-item-attr.partial[b-p3oo6buah0] {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
}

.vmd-item-attr.empty[b-p3oo6buah0] {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

.vmd-item-pill.inactive[b-p3oo6buah0] {
    padding: 1px 6px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 10px;
    background: rgba(107, 114, 128, 0.15);
    color: var(--text-muted);
}

.vmd-sidebar-pagination[b-p3oo6buah0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 8px 10px;
    border-top: 1px solid var(--border);
    background: var(--bg-card);
    flex-shrink: 0;
}

.vmd-sidebar-pagination .pagination-btn[b-p3oo6buah0] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.vmd-sidebar-pagination .pagination-btn:hover:not(:disabled)[b-p3oo6buah0] {
    color: var(--primary);
    border-color: var(--primary);
}

.vmd-sidebar-pagination .pagination-btn:disabled[b-p3oo6buah0] {
    opacity: 0.45;
    cursor: not-allowed;
}

.vmd-sidebar-pagination .pagination-text[b-p3oo6buah0] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* ── RIGHT — detail panel ────────────────────────────────────────── */
.vmd-detail[b-p3oo6buah0] {
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
}

.vmd-detail-empty[b-p3oo6buah0] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text-muted);
}

.vmd-detail-scroll[b-p3oo6buah0] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Detail header */
.vmd-detail-header[b-p3oo6buah0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: -20px;
    z-index: 2;
    background: var(--bg-card);
    margin: -20px -24px 0 -24px;
    padding: 16px 24px 14px 24px;
}

.vmd-detail-title[b-p3oo6buah0] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.vmd-detail-title .color-swatch-large[b-p3oo6buah0] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.vmd-detail-title-text[b-p3oo6buah0] {
    min-width: 0;
}

.vmd-detail-title-text h3[b-p3oo6buah0] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50ch;
}

.vmd-detail-subtitle[b-p3oo6buah0] {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-muted);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

/* ── Detay header sağındaki aksiyon barı: pill toggle + delete CTA ── */
.vmd-detail-actions[b-p3oo6buah0] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 4px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px;
}

/* Pill-style "Aktif" toggle — gerçek bir switch hissi */
.vmd-active-toggle[b-p3oo6buah0] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 10px;
    background: var(--bg-card);
    border: 1px solid transparent;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.vmd-active-toggle:hover[b-p3oo6buah0] {
    background: rgba(16, 185, 129, 0.06);
    color: var(--text-primary);
}

.vmd-active-toggle input[type="checkbox"][b-p3oo6buah0] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: #10b981;
    margin: 0;
}

.vmd-active-toggle:has(input:checked)[b-p3oo6buah0] {
    background: rgba(16, 185, 129, 0.10);
    color: #047857;
    border-color: rgba(16, 185, 129, 0.25);
}

/* "Sil" butonu — modern danger CTA, hover'da net kırmızı geçiş */
.btn-row-delete[b-p3oo6buah0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease,
                border-color 0.18s ease,
                color 0.18s ease,
                transform 0.1s ease,
                box-shadow 0.18s ease;
}

.btn-row-delete:hover:not(:disabled)[b-p3oo6buah0] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-color: #dc2626;
    color: #fff;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.30);
}

.btn-row-delete:hover:not(:disabled) svg[b-p3oo6buah0] {
    color: #fff;
}

.btn-row-delete:active:not(:disabled)[b-p3oo6buah0] {
    transform: scale(0.96);
    box-shadow: 0 2px 5px rgba(239, 68, 68, 0.25);
}

.btn-row-delete:focus-visible[b-p3oo6buah0] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.20);
}

.btn-row-delete:disabled[b-p3oo6buah0] {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--bg-input);
}

.btn-row-delete svg[b-p3oo6buah0] {
    flex-shrink: 0;
    color: #dc2626;
    transition: color 0.18s ease;
}

.btn-row-delete:disabled svg[b-p3oo6buah0] {
    color: var(--text-secondary);
}

/* Sections */
.vmd-section[b-p3oo6buah0] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.vmd-section-title[b-p3oo6buah0] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.vmd-section-title svg[b-p3oo6buah0] {
    color: var(--primary);
}

.vmd-section-title .badge[b-p3oo6buah0] {
    text-transform: none;
    letter-spacing: 0;
}

.vmd-section-title .add-barcode-btn[b-p3oo6buah0] {
    margin-left: auto;
}

.vmd-progress-pill[b-p3oo6buah0] {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 11px;
    text-transform: none;
    letter-spacing: 0;
}

.vmd-progress-pill.all-filled[b-p3oo6buah0] {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
}

.vmd-progress-pill.partial[b-p3oo6buah0] {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
}

.vmd-progress-pill.empty[b-p3oo6buah0] {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

.vmd-grid[b-p3oo6buah0] {
    display: grid;
    gap: 12px 16px;
}

.vmd-grid-2[b-p3oo6buah0] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vmd-grid-3[b-p3oo6buah0] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vmd-grid-4[b-p3oo6buah0] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.vmd-field[b-p3oo6buah0] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.vmd-field > label[b-p3oo6buah0] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.vmd-field .form-input[b-p3oo6buah0] {
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vmd-field .form-input:focus[b-p3oo6buah0] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 59, 130, 246), 0.15);
}

.vmd-field .input-with-btn[b-p3oo6buah0] {
    display: flex;
    gap: 6px;
}

.vmd-field .input-with-btn .form-input[b-p3oo6buah0] {
    flex: 1;
    min-width: 0;
}

.vmd-field .input-with-btn .input-btn[b-p3oo6buah0] {
    flex-shrink: 0;
    width: 36px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.vmd-field .input-with-btn .input-btn:hover:not(:disabled)[b-p3oo6buah0] {
    color: var(--primary);
    border-color: var(--primary);
}

.vmd-field .input-with-btn .input-btn:disabled[b-p3oo6buah0] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Section variant attributes — denser spacing inside vmd-section */
.vmd-section .variant-attrs-grid[b-p3oo6buah0] {
    gap: 12px 16px;
}

/* Responsive */
@media (max-width: 1100px) {
    .vmd-grid-3[b-p3oo6buah0],
    .vmd-grid-4[b-p3oo6buah0] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .vmd-layout[b-p3oo6buah0] {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 0;
    }

    .vmd-sidebar[b-p3oo6buah0] {
        border-right: none;
        border-bottom: 1px solid var(--border);
        max-height: 280px;
    }

    .vmd-grid-2[b-p3oo6buah0],
    .vmd-grid-3[b-p3oo6buah0],
    .vmd-grid-4[b-p3oo6buah0] { grid-template-columns: 1fr; }

    .vmd-detail-scroll[b-p3oo6buah0] { padding: 14px; }

    .vmd-detail-header[b-p3oo6buah0] {
        flex-direction: column;
        align-items: flex-start;
        margin: -14px -14px 0 -14px;
        padding: 14px;
    }
}

/* ───────────────────────────────────────────────────────────────────
   Variant Store Listings (.vsl-*) — Varyant detay panelinde her
   PLS satırı için tek-mağaza kartı. Aggregate yok, gerçek değerler.
   ─────────────────────────────────────────────────────────────────── */
.vsl-section[b-p3oo6buah0] {
    margin-top: 8px;
}

.vsl-empty[b-p3oo6buah0] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 12px;
    background: var(--bg-input);
    border: 1px dashed var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 12.5px;
}

.vsl-empty svg[b-p3oo6buah0] {
    color: var(--border);
    flex-shrink: 0;
}

.vsl-list[b-p3oo6buah0] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vsl-row[b-p3oo6buah0] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px 10px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: border-color 0.15s ease, transform 0.12s ease;
}

.vsl-row[b-p3oo6buah0]::before {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 3px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    background: var(--border);
    transition: background 0.15s ease;
}

.vsl-row:hover[b-p3oo6buah0] {
    border-color: var(--primary);
}

.vsl-row.is-active[b-p3oo6buah0]::before    { background: linear-gradient(180deg, #10b981, #059669); }
.vsl-row.is-pending[b-p3oo6buah0]::before   { background: linear-gradient(180deg, #f59e0b, #ea580c); }
.vsl-row.is-rejected[b-p3oo6buah0]::before  { background: linear-gradient(180deg, #ef4444, #dc2626); }
.vsl-row.is-archived[b-p3oo6buah0]::before  { background: linear-gradient(180deg, #94a3b8, #64748b); }
.vsl-row.is-archived[b-p3oo6buah0]         { opacity: 0.7; }

/* ── Row head ────────────────────────────────────────────────────── */
.vsl-row-head[b-p3oo6buah0] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.vsl-store[b-p3oo6buah0] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.vsl-logo[b-p3oo6buah0] {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 6px;
    background: var(--bg-input);
    padding: 3px;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.vsl-logo-fallback[b-p3oo6buah0] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--primary), #8b5cf6);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    flex-shrink: 0;
}

.vsl-store-text[b-p3oo6buah0] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.vsl-store-text strong[b-p3oo6buah0] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vsl-store-text span[b-p3oo6buah0] {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vsl-link[b-p3oo6buah0] {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: var(--bg-input);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.vsl-link:hover[b-p3oo6buah0] {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    transform: scale(1.08);
}

/* ── Status chip'leri ────────────────────────────────────────────── */
.vsl-status-row[b-p3oo6buah0] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.vsl-status[b-p3oo6buah0] {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.2px;
}

.vsl-status--approved[b-p3oo6buah0] { background: rgba(16, 185, 129, 0.13); color: #059669; }
.vsl-status--onsale[b-p3oo6buah0]   { background: rgba(59, 130, 246, 0.13); color: #2563eb; }
.vsl-status--rejected[b-p3oo6buah0] { background: rgba(239, 68, 68, 0.13); color: #dc2626; }
.vsl-status--locked[b-p3oo6buah0]   { background: rgba(100, 116, 139, 0.15); color: #475569; }
.vsl-status--campaign[b-p3oo6buah0] { background: rgba(245, 158, 11, 0.13); color: #d97706; }
.vsl-status--pending[b-p3oo6buah0]  { background: rgba(148, 163, 184, 0.18); color: #64748b; }
.vsl-status--archived[b-p3oo6buah0] { background: rgba(148, 163, 184, 0.20); color: #475569; }

/* ── Metrik satırı ────────────────────────────────────────────────── */
.vsl-metrics[b-p3oo6buah0] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 6px 8px;
    background: var(--bg-input);
    border-radius: 6px;
}

.vsl-metric[b-p3oo6buah0] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.vsl-metric--accent[b-p3oo6buah0] {
    color: var(--primary);
}

.vsl-metric--meta .vsl-metric-val[b-p3oo6buah0] {
    font-weight: 500;
    color: var(--text-secondary);
}

.vsl-metric-lbl[b-p3oo6buah0] {
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-secondary);
}

.vsl-metric-val[b-p3oo6buah0] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vsl-metric-val.is-zero[b-p3oo6buah0] {
    color: var(--text-secondary);
    opacity: 0.65;
}

.vsl-metric--accent .vsl-metric-val[b-p3oo6buah0] {
    color: var(--primary);
}

/* ── Reddedildi açıklama bandı ──────────────────────────────────── */
.vsl-reject[b-p3oo6buah0] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 6px 8px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.22);
    border-radius: 6px;
    font-size: 11.5px;
    color: #b91c1c;
    line-height: 1.4;
}

.vsl-reject svg[b-p3oo6buah0] {
    flex-shrink: 0;
    margin-top: 1px;
    color: #dc2626;
}

@media (max-width: 720px) {
    .vsl-metrics[b-p3oo6buah0] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* /Components/Pages/Products/ProductImportWizard.razor.rz.scp.css */
.wizard-container-wide[b-jog435sce2] {
    max-width: 1350px;
}

.source-product-card[b-jog435sce2] {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: var(--bg-input);
    border-radius: var(--radius);
    margin-bottom: 24px;
}

.source-product-image[b-jog435sce2] {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.source-product-image img[b-jog435sce2] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.source-product-image .image-placeholder[b-jog435sce2] {
    width: 100%;
    height: 100%;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.source-product-info h4[b-jog435sce2] {
    font-size: 15px;
    margin-bottom: 8px;
    line-height: 1.4;
}

.source-product-meta[b-jog435sce2] {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--text-muted);
}

.form-section[b-jog435sce2] {
    margin-bottom: 24px;
}

.form-section-title[b-jog435sce2] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.mapping-source[b-jog435sce2] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--bg-input);
    border-radius: var(--radius);
    margin-bottom: 16px;
}

.mapping-label[b-jog435sce2] {
    font-size: 13px;
    color: var(--text-muted);
}

.mapping-value[b-jog435sce2] {
    font-size: 14px;
    font-weight: 600;
}

.mapping-mode-selector[b-jog435sce2] {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.mapping-mode-option[b-jog435sce2] {
    flex: 1;
    padding: 16px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition);
}

.mapping-mode-option:hover[b-jog435sce2] {
    border-color: var(--border-hover);
}

.mapping-mode-option.selected[b-jog435sce2] {
    border-color: var(--primary);
    background: rgba(59, 130, 246, 0.05);
}

.mapping-mode-option input[b-jog435sce2] {
    display: none;
}

.mode-content[b-jog435sce2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mode-title[b-jog435sce2] {
    font-size: 14px;
    font-weight: 600;
}

.mode-desc[b-jog435sce2] {
    font-size: 12px;
    color: var(--text-muted);
}

.mapping-auto-matched[b-jog435sce2] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: var(--radius);
    color: #10b981;
    font-size: 14px;
}

.mapping-auto-matched.small[b-jog435sce2] {
    padding: 10px 12px;
    font-size: 13px;
}

.attribute-mappings-list[b-jog435sce2] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.attribute-mappings-list.attribute-mappings-grid[b-jog435sce2] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.attribute-mapping-card[b-jog435sce2] {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
}

.attribute-mapping-card.ignored[b-jog435sce2] {
    opacity: 0.6;
    background: var(--bg-input);
}

.attribute-mapping-header[b-jog435sce2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.attribute-info[b-jog435sce2] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.attribute-name[b-jog435sce2] {
    font-size: 15px;
    font-weight: 600;
}

.attribute-count[b-jog435sce2] {
    font-size: 12px;
    color: var(--text-muted);
    padding: 2px 8px;
    background: var(--bg-input);
    border-radius: 10px;
}

.attribute-dimension .form-select-sm[b-jog435sce2] {
    padding: 6px 12px;
    font-size: 12px;
}

.attribute-type-badge[b-jog435sce2] {
    padding: 4px 10px;
    background-color: var(--surface-secondary);
    color: var(--text-secondary);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.attribute-mapping-mode[b-jog435sce2] {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.mode-pill[b-jog435sce2] {
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    font-size: 12px;
    cursor: pointer;
    transition: var(--transition);
}

.mode-pill:hover[b-jog435sce2] {
    border-color: var(--border-hover);
}

.mode-pill.selected[b-jog435sce2] {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.mode-pill input[b-jog435sce2] {
    display: none;
}

.mode-pill-ignore.selected[b-jog435sce2] {
    background: var(--text-muted);
    border-color: var(--text-muted);
    color: white;
}

.ignore-info[b-jog435sce2] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-input);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--text-muted);
}

.ignore-info svg[b-jog435sce2] {
    flex-shrink: 0;
    color: var(--text-muted);
}

.create-info[b-jog435sce2] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(245, 158, 11, 0.1);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: #f59e0b;
}

.form-group-compact[b-jog435sce2] {
    margin-bottom: 0;
}

.value-mappings[b-jog435sce2] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.value-mappings-header[b-jog435sce2] {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.value-chips[b-jog435sce2] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.value-chip[b-jog435sce2] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--bg-input);
    border-radius: 12px;
    font-size: 12px;
    color: var(--text-secondary);
}

.value-chip.matched[b-jog435sce2] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.value-chip.more[b-jog435sce2] {
    color: var(--text-muted);
}

.variant-thumb[b-jog435sce2] {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.variant-thumb-placeholder[b-jog435sce2] {
    width: 40px;
    height: 40px;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.new-badge[b-jog435sce2] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border-radius: 4px;
    font-size: 12px;
}

.import-result[b-jog435sce2] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    border-radius: var(--radius);
    margin-top: 24px;
}

.import-result.success[b-jog435sce2] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.import-result.error[b-jog435sce2] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.import-result div[b-jog435sce2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.import-result strong[b-jog435sce2] {
    font-size: 15px;
}

.import-result span[b-jog435sce2] {
    font-size: 13px;
}

/* Step 4 - Variant List */
.wizard-step-wide[b-jog435sce2] {
    max-width: 100%;
}

.variant-list-header[b-jog435sce2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.variant-list-info .selected-count[b-jog435sce2] {
    font-size: 14px;
    font-weight: 500;
}

.variant-list-table[b-jog435sce2] {
    overflow-x: auto;
}

.row-disabled[b-jog435sce2] {
    opacity: 0.5;
}

.barcode[b-jog435sce2] {
    font-family: var(--font-mono);
    font-size: 13px;
}

.attributes[b-jog435sce2] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.attribute-tag[b-jog435sce2] {
    display: inline-block;
    padding: 2px 8px;
    background: var(--bg-input);
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-secondary);
}

.input-number[b-jog435sce2] {
    width: 100px;
    text-align: right;
}

/* Step 7 - Preview */
.preview-product-card[b-jog435sce2] {
    display: flex;
    gap: 20px;
    padding: 20px;
    background: linear-gradient(135deg, var(--bg-input) 0%, var(--bg-card) 100%);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    margin-bottom: 24px;
}

.preview-product-image[b-jog435sce2] {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-card);
}

.preview-product-image img[b-jog435sce2] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-product-image .image-placeholder[b-jog435sce2] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.preview-product-info[b-jog435sce2] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.preview-product-title[b-jog435sce2] {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.preview-product-meta[b-jog435sce2] {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.meta-item[b-jog435sce2] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
}

/* Stats Cards */
.preview-stats[b-jog435sce2] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card[b-jog435sce2] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.stat-icon[b-jog435sce2] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon.variant[b-jog435sce2] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.stat-icon.image[b-jog435sce2] {
    background: rgba(168, 85, 247, 0.1);
    color: #a855f7;
}

.stat-icon.stock[b-jog435sce2] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.stat-icon.price[b-jog435sce2] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.stat-content[b-jog435sce2] {
    display: flex;
    flex-direction: column;
}

.stat-value[b-jog435sce2] {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}

.stat-label[b-jog435sce2] {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Preview Columns */
.preview-columns[b-jog435sce2] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.preview-column[b-jog435sce2] {
    display: flex;
    flex-direction: column;
}

/* Preview Cards */
.preview-card[b-jog435sce2] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.preview-card-full[b-jog435sce2] {
    margin-bottom: 24px;
}

.preview-card-header[b-jog435sce2] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: var(--bg-input);
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    font-weight: 600;
}

.preview-card-body[b-jog435sce2] {
    padding: 16px 20px;
}

.preview-card-body.no-padding[b-jog435sce2] {
    padding: 0;
}

/* Mapping Rows */
.mapping-row[b-jog435sce2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.mapping-row:last-child[b-jog435sce2] {
    border-bottom: none;
}

.mapping-label[b-jog435sce2] {
    font-size: 13px;
    color: var(--text-muted);
}

.mapping-value[b-jog435sce2] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.mapping-text[b-jog435sce2] {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Badges */
.badge[b-jog435sce2] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}

.badge-success[b-jog435sce2] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.badge-info[b-jog435sce2] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.badge-warning[b-jog435sce2] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.badge-muted[b-jog435sce2] {
    background: var(--bg-input);
    color: var(--text-muted);
}

.dim-badge[b-jog435sce2] {
    padding: 2px 6px;
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
    border-radius: 4px;
    font-size: 10px;
}

/* Pricing */
.pricing-row[b-jog435sce2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
}

.pricing-label[b-jog435sce2] {
    font-size: 13px;
    color: var(--text-muted);
}

.pricing-value[b-jog435sce2] {
    font-size: 14px;
    font-weight: 500;
}

.pricing-old[b-jog435sce2] {
    text-decoration: line-through;
    color: var(--text-muted);
}

.pricing-sale[b-jog435sce2] {
    font-size: 18px;
    font-weight: 700;
    color: #10b981;
}

.pricing-main[b-jog435sce2] {
    padding-top: 12px;
}

.pricing-divider[b-jog435sce2] {
    height: 1px;
    background: var(--border);
    margin: 8px 0;
}

.sku-prefix[b-jog435sce2] {
    font-family: var(--font-mono);
    background: var(--bg-input);
    padding: 2px 8px;
    border-radius: 4px;
}

/* Preview Table */
.preview-table-container[b-jog435sce2] {
    overflow-x: auto;
}

.preview-table[b-jog435sce2] {
    width: 100%;
    border-collapse: collapse;
}

.preview-table th[b-jog435sce2],
.preview-table td[b-jog435sce2] {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

.preview-table th[b-jog435sce2] {
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-input);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.preview-table .text-right[b-jog435sce2] {
    text-align: right;
}

.variant-thumb-sm[b-jog435sce2] {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 6px;
}

.variant-thumb-placeholder-sm[b-jog435sce2] {
    width: 36px;
    height: 36px;
    background: var(--bg-input);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.sku[b-jog435sce2] {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-secondary);
}

.price[b-jog435sce2] {
    font-weight: 600;
}

.stock[b-jog435sce2] {
    font-weight: 600;
}

.stock.in-stock[b-jog435sce2] {
    color: #10b981;
}

.stock.no-stock[b-jog435sce2] {
    color: var(--text-muted);
}

.preview-more[b-jog435sce2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    color: var(--text-muted);
    font-size: 13px;
    background: var(--bg-input);
}

/* Preview Images */
.preview-image-groups[b-jog435sce2] {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.preview-image-group[b-jog435sce2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.preview-image-group .group-label[b-jog435sce2] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.preview-image-group .group-images[b-jog435sce2] {
    display: flex;
    gap: 8px;
}

.preview-thumb[b-jog435sce2] {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border);
}

.preview-thumb-more[b-jog435sce2] {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.preview-image-group.more[b-jog435sce2] {
    justify-content: center;
    padding: 0 12px;
}

/* Import Result */
.import-result[b-jog435sce2] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    border-radius: var(--radius);
    margin-bottom: 24px;
}

.import-result.success[b-jog435sce2] {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.import-result.error[b-jog435sce2] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.import-result div[b-jog435sce2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.import-result strong[b-jog435sce2] {
    font-size: 16px;
}

.import-result span[b-jog435sce2] {
    font-size: 14px;
    opacity: 0.9;
}

/* Step 6 - Images */
.image-groups[b-jog435sce2] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.image-group-card[b-jog435sce2] {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.image-group-header[b-jog435sce2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-input);
    border-bottom: 1px solid var(--border);
}

.image-group-title[b-jog435sce2] {
    font-size: 15px;
    font-weight: 600;
}

.image-group-count[b-jog435sce2] {
    font-size: 13px;
    color: var(--text-muted);
}

.image-group-content[b-jog435sce2] {
    padding: 16px;
}

.image-grid[b-jog435sce2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
}

.image-item[b-jog435sce2] {
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border);
}

.image-item img[b-jog435sce2] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-item.image-more[b-jog435sce2] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
}

.no-images[b-jog435sce2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px;
    color: var(--text-muted);
    font-size: 13px;
}

/* Description Editor Section */
.description-editor-section[b-jog435sce2] {
    margin-top: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 300px;
}

.description-editor-section[b-jog435sce2]  .rich-text-editor {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.description-editor-section[b-jog435sce2]  .editor-content {
    flex: 1;
    min-height: 250px;
}

/* Full height step for description */
.wizard-step-fullheight[b-jog435sce2] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 500px;
}
/* /Components/Pages/Products/ProductListings.razor.rz.scp.css */
.stats-grid[b-wc7t29aegl] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card[b-wc7t29aegl] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transition: var(--transition);
}

.stat-card:hover[b-wc7t29aegl] {
    border-color: var(--border-hover);
    transform: translateY(-2px);
}

.stat-icon[b-wc7t29aegl] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon svg[b-wc7t29aegl] { width: 22px; height: 22px; }
.stat-icon.blue[b-wc7t29aegl] { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.stat-icon.green[b-wc7t29aegl] { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.stat-icon.yellow[b-wc7t29aegl] { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.stat-icon.red[b-wc7t29aegl] { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.stat-icon.purple[b-wc7t29aegl] { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }

.stat-content h3[b-wc7t29aegl] { font-size: 22px; font-weight: 700; margin-bottom: 2px; }
.stat-content p[b-wc7t29aegl] { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

.filter-tabs-container[b-wc7t29aegl] { margin-bottom: 24px; }
.filter-tabs[b-wc7t29aegl] {
    display: flex;
    gap: 8px;
    padding: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: fit-content;
}

.filter-tab[b-wc7t29aegl] {
    padding: 10px 18px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-tab:hover[b-wc7t29aegl] { color: var(--text-primary); background: var(--bg-input); }
.filter-tab.active[b-wc7t29aegl] { background: var(--primary); color: white; }
.filter-tab .count[b-wc7t29aegl] { padding: 2px 8px; background: rgba(255,255,255,0.2); border-radius: 10px; font-size: 11px; }
.filter-tab:not(.active) .count[b-wc7t29aegl] { background: var(--bg-input); }

/* Selection Banner */
.selection-banner[b-wc7t29aegl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: var(--radius);
    margin-bottom: 16px;
    animation: slideDown-b-wc7t29aegl 0.2s ease-out;
}

@keyframes slideDown-b-wc7t29aegl {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.selection-info[b-wc7t29aegl] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
    font-size: 14px;
}

.selection-info svg[b-wc7t29aegl] {
    color: #3b82f6;
}

.selection-info strong[b-wc7t29aegl] {
    color: #3b82f6;
    font-weight: 700;
}

.selection-actions[b-wc7t29aegl] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-select-all[b-wc7t29aegl],
.btn-clear-selection[b-wc7t29aegl] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.btn-select-all[b-wc7t29aegl] {
    background: #3b82f6;
    color: white;
}

.btn-select-all:hover[b-wc7t29aegl] {
    background: #2563eb;
    transform: translateY(-1px);
}

.btn-clear-selection[b-wc7t29aegl] {
    background: var(--bg-input);
    color: var(--text-secondary);
}

.btn-clear-selection:hover[b-wc7t29aegl] {
    background: var(--bg-card);
    color: var(--text-primary);
}

.btn-select-all svg[b-wc7t29aegl],
.btn-clear-selection svg[b-wc7t29aegl] {
    width: 16px;
    height: 16px;
}

.product-thumb[b-wc7t29aegl] {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.product-thumb-placeholder[b-wc7t29aegl] {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.product-info[b-wc7t29aegl] { display: flex; flex-direction: column; gap: 2px; }
.product-title[b-wc7t29aegl] { font-size: 14px; font-weight: 600; line-height: 1.4; }
.product-code[b-wc7t29aegl] { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); }
.product-category[b-wc7t29aegl] { font-size: 11px; color: var(--text-secondary); max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.barcode[b-wc7t29aegl] { font-family: var(--font-mono); font-size: 13px; color: var(--primary); }
.brand-name[b-wc7t29aegl] { font-size: 13px; }
.category-name[b-wc7t29aegl] { font-size: 13px; color: var(--text-muted); }

.variant-badge[b-wc7t29aegl] { display: flex; align-items: center; justify-content: center; gap: 4px; }
.variant-count[b-wc7t29aegl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 700;
}
.variant-matched[b-wc7t29aegl] { font-size: 11px; color: #10b981; font-weight: 600; }

.price-text[b-wc7t29aegl] { font-size: 13px; font-weight: 600; white-space: nowrap; }

.stock-badge[b-wc7t29aegl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}
.stock-badge.in-stock[b-wc7t29aegl] { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.stock-badge.out-of-stock[b-wc7t29aegl] { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

.store-badges[b-wc7t29aegl] { display: flex; justify-content: center; }
.store-count[b-wc7t29aegl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 700;
}
.store-count.empty[b-wc7t29aegl] { opacity: 0.5; }

.status-badge[b-wc7t29aegl] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.status-badge.approved[b-wc7t29aegl] { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.status-badge.on-sale[b-wc7t29aegl] { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.status-badge.pending[b-wc7t29aegl] { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.status-badge.rejected[b-wc7t29aegl] { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

.match-badge[b-wc7t29aegl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.match-badge.matched[b-wc7t29aegl] { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.match-badge.partial[b-wc7t29aegl] { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.match-badge.unmatched[b-wc7t29aegl] { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.match-badge.small[b-wc7t29aegl] { padding: 3px 6px; font-size: 10px; }

.table-actions[b-wc7t29aegl] { display: flex; gap: 8px; }
.action-btn[b-wc7t29aegl] {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    text-decoration: none;
}
.action-btn:hover[b-wc7t29aegl] { background: var(--bg-input); color: var(--primary); }
.action-btn.warning:hover[b-wc7t29aegl] { color: #f59e0b; }
.action-btn.product-detail-btn.active[b-wc7t29aegl] {
    color: #6366f1;
    background: rgba(99, 102, 241, 0.08);
}
.action-btn.product-detail-btn.active:hover[b-wc7t29aegl] {
    background: rgba(99, 102, 241, 0.15);
    color: #4f46e5;
}
.action-btn.product-detail-btn.disabled[b-wc7t29aegl] {
    color: var(--text-muted);
    opacity: 0.4;
    cursor: not-allowed;
}
.action-btn.product-detail-btn.disabled:hover[b-wc7t29aegl] {
    background: transparent;
    color: var(--text-muted);
}
.action-btn svg[b-wc7t29aegl] { width: 18px; height: 18px; }
.action-btn.small[b-wc7t29aegl] { width: 28px; height: 28px; }
.action-btn.small svg[b-wc7t29aegl] { width: 14px; height: 14px; }

/* Connection Status */
.connection-status[b-wc7t29aegl] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 16px;
    border-radius: var(--radius-sm);
    font-size: 12px;
}
.connection-status.connected[b-wc7t29aegl] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}
.connection-status.disconnected[b-wc7t29aegl] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}
.status-dot[b-wc7t29aegl] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}
.connection-status.connected .status-dot[b-wc7t29aegl] {
    animation: pulse-b-wc7t29aegl 2s infinite;
}
@keyframes pulse-b-wc7t29aegl {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Sync Progress */
.sync-progress[b-wc7t29aegl] {
    margin: 16px 0;
    padding: 16px;
    background: var(--bg-input);
    border-radius: var(--radius);
}
.sync-progress-header[b-wc7t29aegl] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 13px;
}
.sync-progress-text[b-wc7t29aegl] { color: var(--text-secondary); }
.sync-progress-percent[b-wc7t29aegl] { font-weight: 700; color: var(--primary); }
.sync-progress-bar[b-wc7t29aegl] {
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
}
.sync-progress-fill[b-wc7t29aegl] {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    border-radius: 4px;
    transition: width 0.3s ease;
}
.sync-progress-detail[b-wc7t29aegl] {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
}

.sync-message[b-wc7t29aegl] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: var(--radius);
    font-size: 14px;
    background: var(--bg-input);
}
.sync-message.success[b-wc7t29aegl] { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.sync-message.error[b-wc7t29aegl] { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

.sync-spinner[b-wc7t29aegl] {
    animation: spin-b-wc7t29aegl 1s linear infinite;
}
@keyframes spin-b-wc7t29aegl {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.sync-result[b-wc7t29aegl] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
    padding: 16px;
    background: var(--bg-input);
    border-radius: var(--radius);
}
.sync-stat[b-wc7t29aegl] { font-size: 14px; }
.sync-stat.success[b-wc7t29aegl] { color: #10b981; }
.sync-stat.info[b-wc7t29aegl] { color: #3b82f6; }
.sync-stat.error[b-wc7t29aegl] { color: #ef4444; }
.sync-stat.muted[b-wc7t29aegl] { color: var(--text-muted); }

/* Status filter panel — sync modal Reddedilmiş/Onay Bekleyen/Arşivlenmiş/Pasif switch'leri */
.status-filter-panel[b-wc7t29aegl] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 16px;
}

.status-filter-header[b-wc7t29aegl] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 12px;
}

.status-filter-header strong[b-wc7t29aegl] {
    font-size: 14px;
    color: var(--text-primary);
}

.status-filter-header small[b-wc7t29aegl] {
    font-size: 12px;
    color: var(--text-muted);
}

.status-filter-grid[b-wc7t29aegl] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

/* Detail Modal - New Design */
.detail-container[b-wc7t29aegl] { display: flex; flex-direction: column; gap: 24px; }

.detail-top[b-wc7t29aegl] { display: grid; grid-template-columns: 320px 1fr; gap: 32px; }

/* Image Gallery */
.detail-gallery[b-wc7t29aegl] { display: flex; flex-direction: column; gap: 12px; }
.gallery-main[b-wc7t29aegl] {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-input);
    border: 1px solid var(--border);
}
.gallery-main img[b-wc7t29aegl] { width: 100%; height: 100%; object-fit: contain; }
.gallery-placeholder[b-wc7t29aegl] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}
.gallery-thumbs[b-wc7t29aegl] { display: flex; gap: 8px; flex-wrap: wrap; }
.gallery-thumb[b-wc7t29aegl] {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 2px solid var(--border);
    cursor: pointer;
    transition: var(--transition);
}
.gallery-thumb:hover[b-wc7t29aegl] { border-color: var(--primary); }
.gallery-thumb.active[b-wc7t29aegl] { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); }
.gallery-thumb img[b-wc7t29aegl] { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb.more[b-wc7t29aegl] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

/* Product Info */
.detail-info[b-wc7t29aegl] { display: flex; flex-direction: column; gap: 16px; }
.detail-badges[b-wc7t29aegl] { display: flex; gap: 8px; flex-wrap: wrap; }
.detail-badge[b-wc7t29aegl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}
.detail-badge.matched[b-wc7t29aegl] { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.detail-badge.partial[b-wc7t29aegl] { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.detail-badge.unmatched[b-wc7t29aegl] { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.detail-badge.on-sale[b-wc7t29aegl] { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.detail-badge.rejected[b-wc7t29aegl] { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.detail-badge.inactive[b-wc7t29aegl] { background: rgba(107, 114, 128, 0.15); color: #6b7280; }

.detail-title[b-wc7t29aegl] { font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; }

.detail-category[b-wc7t29aegl] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary);
}
.detail-category svg[b-wc7t29aegl] { flex-shrink: 0; }

.detail-meta-grid[b-wc7t29aegl] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 16px;
    background: var(--bg-input);
    border-radius: var(--radius);
}
.detail-meta-item[b-wc7t29aegl] { display: flex; flex-direction: column; gap: 4px; }
.meta-label[b-wc7t29aegl] { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.meta-value[b-wc7t29aegl] { font-size: 14px; font-weight: 600; }
.meta-value.mono[b-wc7t29aegl] { font-family: var(--font-mono); font-size: 13px; }

.detail-stats[b-wc7t29aegl] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.detail-stat[b-wc7t29aegl] {
    padding: 16px;
    border-radius: var(--radius);
    text-align: center;
}
.detail-stat.blue[b-wc7t29aegl] { background: rgba(59, 130, 246, 0.1); }
.detail-stat.green[b-wc7t29aegl] { background: rgba(16, 185, 129, 0.1); }
.detail-stat.purple[b-wc7t29aegl] { background: rgba(139, 92, 246, 0.1); }
.detail-stat.orange[b-wc7t29aegl] { background: rgba(245, 158, 11, 0.1); }
.stat-number[b-wc7t29aegl] { display: block; font-size: 20px; font-weight: 800; }
.detail-stat.blue .stat-number[b-wc7t29aegl] { color: #3b82f6; }
.detail-stat.green .stat-number[b-wc7t29aegl] { color: #10b981; }
.detail-stat.purple .stat-number[b-wc7t29aegl] { color: #8b5cf6; }
.detail-stat.orange .stat-number[b-wc7t29aegl] { color: #f59e0b; }
.stat-label[b-wc7t29aegl] { font-size: 11px; color: var(--text-muted); text-transform: uppercase; }

.detail-stores[b-wc7t29aegl] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stores-label[b-wc7t29aegl] { font-size: 13px; color: var(--text-muted); }
.store-tag[b-wc7t29aegl] {
    padding: 4px 10px;
    background: var(--bg-input);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

/* Tabs */
.detail-tabs[b-wc7t29aegl] {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--bg-input);
    border-radius: var(--radius);
    width: fit-content;
}
.detail-tab[b-wc7t29aegl] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}
.detail-tab:hover[b-wc7t29aegl] { color: var(--text-primary); }
.detail-tab.active[b-wc7t29aegl] { background: var(--bg-card); color: var(--primary); box-shadow: var(--shadow-sm); }
.detail-tab svg[b-wc7t29aegl] { flex-shrink: 0; }

.detail-tab-content[b-wc7t29aegl] { min-height: 200px; }

/* Overview Tab */
.overview-grid[b-wc7t29aegl] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.overview-card[b-wc7t29aegl] {
    padding: 20px;
    background: var(--bg-input);
    border-radius: var(--radius);
}
.overview-card.full-width[b-wc7t29aegl] { grid-column: 1 / -1; }
.overview-card h4[b-wc7t29aegl] { font-size: 14px; margin-bottom: 16px; color: var(--text-secondary); }
.status-list[b-wc7t29aegl] { display: flex; flex-direction: column; gap: 12px; }
.status-row[b-wc7t29aegl] { display: flex; justify-content: space-between; align-items: center; }
.status-label[b-wc7t29aegl] { font-size: 13px; color: var(--text-muted); }
.status-value[b-wc7t29aegl] { font-size: 14px; font-weight: 600; }
.status-value.highlight[b-wc7t29aegl] { color: #3b82f6; }
.status-value.danger[b-wc7t29aegl] { color: #ef4444; }

.barcode-list[b-wc7t29aegl] { display: flex; gap: 8px; flex-wrap: wrap; }
.barcode-tag[b-wc7t29aegl] {
    padding: 6px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 12px;
}
.barcode-more[b-wc7t29aegl] { font-size: 12px; color: var(--text-muted); padding: 6px 0; }

/* Variants Tab */
.variants-grid[b-wc7t29aegl] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.variants-loading[b-wc7t29aegl] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 0;
    color: var(--text-secondary);
    font-size: 13px;
}
.variants-loading .spinner[b-wc7t29aegl] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: variants-spin-b-wc7t29aegl 0.8s linear infinite;
}
@keyframes variants-spin-b-wc7t29aegl { to { transform: rotate(360deg); } }

.variants-pagination[b-wc7t29aegl] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 0 4px;
    margin-top: 12px;
    border-top: 1px solid var(--border);
}
.variants-page-btn[b-wc7t29aegl] {
    padding: 6px 14px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 13px;
    transition: var(--transition);
}
.variants-page-btn:hover:not(:disabled)[b-wc7t29aegl] {
    border-color: var(--primary);
    color: var(--primary);
}
.variants-page-btn:disabled[b-wc7t29aegl] {
    opacity: 0.45;
    cursor: not-allowed;
}
.variants-page-info[b-wc7t29aegl] {
    font-size: 13px;
    color: var(--text-secondary);
}
.variants-page-total[b-wc7t29aegl] {
    color: var(--text-muted);
    margin-left: 6px;
}
.variant-card[b-wc7t29aegl] {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: var(--transition);
}
.variant-card:hover[b-wc7t29aegl] { border-color: var(--border-hover); }

.variant-card-header[b-wc7t29aegl] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--border);
}
.variant-image[b-wc7t29aegl] {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-card);
}
.variant-image img[b-wc7t29aegl] { width: 100%; height: 100%; object-fit: cover; }
.variant-image-placeholder[b-wc7t29aegl] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}
.variant-main-info[b-wc7t29aegl] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.variant-id-line[b-wc7t29aegl] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.variant-id-label[b-wc7t29aegl] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    flex-shrink: 0;
    width: 38px;
}

.variant-id-sep[b-wc7t29aegl] {
    color: var(--text-muted);
    flex-shrink: 0;
}

.variant-id-value[b-wc7t29aegl] {
    font-family: var(--font-mono);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.variant-id-value.sku[b-wc7t29aegl] {
    font-size: 12px;
    color: var(--text-primary);
}

.variant-id-value.sku.empty[b-wc7t29aegl] {
    color: var(--text-muted);
    font-weight: 400;
    opacity: 0.6;
}

.variant-id-value.barcode[b-wc7t29aegl] {
    font-size: 13px;
    color: var(--primary);
}
.variant-status[b-wc7t29aegl] { flex-shrink: 0; }
.status-pill[b-wc7t29aegl] {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}
.status-pill.approved[b-wc7t29aegl] { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.status-pill.on-sale[b-wc7t29aegl] { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.status-pill.pending[b-wc7t29aegl] { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.status-pill.rejected[b-wc7t29aegl] { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

.variant-card-body[b-wc7t29aegl] {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}

/* Attribute Sections */
.attr-section[b-wc7t29aegl] {
    margin-bottom: 12px;
}
.attr-section:last-child[b-wc7t29aegl] {
    margin-bottom: 0;
}
.attr-section-header[b-wc7t29aegl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    margin-bottom: 4px;
}
.attr-section-title[b-wc7t29aegl] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.attr-section-badge[b-wc7t29aegl] {
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 8px;
    color: white;
}
.attr-section-badge.variant[b-wc7t29aegl] {
    background: #8b5cf6;
}
.attr-section-badge.required[b-wc7t29aegl] {
    background: #f59e0b;
}
.attr-section-badge.product[b-wc7t29aegl] {
    background: #6b7280;
}

/* Variant Section */
.variant-section .attr-section-title[b-wc7t29aegl] {
    color: #8b5cf6;
}

/* Required Section */
.required-section .attr-section-title[b-wc7t29aegl] {
    color: #f59e0b;
}

/* Product Section */
.product-section .attr-section-title[b-wc7t29aegl] {
    color: #6b7280;
}

/* Attribute Table */
.attr-table[b-wc7t29aegl] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.attr-table tr[b-wc7t29aegl] {
    border-bottom: 1px solid var(--border);
}
.attr-table tr:last-child[b-wc7t29aegl] {
    border-bottom: none;
}
.attr-table td[b-wc7t29aegl] {
    padding: 5px 0;
}
.attr-name-cell[b-wc7t29aegl] {
    color: var(--text-muted);
    width: 40%;
    padding-right: 8px;
}
.attr-value-cell[b-wc7t29aegl] {
    font-weight: 500;
    color: var(--text-primary);
    word-break: break-word;
}

/* Variant Store List */
.variant-stores[b-wc7t29aegl] {
    padding: 10px 12px;
    max-height: 120px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.variant-stores[b-wc7t29aegl]::-webkit-scrollbar { width: 5px; }
.variant-stores[b-wc7t29aegl]::-webkit-scrollbar-track { background: transparent; }
.variant-stores[b-wc7t29aegl]::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.stores-header[b-wc7t29aegl] {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}
.stores-title[b-wc7t29aegl] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.stores-list[b-wc7t29aegl] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.store-item[b-wc7t29aegl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--border);
}
.store-item.on-sale[b-wc7t29aegl] { border-left-color: #3b82f6; }
.store-item.approved[b-wc7t29aegl] { border-left-color: #10b981; }
.store-item.rejected[b-wc7t29aegl] { border-left-color: #ef4444; }
.store-item.pending[b-wc7t29aegl] { border-left-color: #f59e0b; }

.store-name-row[b-wc7t29aegl] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.store-name[b-wc7t29aegl] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.store-status-badge[b-wc7t29aegl] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 10px;
}
.store-status-badge.rejected[b-wc7t29aegl] { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.store-status-badge.on-sale[b-wc7t29aegl] { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.store-status-badge.approved[b-wc7t29aegl] { background: rgba(16, 185, 129, 0.15); color: #10b981; }

.store-details-row[b-wc7t29aegl] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.store-price[b-wc7t29aegl] {
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
    white-space: nowrap;
}
.store-stock[b-wc7t29aegl] {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    min-width: 24px;
    text-align: center;
}
.store-stock.in-stock[b-wc7t29aegl] { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.store-stock.out-stock[b-wc7t29aegl] { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

.variant-details[b-wc7t29aegl] { display: flex; gap: 16px; }
.variant-detail[b-wc7t29aegl] { flex: 1; }
.detail-label[b-wc7t29aegl] { display: block; font-size: 10px; color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px; }
.detail-value[b-wc7t29aegl] { font-size: 14px; font-weight: 600; }
.detail-value.price[b-wc7t29aegl] { color: var(--primary); }
.detail-value.in-stock[b-wc7t29aegl] { color: #10b981; }
.detail-value.out-stock[b-wc7t29aegl] { color: #ef4444; }

.variant-card-footer[b-wc7t29aegl] {
    display: flex;
    flex-direction: column;
    padding: 0;
    background: var(--bg-card);
}

.variant-match-row[b-wc7t29aegl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-top: 1px solid var(--border);
}
.match-info[b-wc7t29aegl] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
}
.match-info.matched[b-wc7t29aegl] { color: #10b981; }
.match-info.unmatched[b-wc7t29aegl] { color: var(--text-muted); }
.variant-action-btn[b-wc7t29aegl] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}
.variant-action-btn.primary[b-wc7t29aegl] { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.variant-action-btn.primary:hover[b-wc7t29aegl] { background: #3b82f6; color: white; }
.variant-action-btn.danger[b-wc7t29aegl] { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.variant-action-btn.danger:hover[b-wc7t29aegl] { background: #ef4444; color: white; }

/* Description Tab */
.description-content[b-wc7t29aegl] {
    padding: 20px;
    background: var(--bg-input);
    border-radius: var(--radius);
    font-size: 14px;
    line-height: 1.7;
}

/* Footer Button */
.btn[b-wc7t29aegl] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: var(--transition);
}
.btn-secondary[b-wc7t29aegl] {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border);
}
.btn-secondary:hover[b-wc7t29aegl] { background: var(--bg-card); border-color: var(--border-hover); }

.attributes[b-wc7t29aegl] { display: flex; gap: 4px; flex-wrap: wrap; }
.attribute-tag[b-wc7t29aegl] {
    padding: 2px 6px;
    background: var(--bg-input);
    border-radius: 4px;
    font-size: 11px;
    color: var(--text-secondary);
}
.attribute-more[b-wc7t29aegl] { font-size: 11px; color: var(--text-muted); }

.variant-actions[b-wc7t29aegl] { display: flex; gap: 4px; }

.text-muted[b-wc7t29aegl] { color: var(--text-muted); }
.text-center[b-wc7t29aegl] { text-align: center; }

/* Filter Bar */
.filter-bar[b-wc7t29aegl] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.filter-bar .search-box[b-wc7t29aegl] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    height: 44px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: var(--transition);
}

.filter-bar .search-box:focus-within[b-wc7t29aegl] {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.filter-bar .search-box svg[b-wc7t29aegl] {
    flex-shrink: 0;
    color: var(--text-muted);
}

.filter-bar .search-box input[b-wc7t29aegl] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 14px;
    color: var(--text-primary);
    outline: none;
}

.filter-bar .search-box input[b-wc7t29aegl]::placeholder {
    color: var(--text-muted);
}

.filter-btn[b-wc7t29aegl] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 18px;
    height: 44px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--radius);
    transition: var(--transition);
}

.filter-btn:hover[b-wc7t29aegl] {
    border-color: var(--border-hover);
    color: var(--text-primary);
}

.filter-btn.has-filters[b-wc7t29aegl] {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(59, 130, 246, 0.08);
}

.filter-btn svg[b-wc7t29aegl] {
    flex-shrink: 0;
}

.filter-count[b-wc7t29aegl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--primary);
    color: white;
    font-size: 11px;
    font-weight: 700;
    border-radius: 10px;
}

.clear-filters-btn[b-wc7t29aegl] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    height: 44px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--radius);
    transition: var(--transition);
}

.clear-filters-btn:hover[b-wc7t29aegl] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Filter Modal */
.filter-modal-content[b-wc7t29aegl] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.filter-modal-content .form-group[b-wc7t29aegl] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-modal-content .form-group label[b-wc7t29aegl] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Filter Editor section — site theme'i ile uyumlu */
.filter-editor-section[b-wc7t29aegl] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.filter-editor-section-header[b-wc7t29aegl] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.filter-editor-section-header h4[b-wc7t29aegl] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.filter-editor-hint[b-wc7t29aegl] {
    font-size: 12px;
    color: var(--text-muted);
}

.filter-editor-sort[b-wc7t29aegl] {
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px dashed var(--border);
}

/* Kayıt Sayısı badge — site primary color ile */
.record-count-badge[b-wc7t29aegl] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding: 8px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text-primary);
    transition: var(--transition);
}

.record-count-badge:hover[b-wc7t29aegl] {
    border-color: var(--primary);
    background: var(--primary-alpha);
}

.record-count-badge svg[b-wc7t29aegl] {
    color: var(--primary);
}

.record-count-label[b-wc7t29aegl] {
    color: var(--text-secondary);
    font-weight: 500;
}

.record-count-value[b-wc7t29aegl] {
    font-weight: 700;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}

/* Match Modal Styles */
.match-modal-content[b-wc7t29aegl] { display: flex; flex-direction: column; gap: 20px; }
.match-source h4[b-wc7t29aegl], .match-search h4[b-wc7t29aegl] { font-size: 14px; color: var(--text-muted); margin-bottom: 12px; }
.match-product-card[b-wc7t29aegl] {
    padding: 16px;
    background: var(--bg-input);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}
.match-product-card strong[b-wc7t29aegl] { font-size: 15px; display: block; margin-bottom: 8px; }
.match-product-meta[b-wc7t29aegl] { display: flex; gap: 16px; font-size: 13px; color: var(--text-muted); }
.search-input-group[b-wc7t29aegl] { display: flex; gap: 12px; }
.search-input-group .form-input[b-wc7t29aegl] { flex: 1; }
.match-results[b-wc7t29aegl] { max-height: 300px; overflow-y: auto; }
.product-list[b-wc7t29aegl] { display: flex; flex-direction: column; gap: 8px; }
.product-list-item[b-wc7t29aegl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition);
}
.product-list-item:hover[b-wc7t29aegl] { border-color: var(--primary); }
.product-list-item.selected[b-wc7t29aegl] { border-color: var(--primary); background: rgba(59, 130, 246, 0.08); }
.product-list-info strong[b-wc7t29aegl] { font-size: 14px; display: block; margin-bottom: 4px; }
.product-list-meta[b-wc7t29aegl] { display: flex; gap: 16px; font-size: 12px; color: var(--text-muted); }
.check-icon[b-wc7t29aegl] { width: 24px; height: 24px; color: var(--primary); }
.no-results[b-wc7t29aegl] { padding: 40px; text-align: center; color: var(--text-muted); }

/* ═══════════════════════════════════════════════════ */
/* RESPONSIVE                                          */
/* ═══════════════════════════════════════════════════ */

@media (max-width: 1400px) {
    .stats-grid[b-wc7t29aegl] { grid-template-columns: repeat(3, 1fr); }
    .detail-top[b-wc7t29aegl] { grid-template-columns: 280px 1fr; }
}

@media (max-width: 1100px) {
    .stats-grid[b-wc7t29aegl] { grid-template-columns: repeat(2, 1fr); }
}

/* Tablet */
@media (max-width: 1024px) {
    .stats-grid[b-wc7t29aegl] {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 16px;
    }

    /* Last stat card full width when 5 items in 2-col */
    .stats-grid .stat-card:last-child:nth-child(odd)[b-wc7t29aegl] {
        grid-column: 1 / -1;
    }

    .stat-card[b-wc7t29aegl] {
        padding: 14px;
    }

    .stat-card:hover[b-wc7t29aegl] {
        transform: none;
    }

    .stat-icon[b-wc7t29aegl] {
        width: 40px;
        height: 40px;
    }

    .stat-icon svg[b-wc7t29aegl] {
        width: 20px;
        height: 20px;
    }

    .stat-content h3[b-wc7t29aegl] {
        font-size: 20px;
    }

    .stat-content p[b-wc7t29aegl] {
        font-size: 11px;
    }

    /* Filter tabs - horizontal scroll */
    .filter-tabs-container[b-wc7t29aegl] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 16px;
    }

    .filter-tabs[b-wc7t29aegl] {
        width: max-content;
    }

    .filter-tab[b-wc7t29aegl] {
        padding: 8px 14px;
        font-size: 12px;
        white-space: nowrap;
    }

    .filter-tab .count[b-wc7t29aegl] {
        font-size: 10px;
        padding: 1px 6px;
    }

    /* Detail modal */
    .detail-top[b-wc7t29aegl] { grid-template-columns: 1fr; }
    .detail-gallery[b-wc7t29aegl] { max-width: 400px; margin: 0 auto; }
    .detail-stats[b-wc7t29aegl] { grid-template-columns: repeat(2, 1fr); }
    .overview-grid[b-wc7t29aegl] { grid-template-columns: 1fr; }

    /* Selection banner */
    .selection-banner[b-wc7t29aegl] {
        flex-direction: column;
        gap: 10px;
        padding: 12px;
    }

    .selection-actions[b-wc7t29aegl] {
        width: 100%;
        justify-content: flex-end;
    }

    /* Product info */
    .product-title[b-wc7t29aegl] {
        max-width: 220px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .product-category[b-wc7t29aegl] {
        max-width: 180px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .stats-grid[b-wc7t29aegl] {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 12px;
    }

    .stat-card[b-wc7t29aegl] {
        padding: 12px;
        gap: 10px;
    }

    .stat-icon[b-wc7t29aegl] {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }

    .stat-icon svg[b-wc7t29aegl] {
        width: 18px;
        height: 18px;
    }

    .stat-content h3[b-wc7t29aegl] {
        font-size: 18px;
    }

    .stat-content p[b-wc7t29aegl] {
        font-size: 10px;
    }

    /* Filter bar */
    .filter-bar[b-wc7t29aegl] {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px;
        margin-bottom: 12px;
    }

    .filter-bar .search-box[b-wc7t29aegl] {
        flex: 1 1 100%;
        height: 42px;
        padding: 0 14px;
        gap: 10px;
    }

    .filter-bar .search-box svg[b-wc7t29aegl] {
        width: 16px;
        height: 16px;
    }

    .filter-bar .search-box input[b-wc7t29aegl] {
        font-size: 13px;
    }

    .filter-btn[b-wc7t29aegl] {
        flex: 1;
        justify-content: center;
        height: 40px;
        padding: 0 14px;
        font-size: 13px;
        gap: 6px;
        border-radius: var(--radius);
    }

    .filter-btn svg[b-wc7t29aegl] {
        width: 16px;
        height: 16px;
    }

    .clear-filters-btn[b-wc7t29aegl] {
        height: 40px;
        padding: 0 14px;
        font-size: 12px;
        border-radius: var(--radius);
    }

    .clear-filters-btn svg[b-wc7t29aegl] {
        width: 14px;
        height: 14px;
    }

    /* Filter tabs */
    .filter-tabs-container[b-wc7t29aegl] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -16px 12px;
        padding: 0 16px;
        scrollbar-width: none;
    }

    .filter-tabs-container[b-wc7t29aegl]::-webkit-scrollbar {
        display: none;
    }

    .filter-tabs[b-wc7t29aegl] {
        width: max-content;
        gap: 4px;
        padding: 3px;
    }

    .filter-tab[b-wc7t29aegl] {
        padding: 7px 12px;
        font-size: 12px;
        white-space: nowrap;
        gap: 6px;
    }

    .filter-tab .count[b-wc7t29aegl] {
        font-size: 10px;
        padding: 1px 5px;
    }

    /* Selection banner */
    .selection-banner[b-wc7t29aegl] {
        flex-direction: column;
        gap: 8px;
        padding: 10px 12px;
        margin-bottom: 12px;
    }

    .selection-info[b-wc7t29aegl] {
        font-size: 13px;
        gap: 8px;
    }

    .selection-actions[b-wc7t29aegl] {
        width: 100%;
        flex-wrap: wrap;
        gap: 6px;
    }

    .btn-select-all[b-wc7t29aegl],
    .btn-clear-selection[b-wc7t29aegl] {
        flex: 1;
        justify-content: center;
        padding: 7px 10px;
        font-size: 12px;
    }

    /* Product thumbnails */
    .product-thumb[b-wc7t29aegl],
    .product-thumb-placeholder[b-wc7t29aegl] {
        width: 40px;
        height: 40px;
    }

    /* Product info */
    .product-title[b-wc7t29aegl] {
        font-size: 13px;
        max-width: 160px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .product-code[b-wc7t29aegl] {
        font-size: 10px;
    }

    .product-category[b-wc7t29aegl] {
        font-size: 10px;
        max-width: 140px;
    }

    /* Badges */
    .variant-count[b-wc7t29aegl] {
        min-width: 24px;
        height: 24px;
        font-size: 12px;
    }

    .stock-badge[b-wc7t29aegl] {
        padding: 3px 8px;
        font-size: 11px;
    }

    .price-text[b-wc7t29aegl] {
        font-size: 12px;
    }

    .store-count[b-wc7t29aegl] {
        min-width: 24px;
        height: 24px;
        font-size: 12px;
    }

    .match-badge[b-wc7t29aegl] {
        font-size: 11px;
        padding: 3px 8px;
        gap: 4px;
    }

    .match-badge svg[b-wc7t29aegl] {
        width: 12px;
        height: 12px;
    }

    /* Action buttons */
    .table-actions[b-wc7t29aegl] {
        gap: 4px;
    }

    .action-btn[b-wc7t29aegl] {
        width: 32px;
        height: 32px;
    }

    .action-btn svg[b-wc7t29aegl] {
        width: 16px;
        height: 16px;
    }

    /* Detail modal */
    .detail-meta-grid[b-wc7t29aegl] { grid-template-columns: 1fr; }
    .detail-stats[b-wc7t29aegl] { grid-template-columns: repeat(2, 1fr); }
    .variants-grid[b-wc7t29aegl] { grid-template-columns: 1fr; }
    .detail-tabs[b-wc7t29aegl] { width: 100%; overflow-x: auto; }
    .gallery-thumbs[b-wc7t29aegl] { justify-content: center; }

    .detail-gallery[b-wc7t29aegl] {
        max-width: 100%;
    }

    .gallery-main img[b-wc7t29aegl],
    .gallery-placeholder[b-wc7t29aegl] {
        max-height: 250px;
    }

    .gallery-thumb[b-wc7t29aegl] {
        width: 48px;
        height: 48px;
    }

    /* Sync modal */
    .sync-progress-header[b-wc7t29aegl] {
        font-size: 13px;
    }

    .sync-result[b-wc7t29aegl] {
        gap: 8px;
    }

    .sync-stat[b-wc7t29aegl] {
        font-size: 13px;
    }

    .connection-status[b-wc7t29aegl] {
        font-size: 12px;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .stats-grid[b-wc7t29aegl] {
        gap: 8px;
    }

    .stat-card[b-wc7t29aegl] {
        padding: 10px;
        gap: 8px;
    }

    .stat-icon[b-wc7t29aegl] {
        width: 32px;
        height: 32px;
    }

    .stat-icon svg[b-wc7t29aegl] {
        width: 16px;
        height: 16px;
    }

    .stat-content h3[b-wc7t29aegl] {
        font-size: 16px;
    }

    .stat-content p[b-wc7t29aegl] {
        font-size: 9px;
    }

    /* Product info */
    .product-title[b-wc7t29aegl] {
        font-size: 12px;
        max-width: 120px;
    }

    .product-category[b-wc7t29aegl] {
        max-width: 100px;
    }

    /* Filter tabs */
    .filter-tab[b-wc7t29aegl] {
        padding: 6px 10px;
        font-size: 11px;
    }

    /* Selection banner */
    .selection-info[b-wc7t29aegl] {
        font-size: 12px;
    }

    .btn-select-all[b-wc7t29aegl],
    .btn-clear-selection[b-wc7t29aegl] {
        font-size: 11px;
        padding: 6px 8px;
    }

    /* Detail stats */
    .detail-stats[b-wc7t29aegl] {
        grid-template-columns: 1fr;
    }
}

/* ── Yayın Durumu kolonu — mağaza-bazlı satırlar ──────────────── */
.store-status-rows[b-wc7t29aegl] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.store-status-row[b-wc7t29aegl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    border-radius: 6px;
    background: var(--bg-input);
    border: 1px solid transparent;
    transition: border-color 0.12s ease;
}

.store-status-row:hover[b-wc7t29aegl] {
    border-color: var(--border);
}

.store-status-label[b-wc7t29aegl] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.store-status-logo[b-wc7t29aegl] {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 6px;
    background: var(--bg-card);
    padding: 2px;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.store-status-logo--fallback[b-wc7t29aegl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Renk inline style ile platforma özel (PlatformChipColors) gelir — gradient yok.
       Aşağıdaki nötr değerler yalnızca inline style yoksa devreye girer. */
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    border: none;
}

/* ── Yayın Durumu kolonu — kompakt status pill rozetleri ────────── */
.status-pills[b-wc7t29aegl] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-wrap: wrap;
    justify-content: center;
}

.status-pill[b-wc7t29aegl] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.2px;
    cursor: default;
    transition: transform 0.12s ease;
}

.status-pill:hover[b-wc7t29aegl] {
    transform: scale(1.08);
}

.status-pill svg[b-wc7t29aegl] {
    flex-shrink: 0;
}

.status-pill--onsale[b-wc7t29aegl] {
    background: rgba(16, 185, 129, 0.14);
    color: #047857;
}

.status-pill--approved[b-wc7t29aegl] {
    background: rgba(59, 130, 246, 0.14);
    color: #1d4ed8;
}

.status-pill--rejected[b-wc7t29aegl] {
    background: rgba(239, 68, 68, 0.14);
    color: #b91c1c;
}

.status-pill--locked[b-wc7t29aegl] {
    background: rgba(100, 116, 139, 0.18);
    color: #475569;
}

.status-pill--archived[b-wc7t29aegl] {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
}

.status-pill--none[b-wc7t29aegl] {
    color: var(--text-secondary);
    opacity: 0.5;
    font-weight: 600;
}

/* /Components/Pages/Products/ProductMergeWizard.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* PRODUCT MERGE WIZARD STYLES                                                  */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* Step Header */
.step-header[b-fdpi8xvy9d] {
    margin-bottom: 1.5rem;
}

.step-header h3[b-fdpi8xvy9d] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.step-header p[b-fdpi8xvy9d] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* STEP 1: Ana Ürün Seçimi                                                      */
/* ═══════════════════════════════════════════════════════════════════════════ */

.merge-product-list[b-fdpi8xvy9d] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.merge-product-card[b-fdpi8xvy9d] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border: 2px solid var(--border);
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.merge-product-card:hover[b-fdpi8xvy9d] {
    border-color: var(--primary);
    background: var(--bg-tertiary);
}

.merge-product-card.selected[b-fdpi8xvy9d] {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.product-select-indicator[b-fdpi8xvy9d] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.merge-product-card.selected .product-select-indicator[b-fdpi8xvy9d] {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.product-image[b-fdpi8xvy9d] {
    width: 64px;
    height: 64px;
    border-radius: 0.5rem;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-tertiary);
}

.product-image img[b-fdpi8xvy9d] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-image .no-image[b-fdpi8xvy9d] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.product-details[b-fdpi8xvy9d] {
    flex: 1;
    min-width: 0;
}

.product-name[b-fdpi8xvy9d] {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-meta[b-fdpi8xvy9d] {
    display: flex;
    gap: 0.75rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.product-meta .sku[b-fdpi8xvy9d] {
    font-family: var(--font-mono);
}

.product-category[b-fdpi8xvy9d] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.main-badge[b-fdpi8xvy9d] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: var(--primary);
    color: white;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* STEP 2: Ürün Bilgileri                                                       */
/* ═══════════════════════════════════════════════════════════════════════════ */

.step-info[b-fdpi8xvy9d] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.merge-info-layout[b-fdpi8xvy9d] {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.5rem;
    flex: 1;
    min-height: 0;
}

.merge-main-summary[b-fdpi8xvy9d] {
    position: sticky;
    top: 0;
}

.summary-card[b-fdpi8xvy9d] {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 1rem;
}

.summary-header[b-fdpi8xvy9d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.summary-product[b-fdpi8xvy9d] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.summary-product img[b-fdpi8xvy9d] {
    width: 48px;
    height: 48px;
    border-radius: 0.5rem;
    object-fit: cover;
}

.summary-info[b-fdpi8xvy9d] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.summary-sku[b-fdpi8xvy9d] {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.summary-category[b-fdpi8xvy9d] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.summary-stats[b-fdpi8xvy9d] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.summary-stats .stat-item[b-fdpi8xvy9d] {
    text-align: center;
    padding: 0.5rem;
    background: var(--bg-tertiary);
    border-radius: 0.5rem;
}

.summary-stats .stat-value[b-fdpi8xvy9d] {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.summary-stats .stat-label[b-fdpi8xvy9d] {
    font-size: 0.6875rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.merge-info-form[b-fdpi8xvy9d] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.merge-info-form .form-group[b-fdpi8xvy9d] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.merge-info-form .form-group label[b-fdpi8xvy9d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.merge-info-form .form-group label svg[b-fdpi8xvy9d] {
    color: var(--text-muted);
}

.merge-info-form .form-group-grow[b-fdpi8xvy9d] {
    flex: 1;
    min-height: 0;
}

.description-editor-wrapper[b-fdpi8xvy9d] {
    flex: 1;
    min-height: 250px;
    display: flex;
    flex-direction: column;
}

.description-editor-wrapper :deep(.ql-container)[b-fdpi8xvy9d] {
    flex: 1;
    min-height: 200px;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* STEP 3: Varyantlar                                                           */
/* ═══════════════════════════════════════════════════════════════════════════ */

.step-variants[b-fdpi8xvy9d] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.variants-stats-bar[b-fdpi8xvy9d] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.stat-chip[b-fdpi8xvy9d] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 2rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.stat-chip svg[b-fdpi8xvy9d] {
    color: var(--primary);
}

.variants-by-product[b-fdpi8xvy9d] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
    overflow-y: auto;
}

.product-variant-group[b-fdpi8xvy9d] {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    overflow: hidden;
}

.product-variant-group.is-main[b-fdpi8xvy9d] {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}

.group-header[b-fdpi8xvy9d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border);
}

.product-variant-group.is-main .group-header[b-fdpi8xvy9d] {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.group-title[b-fdpi8xvy9d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.main-indicator[b-fdpi8xvy9d] {
    color: var(--warning);
    display: flex;
}

.group-name[b-fdpi8xvy9d] {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.group-sku[b-fdpi8xvy9d] {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.group-badge[b-fdpi8xvy9d] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    flex-shrink: 0;
}

.group-variants[b-fdpi8xvy9d] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.5rem;
    padding: 0.75rem;
}

.variant-card[b-fdpi8xvy9d] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.625rem 0.75rem;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
}

.variant-main[b-fdpi8xvy9d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.variant-name[b-fdpi8xvy9d] {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.variant-sku[b-fdpi8xvy9d] {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.variant-details[b-fdpi8xvy9d] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.variant-barcode[b-fdpi8xvy9d] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

.variant-price[b-fdpi8xvy9d] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
}

.variant-stock[b-fdpi8xvy9d] {
    font-size: 0.6875rem;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
}

.variant-stock.in-stock[b-fdpi8xvy9d] {
    background: color-mix(in srgb, var(--success) 15%, transparent);
    color: var(--success);
}

.variant-stock.no-stock[b-fdpi8xvy9d] {
    background: color-mix(in srgb, var(--danger) 15%, transparent);
    color: var(--danger);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* STEP 4: Önizleme                                                             */
/* ═══════════════════════════════════════════════════════════════════════════ */

.step-preview[b-fdpi8xvy9d] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.preview-layout[b-fdpi8xvy9d] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.preview-result-card[b-fdpi8xvy9d] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, transparent), color-mix(in srgb, var(--primary) 5%, transparent));
    border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
    border-radius: 1rem;
    padding: 1.25rem;
}

.result-header[b-fdpi8xvy9d] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.result-icon[b-fdpi8xvy9d] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.result-title h4[b-fdpi8xvy9d] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

.result-sku[b-fdpi8xvy9d] {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.result-stats[b-fdpi8xvy9d] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.result-stat[b-fdpi8xvy9d] {
    text-align: center;
    padding: 0.75rem;
    background: var(--bg-primary);
    border-radius: 0.5rem;
}

.result-stat .stat-number[b-fdpi8xvy9d] {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}

.result-stat .stat-text[b-fdpi8xvy9d] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.preview-actions[b-fdpi8xvy9d] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.action-section[b-fdpi8xvy9d] {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    overflow: hidden;
}

.action-header[b-fdpi8xvy9d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    font-weight: 600;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--border);
}

.keep-section .action-header[b-fdpi8xvy9d] {
    background: color-mix(in srgb, var(--success) 10%, transparent);
    color: var(--success);
}

.merge-section .action-header[b-fdpi8xvy9d] {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
}

.action-item[b-fdpi8xvy9d] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
}

.action-item:last-child[b-fdpi8xvy9d] {
    border-bottom: none;
}

.item-image[b-fdpi8xvy9d] {
    width: 40px;
    height: 40px;
    border-radius: 0.375rem;
    object-fit: cover;
    flex-shrink: 0;
}

.item-image.placeholder[b-fdpi8xvy9d] {
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.item-info[b-fdpi8xvy9d] {
    flex: 1;
    min-width: 0;
}

.item-name[b-fdpi8xvy9d] {
    display: block;
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-meta[b-fdpi8xvy9d] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.item-arrow[b-fdpi8xvy9d] {
    color: var(--primary);
    flex-shrink: 0;
}

.preview-warning[b-fdpi8xvy9d] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: color-mix(in srgb, var(--warning) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
    border-radius: 0.75rem;
}

.preview-warning svg[b-fdpi8xvy9d] {
    color: var(--warning);
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.warning-content[b-fdpi8xvy9d] {
    font-size: 0.875rem;
    color: var(--text-primary);
    line-height: 1.5;
}

.warning-content strong[b-fdpi8xvy9d] {
    color: var(--warning);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* RESPONSIVE                                                                   */
/* ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .merge-info-layout[b-fdpi8xvy9d] {
        grid-template-columns: 1fr;
    }

    .preview-actions[b-fdpi8xvy9d] {
        grid-template-columns: 1fr;
    }

    .group-variants[b-fdpi8xvy9d] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Products/Products.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════ */
/* DASHBOARD STATS                                     */
/* ═══════════════════════════════════════════════════ */
.stats-grid[b-np0o6nb9lh] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.stat-card[b-np0o6nb9lh] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    transition: var(--transition);
}

.stat-card:hover[b-np0o6nb9lh] {
    border-color: var(--border-hover);
    transform: translateY(-2px);
}

.stat-icon[b-np0o6nb9lh] {
    width: 52px;
    height: 52px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon svg[b-np0o6nb9lh] { width: 26px; height: 26px; }
.stat-icon.blue[b-np0o6nb9lh] { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.stat-icon.green[b-np0o6nb9lh] { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.stat-icon.purple[b-np0o6nb9lh] { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }
.stat-icon.orange[b-np0o6nb9lh] { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }

.stat-content h3[b-np0o6nb9lh] { font-size: 28px; font-weight: 800; margin-bottom: 4px; }
.stat-content p[b-np0o6nb9lh] { font-size: 13px; color: var(--text-muted); }

/* ═══════════════════════════════════════════════════ */
/* FILTER BAR                                          */
/* ═══════════════════════════════════════════════════ */
.filter-bar[b-np0o6nb9lh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.filter-bar-left[b-np0o6nb9lh] {
    flex: 1;
    max-width: 400px;
}

.filter-bar-right[b-np0o6nb9lh] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-input-wrapper[b-np0o6nb9lh] {
    position: relative;
    width: 100%;
}

.search-icon[b-np0o6nb9lh] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.search-input[b-np0o6nb9lh] {
    width: 100%;
    padding: 10px 12px 10px 40px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    font-family: inherit;
    font-size: 14px;
    color: var(--text-primary);
    transition: var(--transition);
}

.search-input:focus[b-np0o6nb9lh] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.filter-btn[b-np0o6nb9lh] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
}

.filter-btn:hover[b-np0o6nb9lh] {
    border-color: var(--primary);
    color: var(--primary);
}

.filter-btn.has-filters[b-np0o6nb9lh] {
    border-color: var(--primary);
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary);
}

.filter-count[b-np0o6nb9lh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--primary);
    color: white;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
}

.clear-filters-btn[b-np0o6nb9lh] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border: none;
    border-radius: var(--radius-sm);
    background: rgba(239, 68, 68, 0.1);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: #ef4444;
    cursor: pointer;
    transition: var(--transition);
}

.clear-filters-btn:hover[b-np0o6nb9lh] {
    background: rgba(239, 68, 68, 0.2);
}

/* ═══════════════════════════════════════════════════ */
/* FILTER MODAL                                        */
/* ═══════════════════════════════════════════════════ */
.filter-modal-content[b-np0o6nb9lh] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.filter-modal-content .form-group label[b-np0o6nb9lh] {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.modal-footer-actions[b-np0o6nb9lh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.modal-footer-right[b-np0o6nb9lh] {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Apply butonunun yanındaki "N koşul eksik" uyarısı.
   Renk hem light hem dark tema ile kontrastlı (sabit kırmızı). */
.modal-footer-warning[b-np0o6nb9lh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--radius-sm);
    color: #ef4444;
    font-size: 12px;
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════ */
/* ACTIVE FILTER CHIPS — filter-bar altı                */
/* Her chip bir FilterExpression kondisyonunu temsil eder;
   X butonu o kondisyonu tek tek siler.                  */
/* ═══════════════════════════════════════════════════ */
.active-filter-chips[b-np0o6nb9lh] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 16px;
}

.active-filter-chip[b-np0o6nb9lh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 320px;
    padding: 4px 4px 4px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 14px;
    font-size: 12px;
    color: var(--text-secondary);
    transition: var(--transition);
}

.active-filter-chip:hover[b-np0o6nb9lh] {
    border-color: var(--border-hover);
    color: var(--text-primary);
}

.active-filter-chip-text[b-np0o6nb9lh] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.active-filter-chip-remove[b-np0o6nb9lh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
}

.active-filter-chip-remove:hover[b-np0o6nb9lh] {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

/* ═══════════════════════════════════════════════════ */
/* FILTER TABS                                         */
/* ═══════════════════════════════════════════════════ */
.filter-tabs-container[b-np0o6nb9lh] { margin-bottom: 24px; }
.filter-tabs[b-np0o6nb9lh] {
    display: flex;
    gap: 8px;
    padding: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: fit-content;
}

.filter-tab[b-np0o6nb9lh] {
    padding: 10px 18px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.filter-tab:hover[b-np0o6nb9lh] { color: var(--text-primary); background: var(--bg-input); }
.filter-tab.active[b-np0o6nb9lh] { background: var(--primary); color: white; }
.filter-tab .count[b-np0o6nb9lh] { padding: 2px 8px; background: rgba(255,255,255,0.2); border-radius: 10px; font-size: 11px; }
.filter-tab:not(.active) .count[b-np0o6nb9lh] { background: var(--bg-input); }

/* ═══════════════════════════════════════════════════ */
/* PRODUCT GRID                                        */
/* ═══════════════════════════════════════════════════ */
.product-thumb[b-np0o6nb9lh] {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.product-thumb-placeholder[b-np0o6nb9lh] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.product-thumb-placeholder svg[b-np0o6nb9lh] { width: 20px; height: 20px; }

.product-info[b-np0o6nb9lh] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.product-title[b-np0o6nb9lh] { font-size: 14px; font-weight: 600; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.product-code[b-np0o6nb9lh] { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); }
.product-category[b-np0o6nb9lh] { font-size: 11px; color: var(--text-secondary); max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tek satırda full kategori path: Tekstil › Giyim › Pijama Takımı (leaf bold) */
.product-category.category-path-inline[b-np0o6nb9lh] { display: inline-flex; flex-wrap: nowrap; align-items: baseline; gap: 3px; line-height: 1.4; }
.product-category.category-path-inline strong[b-np0o6nb9lh] { font-weight: 600; color: var(--text-primary); }
.product-category .category-path-anc[b-np0o6nb9lh] { color: var(--text-secondary); font-weight: 400; }
.product-category .category-path-sep[b-np0o6nb9lh] { color: var(--text-secondary); opacity: 0.6; }

/* ═══════════════════════════════════════════════════ */
/* BADGES                                              */
/* ═══════════════════════════════════════════════════ */
.variant-badge[b-np0o6nb9lh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 700;
}

.stock-badge[b-np0o6nb9lh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.stock-badge.in-stock[b-np0o6nb9lh] { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.stock-badge.out-of-stock[b-np0o6nb9lh] { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

.price-value[b-np0o6nb9lh] { font-size: 13px; font-weight: 600; white-space: nowrap; }

.attr-warning-badge[b-np0o6nb9lh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    margin-right: 6px;
    vertical-align: middle;
}

/* ═══════════════════════════════════════════════════ */
/* MISSING ATTRS MODAL — table scroll wrapper          */
/* ═══════════════════════════════════════════════════ */
[b-np0o6nb9lh] .missing-attrs-grid .table-container {
    max-height: 60vh;
    overflow: auto;
}

/* ═══════════════════════════════════════════════════ */
/* RESPONSIVE                                          */
/* ═══════════════════════════════════════════════════ */

/* Large tablets / small desktops */
@media (max-width: 1400px) {
    .stats-grid[b-np0o6nb9lh] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablet */
@media (max-width: 1024px) {
    /* Disable sticky columns on tablet/mobile */
    .sticky-col[b-np0o6nb9lh] {
        position: static !important;
        left: auto !important;
        right: auto !important;
        z-index: auto !important;
        background: inherit !important;
    }

    .stats-grid[b-np0o6nb9lh] {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 16px;
    }

    .stat-card[b-np0o6nb9lh] {
        padding: 16px;
    }

    .stat-card:hover[b-np0o6nb9lh] {
        transform: none;
    }

    .stat-icon[b-np0o6nb9lh] {
        width: 44px;
        height: 44px;
    }

    .stat-icon svg[b-np0o6nb9lh] {
        width: 22px;
        height: 22px;
    }

    .stat-content h3[b-np0o6nb9lh] {
        font-size: 24px;
    }

    .stat-content p[b-np0o6nb9lh] {
        font-size: 12px;
    }

    /* Filter bar */
    .filter-bar[b-np0o6nb9lh] {
        padding: 12px;
        gap: 10px;
        margin-bottom: 16px;
    }

    .filter-bar-left[b-np0o6nb9lh] {
        max-width: none;
        flex: 1;
    }

    /* Filter tabs - horizontal scroll */
    .filter-tabs-container[b-np0o6nb9lh] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 16px;
    }

    .filter-tabs[b-np0o6nb9lh] {
        width: max-content;
    }

    .filter-tab[b-np0o6nb9lh] {
        padding: 8px 14px;
        font-size: 12px;
    }

    .filter-tab .count[b-np0o6nb9lh] {
        font-size: 10px;
        padding: 1px 6px;
    }

    /* Product title */
    .product-title[b-np0o6nb9lh] {
        max-width: 240px;
    }

    .product-category[b-np0o6nb9lh] {
        max-width: 200px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .stats-grid[b-np0o6nb9lh] {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 12px;
    }

    .stat-card[b-np0o6nb9lh] {
        padding: 14px;
        gap: 12px;
    }

    .stat-icon[b-np0o6nb9lh] {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .stat-icon svg[b-np0o6nb9lh] {
        width: 20px;
        height: 20px;
    }

    .stat-content h3[b-np0o6nb9lh] {
        font-size: 20px;
        margin-bottom: 2px;
    }

    .stat-content p[b-np0o6nb9lh] {
        font-size: 11px;
    }

    /* Filter bar - stack on mobile */
    .filter-bar[b-np0o6nb9lh] {
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
        gap: 10px;
        margin-bottom: 12px;
    }

    .filter-bar-left[b-np0o6nb9lh] {
        max-width: none;
    }

    .search-input[b-np0o6nb9lh] {
        font-size: 13px;
        padding: 9px 10px 9px 36px;
    }

    .search-icon[b-np0o6nb9lh] {
        width: 14px;
        height: 14px;
        left: 10px;
    }

    .filter-bar-right[b-np0o6nb9lh] {
        gap: 6px;
    }

    .filter-btn[b-np0o6nb9lh] {
        flex: 1;
        justify-content: center;
        padding: 9px 12px;
        font-size: 13px;
        gap: 6px;
    }

    .filter-btn svg[b-np0o6nb9lh] {
        width: 14px;
        height: 14px;
    }


    .clear-filters-btn[b-np0o6nb9lh] {
        padding: 9px 12px;
        font-size: 12px;
    }

    .clear-filters-btn > span[b-np0o6nb9lh] {
        display: none;
    }

    /* Filter tabs - scrollable */
    .filter-tabs-container[b-np0o6nb9lh] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -16px 12px;
        padding: 0 16px;
        scrollbar-width: none;
    }

    .filter-tabs-container[b-np0o6nb9lh]::-webkit-scrollbar {
        display: none;
    }

    .filter-tabs[b-np0o6nb9lh] {
        width: max-content;
        gap: 4px;
        padding: 3px;
    }

    .filter-tab[b-np0o6nb9lh] {
        padding: 7px 12px;
        font-size: 12px;
        gap: 6px;
    }

    .filter-tab .count[b-np0o6nb9lh] {
        font-size: 10px;
        padding: 1px 5px;
    }

    /* Product thumbnails */
    .product-thumb[b-np0o6nb9lh],
    .product-thumb-placeholder[b-np0o6nb9lh] {
        width: 38px;
        height: 38px;
    }

    .product-thumb-placeholder svg[b-np0o6nb9lh] {
        width: 16px;
        height: 16px;
    }

    /* Product info */
    .product-title[b-np0o6nb9lh] {
        font-size: 13px;
        max-width: 180px;
    }

    .product-code[b-np0o6nb9lh] {
        font-size: 10px;
    }

    .product-category[b-np0o6nb9lh] {
        font-size: 10px;
        max-width: 160px;
    }

    /* Badges */
    .variant-badge[b-np0o6nb9lh] {
        min-width: 24px;
        height: 24px;
        font-size: 12px;
    }

    .stock-badge[b-np0o6nb9lh] {
        padding: 3px 8px;
        font-size: 11px;
    }

    .price-value[b-np0o6nb9lh] {
        font-size: 12px;
    }

    .attr-warning-badge[b-np0o6nb9lh] {
        width: 20px;
        height: 20px;
        margin-right: 4px;
    }

    .attr-warning-badge svg[b-np0o6nb9lh] {
        width: 12px;
        height: 12px;
    }

    /* Filter modal */
    .filter-modal-content[b-np0o6nb9lh] {
        gap: 16px;
    }

    .modal-footer-actions[b-np0o6nb9lh] {
        flex-direction: column;
        gap: 10px;
    }

    .modal-footer-right[b-np0o6nb9lh] {
        width: 100%;
    }

    .modal-footer-right .btn[b-np0o6nb9lh] {
        flex: 1;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .stats-grid[b-np0o6nb9lh] {
        gap: 8px;
    }

    .stat-card[b-np0o6nb9lh] {
        padding: 12px;
        gap: 10px;
    }

    .stat-icon[b-np0o6nb9lh] {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }

    .stat-icon svg[b-np0o6nb9lh] {
        width: 18px;
        height: 18px;
    }

    .stat-content h3[b-np0o6nb9lh] {
        font-size: 18px;
    }

    .stat-content p[b-np0o6nb9lh] {
        font-size: 10px;
    }

    /* Filter bar */
    .filter-bar[b-np0o6nb9lh] {
        padding: 10px;
        gap: 8px;
    }

    .filter-btn[b-np0o6nb9lh] {
        padding: 8px 10px;
        font-size: 12px;
    }

    .clear-filters-btn[b-np0o6nb9lh] {
        padding: 8px 10px;
    }

    /* Filter tabs */
    .filter-tab[b-np0o6nb9lh] {
        padding: 6px 10px;
        font-size: 11px;
    }

    /* Product info */
    .product-title[b-np0o6nb9lh] {
        font-size: 12px;
        max-width: 140px;
    }

    .product-category[b-np0o6nb9lh] {
        max-width: 120px;
    }
}

/* ════════════════════════════════════════════════════════════════
   Filter Editor + Sort Editor + Record Count (site theme uyumlu)
   ════════════════════════════════════════════════════════════════ */

.filter-editor-section[b-np0o6nb9lh] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.filter-editor-section-header[b-np0o6nb9lh] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

/* Modal içinde scroll yapıldığında section başlığı üstte sabitlensin */
.filter-editor-section-header.is-sticky[b-np0o6nb9lh] {
    position: sticky;
    top: -1px;
    z-index: 2;
    background: var(--bg-card);
    padding-top: 8px;
}

.filter-editor-section-header h4[b-np0o6nb9lh] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.filter-editor-section-title[b-np0o6nb9lh] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.filter-editor-section-badge[b-np0o6nb9lh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 11px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
}

.filter-editor-hint[b-np0o6nb9lh] {
    font-size: 12px;
    color: var(--text-muted);
}

.filter-editor-sort[b-np0o6nb9lh] {
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px dashed var(--border);
}

.record-count-badge[b-np0o6nb9lh] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text-primary);
    transition: var(--transition);
}

.record-count-badge:hover[b-np0o6nb9lh] {
    border-color: var(--primary);
    background: var(--primary-alpha);
}

.record-count-badge svg[b-np0o6nb9lh] {
    color: var(--primary);
}

.record-count-label[b-np0o6nb9lh] {
    color: var(--text-secondary);
    font-weight: 500;
}

.record-count-value[b-np0o6nb9lh] {
    font-weight: 700;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}

/* "Görselsiz" tab aktifken görünen CTA — Webden Resim Çek */
.no-images-cta[b-np0o6nb9lh] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    margin-bottom: 16px;
    background: linear-gradient(90deg,
        rgba(59, 130, 246, 0.08) 0%,
        rgba(16, 185, 129, 0.06) 100%);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 10px;
}

.no-images-cta-info[b-np0o6nb9lh] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: var(--text-primary);
}

.no-images-cta-info svg[b-np0o6nb9lh] {
    color: var(--primary);
    flex-shrink: 0;
}

.no-images-cta-info strong[b-np0o6nb9lh] {
    color: var(--text-primary);
    font-weight: 700;
}

.no-images-cta-actions[b-np0o6nb9lh] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* ─── Bulk action group dropdown (Pazaryeri, Toplu İşlemler, vb.) ──────── */
/* Trigger görünümü <Button Variant="Secondary"> tarafından sağlanır;
   burada yalnızca konumlandırma + caret animasyonu var. */
.bulk-action-dropdown[b-np0o6nb9lh] {
    position: relative;
    display: inline-block;
}

.bulk-action-caret[b-np0o6nb9lh] {
    margin-left: 4px;
    transition: transform 150ms ease;
}

.bulk-action-dropdown.is-open .bulk-action-caret[b-np0o6nb9lh] {
    transform: rotate(180deg);
}

.bulk-action-menu[b-np0o6nb9lh] {
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    min-width: 320px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.06);
    padding: 6px;
    display: none;
    z-index: 1100;
}

.bulk-action-dropdown.is-open .bulk-action-menu[b-np0o6nb9lh] {
    display: block;
}

.bulk-action-item[b-np0o6nb9lh] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    color: var(--text-primary);
    transition: background 120ms ease;
}

    .bulk-action-item:hover:not(:disabled)[b-np0o6nb9lh] {
        background: var(--bg-input);
    }

    .bulk-action-item:disabled[b-np0o6nb9lh] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .bulk-action-item svg[b-np0o6nb9lh] {
        flex-shrink: 0;
        margin-top: 2px;
        color: var(--text-secondary);
    }

    .bulk-action-item.primary svg[b-np0o6nb9lh] {
        color: var(--primary);
    }

.bulk-action-item-text[b-np0o6nb9lh] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

    .bulk-action-item-text strong[b-np0o6nb9lh] {
        font-size: 13px;
        font-weight: 600;
        color: var(--text-primary);
    }

    .bulk-action-item-text small[b-np0o6nb9lh] {
        font-size: 12px;
        color: var(--text-secondary);
        line-height: 1.35;
    }

.bulk-action-divider[b-np0o6nb9lh] {
    height: 1px;
    background: var(--border);
    margin: 6px 4px;
}

.bulk-action-backdrop[b-np0o6nb9lh] {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 1090;
}

/* ═══════════════════════════════════════════════════ */
/* SELECTION BANNER                                    */
/* ═══════════════════════════════════════════════════ */
.selection-banner[b-np0o6nb9lh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.10) 0%, rgba(139, 92, 246, 0.10) 100%);
    border: 1px solid rgba(59, 130, 246, 0.30);
    border-radius: var(--radius);
    margin-bottom: 16px;
    animation: selectionBannerSlideDown-b-np0o6nb9lh 0.2s ease-out;
}

@keyframes selectionBannerSlideDown-b-np0o6nb9lh {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.selection-info[b-np0o6nb9lh] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.4;
    min-width: 0;
}

.selection-info svg[b-np0o6nb9lh] {
    color: #3b82f6;
    flex-shrink: 0;
}

.selection-info strong[b-np0o6nb9lh] {
    color: #3b82f6;
    font-weight: 700;
}

.selection-actions[b-np0o6nb9lh] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.btn-select-all[b-np0o6nb9lh],
.btn-clear-selection[b-np0o6nb9lh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.btn-select-all[b-np0o6nb9lh] {
    background: #3b82f6;
    color: #fff;
}

.btn-select-all:hover[b-np0o6nb9lh] {
    background: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.25);
}

.btn-clear-selection[b-np0o6nb9lh] {
    background: var(--bg-input);
    color: var(--text-secondary);
    border-color: var(--border);
}

.btn-clear-selection:hover[b-np0o6nb9lh] {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-hover);
}

.btn-select-all svg[b-np0o6nb9lh],
.btn-clear-selection svg[b-np0o6nb9lh] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .selection-banner[b-np0o6nb9lh] {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px;
    }

    .selection-actions[b-np0o6nb9lh] {
        width: 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .selection-banner[b-np0o6nb9lh] {
        padding: 10px 12px;
        margin-bottom: 12px;
    }

    .selection-info[b-np0o6nb9lh] {
        font-size: 13px;
    }

    .selection-actions[b-np0o6nb9lh] {
        gap: 6px;
    }

    .btn-select-all[b-np0o6nb9lh],
    .btn-clear-selection[b-np0o6nb9lh] {
        flex: 1;
        justify-content: center;
        padding: 7px 10px;
        font-size: 12px;
    }
}

/* ─── Pazaryerleri kolonu — yayında olduğu mağaza chip'leri ─── */
.published-stores[b-np0o6nb9lh] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 140px;
}

/* Chip — ProductListings store-status-logo ile birebir aynı görsel dil. */
.store-chip[b-np0o6nb9lh] {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    padding: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    flex-shrink: 0;
    transition: transform 0.12s ease, border-color 0.12s ease;
}

.store-chip:hover[b-np0o6nb9lh] {
    transform: scale(1.15);
    border-color: var(--primary);
    z-index: 2;
}

.store-chip img[b-np0o6nb9lh] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.store-chip-fallback[b-np0o6nb9lh] {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    /* Renk inline style ile platforma özel (PlatformChipColors) gelir — gradient yok.
       Aşağıdaki nötr değerler yalnızca inline style yoksa devreye girer. */
    background: var(--bg-input);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    border: none;
}

/* Eksik yayın sayısı rozeti — chip üst-sağ köşesi */
.store-chip.has-missing[b-np0o6nb9lh] {
    border-color: rgba(245, 158, 11, 0.55);
}

.store-chip-missing-badge[b-np0o6nb9lh] {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: linear-gradient(135deg, #f59e0b, #ea580c);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(234, 88, 12, 0.45);
    border: 2px solid var(--bg-card);
    pointer-events: none;
}

.store-chip.has-pending[b-np0o6nb9lh] {
    border-color: rgba(234, 179, 8, 0.55);
}

.store-chip-pending-badge[b-np0o6nb9lh] {
    position: absolute;
    top: -7px;
    left: -7px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: linear-gradient(135deg, #facc15, #eab308);
    color: #422006;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(234, 179, 8, 0.45);
    border: 2px solid var(--bg-card);
    pointer-events: none;
}

/* AdaptiveSplit'te 1 header → N Shopify Product yaratılır. Bu badge kaç Shopify
   ürünü oluştuğunu gösterir. Mavi tema — pending sarı, missing kırmızı, count mavi. */
.store-chip-count-badge[b-np0o6nb9lh] {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: linear-gradient(135deg, #60a5fa, #2563eb);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(37, 99, 235, 0.45);
    border: 2px solid var(--bg-card);
    pointer-events: none;
}

.store-chip-empty[b-np0o6nb9lh] {
    color: var(--text-secondary);
    font-size: 14px;
    opacity: 0.4;
}

/* /Components/Pages/Products/ProductWizard.razor.rz.scp.css */
/* Step 6 (Görseller) toolbar — açıklama + global "Barkoddan Çek" butonu */
.wizard-step5-toolbar[b-rpwa4psvmn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.wizard-step5-toolbar .step-description[b-rpwa4psvmn] {
    margin: 0;
}

/* Barkoddan Resim Çek butonu */
.btn-import-barcode-wizard[b-rpwa4psvmn] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-import-barcode-wizard:hover:not(:disabled)[b-rpwa4psvmn] {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(59, 130, 246, 0.05);
}

.btn-import-barcode-wizard:disabled[b-rpwa4psvmn] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ──────────────────────────────────────────────────────────────────
   Step 3 — Wizard Variant Dimensions Grid (wvd-)
   Her dim için ayrı sidebar: arama + select-all + scroll'lu liste.
   ProductEditModal vmd- pattern'inin Wizard'a uyarlanmış varyantı.
   ────────────────────────────────────────────────────────────────── */
.wvd-grid[b-rpwa4psvmn] {
    display: grid;
    gap: 12px;
    margin-top: 12px;
}

.wvd-sidebar[b-rpwa4psvmn] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 460px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.wvd-sidebar.is-main[b-rpwa4psvmn] {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px rgba(var(--primary-rgb, 59, 130, 246), 0.15);
}

.wvd-header[b-rpwa4psvmn] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
    flex-shrink: 0;
}

.wvd-header-row[b-rpwa4psvmn] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wvd-type-badge[b-rpwa4psvmn] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    color: var(--text-secondary);
    background: var(--bg-input);
    letter-spacing: 0.4px;
    flex-shrink: 0;
}

.wvd-type-badge.badge-main[b-rpwa4psvmn] {
    background: rgba(var(--primary-rgb, 59, 130, 246), 0.15);
    color: var(--primary);
}

.wvd-type-badge.badge-dim1[b-rpwa4psvmn] { background: rgba(168, 85, 247, 0.15); color: #a855f7; }
.wvd-type-badge.badge-dim2[b-rpwa4psvmn] { background: rgba(20, 184, 166, 0.15); color: #14b8a6; }
.wvd-type-badge.badge-dim3[b-rpwa4psvmn] { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }

.wvd-attr-name[b-rpwa4psvmn] {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wvd-counter[b-rpwa4psvmn] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-input);
    padding: 2px 8px;
    border-radius: 999px;
    flex-shrink: 0;
}

.wvd-controls-row[b-rpwa4psvmn] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wvd-controls-row .custom-checkbox[b-rpwa4psvmn] {
    flex-shrink: 0;
}

.wvd-search-box[b-rpwa4psvmn] {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.wvd-search-box svg:first-child[b-rpwa4psvmn] {
    position: absolute;
    left: 8px;
    color: var(--text-secondary);
    pointer-events: none;
}

.wvd-search-input[b-rpwa4psvmn] {
    width: 100%;
    padding: 6px 26px 6px 28px;
    font-size: 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
}

.wvd-search-input:focus[b-rpwa4psvmn] {
    outline: none;
    border-color: var(--primary);
}

.wvd-search-clear[b-rpwa4psvmn] {
    position: absolute;
    right: 6px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
}

.wvd-search-clear:hover[b-rpwa4psvmn] {
    color: var(--text-primary);
}

.wvd-list[b-rpwa4psvmn] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.wvd-list-item[b-rpwa4psvmn] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
    user-select: none;
}

.wvd-list-item:hover[b-rpwa4psvmn] {
    background: var(--bg-card);
    border-color: var(--border);
}

.wvd-list-item.active[b-rpwa4psvmn] {
    background: rgba(var(--primary-rgb, 59, 130, 246), 0.10);
    border-color: var(--primary);
}

.wvd-list-item input[type="checkbox"][b-rpwa4psvmn] {
    /* Native checkbox gizli — .custom-checkbox sistemine bağlı kalmıyoruz, label
       içinde direkt input + sonra checkmark kullanıyoruz; Razor markup'ında
       custom-checkbox sarmalayıcı yok, bu yüzden checkbox görünür kalır. */
    width: 14px;
    height: 14px;
    accent-color: var(--primary);
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}

/* .checkmark span — ProductEditModal'daki gibi <input> + <span class="checkmark">
   pattern'i için override yok; native checkbox kullanmaya geçtik (basit). Bu span
   görünmez bırakılır ki markup tutarlı dursun. */
.wvd-list-item .checkmark[b-rpwa4psvmn] {
    display: none;
}

.wvd-color[b-rpwa4psvmn] {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.wvd-value-text[b-rpwa4psvmn] {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wvd-empty[b-rpwa4psvmn] {
    padding: 24px 12px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 12px;
    font-style: italic;
}

/* Mobile & dar ekran: grid-template-columns inline override edilse bile dim
   sayısı 3+ olduğunda yatay scroll yerine wrap'e izin ver. */
@media (max-width: 900px) {
    .wvd-grid[b-rpwa4psvmn] {
        grid-template-columns: 1fr !important;
    }
    .wvd-sidebar[b-rpwa4psvmn] {
        max-height: 320px;
    }
}
/* /Components/Pages/Products/PublishToMarketplaceModal.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════ */
/* PUBLISH TO MARKETPLACE MODAL                                        */
/* ═══════════════════════════════════════════════════════════════════ */

.publish-modal[b-x9o6646xxa] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 400px;
    max-height: 70vh;
}

/* Toolbar */
.publish-toolbar[b-x9o6646xxa] {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 16px;
    border: 1px solid var(--border-color);
}

.publish-toolbar-row[b-x9o6646xxa] {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.publish-toolbar-row .form-group[b-x9o6646xxa] {
    flex: 1;
    min-width: 220px;
}

.publish-toolbar-row .form-group-checkbox[b-x9o6646xxa] {
    flex: 0 0 auto;
    min-width: 220px;
    max-width: 280px;
}

.publish-toolbar-row .form-group-checkbox label[b-x9o6646xxa] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.publish-toolbar-row .form-group-action[b-x9o6646xxa] {
    flex: 0 0 auto;
}

.form-help[b-x9o6646xxa] {
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.publish-info[b-x9o6646xxa] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border-color);
    font-size: 13px;
    color: var(--text-secondary);
}

/* Stats */
.publish-stats[b-x9o6646xxa] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.stat-card[b-x9o6646xxa] {
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.stat-card-success[b-x9o6646xxa] {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.3);
}

.stat-card-warning[b-x9o6646xxa] {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.3);
}

.stat-card-danger[b-x9o6646xxa] {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.3);
}

.stat-card .stat-value[b-x9o6646xxa] {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.stat-card-success .stat-value[b-x9o6646xxa] { color: var(--success, #10b981); }
.stat-card-warning .stat-value[b-x9o6646xxa] { color: var(--warning, #f59e0b); }
.stat-card-danger .stat-value[b-x9o6646xxa] { color: var(--danger, #ef4444); }

.stat-card .stat-label[b-x9o6646xxa] {
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
}

/* Results */
.publish-results[b-x9o6646xxa] {
    overflow-y: auto;
    max-height: 50vh;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.publish-header[b-x9o6646xxa] {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 14px;
    background: var(--bg-primary);
}

.publish-header.is-eligible[b-x9o6646xxa] {
    border-left: 4px solid var(--success, #10b981);
}

.publish-header.is-skipped[b-x9o6646xxa] {
    border-left: 4px solid var(--danger, #ef4444);
}

.publish-header-row[b-x9o6646xxa] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.publish-header-info[b-x9o6646xxa] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.publish-header-info strong[b-x9o6646xxa] {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.publish-header-meta[b-x9o6646xxa] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.publish-category-path[b-x9o6646xxa] {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.publish-counts[b-x9o6646xxa] {
    font-weight: 600;
    color: var(--text-primary);
}

/* Status dots */
.publish-status-dot[b-x9o6646xxa] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.publish-status-dot.ok[b-x9o6646xxa]      { background: var(--success, #10b981); }
.publish-status-dot.warning[b-x9o6646xxa] { background: var(--warning, #f59e0b); }
.publish-status-dot.danger[b-x9o6646xxa]  { background: var(--danger, #ef4444); }

/* Issues */
.publish-issues[b-x9o6646xxa] {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.publish-issue[b-x9o6646xxa] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.4;
}

.publish-issue.danger[b-x9o6646xxa] {
    background: rgba(239, 68, 68, 0.08);
    color: var(--danger, #ef4444);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.publish-issue.warning[b-x9o6646xxa] {
    background: rgba(245, 158, 11, 0.08);
    color: var(--warning, #f59e0b);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.publish-issue span:not(.badge-reason)[b-x9o6646xxa] {
    color: var(--text-primary);
}

.badge-reason[b-x9o6646xxa] {
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.06);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* Variants details */
.publish-variants[b-x9o6646xxa] {
    margin-top: 10px;
    border-top: 1px dashed var(--border-color);
    padding-top: 10px;
}

.publish-variants > summary[b-x9o6646xxa] {
    cursor: pointer;
    font-size: 13px;
    color: var(--text-secondary);
    user-select: none;
}

.publish-variants > summary:hover[b-x9o6646xxa] {
    color: var(--text-primary);
}

.publish-variant-issue[b-x9o6646xxa] {
    margin-top: 8px;
    padding: 8px 10px;
    background: var(--bg-secondary);
    border-radius: 6px;
}

.publish-variant-head[b-x9o6646xxa] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 13px;
}

/* Empty state */
.empty-state[b-x9o6646xxa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    color: var(--text-secondary);
    font-size: 14px;
}

.spinner[b-x9o6646xxa] {
    width: 28px;
    height: 28px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-x9o6646xxa 0.8s linear infinite;
}

@keyframes spin-b-x9o6646xxa {
    to { transform: rotate(360deg); }
}

.text-muted[b-x9o6646xxa] {
    color: var(--text-secondary);
    font-size: 12px;
}

/* Publish result summary (footer'da gösterilir) */
.publish-result-summary[b-x9o6646xxa] {
    margin-right: auto;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
}

.publish-result-summary.ok[b-x9o6646xxa] {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success, #10b981);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.publish-result-summary.danger[b-x9o6646xxa] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger, #ef4444);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Filter-mode banner */
.publish-mode-badge[b-x9o6646xxa] {
    display: inline-block;
    padding: 2px 10px;
    background: rgba(99, 102, 241, 0.12);
    color: rgb(99, 102, 241);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    margin-right: 8px;
}

.filter-mode-notice[b-x9o6646xxa] {
    padding: 16px 18px;
    background: rgba(99, 102, 241, 0.06);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-left: 4px solid rgb(99, 102, 241);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-mode-notice strong[b-x9o6646xxa] {
    font-weight: 600;
    color: var(--text-primary);
}

.filter-mode-notice span[b-x9o6646xxa] {
    color: var(--text-secondary);
    font-size: 13px;
}
/* /Components/Pages/Profile/Profile.razor.rz.scp.css */
/* Profile Header Card - Bordered Container */
.profile-header-card[b-7qbv3po755] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.profile-header[b-7qbv3po755] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

@media (max-width: 1024px) {
    .profile-header[b-7qbv3po755] {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Avatar Section */
.profile-avatar-section[b-7qbv3po755] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.profile-avatar-wrapper[b-7qbv3po755] {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.profile-avatar-img[b-7qbv3po755] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--primary);
}

.profile-avatar-placeholder[b-7qbv3po755] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 600;
}

.avatar-edit-btn[b-7qbv3po755] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    border: 2px solid var(--bg-card);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.avatar-edit-btn:hover[b-7qbv3po755] {
    background: var(--primary-dark);
    transform: scale(1.1);
}

.profile-info h2[b-7qbv3po755] {
    margin: 0 0 0.25rem;
    font-size: 1.25rem;
    color: var(--text-primary);
}

.profile-email[b-7qbv3po755] {
    margin: 0 0 0.5rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.profile-role[b-7qbv3po755] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--primary-alpha);
    color: var(--primary);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Stats Section */
.profile-stats[b-7qbv3po755] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .profile-stats[b-7qbv3po755] {
        flex-wrap: wrap;
        gap: 1rem;
    }
}

.stat-item[b-7qbv3po755] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.stat-divider[b-7qbv3po755] {
    width: 1px;
    height: 40px;
    background: var(--border);
}

@media (max-width: 768px) {
    .stat-divider[b-7qbv3po755] {
        display: none;
    }
}

.stat-content[b-7qbv3po755] {
    display: flex;
    flex-direction: column;
}

.stat-value[b-7qbv3po755] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.stat-label[b-7qbv3po755] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.stat-icon[b-7qbv3po755] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon svg[b-7qbv3po755] {
    width: 20px;
    height: 20px;
}

.stat-icon.blue[b-7qbv3po755] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.stat-icon.green[b-7qbv3po755] {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.stat-icon.yellow[b-7qbv3po755] {
    background: rgba(234, 179, 8, 0.1);
    color: #eab308;
}

.stat-icon.red[b-7qbv3po755] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Filter Tabs - Orders sayfasi tarzinda */
.filter-tabs-container[b-7qbv3po755] {
    margin-bottom: 1.5rem;
}

.filter-tabs[b-7qbv3po755] {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow-x: auto;
}

.filter-tab[b-7qbv3po755] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.filter-tab:hover[b-7qbv3po755] {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.filter-tab.active[b-7qbv3po755] {
    background: #ef4444;
    color: white;
}

.filter-tab.active:hover[b-7qbv3po755] {
    background: #dc2626;
}

.filter-tab svg[b-7qbv3po755] {
    width: 16px;
    height: 16px;
}

/* Profile Content */
.profile-content[b-7qbv3po755] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Profile Card - Orders modal tarzinda */
.profile-card[b-7qbv3po755] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.card-header[b-7qbv3po755] {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
}

.card-header h3[b-7qbv3po755] {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.card-header p[b-7qbv3po755] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.card-body[b-7qbv3po755] {
    padding: 1.5rem;
}

.card-footer[b-7qbv3po755] {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    background: var(--bg-input);
    display: flex;
    justify-content: flex-end;
}

/* Form Row */
.form-row[b-7qbv3po755] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (max-width: 768px) {
    .form-row[b-7qbv3po755] {
        grid-template-columns: 1fr;
    }
}

/* Info Grid */
.info-grid[b-7qbv3po755] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .info-grid[b-7qbv3po755] {
        grid-template-columns: 1fr;
    }
}

.info-item[b-7qbv3po755] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.info-label[b-7qbv3po755] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.info-value[b-7qbv3po755] {
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 500;
}

.info-value.code[b-7qbv3po755] {
    font-family: 'SF Mono', 'Fira Code', monospace;
    background: var(--bg-input);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    display: inline-block;
}

/* Tenant Section */
.tenant-section[b-7qbv3po755] {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.tenant-section h4[b-7qbv3po755] {
    margin: 0 0 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.section-desc[b-7qbv3po755] {
    margin: 0 0 1rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.tenant-list[b-7qbv3po755] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tenant-item[b-7qbv3po755] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-input);
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tenant-item:hover[b-7qbv3po755] {
    background: var(--bg-card-hover);
}

.tenant-item.active[b-7qbv3po755] {
    border-color: var(--primary);
    background: var(--primary-alpha);
}

.tenant-icon[b-7qbv3po755] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tenant-info[b-7qbv3po755] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.tenant-name[b-7qbv3po755] {
    font-weight: 500;
    color: var(--text-primary);
}

.tenant-code[b-7qbv3po755] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-family: 'SF Mono', 'Fira Code', monospace;
}

.owner-badge[b-7qbv3po755] {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border-radius: 4px;
    font-weight: 500;
}

.check-icon[b-7qbv3po755] {
    color: var(--primary);
}

/* Password Requirements */
.password-requirements[b-7qbv3po755] {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--bg-input);
    border-radius: 8px;
}

.req-title[b-7qbv3po755] {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.password-requirements ul[b-7qbv3po755] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

@media (max-width: 768px) {
    .password-requirements ul[b-7qbv3po755] {
        grid-template-columns: 1fr;
    }
}

.password-requirements li[b-7qbv3po755] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.password-requirements li[b-7qbv3po755]::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border);
    flex-shrink: 0;
}

.password-requirements li.valid[b-7qbv3po755] {
    color: #22c55e;
}

.password-requirements li.valid[b-7qbv3po755]::before {
    background: #22c55e;
}

/* Two Factor Status */
.two-factor-status[b-7qbv3po755] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .two-factor-status[b-7qbv3po755] {
        flex-direction: column;
        align-items: flex-start;
    }
}

.status-indicator[b-7qbv3po755] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.status-indicator svg[b-7qbv3po755] {
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.status-indicator.enabled[b-7qbv3po755] {
    padding: 1rem;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 8px;
}

.status-indicator.enabled svg[b-7qbv3po755] {
    color: #22c55e;
}

.status-indicator.disabled[b-7qbv3po755] {
    padding: 1rem;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 8px;
    min-height: 70px;
}

.status-indicator.disabled svg[b-7qbv3po755] {
    color: #f59e0b;
}

.status-indicator div[b-7qbv3po755] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.status-indicator strong[b-7qbv3po755] {
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.3;
}

.status-indicator span[b-7qbv3po755] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
    word-wrap: break-word;
}

/* Sessions List */
.sessions-list[b-7qbv3po755] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.session-item[b-7qbv3po755] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-input);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.session-item.current[b-7qbv3po755] {
    background: var(--primary-alpha);
    border: 1px solid var(--primary);
}

.session-icon[b-7qbv3po755] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.session-item.current .session-icon[b-7qbv3po755] {
    background: var(--primary);
    color: white;
}

.session-info[b-7qbv3po755] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.session-device[b-7qbv3po755] {
    font-weight: 500;
    color: var(--text-primary);
}

.session-details[b-7qbv3po755] {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.current-badge[b-7qbv3po755] {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
    background: var(--primary);
    color: white;
    border-radius: 4px;
    font-weight: 500;
}

.revoke-btn[b-7qbv3po755] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.revoke-btn:hover[b-7qbv3po755] {
    background: #ef4444;
    color: white;
}

/* Avatar Upload Modal */
.avatar-upload-area[b-7qbv3po755] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem;
}

.current-avatar[b-7qbv3po755] {
    width: 120px;
    height: 120px;
}

.current-avatar img[b-7qbv3po755] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.avatar-placeholder-large[b-7qbv3po755] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 600;
}

.upload-instructions[b-7qbv3po755] {
    text-align: center;
}

.upload-instructions p[b-7qbv3po755] {
    margin: 0 0 1rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.file-input[b-7qbv3po755] {
    display: none;
}

.upload-btn[b-7qbv3po755] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--primary);
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}

.upload-btn:hover[b-7qbv3po755] {
    background: var(--primary-dark);
}

/* Two Factor Setup Modal */
.two-factor-setup[b-7qbv3po755] {
    padding: 0.5rem 0;
}

.setup-step[b-7qbv3po755] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.step-number[b-7qbv3po755] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
}

.step-content[b-7qbv3po755] {
    flex: 1;
}

.step-content h4[b-7qbv3po755] {
    margin: 0 0 0.5rem;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.step-content p[b-7qbv3po755] {
    margin: 0 0 1rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.qr-code-section[b-7qbv3po755] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--bg-input);
    border-radius: 8px;
    margin-bottom: 1.5rem;
    margin-left: 48px;
}

.qr-code[b-7qbv3po755] {
    width: 180px;
    height: 180px;
    background: white;
    padding: 1rem;
    border-radius: 8px;
}

.manual-code[b-7qbv3po755] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.code-label[b-7qbv3po755] {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.manual-code code[b-7qbv3po755] {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 1rem;
    letter-spacing: 0.1em;
    padding: 0.5rem 1rem;
    background: var(--bg-card);
    border-radius: 4px;
}

/* Two Factor Disable Modal */
.two-factor-disable[b-7qbv3po755] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    text-align: center;
}

.two-factor-disable .warning-icon[b-7qbv3po755] {
    color: #f59e0b;
}

.two-factor-disable .warning-text[b-7qbv3po755] {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    max-width: 320px;
}

/* Form Group */
.form-group[b-7qbv3po755] {
    margin-bottom: 1rem;
}

.form-label[b-7qbv3po755] {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

/* ════════════════════════════════════════════════════════════════════
   Aboneliğim sekmesi
   ════════════════════════════════════════════════════════════════════ */

.sub-loading[b-7qbv3po755], .sub-empty[b-7qbv3po755] {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.sub-spinner[b-7qbv3po755] {
    width: 36px; height: 36px;
    margin: 0 auto 14px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-7qbv3po755 0.8s linear infinite;
}

@keyframes spin-b-7qbv3po755 { to { transform: rotate(360deg); } }

/* ─── Hero card ─── */
.sub-hero[b-7qbv3po755] {
    position: relative;
    padding: 24px 28px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 14px;
    overflow: hidden;
}

.sub-hero[b-7qbv3po755]::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 4px; height: 100%;
    background: var(--primary);
}

.sub-hero.sub-status--active[b-7qbv3po755]::before  { background: #22c55e; }
.sub-hero.sub-status--trial[b-7qbv3po755]::before   { background: #3b82f6; }
.sub-hero.sub-status--pastdue[b-7qbv3po755]::before { background: #f59e0b; }
.sub-hero.sub-status--cancelled[b-7qbv3po755]::before, .sub-hero.sub-status--suspended[b-7qbv3po755]::before { background: #ef4444; }
.sub-hero.sub-status--pending[b-7qbv3po755]::before { background: var(--text-muted); }

.sub-hero__main[b-7qbv3po755] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.sub-hero__plan h2[b-7qbv3po755] {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 8px 0 4px;
    letter-spacing: -0.4px;
}

.sub-hero__sub[b-7qbv3po755] {
    color: var(--text-secondary);
    font-size: 13px;
    margin: 0;
}

.sub-hero__sub strong[b-7qbv3po755] { color: var(--text-primary); font-weight: 600; }

.sub-hero__actions[b-7qbv3po755] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.sub-hero__progress[b-7qbv3po755] {
    margin-top: 18px;
    height: 6px;
    background: var(--bg-input);
    border-radius: 999px;
    overflow: hidden;
}

.sub-hero__progress-bar[b-7qbv3po755] {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    transition: width 0.3s ease;
}

.sub-hero__progress-meta[b-7qbv3po755] {
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-muted);
}

.sub-hero__progress-meta strong[b-7qbv3po755] { color: var(--text-primary); font-weight: 600; }

/* ─── Status badges ─── */
.sub-status[b-7qbv3po755] {
    display: inline-block;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    border-radius: 999px;
}

.sub-status--active[b-7qbv3po755]    { background: rgba(34, 197, 94, 0.15);  color: #86efac; }
.sub-status--trial[b-7qbv3po755]     { background: rgba(59, 130, 246, 0.15); color: #93c5fd; }
.sub-status--pastdue[b-7qbv3po755]   { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.sub-status--cancelled[b-7qbv3po755] { background: rgba(239, 68, 68, 0.15);  color: #fca5a5; }
.sub-status--suspended[b-7qbv3po755] { background: rgba(239, 68, 68, 0.18);  color: #fca5a5; }
.sub-status--pending[b-7qbv3po755]   { background: rgba(148, 163, 184, 0.15); color: var(--text-secondary); }

/* ─── Buttons ─── */
.sub-btn[b-7qbv3po755] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
}

.sub-btn svg[b-7qbv3po755] { width: 14px; height: 14px; }

.sub-btn:hover:not(:disabled)[b-7qbv3po755] {
    border-color: var(--primary);
    color: var(--primary-light);
}

.sub-btn--primary[b-7qbv3po755] {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    box-shadow: 0 4px 14px var(--primary-alpha);
}

.sub-btn--primary:hover:not(:disabled)[b-7qbv3po755] {
    background: var(--primary-dark);
    color: white;
    box-shadow: 0 6px 18px var(--primary-alpha);
}

.sub-btn--soft[b-7qbv3po755] {
    background: var(--bg-input);
}

.sub-btn--danger[b-7qbv3po755] {
    background: rgba(239, 68, 68, 0.08);
    border-color: #ef4444;
    color: #fca5a5;
}

.sub-btn--danger:hover:not(:disabled)[b-7qbv3po755] {
    background: #ef4444;
    color: white;
}

.sub-btn:disabled[b-7qbv3po755] { opacity: 0.5; cursor: not-allowed; }

/* ─── Banner ─── */
.sub-banner[b-7qbv3po755] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 18px;
    border-radius: 10px;
    margin-bottom: 14px;
    font-size: 12px;
}

.sub-banner svg[b-7qbv3po755] { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.sub-banner strong[b-7qbv3po755] { display: block; margin-bottom: 2px; color: var(--text-primary); }

.sub-banner--warning[b-7qbv3po755] {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #fbbf24;
}

/* ─── Usage grid ─── */
.sub-usage-grid[b-7qbv3po755] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}

.sub-usage[b-7qbv3po755] {
    padding: 14px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.sub-usage__label[b-7qbv3po755] {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.sub-usage__value strong[b-7qbv3po755] {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.4px;
}

.sub-usage__value span[b-7qbv3po755] {
    color: var(--text-muted);
    font-size: 12px;
    margin-left: 4px;
}

.sub-usage__bar[b-7qbv3po755] {
    margin-top: 10px;
    height: 4px;
    background: var(--bg-card);
    border-radius: 999px;
    overflow: hidden;
}

.sub-usage__bar-fill[b-7qbv3po755] {
    height: 100%;
    background: var(--primary);
    transition: width 0.3s ease;
}

.sub-usage__bar-fill.warning[b-7qbv3po755] { background: #f59e0b; }
.sub-usage__bar-fill.danger[b-7qbv3po755]  { background: #ef4444; }

/* ─── Features list ─── */
.sub-features[b-7qbv3po755] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 8px;
}

.sub-features li[b-7qbv3po755] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    transition: background 0.15s ease;
}

.sub-features li svg[b-7qbv3po755] { width: 14px; height: 14px; flex-shrink: 0; }

.sub-features li.is-on[b-7qbv3po755] {
    color: var(--text-primary);
}

.sub-features li.is-on svg[b-7qbv3po755] { color: #22c55e; }

.sub-features li.is-off[b-7qbv3po755] {
    color: var(--text-muted);
    background: var(--bg-input);
}

.sub-features li.is-off svg[b-7qbv3po755] { color: var(--text-muted); }

.sub-features__upgrade[b-7qbv3po755] {
    margin-left: auto;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    background: var(--primary-alpha);
    color: var(--primary-light);
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* ─── Claims (payment history) ─── */
.sub-claims-header[b-7qbv3po755] {
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.sub-claims-filter[b-7qbv3po755] {
    display: flex;
    gap: 4px;
    padding: 3px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.sub-filter[b-7qbv3po755] {
    padding: 6px 12px;
    background: transparent;
    color: var(--text-secondary);
    border: 0;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.sub-filter:hover[b-7qbv3po755] { color: var(--text-primary); }

.sub-filter.is-active[b-7qbv3po755] {
    background: var(--primary);
    color: white;
}

.sub-claims-body[b-7qbv3po755] {
    padding: 0 !important;
}

.sub-claims-empty[b-7qbv3po755] {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
}

.sub-claims-table[b-7qbv3po755] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.sub-claims-table th[b-7qbv3po755] {
    padding: 11px 16px;
    background: var(--bg-input);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.sub-claims-table td[b-7qbv3po755] {
    padding: 12px 16px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
}

.sub-claims-table tr:last-child td[b-7qbv3po755] { border-bottom: 0; }
.sub-claims-table tr:hover[b-7qbv3po755] { background: var(--bg-card-hover); }

.sub-claims-table code[b-7qbv3po755] {
    font-family: ui-monospace, monospace;
    font-size: 11px;
    background: var(--bg-input);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--text-secondary);
}

.sub-claim-action[b-7qbv3po755] {
    display: inline-block;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
}

.sub-claim-action--renewal[b-7qbv3po755] { background: rgba(59, 130, 246, 0.15); color: #93c5fd; }
.sub-claim-action--upgrade[b-7qbv3po755] { background: var(--primary-alpha); color: var(--primary-light); }

.sub-claim-status[b-7qbv3po755] {
    display: inline-block;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
}

.sub-claim-status--pending[b-7qbv3po755]  { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.sub-claim-status--approved[b-7qbv3po755] { background: rgba(34, 197, 94, 0.15);  color: #86efac; }
.sub-claim-status--rejected[b-7qbv3po755] { background: rgba(239, 68, 68, 0.15);  color: #fca5a5; }

.sub-claim-meta[b-7qbv3po755] {
    margin-top: 3px;
    font-size: 10px;
    color: var(--text-muted);
}

.sub-claim-reason[b-7qbv3po755] {
    margin-top: 3px;
    font-size: 10px;
    color: #fca5a5;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─── Danger zone ─── */
.sub-danger[b-7qbv3po755] {
    border-color: rgba(239, 68, 68, 0.4) !important;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.04), transparent) !important;
}

.sub-danger .card-header h3[b-7qbv3po755] { color: #fca5a5; }

/* ─── Toast ─── */
.sub-toast[b-7qbv3po755] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 13px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    z-index: 9999;
    max-width: 480px;
}

.sub-toast--success[b-7qbv3po755] {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid #22c55e;
    color: #86efac;
}

.sub-toast--error[b-7qbv3po755] {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid #ef4444;
    color: #fca5a5;
}

.sub-toast__close[b-7qbv3po755] {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    font-size: 18px;
    padding: 0 4px;
    opacity: 0.7;
}

.sub-toast__close:hover[b-7qbv3po755] { opacity: 1; }

/* ─── Cancel modal ─── */
.sub-modal__overlay[b-7qbv3po755] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.sub-modal[b-7qbv3po755] {
    width: 100%;
    max-width: 480px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px 26px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

.sub-modal h3[b-7qbv3po755] {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
}

.sub-modal p[b-7qbv3po755] {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 18px;
}

.sub-modal p strong[b-7qbv3po755] { color: var(--text-primary); }

.sub-modal label[b-7qbv3po755] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
}

.sub-modal__input[b-7qbv3po755] {
    width: 100%;
    padding: 11px 13px;
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
}

.sub-modal__input:focus[b-7qbv3po755] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-alpha);
}

.sub-modal__actions[b-7qbv3po755] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}

/* ─── AutoRenew status ─── */
.sub-autorenew[b-7qbv3po755] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px;
    flex-wrap: wrap;
}

.sub-autorenew__status[b-7qbv3po755] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sub-autorenew__indicator[b-7qbv3po755] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 4px transparent;
    transition: box-shadow 0.2s ease;
}

.sub-autorenew__status.is-on .sub-autorenew__indicator[b-7qbv3po755] {
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18);
}

.sub-autorenew__status.is-off .sub-autorenew__indicator[b-7qbv3po755] {
    background: #ef4444;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.18);
}

.sub-autorenew__status strong[b-7qbv3po755] {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.sub-autorenew__status span[b-7qbv3po755] {
    font-size: 12px;
    color: var(--text-muted);
}

/* ─── Faturalandırma sekmesi ─────────────────────────────────────── */
.billing-type[b-7qbv3po755] {
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
    padding: 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.billing-type__option[b-7qbv3po755] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: var(--transition);
    font-size: 13px;
    color: var(--text-secondary);
}

.billing-type__option:has(input:checked)[b-7qbv3po755] {
    border-color: var(--primary);
    background: var(--primary-alpha);
    color: var(--primary-light);
}

.billing-type__option input[b-7qbv3po755] { accent-color: var(--primary); }

.form-row[b-7qbv3po755] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.billing-field[b-7qbv3po755] { display: flex; flex-direction: column; }
.billing-field--full[b-7qbv3po755] { grid-column: 1 / -1; }

.billing-field label[b-7qbv3po755] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.billing-field label .req[b-7qbv3po755] { color: #ef4444; font-size: 13px; }
.billing-field label .opt[b-7qbv3po755] {
    color: var(--text-muted);
    font-size: 10px;
    text-transform: lowercase;
    letter-spacing: 0;
    font-weight: 500;
}

.billing-input[b-7qbv3po755] {
    padding: 10px 13px;
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    transition: var(--transition);
}

.billing-input:focus[b-7qbv3po755] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-alpha);
}

textarea.billing-input[b-7qbv3po755] { resize: vertical; min-height: 56px; }

.sub-doc-link[b-7qbv3po755] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: var(--primary-alpha);
    color: var(--primary-light);
    border: 1px solid var(--primary);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    font-family: ui-monospace, monospace;
    transition: var(--transition);
}

.sub-doc-link:hover:not(:disabled)[b-7qbv3po755] {
    background: var(--primary);
    color: white;
}

.sub-doc-link:disabled[b-7qbv3po755] { opacity: 0.5; cursor: not-allowed; }
.sub-doc-link svg[b-7qbv3po755] { width: 13px; height: 13px; }
/* /Components/Pages/Purchasing/PurchaseOrderEdit.razor.rz.scp.css */
.po-header[b-ml727pjwgu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0 12px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    margin-bottom: 12px;
}
.po-number[b-ml727pjwgu] {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
    font-size: 18px;
    font-weight: 700;
}

.card[b-ml727pjwgu] {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}
.card-section-title[b-ml727pjwgu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.po-grid[b-ml727pjwgu] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 12px 16px;
    margin-bottom: 12px;
}
@media (max-width: 768px) {
    .po-grid[b-ml727pjwgu] { grid-template-columns: 1fr; }
}

.required[b-ml727pjwgu] { color: #dc2626; }

.lines-table[b-ml727pjwgu] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.lines-table th[b-ml727pjwgu], .lines-table td[b-ml727pjwgu] {
    padding: 8px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    vertical-align: middle;
}
.lines-table th[b-ml727pjwgu] { text-align: left; color: var(--text-secondary); font-weight: 500; }

.text-right[b-ml727pjwgu] { text-align: right; }
.mono[b-ml727pjwgu] { font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace); }
.muted[b-ml727pjwgu] { color: var(--text-secondary); }

.form-input-sm[b-ml727pjwgu] {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 4px;
    font-size: 13px;
    text-align: right;
}
.form-input-sm:disabled[b-ml727pjwgu] { background: var(--bg-secondary); color: var(--text-secondary); }

.product-cell[b-ml727pjwgu] { display: flex; flex-direction: column; line-height: 1.3; }
.product-name[b-ml727pjwgu] { font-weight: 500; }
.product-sub[b-ml727pjwgu] { display: flex; gap: 6px; font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.sku-tag[b-ml727pjwgu], .barcode-tag[b-ml727pjwgu] {
    padding: 1px 6px;
    background: var(--bg-secondary, #f3f4f6);
    border-radius: 3px;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
}

.empty-lines[b-ml727pjwgu] {
    padding: 24px;
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
}

.btn-icon-danger[b-ml727pjwgu] {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #dc2626;
    padding: 4px;
    border-radius: 4px;
    display: inline-flex;
}
.btn-icon-danger:hover[b-ml727pjwgu] { background: #fee2e2; }

.totals-block[b-ml727pjwgu] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color, #e5e7eb);
}
.totals-row[b-ml727pjwgu] {
    display: flex;
    justify-content: space-between;
    min-width: 280px;
    font-size: 14px;
}
.totals-row span:first-child[b-ml727pjwgu] { color: var(--text-secondary); }
.totals-row.grand[b-ml727pjwgu] {
    font-weight: 700;
    font-size: 16px;
    border-top: 1px solid var(--border-color);
    padding-top: 6px;
    margin-top: 4px;
}

/* Status badges */
.status-badge[b-ml727pjwgu] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}
.status-draft[b-ml727pjwgu] { background: #f3f4f6; color: #4b5563; }
.status-submitted[b-ml727pjwgu] { background: #dbeafe; color: #1e40af; }
.status-received[b-ml727pjwgu] { background: #d1fae5; color: #065f46; }
.status-cancelled[b-ml727pjwgu] { background: #fee2e2; color: #991b1b; }

/* Product search results */
.product-results[b-ml727pjwgu] {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-bottom: 12px;
}
.product-result[b-ml727pjwgu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    text-align: left;
}
.product-result:last-child[b-ml727pjwgu] { border-bottom: none; }
.product-result:hover[b-ml727pjwgu] { background: var(--bg-secondary, #f3f4f6); }
.product-result.selected[b-ml727pjwgu] { background: #dbeafe; }
.pr-main[b-ml727pjwgu] { display: flex; flex-direction: column; gap: 2px; }
.pr-name[b-ml727pjwgu] { font-weight: 500; font-size: 13px; }
.pr-meta[b-ml727pjwgu] { font-size: 11px; color: var(--text-secondary); font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace); }
.pr-price[b-ml727pjwgu] { font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace); font-weight: 600; }
/* /Components/Pages/Purchasing/PurchaseOrders.razor.rz.scp.css */
.link-number[b-ri4zhegjz7] {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
    font-weight: 600;
    color: var(--color-primary, #2563eb);
    text-decoration: none;
}
.link-number:hover[b-ri4zhegjz7] { text-decoration: underline; }

.supplier-cell[b-ri4zhegjz7] { display: flex; flex-direction: column; line-height: 1.3; }
.supplier-name[b-ri4zhegjz7] { font-weight: 500; }
.supplier-code[b-ri4zhegjz7] { font-size: 12px; color: var(--text-secondary); }

.muted[b-ri4zhegjz7] { color: var(--text-secondary); font-size: 13px; }
.mono[b-ri4zhegjz7] { font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace); }
.text-right[b-ri4zhegjz7] { text-align: right; }

.status-badge[b-ri4zhegjz7] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}
.status-draft[b-ri4zhegjz7] { background: #f3f4f6; color: #4b5563; }
.status-submitted[b-ri4zhegjz7] { background: #dbeafe; color: #1e40af; }
.status-received[b-ri4zhegjz7] { background: #d1fae5; color: #065f46; }
.status-cancelled[b-ri4zhegjz7] { background: #fee2e2; color: #991b1b; }
/* /Components/Pages/Reports/Financial/FinancialOverview.razor.rz.scp.css */
.financial-report[b-ofezswa64u] {
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Loading & Error */
.reports-loading[b-ofezswa64u],
.reports-error[b-ofezswa64u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.loading-spinner[b-ofezswa64u] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color, #e5e7eb);
    border-top-color: var(--primary-color, #3b82f6);
    border-radius: 50%;
    animation: spin-b-ofezswa64u 1s linear infinite;
}

@keyframes spin-b-ofezswa64u {
    to { transform: rotate(360deg); }
}

.error-icon[b-ofezswa64u] {
    width: 48px;
    height: 48px;
    color: var(--danger-color, #ef4444);
}

.retry-btn[b-ofezswa64u] {
    padding: 10px 20px;
    background: var(--primary-color, #3b82f6);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
}

/* Header */
.report-header[b-ofezswa64u] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.breadcrumb[b-ofezswa64u] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 8px;
}

.breadcrumb a[b-ofezswa64u] {
    color: var(--primary-color, #3b82f6);
    text-decoration: none;
}

.breadcrumb a:hover[b-ofezswa64u] {
    text-decoration: underline;
}

.header-left h1[b-ofezswa64u] {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary, #1f2937);
}

.header-actions[b-ofezswa64u] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.form-select[b-ofezswa64u] {
    padding: 10px 16px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    background: var(--bg-secondary, #fff);
    font-size: 0.875rem;
    color: var(--text-primary, #1f2937);
    cursor: pointer;
}

.btn-refresh[b-ofezswa64u] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-secondary, #6b7280);
    transition: all 0.2s;
}

.btn-refresh:hover[b-ofezswa64u] {
    background: var(--bg-hover, #f9fafb);
    color: var(--primary-color, #3b82f6);
}

.btn-refresh svg[b-ofezswa64u] {
    width: 20px;
    height: 20px;
}

/* KPI Grid */
.kpi-grid[b-ofezswa64u] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.kpi-card[b-ofezswa64u] {
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.kpi-icon[b-ofezswa64u] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kpi-icon svg[b-ofezswa64u] {
    width: 24px;
    height: 24px;
}

.kpi-icon.blue[b-ofezswa64u] { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.kpi-icon.green[b-ofezswa64u] { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.kpi-icon.purple[b-ofezswa64u] { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }
.kpi-icon.orange[b-ofezswa64u] { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }

.kpi-content[b-ofezswa64u] {
    display: flex;
    flex-direction: column;
}

.kpi-label[b-ofezswa64u] {
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
}

.kpi-value[b-ofezswa64u] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary, #1f2937);
}

/* Charts Row */
.charts-row[b-ofezswa64u] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.chart-card[b-ofezswa64u] {
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    padding: 20px;
}

.chart-header[b-ofezswa64u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.chart-header h3[b-ofezswa64u] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary, #1f2937);
}

.chart-body[b-ofezswa64u] {
    min-height: 280px;
}

.chart-empty[b-ofezswa64u] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--text-secondary, #6b7280);
    font-size: 0.875rem;
}

/* Breakdown List */
.breakdown-list[b-ofezswa64u] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 12px 0;
}

.breakdown-item[b-ofezswa64u] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.breakdown-item.total[b-ofezswa64u] {
    margin-top: 8px;
    padding-top: 16px;
    border-top: 2px solid var(--border-color, #e5e7eb);
}

.item-header[b-ofezswa64u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.item-label[b-ofezswa64u] {
    font-size: 0.875rem;
    color: var(--text-primary, #1f2937);
}

.item-label.deduct[b-ofezswa64u] {
    color: var(--text-secondary, #6b7280);
}

.item-value[b-ofezswa64u] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
}

.item-value.deduct[b-ofezswa64u] {
    color: var(--text-secondary, #6b7280);
}

.item-bar[b-ofezswa64u] {
    height: 8px;
    background: var(--bg-tertiary, #f3f4f6);
    border-radius: 4px;
    overflow: hidden;
}

.item-fill[b-ofezswa64u] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.item-fill.blue[b-ofezswa64u] { background: #3b82f6; }
.item-fill.orange[b-ofezswa64u] { background: #f59e0b; }
.item-fill.red[b-ofezswa64u] { background: #ef4444; }
.item-fill.green[b-ofezswa64u] { background: #10b981; }

/* Profitability Gauge */
.profitability-gauge[b-ofezswa64u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 20px 0;
}

.gauge-circle[b-ofezswa64u] {
    position: relative;
    width: 180px;
    height: 180px;
}

.circular-chart[b-ofezswa64u] {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.circle-bg[b-ofezswa64u] {
    fill: none;
    stroke: var(--bg-tertiary, #f3f4f6);
    stroke-width: 3;
}

.circle[b-ofezswa64u] {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 0.5s ease;
}

.circle.excellent[b-ofezswa64u] { stroke: #10b981; }
.circle.good[b-ofezswa64u] { stroke: #3b82f6; }
.circle.warning[b-ofezswa64u] { stroke: #f59e0b; }
.circle.poor[b-ofezswa64u] { stroke: #ef4444; }

.gauge-center[b-ofezswa64u] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.gauge-value[b-ofezswa64u] {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary, #1f2937);
}

.gauge-label[b-ofezswa64u] {
    display: block;
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
}

.profit-stats[b-ofezswa64u] {
    display: flex;
    gap: 32px;
}

.stat-item[b-ofezswa64u] {
    text-align: center;
}

.stat-item .stat-label[b-ofezswa64u] {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 4px;
}

.stat-item .stat-value[b-ofezswa64u] {
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
}

.stat-item .stat-value.success[b-ofezswa64u] { color: #10b981; }
.stat-item .stat-value.warning[b-ofezswa64u] { color: #f59e0b; }

/* Quick Navigation */
.quick-nav[b-ofezswa64u] {
    margin-top: 24px;
}

.quick-nav h3[b-ofezswa64u] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
    margin: 0 0 16px 0;
}

.nav-cards[b-ofezswa64u] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.nav-card[b-ofezswa64u] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s;
}

.nav-card:hover[b-ofezswa64u] {
    border-color: var(--primary-color, #3b82f6);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

.nav-icon[b-ofezswa64u] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nav-icon svg[b-ofezswa64u] {
    width: 24px;
    height: 24px;
}

.nav-icon.blue[b-ofezswa64u] { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.nav-icon.green[b-ofezswa64u] { background: rgba(16, 185, 129, 0.1); color: #10b981; }

.nav-content[b-ofezswa64u] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.nav-title[b-ofezswa64u] {
    font-weight: 600;
    color: var(--text-primary, #1f2937);
}

.nav-desc[b-ofezswa64u] {
    font-size: 0.75rem;
    color: var(--text-secondary, #6b7280);
}

.nav-arrow[b-ofezswa64u] {
    width: 20px;
    height: 20px;
    color: var(--text-secondary, #6b7280);
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .kpi-grid[b-ofezswa64u] {
        grid-template-columns: repeat(2, 1fr);
    }

    .charts-row[b-ofezswa64u],
    .nav-cards[b-ofezswa64u] {
        grid-template-columns: 1fr;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .financial-report[b-ofezswa64u] {
        padding: 12px;
    }

    /* Header */
    .report-header[b-ofezswa64u] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 16px;
    }

    .header-left[b-ofezswa64u] {
        width: 100%;
        display: block;
    }

    .breadcrumb[b-ofezswa64u] {
        font-size: 0.75rem;
        gap: 0;
        margin-bottom: 8px;
        flex-wrap: wrap;
        background: var(--bg-tertiary, #f3f4f6);
        padding: 6px 10px;
        border-radius: 6px;
    }

    .breadcrumb span:not(:last-child)[b-ofezswa64u] {
        display: none;
    }

    .breadcrumb a[b-ofezswa64u] {
        position: relative;
        padding-right: 18px;
    }

    .breadcrumb a[b-ofezswa64u]::after {
        content: "›";
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted, #9ca3af);
        font-size: 0.85rem;
    }

    .breadcrumb span:last-child[b-ofezswa64u] {
        font-weight: 600;
        color: var(--text-primary, #1f2937);
    }

    .header-left h1[b-ofezswa64u] {
        font-size: 1.15rem;
        line-height: 1.3;
    }

    .header-actions[b-ofezswa64u] {
        width: 100%;
    }

    .form-select[b-ofezswa64u] {
        flex: 1;
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    .btn-refresh[b-ofezswa64u] {
        width: 36px;
        height: 36px;
    }

    .btn-refresh svg[b-ofezswa64u] {
        width: 18px;
        height: 18px;
    }

    /* KPI Cards - 2 columns compact */
    .kpi-grid[b-ofezswa64u] {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 16px;
    }

    .kpi-card[b-ofezswa64u] {
        padding: 14px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .kpi-icon[b-ofezswa64u] {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }

    .kpi-icon svg[b-ofezswa64u] {
        width: 18px;
        height: 18px;
    }

    .kpi-value[b-ofezswa64u] {
        font-size: 1.2rem;
    }

    .kpi-label[b-ofezswa64u] {
        font-size: 0.75rem;
    }

    /* Charts */
    .charts-row[b-ofezswa64u] {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 16px;
    }

    .chart-card[b-ofezswa64u] {
        padding: 14px;
        border-radius: 10px;
    }

    .chart-header[b-ofezswa64u] {
        margin-bottom: 12px;
    }

    .chart-header h3[b-ofezswa64u] {
        font-size: 0.875rem;
    }

    .chart-body[b-ofezswa64u] {
        min-height: auto;
    }

    /* Breakdown List */
    .breakdown-list[b-ofezswa64u] {
        gap: 12px;
        padding: 8px 0;
    }

    .item-label[b-ofezswa64u] {
        font-size: 0.8rem;
    }

    .item-value[b-ofezswa64u] {
        font-size: 0.8rem;
    }

    .breakdown-item.total[b-ofezswa64u] {
        margin-top: 4px;
        padding-top: 12px;
    }

    /* Profitability Gauge */
    .profitability-gauge[b-ofezswa64u] {
        gap: 16px;
        padding: 12px 0;
    }

    .gauge-circle[b-ofezswa64u] {
        width: 140px;
        height: 140px;
    }

    .gauge-value[b-ofezswa64u] {
        font-size: 1.5rem;
    }

    .gauge-label[b-ofezswa64u] {
        font-size: 0.75rem;
    }

    .profit-stats[b-ofezswa64u] {
        gap: 24px;
    }

    .stat-item .stat-value[b-ofezswa64u] {
        font-size: 1.1rem;
    }

    .stat-item .stat-label[b-ofezswa64u] {
        font-size: 0.7rem;
    }

    /* Quick Navigation */
    .quick-nav[b-ofezswa64u] {
        margin-top: 16px;
    }

    .quick-nav h3[b-ofezswa64u] {
        font-size: 1rem;
        margin-bottom: 12px;
    }

    .nav-cards[b-ofezswa64u] {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .nav-card[b-ofezswa64u] {
        padding: 14px;
        gap: 12px;
        border-radius: 10px;
    }

    .nav-icon[b-ofezswa64u] {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .nav-icon svg[b-ofezswa64u] {
        width: 20px;
        height: 20px;
    }

    .nav-title[b-ofezswa64u] {
        font-size: 0.85rem;
    }

    .nav-desc[b-ofezswa64u] {
        font-size: 0.7rem;
    }

    .nav-arrow[b-ofezswa64u] {
        width: 18px;
        height: 18px;
    }

    /* Loading & Error */
    .reports-loading[b-ofezswa64u],
    .reports-error[b-ofezswa64u] {
        min-height: 300px;
    }
}

/* Responsive - Small Mobile */
@media (max-width: 400px) {
    .financial-report[b-ofezswa64u] {
        padding: 8px;
    }

    .kpi-grid[b-ofezswa64u] {
        gap: 8px;
    }

    .kpi-card[b-ofezswa64u] {
        padding: 12px;
    }

    .kpi-value[b-ofezswa64u] {
        font-size: 1.05rem;
    }

    .gauge-circle[b-ofezswa64u] {
        width: 120px;
        height: 120px;
    }

    .gauge-value[b-ofezswa64u] {
        font-size: 1.25rem;
    }
}
/* /Components/Pages/Reports/Financial/ProfitabilityReport.razor.rz.scp.css */
.profitability-report[b-r0gz9c2nc0] {
    padding: 24px;
    max-width: 1000px;
    margin: 0 auto;
}

/* Loading & Error */
.reports-loading[b-r0gz9c2nc0],
.reports-error[b-r0gz9c2nc0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.loading-spinner[b-r0gz9c2nc0] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color, #e5e7eb);
    border-top-color: var(--primary-color, #3b82f6);
    border-radius: 50%;
    animation: spin-b-r0gz9c2nc0 1s linear infinite;
}

@keyframes spin-b-r0gz9c2nc0 {
    to { transform: rotate(360deg); }
}

.error-icon[b-r0gz9c2nc0] {
    width: 48px;
    height: 48px;
    color: var(--danger-color, #ef4444);
}

.retry-btn[b-r0gz9c2nc0] {
    padding: 10px 20px;
    background: var(--primary-color, #3b82f6);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
}

/* Header */
.report-header[b-r0gz9c2nc0] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.breadcrumb[b-r0gz9c2nc0] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 8px;
}

.breadcrumb a[b-r0gz9c2nc0] {
    color: var(--primary-color, #3b82f6);
    text-decoration: none;
}

.breadcrumb a:hover[b-r0gz9c2nc0] {
    text-decoration: underline;
}

.header-left h1[b-r0gz9c2nc0] {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary, #1f2937);
}

.header-actions[b-r0gz9c2nc0] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.form-select[b-r0gz9c2nc0] {
    padding: 10px 16px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    background: var(--bg-secondary, #fff);
    font-size: 0.875rem;
    color: var(--text-primary, #1f2937);
    cursor: pointer;
}

.btn-refresh[b-r0gz9c2nc0] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-secondary, #6b7280);
    transition: all 0.2s;
}

.btn-refresh:hover[b-r0gz9c2nc0] {
    background: var(--bg-hover, #f9fafb);
    color: var(--primary-color, #3b82f6);
}

.btn-refresh svg[b-r0gz9c2nc0] {
    width: 20px;
    height: 20px;
}

/* Main Gauge Card */
.main-gauge-card[b-r0gz9c2nc0] {
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 48px;
}

.gauge-container[b-r0gz9c2nc0] {
    flex-shrink: 0;
}

.gauge-circle[b-r0gz9c2nc0] {
    position: relative;
    width: 200px;
    height: 200px;
}

.circular-chart[b-r0gz9c2nc0] {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.circle-bg[b-r0gz9c2nc0] {
    fill: none;
    stroke: var(--bg-tertiary, #f3f4f6);
    stroke-width: 3;
}

.circle[b-r0gz9c2nc0] {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 0.5s ease;
}

.circle.excellent[b-r0gz9c2nc0] { stroke: #10b981; }
.circle.good[b-r0gz9c2nc0] { stroke: #3b82f6; }
.circle.warning[b-r0gz9c2nc0] { stroke: #f59e0b; }
.circle.poor[b-r0gz9c2nc0] { stroke: #ef4444; }

.gauge-center[b-r0gz9c2nc0] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.gauge-value[b-r0gz9c2nc0] {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
}

.gauge-value.excellent[b-r0gz9c2nc0] { color: #10b981; }
.gauge-value.good[b-r0gz9c2nc0] { color: #3b82f6; }
.gauge-value.warning[b-r0gz9c2nc0] { color: #f59e0b; }
.gauge-value.poor[b-r0gz9c2nc0] { color: #ef4444; }

.gauge-label[b-r0gz9c2nc0] {
    display: block;
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
}

.gauge-stats[b-r0gz9c2nc0] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.stat-card[b-r0gz9c2nc0] {
    padding: 16px 20px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stat-card.revenue[b-r0gz9c2nc0] {
    background: rgba(59, 130, 246, 0.1);
}

.stat-card.cost[b-r0gz9c2nc0] {
    background: rgba(245, 158, 11, 0.1);
}

.stat-card.profit[b-r0gz9c2nc0] {
    background: rgba(16, 185, 129, 0.1);
}

.stat-card .stat-label[b-r0gz9c2nc0] {
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
}

.stat-card .stat-value[b-r0gz9c2nc0] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary, #1f2937);
}

/* Breakdown Card */
.breakdown-card[b-r0gz9c2nc0],
.pnl-card[b-r0gz9c2nc0] {
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    margin-bottom: 16px;
}

.card-header[b-r0gz9c2nc0] {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.card-header h3[b-r0gz9c2nc0] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary, #1f2937);
}

.card-body[b-r0gz9c2nc0] {
    padding: 24px;
}

/* Cost Bars */
.cost-bars[b-r0gz9c2nc0] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cost-item[b-r0gz9c2nc0] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
}

.cost-header[b-r0gz9c2nc0] {
    display: flex;
    justify-content: space-between;
    grid-column: 1 / -1;
}

.cost-label[b-r0gz9c2nc0] {
    font-size: 0.875rem;
    color: var(--text-primary, #1f2937);
}

.cost-value[b-r0gz9c2nc0] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
}

.cost-bar[b-r0gz9c2nc0] {
    height: 12px;
    background: var(--bg-tertiary, #f3f4f6);
    border-radius: 6px;
    overflow: hidden;
}

.cost-fill[b-r0gz9c2nc0] {
    height: 100%;
    border-radius: 6px;
    transition: width 0.3s ease;
}

.cost-fill.product[b-r0gz9c2nc0] { background: #3b82f6; }
.cost-fill.shipping[b-r0gz9c2nc0] { background: #8b5cf6; }
.cost-fill.commission[b-r0gz9c2nc0] { background: #f59e0b; }

.cost-percent[b-r0gz9c2nc0] {
    font-size: 0.75rem;
    color: var(--text-secondary, #6b7280);
    text-align: right;
    min-width: 40px;
}

/* P&L Table */
.pnl-table[b-r0gz9c2nc0] {
    width: 100%;
    border-collapse: collapse;
}

.pnl-table td[b-r0gz9c2nc0] {
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.pnl-table tr:last-child td[b-r0gz9c2nc0] {
    border-bottom: none;
}

.pnl-table .section-header td[b-r0gz9c2nc0] {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-secondary, #6b7280);
    padding-top: 20px;
}

.pnl-table .sub-item td[b-r0gz9c2nc0] {
    padding-left: 16px;
    color: var(--text-secondary, #6b7280);
}

.pnl-table .total-cost td[b-r0gz9c2nc0] {
    font-weight: 600;
    border-top: 1px solid var(--border-color, #e5e7eb);
}

.pnl-table .gross-profit td[b-r0gz9c2nc0] {
    font-weight: 700;
    font-size: 1.125rem;
    border-top: 2px solid var(--border-color, #e5e7eb);
    padding-top: 16px;
}

.pnl-table .margin td[b-r0gz9c2nc0] {
    font-weight: 600;
}

.text-right[b-r0gz9c2nc0] {
    text-align: right;
}

.negative[b-r0gz9c2nc0] { color: #ef4444; }
.positive[b-r0gz9c2nc0] { color: #10b981; }
.excellent[b-r0gz9c2nc0] { color: #10b981; }
.good[b-r0gz9c2nc0] { color: #3b82f6; }
.warning[b-r0gz9c2nc0] { color: #f59e0b; }
.poor[b-r0gz9c2nc0] { color: #ef4444; }

.chart-empty[b-r0gz9c2nc0] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--text-secondary, #6b7280);
    font-size: 0.875rem;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .main-gauge-card[b-r0gz9c2nc0] {
        gap: 32px;
    }

    .gauge-circle[b-r0gz9c2nc0] {
        width: 170px;
        height: 170px;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .profitability-report[b-r0gz9c2nc0] {
        padding: 12px;
    }

    /* Header */
    .report-header[b-r0gz9c2nc0] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 16px;
    }

    .header-left[b-r0gz9c2nc0] {
        width: 100%;
        display: block;
    }

    .breadcrumb[b-r0gz9c2nc0] {
        font-size: 0.75rem;
        gap: 0;
        margin-bottom: 8px;
        flex-wrap: wrap;
        background: var(--bg-tertiary, #f3f4f6);
        padding: 6px 10px;
        border-radius: 6px;
    }

    .breadcrumb span:not(:last-child)[b-r0gz9c2nc0] {
        display: none;
    }

    .breadcrumb a[b-r0gz9c2nc0] {
        position: relative;
        padding-right: 18px;
    }

    .breadcrumb a[b-r0gz9c2nc0]::after {
        content: "›";
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted, #9ca3af);
        font-size: 0.85rem;
    }

    .breadcrumb span:last-child[b-r0gz9c2nc0] {
        font-weight: 600;
        color: var(--text-primary, #1f2937);
    }

    .header-left h1[b-r0gz9c2nc0] {
        font-size: 1.15rem;
        line-height: 1.3;
    }

    .header-actions[b-r0gz9c2nc0] {
        width: 100%;
    }

    .form-select[b-r0gz9c2nc0] {
        flex: 1;
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    .btn-refresh[b-r0gz9c2nc0] {
        width: 36px;
        height: 36px;
    }

    .btn-refresh svg[b-r0gz9c2nc0] {
        width: 18px;
        height: 18px;
    }

    /* Main Gauge Card */
    .main-gauge-card[b-r0gz9c2nc0] {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        padding: 20px 14px;
        margin-bottom: 16px;
        border-radius: 10px;
    }

    .gauge-circle[b-r0gz9c2nc0] {
        width: 140px;
        height: 140px;
    }

    .gauge-value[b-r0gz9c2nc0] {
        font-size: 1.75rem;
    }

    .gauge-label[b-r0gz9c2nc0] {
        font-size: 0.75rem;
    }

    .gauge-stats[b-r0gz9c2nc0] {
        width: 100%;
        gap: 10px;
    }

    .stat-card[b-r0gz9c2nc0] {
        padding: 12px 14px;
        border-radius: 8px;
    }

    .stat-card .stat-label[b-r0gz9c2nc0] {
        font-size: 0.8rem;
    }

    .stat-card .stat-value[b-r0gz9c2nc0] {
        font-size: 1.05rem;
    }

    /* Breakdown & P&L Cards */
    .breakdown-card[b-r0gz9c2nc0],
    .pnl-card[b-r0gz9c2nc0] {
        border-radius: 10px;
        margin-bottom: 12px;
    }

    .card-header[b-r0gz9c2nc0] {
        padding: 12px 14px;
    }

    .card-header h3[b-r0gz9c2nc0] {
        font-size: 0.875rem;
    }

    .card-body[b-r0gz9c2nc0] {
        padding: 14px;
    }

    /* Cost Bars */
    .cost-bars[b-r0gz9c2nc0] {
        gap: 14px;
    }

    .cost-label[b-r0gz9c2nc0] {
        font-size: 0.8rem;
    }

    .cost-value[b-r0gz9c2nc0] {
        font-size: 0.8rem;
    }

    .cost-bar[b-r0gz9c2nc0] {
        height: 10px;
    }

    .cost-percent[b-r0gz9c2nc0] {
        font-size: 0.7rem;
    }

    /* P&L Table */
    .pnl-table td[b-r0gz9c2nc0] {
        padding: 10px 0;
        font-size: 0.85rem;
    }

    .pnl-table .section-header td[b-r0gz9c2nc0] {
        font-size: 0.7rem;
        padding-top: 14px;
    }

    .pnl-table .sub-item td[b-r0gz9c2nc0] {
        padding-left: 12px;
        font-size: 0.8rem;
    }

    .pnl-table .gross-profit td[b-r0gz9c2nc0] {
        font-size: 1rem;
        padding-top: 12px;
    }

    /* Loading & Error */
    .reports-loading[b-r0gz9c2nc0],
    .reports-error[b-r0gz9c2nc0] {
        min-height: 300px;
    }
}

/* Responsive - Small Mobile */
@media (max-width: 400px) {
    .profitability-report[b-r0gz9c2nc0] {
        padding: 8px;
    }

    .main-gauge-card[b-r0gz9c2nc0] {
        padding: 16px 10px;
    }

    .gauge-circle[b-r0gz9c2nc0] {
        width: 120px;
        height: 120px;
    }

    .gauge-value[b-r0gz9c2nc0] {
        font-size: 1.5rem;
    }

    .stat-card .stat-value[b-r0gz9c2nc0] {
        font-size: 0.95rem;
    }

    .pnl-table td[b-r0gz9c2nc0] {
        font-size: 0.8rem;
    }
}
/* /Components/Pages/Reports/Financial/RevenueReport.razor.rz.scp.css */
.revenue-report[b-xirdnblmg3] {
    padding: 24px;
    max-width: 1000px;
    margin: 0 auto;
}

/* Loading & Error */
.reports-loading[b-xirdnblmg3],
.reports-error[b-xirdnblmg3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.loading-spinner[b-xirdnblmg3] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color, #e5e7eb);
    border-top-color: var(--primary-color, #3b82f6);
    border-radius: 50%;
    animation: spin-b-xirdnblmg3 1s linear infinite;
}

@keyframes spin-b-xirdnblmg3 {
    to { transform: rotate(360deg); }
}

.error-icon[b-xirdnblmg3] {
    width: 48px;
    height: 48px;
    color: var(--danger-color, #ef4444);
}

.retry-btn[b-xirdnblmg3] {
    padding: 10px 20px;
    background: var(--primary-color, #3b82f6);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
}

/* Header */
.report-header[b-xirdnblmg3] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.breadcrumb[b-xirdnblmg3] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 8px;
}

.breadcrumb a[b-xirdnblmg3] {
    color: var(--primary-color, #3b82f6);
    text-decoration: none;
}

.breadcrumb a:hover[b-xirdnblmg3] {
    text-decoration: underline;
}

.header-left h1[b-xirdnblmg3] {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary, #1f2937);
}

.header-actions[b-xirdnblmg3] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.form-select[b-xirdnblmg3] {
    padding: 10px 16px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    background: var(--bg-secondary, #fff);
    font-size: 0.875rem;
    color: var(--text-primary, #1f2937);
    cursor: pointer;
}

.btn-refresh[b-xirdnblmg3] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-secondary, #6b7280);
    transition: all 0.2s;
}

.btn-refresh:hover[b-xirdnblmg3] {
    background: var(--bg-hover, #f9fafb);
    color: var(--primary-color, #3b82f6);
}

.btn-refresh svg[b-xirdnblmg3] {
    width: 20px;
    height: 20px;
}

/* Summary Grid */
.summary-grid[b-xirdnblmg3] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.summary-card[b-xirdnblmg3] {
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.summary-card.highlight[b-xirdnblmg3] {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

.summary-card.highlight .summary-label[b-xirdnblmg3] {
    color: rgba(255,255,255,0.8);
}

.summary-card.highlight .summary-value[b-xirdnblmg3] {
    color: white;
}

.summary-card.success[b-xirdnblmg3] {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.05);
}

.summary-card.success .summary-value[b-xirdnblmg3] {
    color: #10b981;
}

.summary-icon[b-xirdnblmg3] {
    width: 48px;
    height: 48px;
    background: rgba(255,255,255,0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.summary-icon svg[b-xirdnblmg3] {
    width: 24px;
    height: 24px;
}

.summary-content[b-xirdnblmg3] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.summary-label[b-xirdnblmg3] {
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
}

.summary-value[b-xirdnblmg3] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary, #1f2937);
}

.summary-value.negative[b-xirdnblmg3] {
    color: var(--text-secondary, #6b7280);
}

/* Breakdown Card */
.breakdown-card[b-xirdnblmg3],
.details-card[b-xirdnblmg3] {
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    margin-bottom: 16px;
}

.card-header[b-xirdnblmg3] {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.card-header h3[b-xirdnblmg3] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary, #1f2937);
}

.card-body[b-xirdnblmg3] {
    padding: 24px;
}

/* Waterfall Chart */
.waterfall[b-xirdnblmg3] {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    height: 250px;
    gap: 16px;
}

.waterfall-item[b-xirdnblmg3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.waterfall-item .item-bar[b-xirdnblmg3] {
    width: 100%;
    max-width: 80px;
    border-radius: 4px 4px 0 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 8px;
    min-height: 40px;
}

.waterfall-item.start .item-bar[b-xirdnblmg3],
.waterfall-item.end .item-bar[b-xirdnblmg3] {
    background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
}

.waterfall-item.decrease .item-bar[b-xirdnblmg3] {
    background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
}

.waterfall-item .item-amount[b-xirdnblmg3] {
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
}

.waterfall-item .item-label[b-xirdnblmg3] {
    font-size: 0.75rem;
    color: var(--text-secondary, #6b7280);
    text-align: center;
}

/* Details Table */
.details-table[b-xirdnblmg3] {
    width: 100%;
    border-collapse: collapse;
}

.details-table td[b-xirdnblmg3] {
    padding: 16px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.details-table tr:last-child td[b-xirdnblmg3] {
    border-bottom: none;
}

.details-table .deduct td[b-xirdnblmg3] {
    color: var(--text-secondary, #6b7280);
}

.details-table .total td[b-xirdnblmg3] {
    font-weight: 600;
    font-size: 1.125rem;
    border-top: 2px solid var(--border-color, #e5e7eb);
    color: #10b981;
}

.text-right[b-xirdnblmg3] {
    text-align: right;
}

.chart-empty[b-xirdnblmg3] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--text-secondary, #6b7280);
    font-size: 0.875rem;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .summary-grid[b-xirdnblmg3] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .revenue-report[b-xirdnblmg3] {
        padding: 12px;
    }

    /* Header */
    .report-header[b-xirdnblmg3] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 16px;
    }

    .header-left[b-xirdnblmg3] {
        width: 100%;
        display: block;
    }

    .breadcrumb[b-xirdnblmg3] {
        font-size: 0.75rem;
        gap: 0;
        margin-bottom: 8px;
        flex-wrap: wrap;
        background: var(--bg-tertiary, #f3f4f6);
        padding: 6px 10px;
        border-radius: 6px;
    }

    .breadcrumb span:not(:last-child)[b-xirdnblmg3] {
        display: none;
    }

    .breadcrumb a[b-xirdnblmg3] {
        position: relative;
        padding-right: 18px;
    }

    .breadcrumb a[b-xirdnblmg3]::after {
        content: "›";
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted, #9ca3af);
        font-size: 0.85rem;
    }

    .breadcrumb span:last-child[b-xirdnblmg3] {
        font-weight: 600;
        color: var(--text-primary, #1f2937);
    }

    .header-left h1[b-xirdnblmg3] {
        font-size: 1.15rem;
        line-height: 1.3;
    }

    .header-actions[b-xirdnblmg3] {
        width: 100%;
    }

    .form-select[b-xirdnblmg3] {
        flex: 1;
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    .btn-refresh[b-xirdnblmg3] {
        width: 36px;
        height: 36px;
    }

    .btn-refresh svg[b-xirdnblmg3] {
        width: 18px;
        height: 18px;
    }

    /* Summary Cards - highlight full width, others 2 col */
    .summary-grid[b-xirdnblmg3] {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 16px;
    }

    .summary-card[b-xirdnblmg3] {
        padding: 14px;
        gap: 6px;
        border-radius: 10px;
    }

    .summary-card.highlight[b-xirdnblmg3] {
        grid-column: span 2;
        gap: 12px;
    }

    .summary-icon[b-xirdnblmg3] {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .summary-icon svg[b-xirdnblmg3] {
        width: 20px;
        height: 20px;
    }

    .summary-label[b-xirdnblmg3] {
        font-size: 0.75rem;
    }

    .summary-value[b-xirdnblmg3] {
        font-size: 1.15rem;
    }

    .summary-card.highlight .summary-value[b-xirdnblmg3] {
        font-size: 1.3rem;
    }

    /* Breakdown & Details Cards */
    .breakdown-card[b-xirdnblmg3],
    .details-card[b-xirdnblmg3] {
        border-radius: 10px;
        margin-bottom: 12px;
    }

    .card-header[b-xirdnblmg3] {
        padding: 12px 14px;
    }

    .card-header h3[b-xirdnblmg3] {
        font-size: 0.875rem;
    }

    .card-body[b-xirdnblmg3] {
        padding: 14px;
    }

    /* Waterfall */
    .waterfall[b-xirdnblmg3] {
        height: 180px;
        gap: 10px;
    }

    .waterfall-item .item-bar[b-xirdnblmg3] {
        max-width: 60px;
    }

    .waterfall-item .item-amount[b-xirdnblmg3] {
        font-size: 0.7rem;
    }

    .waterfall-item .item-label[b-xirdnblmg3] {
        font-size: 0.65rem;
    }

    /* Details Table */
    .details-table td[b-xirdnblmg3] {
        padding: 12px 8px;
        font-size: 0.85rem;
    }

    .details-table .total td[b-xirdnblmg3] {
        font-size: 1rem;
    }

    /* Loading & Error */
    .reports-loading[b-xirdnblmg3],
    .reports-error[b-xirdnblmg3] {
        min-height: 300px;
    }
}

/* Responsive - Small Mobile */
@media (max-width: 400px) {
    .revenue-report[b-xirdnblmg3] {
        padding: 8px;
    }

    .summary-grid[b-xirdnblmg3] {
        gap: 8px;
    }

    .summary-card[b-xirdnblmg3] {
        padding: 12px;
    }

    .summary-value[b-xirdnblmg3] {
        font-size: 1rem;
    }

    .summary-card.highlight .summary-value[b-xirdnblmg3] {
        font-size: 1.15rem;
    }

    .waterfall[b-xirdnblmg3] {
        height: 150px;
        gap: 6px;
    }

    .waterfall-item .item-bar[b-xirdnblmg3] {
        max-width: 50px;
    }

    .waterfall-item .item-amount[b-xirdnblmg3] {
        font-size: 0.6rem;
    }

    .details-table td[b-xirdnblmg3] {
        padding: 10px 6px;
        font-size: 0.8rem;
    }
}
/* /Components/Pages/Reports/Operations/FulfillmentReport.razor.rz.scp.css */
.fulfillment-report[b-mg5qahdcra] {
    padding: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Loading & Error */
.reports-loading[b-mg5qahdcra],
.reports-error[b-mg5qahdcra] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.loading-spinner[b-mg5qahdcra] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color, #e5e7eb);
    border-top-color: var(--primary-color, #3b82f6);
    border-radius: 50%;
    animation: spin-b-mg5qahdcra 1s linear infinite;
}

@keyframes spin-b-mg5qahdcra {
    to { transform: rotate(360deg); }
}

.error-icon[b-mg5qahdcra] {
    width: 48px;
    height: 48px;
    color: var(--danger-color, #ef4444);
}

.retry-btn[b-mg5qahdcra] {
    padding: 10px 20px;
    background: var(--primary-color, #3b82f6);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
}

/* Header */
.report-header[b-mg5qahdcra] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.breadcrumb[b-mg5qahdcra] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 8px;
}

.breadcrumb a[b-mg5qahdcra] {
    color: var(--primary-color, #3b82f6);
    text-decoration: none;
}

.breadcrumb a:hover[b-mg5qahdcra] {
    text-decoration: underline;
}

.header-left h1[b-mg5qahdcra] {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary, #1f2937);
}

.header-actions[b-mg5qahdcra] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.form-select[b-mg5qahdcra] {
    padding: 10px 16px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    background: var(--bg-secondary, #fff);
    font-size: 0.875rem;
    color: var(--text-primary, #1f2937);
    cursor: pointer;
}

.btn-refresh[b-mg5qahdcra] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-secondary, #6b7280);
    transition: all 0.2s;
}

.btn-refresh:hover[b-mg5qahdcra] {
    background: var(--bg-hover, #f9fafb);
    color: var(--primary-color, #3b82f6);
}

.btn-refresh svg[b-mg5qahdcra] {
    width: 20px;
    height: 20px;
}

/* Summary Grid */
.summary-grid[b-mg5qahdcra] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.summary-card[b-mg5qahdcra] {
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.summary-icon[b-mg5qahdcra] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.summary-icon svg[b-mg5qahdcra] {
    width: 24px;
    height: 24px;
}

.summary-icon.blue[b-mg5qahdcra] { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.summary-icon.orange[b-mg5qahdcra] { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.summary-icon.purple[b-mg5qahdcra] { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }
.summary-icon.cyan[b-mg5qahdcra] { background: rgba(6, 182, 212, 0.1); color: #06b6d4; }
.summary-icon.green[b-mg5qahdcra] { background: rgba(16, 185, 129, 0.1); color: #10b981; }

.summary-content[b-mg5qahdcra] {
    display: flex;
    flex-direction: column;
}

.summary-value[b-mg5qahdcra] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary, #1f2937);
}

.summary-label[b-mg5qahdcra] {
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
}

/* Flow Card */
.flow-card[b-mg5qahdcra],
.rates-card[b-mg5qahdcra] {
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    margin-bottom: 16px;
}

.card-header[b-mg5qahdcra] {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.card-header h3[b-mg5qahdcra] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary, #1f2937);
}

.card-body[b-mg5qahdcra] {
    padding: 24px;
}

/* Flow Diagram */
.flow-diagram[b-mg5qahdcra] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.flow-step[b-mg5qahdcra] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.step-icon[b-mg5qahdcra] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-icon svg[b-mg5qahdcra] {
    width: 28px;
    height: 28px;
}

.step-icon.pending[b-mg5qahdcra] { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.step-icon.processing[b-mg5qahdcra] { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }
.step-icon.shipped[b-mg5qahdcra] { background: rgba(6, 182, 212, 0.1); color: #06b6d4; }
.step-icon.delivered[b-mg5qahdcra] { background: rgba(16, 185, 129, 0.1); color: #10b981; }

.step-label[b-mg5qahdcra] {
    font-size: 0.75rem;
    color: var(--text-secondary, #6b7280);
}

.step-value[b-mg5qahdcra] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary, #1f2937);
}

.step-percent[b-mg5qahdcra] {
    font-size: 0.75rem;
    color: var(--text-secondary, #6b7280);
    background: var(--bg-tertiary, #f3f4f6);
    padding: 2px 8px;
    border-radius: 10px;
}

.flow-arrow[b-mg5qahdcra] {
    width: 40px;
    color: var(--border-color, #d1d5db);
}

.flow-arrow svg[b-mg5qahdcra] {
    width: 100%;
    height: 24px;
}

/* Rates Grid */
.rates-grid[b-mg5qahdcra] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.rate-item[b-mg5qahdcra] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rate-header[b-mg5qahdcra] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rate-label[b-mg5qahdcra] {
    font-size: 0.875rem;
    color: var(--text-primary, #1f2937);
}

.rate-value[b-mg5qahdcra] {
    font-size: 0.875rem;
    font-weight: 600;
}

.rate-value.success[b-mg5qahdcra] { color: #10b981; }
.rate-value.blue[b-mg5qahdcra] { color: #3b82f6; }

.rate-bar[b-mg5qahdcra] {
    height: 12px;
    background: var(--bg-tertiary, #f3f4f6);
    border-radius: 6px;
    overflow: hidden;
}

.rate-fill[b-mg5qahdcra] {
    height: 100%;
    border-radius: 6px;
    transition: width 0.3s ease;
}

.rate-fill.success[b-mg5qahdcra] { background: #10b981; }
.rate-fill.blue[b-mg5qahdcra] { background: #3b82f6; }

.chart-empty[b-mg5qahdcra] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--text-secondary, #6b7280);
    font-size: 0.875rem;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .summary-grid[b-mg5qahdcra] {
        grid-template-columns: repeat(3, 1fr);
    }

    .flow-diagram[b-mg5qahdcra] {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }

    .flow-arrow[b-mg5qahdcra] {
        display: none;
    }

    .flow-step[b-mg5qahdcra] {
        min-width: 120px;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .fulfillment-report[b-mg5qahdcra] {
        padding: 12px;
    }

    /* Header */
    .report-header[b-mg5qahdcra] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 16px;
    }

    .header-left[b-mg5qahdcra] {
        width: 100%;
        display: block;
    }

    .breadcrumb[b-mg5qahdcra] {
        font-size: 0.75rem;
        gap: 0;
        margin-bottom: 8px;
        flex-wrap: wrap;
        background: var(--bg-tertiary, #f3f4f6);
        padding: 6px 10px;
        border-radius: 6px;
    }

    .breadcrumb span:not(:last-child)[b-mg5qahdcra] {
        display: none;
    }

    .breadcrumb a[b-mg5qahdcra] {
        position: relative;
        padding-right: 18px;
    }

    .breadcrumb a[b-mg5qahdcra]::after {
        content: "›";
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted, #9ca3af);
        font-size: 0.85rem;
    }

    .breadcrumb span:last-child[b-mg5qahdcra] {
        font-weight: 600;
        color: var(--text-primary, #1f2937);
    }

    .header-left h1[b-mg5qahdcra] {
        font-size: 1.15rem;
        line-height: 1.3;
    }

    .header-actions[b-mg5qahdcra] {
        width: 100%;
    }

    .form-select[b-mg5qahdcra] {
        flex: 1;
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    .btn-refresh[b-mg5qahdcra] {
        width: 36px;
        height: 36px;
    }

    .btn-refresh svg[b-mg5qahdcra] {
        width: 18px;
        height: 18px;
    }

    /* Summary Cards - 2 columns compact */
    .summary-grid[b-mg5qahdcra] {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 16px;
    }

    .summary-card[b-mg5qahdcra] {
        padding: 14px;
        gap: 8px;
        border-radius: 10px;
    }

    .summary-icon[b-mg5qahdcra] {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }

    .summary-icon svg[b-mg5qahdcra] {
        width: 18px;
        height: 18px;
    }

    .summary-value[b-mg5qahdcra] {
        font-size: 1.2rem;
    }

    .summary-label[b-mg5qahdcra] {
        font-size: 0.7rem;
    }

    /* Flow Card */
    .flow-card[b-mg5qahdcra],
    .rates-card[b-mg5qahdcra] {
        border-radius: 10px;
        margin-bottom: 12px;
    }

    .card-header[b-mg5qahdcra] {
        padding: 12px 14px;
    }

    .card-header h3[b-mg5qahdcra] {
        font-size: 0.875rem;
    }

    .card-body[b-mg5qahdcra] {
        padding: 14px;
    }

    /* Flow Diagram - 2x2 grid on mobile */
    .flow-diagram[b-mg5qahdcra] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .flow-arrow[b-mg5qahdcra] {
        display: none;
    }

    .flow-step[b-mg5qahdcra] {
        min-width: auto;
        padding: 10px;
        background: var(--bg-tertiary, #f9fafb);
        border-radius: 10px;
        gap: 6px;
    }

    .step-icon[b-mg5qahdcra] {
        width: 40px;
        height: 40px;
    }

    .step-icon svg[b-mg5qahdcra] {
        width: 20px;
        height: 20px;
    }

    .step-label[b-mg5qahdcra] {
        font-size: 0.7rem;
    }

    .step-value[b-mg5qahdcra] {
        font-size: 1.1rem;
    }

    .step-percent[b-mg5qahdcra] {
        font-size: 0.65rem;
        padding: 2px 6px;
    }

    /* Rates */
    .rates-grid[b-mg5qahdcra] {
        gap: 14px;
    }

    .rate-label[b-mg5qahdcra] {
        font-size: 0.8rem;
    }

    .rate-value[b-mg5qahdcra] {
        font-size: 0.8rem;
    }

    .rate-bar[b-mg5qahdcra] {
        height: 10px;
    }

    /* Loading & Error */
    .reports-loading[b-mg5qahdcra],
    .reports-error[b-mg5qahdcra] {
        min-height: 300px;
    }
}

/* Responsive - Small Mobile */
@media (max-width: 400px) {
    .fulfillment-report[b-mg5qahdcra] {
        padding: 8px;
    }

    .summary-grid[b-mg5qahdcra] {
        gap: 8px;
    }

    .summary-card[b-mg5qahdcra] {
        padding: 12px;
    }

    .summary-value[b-mg5qahdcra] {
        font-size: 1.05rem;
    }

    .flow-diagram[b-mg5qahdcra] {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .step-value[b-mg5qahdcra] {
        font-size: 1rem;
    }
}
/* /Components/Pages/Reports/Operations/OperationsOverview.razor.rz.scp.css */
.operations-report[b-4da1dwnrbk] {
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Loading & Error */
.reports-loading[b-4da1dwnrbk],
.reports-error[b-4da1dwnrbk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.loading-spinner[b-4da1dwnrbk] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color, #e5e7eb);
    border-top-color: var(--primary-color, #3b82f6);
    border-radius: 50%;
    animation: spin-b-4da1dwnrbk 1s linear infinite;
}

@keyframes spin-b-4da1dwnrbk {
    to { transform: rotate(360deg); }
}

.error-icon[b-4da1dwnrbk] {
    width: 48px;
    height: 48px;
    color: var(--danger-color, #ef4444);
}

.retry-btn[b-4da1dwnrbk] {
    padding: 10px 20px;
    background: var(--primary-color, #3b82f6);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
}

/* Header */
.report-header[b-4da1dwnrbk] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.breadcrumb[b-4da1dwnrbk] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 8px;
}

.breadcrumb a[b-4da1dwnrbk] {
    color: var(--primary-color, #3b82f6);
    text-decoration: none;
}

.breadcrumb a:hover[b-4da1dwnrbk] {
    text-decoration: underline;
}

.header-left h1[b-4da1dwnrbk] {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary, #1f2937);
}

.header-actions[b-4da1dwnrbk] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.form-select[b-4da1dwnrbk] {
    padding: 10px 16px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    background: var(--bg-secondary, #fff);
    font-size: 0.875rem;
    color: var(--text-primary, #1f2937);
    cursor: pointer;
}

.btn-refresh[b-4da1dwnrbk] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-secondary, #6b7280);
    transition: all 0.2s;
}

.btn-refresh:hover[b-4da1dwnrbk] {
    background: var(--bg-hover, #f9fafb);
    color: var(--primary-color, #3b82f6);
}

.btn-refresh svg[b-4da1dwnrbk] {
    width: 20px;
    height: 20px;
}

/* KPI Grid */
.kpi-grid[b-4da1dwnrbk] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.kpi-card[b-4da1dwnrbk] {
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.kpi-icon[b-4da1dwnrbk] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kpi-icon svg[b-4da1dwnrbk] {
    width: 24px;
    height: 24px;
}

.kpi-icon.blue[b-4da1dwnrbk] { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.kpi-icon.green[b-4da1dwnrbk] { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.kpi-icon.purple[b-4da1dwnrbk] { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }
.kpi-icon.orange[b-4da1dwnrbk] { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }

.kpi-content[b-4da1dwnrbk] {
    display: flex;
    flex-direction: column;
}

.kpi-label[b-4da1dwnrbk] {
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
}

.kpi-value[b-4da1dwnrbk] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary, #1f2937);
}

/* Charts Row */
.charts-row[b-4da1dwnrbk] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.chart-card[b-4da1dwnrbk] {
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    padding: 20px;
}

.chart-header[b-4da1dwnrbk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.chart-header h3[b-4da1dwnrbk] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary, #1f2937);
}

.chart-body[b-4da1dwnrbk] {
    min-height: 280px;
}

.chart-empty[b-4da1dwnrbk] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--text-secondary, #6b7280);
    font-size: 0.875rem;
}

/* Status Bars */
.status-bars[b-4da1dwnrbk] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 12px 0;
}

.status-bar-item[b-4da1dwnrbk] {
    display: grid;
    grid-template-columns: 120px 1fr 60px;
    align-items: center;
    gap: 12px;
}

.status-label[b-4da1dwnrbk] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--text-primary, #1f2937);
}

.status-dot[b-4da1dwnrbk] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.status-dot.pending[b-4da1dwnrbk] { background: #f59e0b; }
.status-dot.processing[b-4da1dwnrbk] { background: #3b82f6; }
.status-dot.shipped[b-4da1dwnrbk] { background: #8b5cf6; }
.status-dot.delivered[b-4da1dwnrbk] { background: #10b981; }

.status-bar[b-4da1dwnrbk] {
    height: 8px;
    background: var(--bg-tertiary, #f3f4f6);
    border-radius: 4px;
    overflow: hidden;
}

.status-fill[b-4da1dwnrbk] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.status-fill.pending[b-4da1dwnrbk] { background: #f59e0b; }
.status-fill.processing[b-4da1dwnrbk] { background: #3b82f6; }
.status-fill.shipped[b-4da1dwnrbk] { background: #8b5cf6; }
.status-fill.delivered[b-4da1dwnrbk] { background: #10b981; }

.status-value[b-4da1dwnrbk] {
    text-align: right;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary, #1f2937);
}

/* Performance Gauge */
.performance-gauge[b-4da1dwnrbk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 20px 0;
}

.gauge-circle[b-4da1dwnrbk] {
    position: relative;
    width: 180px;
    height: 180px;
}

.circular-chart[b-4da1dwnrbk] {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.circle-bg[b-4da1dwnrbk] {
    fill: none;
    stroke: var(--bg-tertiary, #f3f4f6);
    stroke-width: 3;
}

.circle[b-4da1dwnrbk] {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 0.5s ease;
}

.circle.excellent[b-4da1dwnrbk] { stroke: #10b981; }
.circle.good[b-4da1dwnrbk] { stroke: #3b82f6; }
.circle.warning[b-4da1dwnrbk] { stroke: #f59e0b; }
.circle.poor[b-4da1dwnrbk] { stroke: #ef4444; }

.gauge-value[b-4da1dwnrbk] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.gauge-value .value[b-4da1dwnrbk] {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary, #1f2937);
}

.gauge-value .label[b-4da1dwnrbk] {
    display: block;
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
}

.performance-stats[b-4da1dwnrbk] {
    display: flex;
    gap: 32px;
}

.stat-item[b-4da1dwnrbk] {
    text-align: center;
}

.stat-item .stat-value[b-4da1dwnrbk] {
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
}

.stat-item.success .stat-value[b-4da1dwnrbk] { color: #10b981; }
.stat-item.warning .stat-value[b-4da1dwnrbk] { color: #f59e0b; }

.stat-item .stat-label[b-4da1dwnrbk] {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary, #6b7280);
}

/* Quick Navigation */
.quick-nav[b-4da1dwnrbk] {
    margin-top: 24px;
}

.quick-nav h3[b-4da1dwnrbk] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
    margin: 0 0 16px 0;
}

.nav-cards[b-4da1dwnrbk] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.nav-card[b-4da1dwnrbk] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s;
}

.nav-card:hover[b-4da1dwnrbk] {
    border-color: var(--primary-color, #3b82f6);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

.nav-icon[b-4da1dwnrbk] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nav-icon svg[b-4da1dwnrbk] {
    width: 24px;
    height: 24px;
}

.nav-icon.blue[b-4da1dwnrbk] { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.nav-icon.green[b-4da1dwnrbk] { background: rgba(16, 185, 129, 0.1); color: #10b981; }

.nav-content[b-4da1dwnrbk] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.nav-title[b-4da1dwnrbk] {
    font-weight: 600;
    color: var(--text-primary, #1f2937);
}

.nav-desc[b-4da1dwnrbk] {
    font-size: 0.75rem;
    color: var(--text-secondary, #6b7280);
}

.nav-arrow[b-4da1dwnrbk] {
    width: 20px;
    height: 20px;
    color: var(--text-secondary, #6b7280);
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .kpi-grid[b-4da1dwnrbk] {
        grid-template-columns: repeat(2, 1fr);
    }

    .charts-row[b-4da1dwnrbk],
    .nav-cards[b-4da1dwnrbk] {
        grid-template-columns: 1fr;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .operations-report[b-4da1dwnrbk] {
        padding: 12px;
    }

    /* Header */
    .report-header[b-4da1dwnrbk] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 16px;
    }

    .header-left[b-4da1dwnrbk] {
        width: 100%;
        display: block;
    }

    .breadcrumb[b-4da1dwnrbk] {
        font-size: 0.75rem;
        gap: 0;
        margin-bottom: 8px;
        flex-wrap: wrap;
        background: var(--bg-tertiary, #f3f4f6);
        padding: 6px 10px;
        border-radius: 6px;
    }

    .breadcrumb span:not(:last-child)[b-4da1dwnrbk] {
        display: none;
    }

    .breadcrumb a[b-4da1dwnrbk] {
        position: relative;
        padding-right: 18px;
    }

    .breadcrumb a[b-4da1dwnrbk]::after {
        content: "›";
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted, #9ca3af);
        font-size: 0.85rem;
    }

    .breadcrumb span:last-child[b-4da1dwnrbk] {
        font-weight: 600;
        color: var(--text-primary, #1f2937);
    }

    .header-left h1[b-4da1dwnrbk] {
        font-size: 1.15rem;
        line-height: 1.3;
    }

    .header-actions[b-4da1dwnrbk] {
        width: 100%;
    }

    .form-select[b-4da1dwnrbk] {
        flex: 1;
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    .btn-refresh[b-4da1dwnrbk] {
        width: 36px;
        height: 36px;
    }

    .btn-refresh svg[b-4da1dwnrbk] {
        width: 18px;
        height: 18px;
    }

    /* KPI Cards - 2 columns compact */
    .kpi-grid[b-4da1dwnrbk] {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 16px;
    }

    .kpi-card[b-4da1dwnrbk] {
        padding: 14px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .kpi-icon[b-4da1dwnrbk] {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }

    .kpi-icon svg[b-4da1dwnrbk] {
        width: 18px;
        height: 18px;
    }

    .kpi-value[b-4da1dwnrbk] {
        font-size: 1.2rem;
    }

    .kpi-label[b-4da1dwnrbk] {
        font-size: 0.75rem;
    }

    /* Charts */
    .charts-row[b-4da1dwnrbk] {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 16px;
    }

    .chart-card[b-4da1dwnrbk] {
        padding: 14px;
        border-radius: 10px;
    }

    .chart-header[b-4da1dwnrbk] {
        margin-bottom: 12px;
    }

    .chart-header h3[b-4da1dwnrbk] {
        font-size: 0.875rem;
    }

    .chart-body[b-4da1dwnrbk] {
        min-height: auto;
    }

    /* Status Bars - stack on mobile */
    .status-bar-item[b-4da1dwnrbk] {
        grid-template-columns: 1fr 60px;
        gap: 8px;
    }

    .status-label[b-4da1dwnrbk] {
        grid-column: 1 / -1;
        font-size: 0.8rem;
    }

    .status-bar[b-4da1dwnrbk] {
        grid-column: 1;
    }

    .status-value[b-4da1dwnrbk] {
        font-size: 0.8rem;
    }

    .status-bars[b-4da1dwnrbk] {
        gap: 14px;
    }

    /* Performance Gauge */
    .performance-gauge[b-4da1dwnrbk] {
        gap: 16px;
        padding: 12px 0;
    }

    .gauge-circle[b-4da1dwnrbk] {
        width: 140px;
        height: 140px;
    }

    .gauge-value .value[b-4da1dwnrbk] {
        font-size: 1.5rem;
    }

    .gauge-value .label[b-4da1dwnrbk] {
        font-size: 0.75rem;
    }

    .performance-stats[b-4da1dwnrbk] {
        gap: 24px;
    }

    .stat-item .stat-value[b-4da1dwnrbk] {
        font-size: 1.1rem;
    }

    .stat-item .stat-label[b-4da1dwnrbk] {
        font-size: 0.7rem;
    }

    /* Quick Navigation */
    .quick-nav[b-4da1dwnrbk] {
        margin-top: 16px;
    }

    .quick-nav h3[b-4da1dwnrbk] {
        font-size: 1rem;
        margin-bottom: 12px;
    }

    .nav-cards[b-4da1dwnrbk] {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .nav-card[b-4da1dwnrbk] {
        padding: 14px;
        gap: 12px;
        border-radius: 10px;
    }

    .nav-icon[b-4da1dwnrbk] {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .nav-icon svg[b-4da1dwnrbk] {
        width: 20px;
        height: 20px;
    }

    .nav-title[b-4da1dwnrbk] {
        font-size: 0.85rem;
    }

    .nav-desc[b-4da1dwnrbk] {
        font-size: 0.7rem;
    }

    .nav-arrow[b-4da1dwnrbk] {
        width: 18px;
        height: 18px;
    }

    /* Loading & Error */
    .reports-loading[b-4da1dwnrbk],
    .reports-error[b-4da1dwnrbk] {
        min-height: 300px;
    }
}

/* Responsive - Small Mobile */
@media (max-width: 400px) {
    .operations-report[b-4da1dwnrbk] {
        padding: 8px;
    }

    .kpi-grid[b-4da1dwnrbk] {
        gap: 8px;
    }

    .kpi-card[b-4da1dwnrbk] {
        padding: 12px;
    }

    .kpi-value[b-4da1dwnrbk] {
        font-size: 1.05rem;
    }

    .gauge-circle[b-4da1dwnrbk] {
        width: 120px;
        height: 120px;
    }

    .gauge-value .value[b-4da1dwnrbk] {
        font-size: 1.25rem;
    }
}
/* /Components/Pages/Reports/Operations/ShippingPerformance.razor.rz.scp.css */
.shipping-report[b-wf6mbotd24] {
    padding: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Loading & Error */
.reports-loading[b-wf6mbotd24],
.reports-error[b-wf6mbotd24] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.loading-spinner[b-wf6mbotd24] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color, #e5e7eb);
    border-top-color: var(--primary-color, #3b82f6);
    border-radius: 50%;
    animation: spin-b-wf6mbotd24 1s linear infinite;
}

@keyframes spin-b-wf6mbotd24 {
    to { transform: rotate(360deg); }
}

.error-icon[b-wf6mbotd24] {
    width: 48px;
    height: 48px;
    color: var(--danger-color, #ef4444);
}

.retry-btn[b-wf6mbotd24] {
    padding: 10px 20px;
    background: var(--primary-color, #3b82f6);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
}

/* Header */
.report-header[b-wf6mbotd24] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.breadcrumb[b-wf6mbotd24] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 8px;
}

.breadcrumb a[b-wf6mbotd24] {
    color: var(--primary-color, #3b82f6);
    text-decoration: none;
}

.breadcrumb a:hover[b-wf6mbotd24] {
    text-decoration: underline;
}

.header-left h1[b-wf6mbotd24] {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary, #1f2937);
}

.header-actions[b-wf6mbotd24] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.form-select[b-wf6mbotd24] {
    padding: 10px 16px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    background: var(--bg-secondary, #fff);
    font-size: 0.875rem;
    color: var(--text-primary, #1f2937);
    cursor: pointer;
}

.btn-refresh[b-wf6mbotd24] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-secondary, #6b7280);
    transition: all 0.2s;
}

.btn-refresh:hover[b-wf6mbotd24] {
    background: var(--bg-hover, #f9fafb);
    color: var(--primary-color, #3b82f6);
}

.btn-refresh svg[b-wf6mbotd24] {
    width: 20px;
    height: 20px;
}

/* Metrics Grid */
.metrics-grid[b-wf6mbotd24] {
    display: grid;
    grid-template-columns: 200px repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.metric-card[b-wf6mbotd24] {
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.metric-card.large[b-wf6mbotd24] {
    grid-row: span 2;
    flex-direction: column;
    justify-content: center;
}

.metric-gauge[b-wf6mbotd24] {
    position: relative;
    width: 160px;
    height: 160px;
}

.circular-chart[b-wf6mbotd24] {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.circle-bg[b-wf6mbotd24] {
    fill: none;
    stroke: var(--bg-tertiary, #f3f4f6);
    stroke-width: 3;
}

.circle[b-wf6mbotd24] {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 0.5s ease;
}

.circle.excellent[b-wf6mbotd24] { stroke: #10b981; }
.circle.good[b-wf6mbotd24] { stroke: #3b82f6; }
.circle.warning[b-wf6mbotd24] { stroke: #f59e0b; }
.circle.poor[b-wf6mbotd24] { stroke: #ef4444; }

.gauge-center[b-wf6mbotd24] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.gauge-value[b-wf6mbotd24] {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary, #1f2937);
}

.gauge-label[b-wf6mbotd24] {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary, #6b7280);
}

.metric-icon[b-wf6mbotd24] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.metric-icon svg[b-wf6mbotd24] {
    width: 24px;
    height: 24px;
}

.metric-icon.success[b-wf6mbotd24] { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.metric-icon.warning[b-wf6mbotd24] { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.metric-icon.blue[b-wf6mbotd24] { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.metric-icon.purple[b-wf6mbotd24] { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }

.metric-content[b-wf6mbotd24] {
    display: flex;
    flex-direction: column;
}

.metric-value[b-wf6mbotd24] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary, #1f2937);
}

.metric-label[b-wf6mbotd24] {
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
}

/* Performance Card */
.performance-card[b-wf6mbotd24],
.summary-card[b-wf6mbotd24] {
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    margin-bottom: 16px;
}

.card-header[b-wf6mbotd24] {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.card-header h3[b-wf6mbotd24] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary, #1f2937);
}

.card-body[b-wf6mbotd24] {
    padding: 20px;
}

/* Performance Bars */
.performance-bars[b-wf6mbotd24] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.perf-item[b-wf6mbotd24] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.perf-header[b-wf6mbotd24] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.perf-label[b-wf6mbotd24] {
    font-size: 0.875rem;
    color: var(--text-primary, #1f2937);
}

.perf-value[b-wf6mbotd24] {
    font-size: 0.875rem;
    font-weight: 600;
}

.perf-value.success[b-wf6mbotd24] { color: #10b981; }
.perf-value.warning[b-wf6mbotd24] { color: #f59e0b; }

.perf-bar[b-wf6mbotd24] {
    height: 12px;
    background: var(--bg-tertiary, #f3f4f6);
    border-radius: 6px;
    overflow: hidden;
}

.perf-fill[b-wf6mbotd24] {
    height: 100%;
    border-radius: 6px;
    transition: width 0.3s ease;
}

.perf-fill.success[b-wf6mbotd24] { background: #10b981; }
.perf-fill.warning[b-wf6mbotd24] { background: #f59e0b; }

/* Stats Grid */
.stats-grid[b-wf6mbotd24] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.stat-item[b-wf6mbotd24] {
    text-align: center;
    padding: 16px;
    background: var(--bg-tertiary, #f9fafb);
    border-radius: 8px;
}

.stat-item .stat-label[b-wf6mbotd24] {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 4px;
}

.stat-item .stat-value[b-wf6mbotd24] {
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
}

.chart-empty[b-wf6mbotd24] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--text-secondary, #6b7280);
    font-size: 0.875rem;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .metrics-grid[b-wf6mbotd24] {
        grid-template-columns: repeat(2, 1fr);
    }

    .metric-card.large[b-wf6mbotd24] {
        grid-column: span 2;
        grid-row: auto;
    }

    .stats-grid[b-wf6mbotd24] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .shipping-report[b-wf6mbotd24] {
        padding: 12px;
    }

    /* Header */
    .report-header[b-wf6mbotd24] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 16px;
    }

    .header-left[b-wf6mbotd24] {
        width: 100%;
        display: block;
    }

    .breadcrumb[b-wf6mbotd24] {
        font-size: 0.75rem;
        gap: 0;
        margin-bottom: 8px;
        flex-wrap: wrap;
        background: var(--bg-tertiary, #f3f4f6);
        padding: 6px 10px;
        border-radius: 6px;
    }

    .breadcrumb span:not(:last-child)[b-wf6mbotd24] {
        display: none;
    }

    .breadcrumb a[b-wf6mbotd24] {
        position: relative;
        padding-right: 18px;
    }

    .breadcrumb a[b-wf6mbotd24]::after {
        content: "›";
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted, #9ca3af);
        font-size: 0.85rem;
    }

    .breadcrumb span:last-child[b-wf6mbotd24] {
        font-weight: 600;
        color: var(--text-primary, #1f2937);
    }

    .header-left h1[b-wf6mbotd24] {
        font-size: 1.15rem;
        line-height: 1.3;
    }

    .header-actions[b-wf6mbotd24] {
        width: 100%;
    }

    .form-select[b-wf6mbotd24] {
        flex: 1;
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    .btn-refresh[b-wf6mbotd24] {
        width: 36px;
        height: 36px;
    }

    .btn-refresh svg[b-wf6mbotd24] {
        width: 18px;
        height: 18px;
    }

    /* Metrics - gauge full width, others 2 columns */
    .metrics-grid[b-wf6mbotd24] {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 16px;
    }

    .metric-card[b-wf6mbotd24] {
        padding: 14px;
        gap: 10px;
        border-radius: 10px;
    }

    .metric-card.large[b-wf6mbotd24] {
        grid-column: span 2;
        padding: 16px;
    }

    .metric-gauge[b-wf6mbotd24] {
        width: 130px;
        height: 130px;
    }

    .gauge-value[b-wf6mbotd24] {
        font-size: 1.5rem;
    }

    .gauge-label[b-wf6mbotd24] {
        font-size: 0.65rem;
    }

    .metric-icon[b-wf6mbotd24] {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }

    .metric-icon svg[b-wf6mbotd24] {
        width: 18px;
        height: 18px;
    }

    .metric-value[b-wf6mbotd24] {
        font-size: 1.2rem;
    }

    .metric-label[b-wf6mbotd24] {
        font-size: 0.75rem;
    }

    /* Performance & Summary Cards */
    .performance-card[b-wf6mbotd24],
    .summary-card[b-wf6mbotd24] {
        border-radius: 10px;
        margin-bottom: 12px;
    }

    .card-header[b-wf6mbotd24] {
        padding: 12px 14px;
    }

    .card-header h3[b-wf6mbotd24] {
        font-size: 0.875rem;
    }

    .card-body[b-wf6mbotd24] {
        padding: 14px;
    }

    /* Performance Bars */
    .performance-bars[b-wf6mbotd24] {
        gap: 14px;
    }

    .perf-label[b-wf6mbotd24] {
        font-size: 0.8rem;
    }

    .perf-value[b-wf6mbotd24] {
        font-size: 0.8rem;
    }

    .perf-bar[b-wf6mbotd24] {
        height: 10px;
    }

    /* Stats Grid - 2 columns */
    .stats-grid[b-wf6mbotd24] {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .stat-item[b-wf6mbotd24] {
        padding: 12px;
        border-radius: 8px;
    }

    .stat-item .stat-label[b-wf6mbotd24] {
        font-size: 0.7rem;
    }

    .stat-item .stat-value[b-wf6mbotd24] {
        font-size: 1.05rem;
    }

    /* Loading & Error */
    .reports-loading[b-wf6mbotd24],
    .reports-error[b-wf6mbotd24] {
        min-height: 300px;
    }
}

/* Responsive - Small Mobile */
@media (max-width: 400px) {
    .shipping-report[b-wf6mbotd24] {
        padding: 8px;
    }

    .metrics-grid[b-wf6mbotd24] {
        gap: 8px;
    }

    .metric-card[b-wf6mbotd24] {
        padding: 12px;
    }

    .metric-gauge[b-wf6mbotd24] {
        width: 110px;
        height: 110px;
    }

    .gauge-value[b-wf6mbotd24] {
        font-size: 1.25rem;
    }

    .metric-value[b-wf6mbotd24] {
        font-size: 1.05rem;
    }

    .stats-grid[b-wf6mbotd24] {
        gap: 8px;
    }

    .stat-item[b-wf6mbotd24] {
        padding: 10px;
    }

    .stat-item .stat-value[b-wf6mbotd24] {
        font-size: 0.95rem;
    }
}
/* /Components/Pages/Reports/ReportsDashboard.razor.rz.scp.css */
.reports-dashboard[b-l9c0zomdaa] {
    padding: 24px;
    max-width: 1600px;
    margin: 0 auto;
}

/* Loading & Error States */
.reports-loading[b-l9c0zomdaa],
.reports-error[b-l9c0zomdaa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.loading-spinner[b-l9c0zomdaa] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color, #e5e7eb);
    border-top-color: var(--primary-color, #3b82f6);
    border-radius: 50%;
    animation: spin-b-l9c0zomdaa 1s linear infinite;
}

@keyframes spin-b-l9c0zomdaa {
    to { transform: rotate(360deg); }
}

.error-icon[b-l9c0zomdaa] {
    width: 48px;
    height: 48px;
    color: var(--danger-color, #ef4444);
}

.retry-btn[b-l9c0zomdaa] {
    padding: 10px 20px;
    background: var(--primary-color, #3b82f6);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
}

.retry-btn:hover[b-l9c0zomdaa] {
    opacity: 0.9;
}

/* Header */
.reports-header[b-l9c0zomdaa] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.header-left h1[b-l9c0zomdaa] {
    font-size: 1.75rem;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: var(--text-primary, #1f2937);
}

.header-left p[b-l9c0zomdaa] {
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
    margin: 0;
}

.header-actions[b-l9c0zomdaa] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.date-range-select[b-l9c0zomdaa] {
    padding: 10px 16px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    background: var(--bg-secondary, #fff);
    font-size: 0.875rem;
    color: var(--text-primary, #1f2937);
    cursor: pointer;
}

.btn-refresh[b-l9c0zomdaa] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-secondary, #6b7280);
    transition: all 0.2s;
}

.btn-refresh:hover[b-l9c0zomdaa] {
    background: var(--bg-hover, #f9fafb);
    color: var(--primary-color, #3b82f6);
}

.btn-refresh svg[b-l9c0zomdaa] {
    width: 20px;
    height: 20px;
}

/* KPI Grid */
.kpi-grid[b-l9c0zomdaa] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.kpi-card[b-l9c0zomdaa] {
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.kpi-icon[b-l9c0zomdaa] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kpi-icon svg[b-l9c0zomdaa] {
    width: 24px;
    height: 24px;
}

.kpi-icon.orders[b-l9c0zomdaa] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.kpi-icon.revenue[b-l9c0zomdaa] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.kpi-icon.profit[b-l9c0zomdaa] {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.kpi-icon.items[b-l9c0zomdaa] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.kpi-content[b-l9c0zomdaa] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.kpi-value[b-l9c0zomdaa] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary, #1f2937);
}

.kpi-label[b-l9c0zomdaa] {
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
}

.kpi-change[b-l9c0zomdaa] {
    font-size: 0.875rem;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 6px;
}

.kpi-change.positive[b-l9c0zomdaa] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.kpi-change.negative[b-l9c0zomdaa] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Charts Grid */
.charts-grid[b-l9c0zomdaa] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.chart-card[b-l9c0zomdaa] {
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    padding: 20px;
}

.chart-card.wide[b-l9c0zomdaa] {
    grid-column: span 2;
}

.chart-header[b-l9c0zomdaa] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.chart-header h3[b-l9c0zomdaa] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
    margin: 0;
}

.chart-actions[b-l9c0zomdaa] {
    display: flex;
    gap: 4px;
}

.chart-btn[b-l9c0zomdaa] {
    padding: 6px 12px;
    font-size: 0.75rem;
    border: 1px solid var(--border-color, #e5e7eb);
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-secondary, #6b7280);
    transition: all 0.2s;
}

.chart-btn:hover[b-l9c0zomdaa],
.chart-btn.active[b-l9c0zomdaa] {
    background: var(--primary-color, #3b82f6);
    border-color: var(--primary-color, #3b82f6);
    color: white;
}

.chart-link[b-l9c0zomdaa] {
    font-size: 0.875rem;
    color: var(--primary-color, #3b82f6);
    text-decoration: none;
}

.chart-link:hover[b-l9c0zomdaa] {
    text-decoration: underline;
}

.chart-body[b-l9c0zomdaa] {
    min-height: 280px;
}

.chart-empty[b-l9c0zomdaa] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--text-secondary, #6b7280);
    font-size: 0.875rem;
}

/* Fulfillment Stats */
.fulfillment-stats[b-l9c0zomdaa] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 0;
}

.fulfillment-stat[b-l9c0zomdaa] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stat-value[b-l9c0zomdaa] {
    font-size: 1.5rem;
    font-weight: 700;
}

.stat-value.success[b-l9c0zomdaa] {
    color: #10b981;
}

.stat-value.warning[b-l9c0zomdaa] {
    color: #f59e0b;
}

.stat-label[b-l9c0zomdaa] {
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
}

.progress-bar[b-l9c0zomdaa] {
    height: 8px;
    background: var(--bg-tertiary, #f3f4f6);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill[b-l9c0zomdaa] {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #3b82f6);
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Quick Links */
.quick-links[b-l9c0zomdaa] {
    margin-top: 24px;
}

.quick-links h3[b-l9c0zomdaa] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
    margin: 0 0 16px 0;
}

.links-grid[b-l9c0zomdaa] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.link-card[b-l9c0zomdaa] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s;
}

.link-card:hover[b-l9c0zomdaa] {
    border-color: var(--primary-color, #3b82f6);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

.link-icon[b-l9c0zomdaa] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.link-icon svg[b-l9c0zomdaa] {
    width: 24px;
    height: 24px;
}

.link-icon.sales[b-l9c0zomdaa] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.link-icon.operations[b-l9c0zomdaa] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.link-icon.financial[b-l9c0zomdaa] {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.link-icon.scheduled[b-l9c0zomdaa] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.link-content[b-l9c0zomdaa] {
    display: flex;
    flex-direction: column;
}

.link-title[b-l9c0zomdaa] {
    font-weight: 600;
    color: var(--text-primary, #1f2937);
    margin-bottom: 2px;
}

.link-desc[b-l9c0zomdaa] {
    font-size: 0.75rem;
    color: var(--text-secondary, #6b7280);
}

/* Responsive - Tablet */
@media (max-width: 1200px) {
    .kpi-grid[b-l9c0zomdaa] {
        grid-template-columns: repeat(2, 1fr);
    }

    .charts-grid[b-l9c0zomdaa] {
        grid-template-columns: 1fr;
    }

    .chart-card.wide[b-l9c0zomdaa] {
        grid-column: 1;
    }

    .links-grid[b-l9c0zomdaa] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .reports-dashboard[b-l9c0zomdaa] {
        padding: 12px;
    }

    /* Header */
    .reports-header[b-l9c0zomdaa] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 16px;
    }

    .header-left[b-l9c0zomdaa] {
        width: 100%;
        display: block;
    }

    .header-left h1[b-l9c0zomdaa] {
        font-size: 1.15rem;
        line-height: 1.3;
    }

    .header-left p[b-l9c0zomdaa] {
        font-size: 0.8rem;
    }

    .header-actions[b-l9c0zomdaa] {
        width: 100%;
    }

    .date-range-select[b-l9c0zomdaa] {
        flex: 1;
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    .btn-refresh[b-l9c0zomdaa] {
        width: 36px;
        height: 36px;
    }

    .btn-refresh svg[b-l9c0zomdaa] {
        width: 18px;
        height: 18px;
    }

    /* KPI Cards - 2 columns compact */
    .kpi-grid[b-l9c0zomdaa] {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 16px;
    }

    .kpi-card[b-l9c0zomdaa] {
        padding: 14px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        position: relative;
    }

    .kpi-icon[b-l9c0zomdaa] {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }

    .kpi-icon svg[b-l9c0zomdaa] {
        width: 18px;
        height: 18px;
    }

    .kpi-value[b-l9c0zomdaa] {
        font-size: 1.2rem;
    }

    .kpi-label[b-l9c0zomdaa] {
        font-size: 0.75rem;
    }

    .kpi-change[b-l9c0zomdaa] {
        position: absolute;
        top: 14px;
        right: 14px;
        font-size: 0.7rem;
        padding: 2px 6px;
    }

    /* Charts */
    .charts-grid[b-l9c0zomdaa] {
        gap: 12px;
        margin-bottom: 16px;
    }

    .chart-card[b-l9c0zomdaa] {
        padding: 14px;
        border-radius: 10px;
    }

    .chart-header[b-l9c0zomdaa] {
        margin-bottom: 12px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .chart-header h3[b-l9c0zomdaa] {
        font-size: 0.875rem;
    }

    .chart-body[b-l9c0zomdaa] {
        min-height: 220px;
    }

    .chart-btn[b-l9c0zomdaa] {
        padding: 5px 10px;
        font-size: 0.7rem;
    }

    /* Fulfillment */
    .stat-value[b-l9c0zomdaa] {
        font-size: 1.25rem;
    }

    .stat-label[b-l9c0zomdaa] {
        font-size: 0.8rem;
    }

    /* Quick Links */
    .quick-links[b-l9c0zomdaa] {
        margin-top: 16px;
    }

    .quick-links h3[b-l9c0zomdaa] {
        font-size: 1rem;
        margin-bottom: 12px;
    }

    .links-grid[b-l9c0zomdaa] {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .link-card[b-l9c0zomdaa] {
        padding: 14px;
        gap: 12px;
        border-radius: 10px;
    }

    .link-icon[b-l9c0zomdaa] {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .link-icon svg[b-l9c0zomdaa] {
        width: 20px;
        height: 20px;
    }

    .link-title[b-l9c0zomdaa] {
        font-size: 0.8rem;
    }

    .link-desc[b-l9c0zomdaa] {
        font-size: 0.7rem;
    }

    /* Loading & Error */
    .reports-loading[b-l9c0zomdaa],
    .reports-error[b-l9c0zomdaa] {
        min-height: 300px;
    }
}

/* Responsive - Small Mobile */
@media (max-width: 400px) {
    .reports-dashboard[b-l9c0zomdaa] {
        padding: 8px;
    }

    .kpi-grid[b-l9c0zomdaa] {
        gap: 8px;
    }

    .kpi-card[b-l9c0zomdaa] {
        padding: 12px;
    }

    .kpi-value[b-l9c0zomdaa] {
        font-size: 1.05rem;
    }

    .links-grid[b-l9c0zomdaa] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Reports/Sales/SalesByChannel.razor.rz.scp.css */
.channel-report[b-dmrf51r160] {
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Loading & Error */
.reports-loading[b-dmrf51r160],
.reports-error[b-dmrf51r160] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.loading-spinner[b-dmrf51r160] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color, #e5e7eb);
    border-top-color: var(--primary-color, #3b82f6);
    border-radius: 50%;
    animation: spin-b-dmrf51r160 1s linear infinite;
}

@keyframes spin-b-dmrf51r160 {
    to { transform: rotate(360deg); }
}

.error-icon[b-dmrf51r160] {
    width: 48px;
    height: 48px;
    color: var(--danger-color, #ef4444);
}

.retry-btn[b-dmrf51r160] {
    padding: 10px 20px;
    background: var(--primary-color, #3b82f6);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
}

/* Header */
.report-header[b-dmrf51r160] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.breadcrumb[b-dmrf51r160] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 8px;
}

.breadcrumb a[b-dmrf51r160] {
    color: var(--primary-color, #3b82f6);
    text-decoration: none;
}

.breadcrumb a:hover[b-dmrf51r160] {
    text-decoration: underline;
}

.header-left h1[b-dmrf51r160] {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary, #1f2937);
}

.header-actions[b-dmrf51r160] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.form-select[b-dmrf51r160] {
    padding: 10px 16px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    background: var(--bg-secondary, #fff);
    font-size: 0.875rem;
    color: var(--text-primary, #1f2937);
    cursor: pointer;
}

.btn-refresh[b-dmrf51r160] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-secondary, #6b7280);
    transition: all 0.2s;
}

.btn-refresh:hover[b-dmrf51r160] {
    background: var(--bg-hover, #f9fafb);
    color: var(--primary-color, #3b82f6);
}

.btn-refresh svg[b-dmrf51r160] {
    width: 20px;
    height: 20px;
}

/* Charts Grid */
.charts-grid[b-dmrf51r160] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.chart-card[b-dmrf51r160] {
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    padding: 20px;
}

.chart-header[b-dmrf51r160] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.chart-header h3[b-dmrf51r160] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary, #1f2937);
}

.chart-body[b-dmrf51r160] {
    min-height: 280px;
}

.chart-empty[b-dmrf51r160] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--text-secondary, #6b7280);
    font-size: 0.875rem;
}

/* Data Table Card */
.data-table-card[b-dmrf51r160] {
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
}

.table-header[b-dmrf51r160] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.table-header h3[b-dmrf51r160] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary, #1f2937);
}

.table-count[b-dmrf51r160] {
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
}

.table-wrapper[b-dmrf51r160] {
    overflow-x: auto;
}

.data-table[b-dmrf51r160] {
    width: 100%;
    border-collapse: collapse;
}

.data-table th[b-dmrf51r160],
.data-table td[b-dmrf51r160] {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.data-table th[b-dmrf51r160] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-secondary, #6b7280);
    background: var(--bg-tertiary, #f9fafb);
}

.data-table td[b-dmrf51r160] {
    font-size: 0.875rem;
    color: var(--text-primary, #1f2937);
}

.data-table tbody tr:hover[b-dmrf51r160] {
    background: var(--bg-hover, #f9fafb);
}

.data-table tfoot td[b-dmrf51r160] {
    font-weight: 600;
    background: var(--bg-tertiary, #f9fafb);
    border-top: 2px solid var(--border-color, #e5e7eb);
}

.text-right[b-dmrf51r160] {
    text-align: right;
}

.channel-name[b-dmrf51r160] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.channel-badge[b-dmrf51r160] {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

.percentage-badge[b-dmrf51r160] {
    display: inline-block;
    padding: 2px 8px;
    background: var(--bg-tertiary, #f3f4f6);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .charts-grid[b-dmrf51r160] {
        grid-template-columns: 1fr;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .channel-report[b-dmrf51r160] {
        padding: 12px;
    }

    /* Header */
    .report-header[b-dmrf51r160] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 16px;
    }

    .header-left[b-dmrf51r160] {
        width: 100%;
        display: block;
    }

    .breadcrumb[b-dmrf51r160] {
        font-size: 0.75rem;
        gap: 0;
        margin-bottom: 8px;
        flex-wrap: wrap;
        background: var(--bg-tertiary, #f3f4f6);
        padding: 6px 10px;
        border-radius: 6px;
    }

    .breadcrumb span:not(:last-child)[b-dmrf51r160] {
        display: none;
    }

    .breadcrumb a[b-dmrf51r160] {
        position: relative;
        padding-right: 18px;
    }

    .breadcrumb a[b-dmrf51r160]::after {
        content: "›";
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted, #9ca3af);
        font-size: 0.85rem;
    }

    .breadcrumb span:last-child[b-dmrf51r160] {
        font-weight: 600;
        color: var(--text-primary, #1f2937);
    }

    .header-left h1[b-dmrf51r160] {
        font-size: 1.15rem;
        line-height: 1.3;
    }

    .header-actions[b-dmrf51r160] {
        width: 100%;
    }

    .form-select[b-dmrf51r160] {
        flex: 1;
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    .btn-refresh[b-dmrf51r160] {
        width: 36px;
        height: 36px;
    }

    .btn-refresh svg[b-dmrf51r160] {
        width: 18px;
        height: 18px;
    }

    /* Charts */
    .charts-grid[b-dmrf51r160] {
        gap: 12px;
        margin-bottom: 16px;
    }

    .chart-card[b-dmrf51r160] {
        padding: 14px;
        border-radius: 10px;
    }

    .chart-header[b-dmrf51r160] {
        margin-bottom: 12px;
    }

    .chart-header h3[b-dmrf51r160] {
        font-size: 0.875rem;
    }

    .chart-body[b-dmrf51r160] {
        min-height: 220px;
    }

    /* Data Table */
    .data-table-card[b-dmrf51r160] {
        border-radius: 10px;
    }

    .table-header[b-dmrf51r160] {
        padding: 12px 14px;
    }

    .table-header h3[b-dmrf51r160] {
        font-size: 0.875rem;
    }

    .table-count[b-dmrf51r160] {
        font-size: 0.75rem;
    }

    .data-table th[b-dmrf51r160],
    .data-table td[b-dmrf51r160] {
        padding: 10px 12px;
        font-size: 0.75rem;
        white-space: nowrap;
    }

    .data-table th[b-dmrf51r160] {
        font-size: 0.65rem;
    }

    .channel-name[b-dmrf51r160] {
        gap: 6px;
        font-size: 0.8rem;
    }

    .channel-badge[b-dmrf51r160] {
        width: 10px;
        height: 10px;
    }

    .percentage-badge[b-dmrf51r160] {
        font-size: 0.65rem;
        padding: 2px 6px;
    }

    /* Loading & Error */
    .reports-loading[b-dmrf51r160],
    .reports-error[b-dmrf51r160] {
        min-height: 300px;
    }
}

/* Responsive - Small Mobile */
@media (max-width: 400px) {
    .channel-report[b-dmrf51r160] {
        padding: 8px;
    }

    .data-table th[b-dmrf51r160],
    .data-table td[b-dmrf51r160] {
        padding: 8px 10px;
    }
}
/* /Components/Pages/Reports/Sales/SalesByProduct.razor.rz.scp.css */
.product-report[b-olu0bw4qmr] {
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Loading & Error */
.reports-loading[b-olu0bw4qmr],
.reports-error[b-olu0bw4qmr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.loading-spinner[b-olu0bw4qmr] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color, #e5e7eb);
    border-top-color: var(--primary-color, #3b82f6);
    border-radius: 50%;
    animation: spin-b-olu0bw4qmr 1s linear infinite;
}

@keyframes spin-b-olu0bw4qmr {
    to { transform: rotate(360deg); }
}

.error-icon[b-olu0bw4qmr] {
    width: 48px;
    height: 48px;
    color: var(--danger-color, #ef4444);
}

.retry-btn[b-olu0bw4qmr] {
    padding: 10px 20px;
    background: var(--primary-color, #3b82f6);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
}

/* Header */
.report-header[b-olu0bw4qmr] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.breadcrumb[b-olu0bw4qmr] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 8px;
}

.breadcrumb a[b-olu0bw4qmr] {
    color: var(--primary-color, #3b82f6);
    text-decoration: none;
}

.breadcrumb a:hover[b-olu0bw4qmr] {
    text-decoration: underline;
}

.header-left h1[b-olu0bw4qmr] {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary, #1f2937);
}

.header-actions[b-olu0bw4qmr] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.form-select[b-olu0bw4qmr] {
    padding: 10px 16px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    background: var(--bg-secondary, #fff);
    font-size: 0.875rem;
    color: var(--text-primary, #1f2937);
    cursor: pointer;
}

.btn-refresh[b-olu0bw4qmr] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-secondary, #6b7280);
    transition: all 0.2s;
}

.btn-refresh:hover[b-olu0bw4qmr] {
    background: var(--bg-hover, #f9fafb);
    color: var(--primary-color, #3b82f6);
}

.btn-refresh svg[b-olu0bw4qmr] {
    width: 20px;
    height: 20px;
}

/* Chart Card */
.chart-card[b-olu0bw4qmr] {
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}

.chart-header[b-olu0bw4qmr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.chart-header h3[b-olu0bw4qmr] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary, #1f2937);
}

.chart-body[b-olu0bw4qmr] {
    min-height: 300px;
}

.chart-empty[b-olu0bw4qmr] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--text-secondary, #6b7280);
    font-size: 0.875rem;
}

/* Data Table Card */
.data-table-card[b-olu0bw4qmr] {
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
}

.table-header[b-olu0bw4qmr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    flex-wrap: wrap;
    gap: 12px;
}

.table-header h3[b-olu0bw4qmr] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary, #1f2937);
}

.table-actions[b-olu0bw4qmr] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.search-box[b-olu0bw4qmr] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    background: var(--bg-tertiary, #f9fafb);
}

.search-box svg[b-olu0bw4qmr] {
    width: 16px;
    height: 16px;
    color: var(--text-secondary, #6b7280);
}

.search-box input[b-olu0bw4qmr] {
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.875rem;
    width: 200px;
    color: var(--text-primary, #1f2937);
}

.table-count[b-olu0bw4qmr] {
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
}

.table-wrapper[b-olu0bw4qmr] {
    overflow-x: auto;
}

.data-table[b-olu0bw4qmr] {
    width: 100%;
    border-collapse: collapse;
}

.data-table th[b-olu0bw4qmr],
.data-table td[b-olu0bw4qmr] {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.data-table th[b-olu0bw4qmr] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-secondary, #6b7280);
    background: var(--bg-tertiary, #f9fafb);
}

.data-table th.sortable[b-olu0bw4qmr] {
    cursor: pointer;
    user-select: none;
}

.data-table th.sortable:hover[b-olu0bw4qmr] {
    background: var(--bg-hover, #f3f4f6);
}

.sort-icon[b-olu0bw4qmr] {
    margin-left: 4px;
    font-size: 0.625rem;
}

.data-table td[b-olu0bw4qmr] {
    font-size: 0.875rem;
    color: var(--text-primary, #1f2937);
}

.data-table tbody tr:hover[b-olu0bw4qmr] {
    background: var(--bg-hover, #f9fafb);
}

.text-right[b-olu0bw4qmr] {
    text-align: right;
}

.product-name[b-olu0bw4qmr] {
    max-width: 300px;
}

.product-name span[b-olu0bw4qmr] {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Pagination */
.table-pagination[b-olu0bw4qmr] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-top: 1px solid var(--border-color, #e5e7eb);
}

.pagination-btn[b-olu0bw4qmr] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-secondary, #6b7280);
    transition: all 0.2s;
}

.pagination-btn:hover:not(:disabled)[b-olu0bw4qmr] {
    background: var(--bg-hover, #f9fafb);
    color: var(--primary-color, #3b82f6);
}

.pagination-btn:disabled[b-olu0bw4qmr] {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-btn svg[b-olu0bw4qmr] {
    width: 16px;
    height: 16px;
}

.pagination-info[b-olu0bw4qmr] {
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .product-name[b-olu0bw4qmr] {
        max-width: 200px;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .product-report[b-olu0bw4qmr] {
        padding: 12px;
    }

    /* Header */
    .report-header[b-olu0bw4qmr] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 16px;
    }

    .header-left[b-olu0bw4qmr] {
        width: 100%;
        display: block;
    }

    .breadcrumb[b-olu0bw4qmr] {
        font-size: 0.75rem;
        gap: 0;
        margin-bottom: 8px;
        flex-wrap: wrap;
        background: var(--bg-tertiary, #f3f4f6);
        padding: 6px 10px;
        border-radius: 6px;
    }

    .breadcrumb span:not(:last-child)[b-olu0bw4qmr] {
        display: none;
    }

    .breadcrumb a[b-olu0bw4qmr] {
        position: relative;
        padding-right: 18px;
    }

    .breadcrumb a[b-olu0bw4qmr]::after {
        content: "›";
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted, #9ca3af);
        font-size: 0.85rem;
    }

    .breadcrumb span:last-child[b-olu0bw4qmr] {
        font-weight: 600;
        color: var(--text-primary, #1f2937);
    }

    .header-left h1[b-olu0bw4qmr] {
        font-size: 1.15rem;
        line-height: 1.3;
    }

    .header-actions[b-olu0bw4qmr] {
        width: 100%;
    }

    .form-select[b-olu0bw4qmr] {
        flex: 1;
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    .btn-refresh[b-olu0bw4qmr] {
        width: 36px;
        height: 36px;
    }

    .btn-refresh svg[b-olu0bw4qmr] {
        width: 18px;
        height: 18px;
    }

    /* Chart */
    .chart-card[b-olu0bw4qmr] {
        padding: 14px;
        border-radius: 10px;
        margin-bottom: 16px;
    }

    .chart-header[b-olu0bw4qmr] {
        margin-bottom: 12px;
    }

    .chart-header h3[b-olu0bw4qmr] {
        font-size: 0.875rem;
    }

    .chart-body[b-olu0bw4qmr] {
        min-height: 220px;
    }

    /* Data Table */
    .data-table-card[b-olu0bw4qmr] {
        border-radius: 10px;
    }

    .table-header[b-olu0bw4qmr] {
        padding: 12px 14px;
        flex-direction: column;
        align-items: flex-start;
    }

    .table-header h3[b-olu0bw4qmr] {
        font-size: 0.875rem;
    }

    .table-actions[b-olu0bw4qmr] {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .search-box[b-olu0bw4qmr] {
        width: 100%;
        padding: 8px 10px;
    }

    .search-box svg[b-olu0bw4qmr] {
        width: 14px;
        height: 14px;
    }

    .search-box input[b-olu0bw4qmr] {
        width: 100%;
        font-size: 0.8rem;
    }

    .table-count[b-olu0bw4qmr] {
        font-size: 0.75rem;
    }

    .data-table th[b-olu0bw4qmr],
    .data-table td[b-olu0bw4qmr] {
        padding: 10px 12px;
        font-size: 0.75rem;
        white-space: nowrap;
    }

    .data-table th[b-olu0bw4qmr] {
        font-size: 0.65rem;
    }

    .product-name[b-olu0bw4qmr] {
        max-width: 150px;
    }

    .product-name span[b-olu0bw4qmr] {
        font-size: 0.8rem;
    }

    /* Pagination */
    .table-pagination[b-olu0bw4qmr] {
        padding: 12px;
        gap: 12px;
    }

    .pagination-btn[b-olu0bw4qmr] {
        width: 34px;
        height: 34px;
    }

    .pagination-info[b-olu0bw4qmr] {
        font-size: 0.8rem;
    }

    /* Loading & Error */
    .reports-loading[b-olu0bw4qmr],
    .reports-error[b-olu0bw4qmr] {
        min-height: 300px;
    }
}

/* Responsive - Small Mobile */
@media (max-width: 400px) {
    .product-report[b-olu0bw4qmr] {
        padding: 8px;
    }

    .data-table th[b-olu0bw4qmr],
    .data-table td[b-olu0bw4qmr] {
        padding: 8px 10px;
    }

    .product-name[b-olu0bw4qmr] {
        max-width: 120px;
    }
}
/* /Components/Pages/Reports/Sales/SalesOverview.razor.rz.scp.css */
.sales-report[b-alav2s51eu] {
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Loading & Error */
.reports-loading[b-alav2s51eu],
.reports-error[b-alav2s51eu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.loading-spinner[b-alav2s51eu] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color, #e5e7eb);
    border-top-color: var(--primary-color, #3b82f6);
    border-radius: 50%;
    animation: spin-b-alav2s51eu 1s linear infinite;
}

@keyframes spin-b-alav2s51eu {
    to { transform: rotate(360deg); }
}

.error-icon[b-alav2s51eu] {
    width: 48px;
    height: 48px;
    color: var(--danger-color, #ef4444);
}

.retry-btn[b-alav2s51eu] {
    padding: 10px 20px;
    background: var(--primary-color, #3b82f6);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
}

/* Header */
.report-header[b-alav2s51eu] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.breadcrumb[b-alav2s51eu] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 8px;
}

.breadcrumb a[b-alav2s51eu] {
    color: var(--primary-color, #3b82f6);
    text-decoration: none;
}

.breadcrumb a:hover[b-alav2s51eu] {
    text-decoration: underline;
}

.header-left h1[b-alav2s51eu] {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary, #1f2937);
}

.header-actions[b-alav2s51eu] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.filter-group[b-alav2s51eu] {
    display: flex;
    gap: 8px;
}

.form-select[b-alav2s51eu] {
    padding: 10px 16px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    background: var(--bg-secondary, #fff);
    font-size: 0.875rem;
    color: var(--text-primary, #1f2937);
    cursor: pointer;
}

.btn-refresh[b-alav2s51eu] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-secondary, #6b7280);
    transition: all 0.2s;
}

.btn-refresh:hover[b-alav2s51eu] {
    background: var(--bg-hover, #f9fafb);
    color: var(--primary-color, #3b82f6);
}

.btn-refresh svg[b-alav2s51eu] {
    width: 20px;
    height: 20px;
}

/* Summary Grid */
.summary-grid[b-alav2s51eu] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.summary-card[b-alav2s51eu] {
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.summary-icon[b-alav2s51eu] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.summary-icon svg[b-alav2s51eu] {
    width: 24px;
    height: 24px;
}

.summary-icon.blue[b-alav2s51eu] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.summary-icon.green[b-alav2s51eu] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.summary-icon.purple[b-alav2s51eu] {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.summary-icon.orange[b-alav2s51eu] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.summary-content[b-alav2s51eu] {
    display: flex;
    flex-direction: column;
}

.summary-label[b-alav2s51eu] {
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
}

.summary-value[b-alav2s51eu] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary, #1f2937);
}

/* Charts */
.charts-row[b-alav2s51eu] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.chart-card[b-alav2s51eu] {
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    padding: 20px;
}

.chart-header[b-alav2s51eu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.chart-header h3[b-alav2s51eu] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary, #1f2937);
}

.chart-body[b-alav2s51eu] {
    min-height: 300px;
}

.chart-empty[b-alav2s51eu] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--text-secondary, #6b7280);
    font-size: 0.875rem;
}

/* Quick Navigation */
.quick-nav[b-alav2s51eu] {
    margin-top: 24px;
}

.quick-nav h3[b-alav2s51eu] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
    margin: 0 0 16px 0;
}

.nav-cards[b-alav2s51eu] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.nav-card[b-alav2s51eu] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s;
}

.nav-card:hover[b-alav2s51eu] {
    border-color: var(--primary-color, #3b82f6);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

.nav-icon[b-alav2s51eu] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nav-icon svg[b-alav2s51eu] {
    width: 24px;
    height: 24px;
}

.nav-icon.green[b-alav2s51eu] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.nav-icon.purple[b-alav2s51eu] {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.nav-content[b-alav2s51eu] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.nav-title[b-alav2s51eu] {
    font-weight: 600;
    color: var(--text-primary, #1f2937);
}

.nav-desc[b-alav2s51eu] {
    font-size: 0.75rem;
    color: var(--text-secondary, #6b7280);
}

.nav-arrow[b-alav2s51eu] {
    width: 20px;
    height: 20px;
    color: var(--text-secondary, #6b7280);
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .summary-grid[b-alav2s51eu] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .sales-report[b-alav2s51eu] {
        padding: 12px;
    }

    /* Header */
    .report-header[b-alav2s51eu] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 16px;
    }

    .header-left[b-alav2s51eu] {
        width: 100%;
        display: block;
    }

    .breadcrumb[b-alav2s51eu] {
        font-size: 0.75rem;
        gap: 0;
        margin-bottom: 8px;
        flex-wrap: wrap;
        background: var(--bg-tertiary, #f3f4f6);
        padding: 6px 10px;
        border-radius: 6px;
    }

    .breadcrumb span:not(:last-child)[b-alav2s51eu] {
        display: none;
    }

    .breadcrumb a[b-alav2s51eu] {
        position: relative;
        padding-right: 18px;
    }

    .breadcrumb a[b-alav2s51eu]::after {
        content: "›";
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted, #9ca3af);
        font-size: 0.85rem;
    }

    .breadcrumb span:last-child[b-alav2s51eu] {
        font-weight: 600;
        color: var(--text-primary, #1f2937);
    }

    .header-left h1[b-alav2s51eu] {
        font-size: 1.15rem;
        line-height: 1.3;
    }

    .header-actions[b-alav2s51eu] {
        width: 100%;
    }

    .form-select[b-alav2s51eu] {
        flex: 1;
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    .btn-refresh[b-alav2s51eu] {
        width: 36px;
        height: 36px;
    }

    .btn-refresh svg[b-alav2s51eu] {
        width: 18px;
        height: 18px;
    }

    /* Summary Cards - 2 columns compact */
    .summary-grid[b-alav2s51eu] {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 16px;
    }

    .summary-card[b-alav2s51eu] {
        padding: 14px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .summary-icon[b-alav2s51eu] {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }

    .summary-icon svg[b-alav2s51eu] {
        width: 18px;
        height: 18px;
    }

    .summary-value[b-alav2s51eu] {
        font-size: 1.2rem;
    }

    .summary-label[b-alav2s51eu] {
        font-size: 0.75rem;
    }

    /* Charts */
    .charts-row[b-alav2s51eu] {
        margin-bottom: 16px;
    }

    .chart-card[b-alav2s51eu] {
        padding: 14px;
        border-radius: 10px;
    }

    .chart-header[b-alav2s51eu] {
        margin-bottom: 12px;
    }

    .chart-header h3[b-alav2s51eu] {
        font-size: 0.875rem;
    }

    .chart-body[b-alav2s51eu] {
        min-height: 220px;
    }

    /* Quick Navigation */
    .quick-nav[b-alav2s51eu] {
        margin-top: 16px;
    }

    .quick-nav h3[b-alav2s51eu] {
        font-size: 1rem;
        margin-bottom: 12px;
    }

    .nav-cards[b-alav2s51eu] {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .nav-card[b-alav2s51eu] {
        padding: 14px;
        gap: 12px;
        border-radius: 10px;
    }

    .nav-icon[b-alav2s51eu] {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .nav-icon svg[b-alav2s51eu] {
        width: 20px;
        height: 20px;
    }

    .nav-title[b-alav2s51eu] {
        font-size: 0.85rem;
    }

    .nav-desc[b-alav2s51eu] {
        font-size: 0.7rem;
    }

    .nav-arrow[b-alav2s51eu] {
        width: 18px;
        height: 18px;
    }

    /* Loading & Error */
    .reports-loading[b-alav2s51eu],
    .reports-error[b-alav2s51eu] {
        min-height: 300px;
    }
}

/* Responsive - Small Mobile */
@media (max-width: 400px) {
    .sales-report[b-alav2s51eu] {
        padding: 8px;
    }

    .summary-grid[b-alav2s51eu] {
        gap: 8px;
    }

    .summary-card[b-alav2s51eu] {
        padding: 12px;
    }

    .summary-value[b-alav2s51eu] {
        font-size: 1.05rem;
    }
}
/* /Components/Pages/Reports/Scheduled/ScheduledReports.razor.rz.scp.css */
.scheduled-reports[b-ita02sanp3] {
    padding: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Loading & Error */
.reports-loading[b-ita02sanp3],
.reports-error[b-ita02sanp3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.loading-spinner[b-ita02sanp3] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color, #e5e7eb);
    border-top-color: var(--primary-color, #3b82f6);
    border-radius: 50%;
    animation: spin-b-ita02sanp3 1s linear infinite;
}

@keyframes spin-b-ita02sanp3 {
    to { transform: rotate(360deg); }
}

.error-icon[b-ita02sanp3] {
    width: 48px;
    height: 48px;
    color: var(--danger-color, #ef4444);
}

.retry-btn[b-ita02sanp3] {
    padding: 10px 20px;
    background: var(--primary-color, #3b82f6);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
}

/* Header */
.report-header[b-ita02sanp3] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.breadcrumb[b-ita02sanp3] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 8px;
}

.breadcrumb a[b-ita02sanp3] {
    color: var(--primary-color, #3b82f6);
    text-decoration: none;
}

.breadcrumb a:hover[b-ita02sanp3] {
    text-decoration: underline;
}

.header-left h1[b-ita02sanp3] {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: var(--text-primary, #1f2937);
}

.header-desc[b-ita02sanp3] {
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
    margin: 0;
}

.header-actions[b-ita02sanp3] {
    display: flex;
    gap: 12px;
}

.btn-primary[b-ita02sanp3] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--primary-color, #3b82f6);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: opacity 0.2s;
}

.btn-primary:hover[b-ita02sanp3] {
    opacity: 0.9;
}

.btn-primary:disabled[b-ita02sanp3] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary svg[b-ita02sanp3] {
    width: 18px;
    height: 18px;
}

/* Empty State */
.empty-state[b-ita02sanp3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
}

.empty-icon[b-ita02sanp3] {
    width: 64px;
    height: 64px;
    background: var(--bg-tertiary, #f3f4f6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.empty-icon svg[b-ita02sanp3] {
    width: 32px;
    height: 32px;
    color: var(--text-secondary, #6b7280);
}

.empty-state h3[b-ita02sanp3] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: var(--text-primary, #1f2937);
}

.empty-state p[b-ita02sanp3] {
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
    margin: 0 0 20px 0;
}

/* Reports Grid */
.reports-grid[b-ita02sanp3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.report-card[b-ita02sanp3] {
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.report-card:hover[b-ita02sanp3] {
    border-color: var(--primary-color, #3b82f6);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

.report-card.inactive[b-ita02sanp3] {
    opacity: 0.7;
}

.report-card .card-header[b-ita02sanp3] {
    padding: 16px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.report-info h3[b-ita02sanp3] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: var(--text-primary, #1f2937);
}

.report-type[b-ita02sanp3] {
    font-size: 0.75rem;
    color: var(--text-secondary, #6b7280);
}

.status-badge[b-ita02sanp3] {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-badge.active[b-ita02sanp3] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.status-badge.inactive[b-ita02sanp3] {
    background: var(--bg-tertiary, #f3f4f6);
    color: var(--text-secondary, #6b7280);
}

.report-card .card-body[b-ita02sanp3] {
    padding: 16px;
}

.detail-row[b-ita02sanp3] {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.detail-row:last-child[b-ita02sanp3] {
    border-bottom: none;
}

.detail-label[b-ita02sanp3] {
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
}

.detail-value[b-ita02sanp3] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary, #1f2937);
}

.card-actions[b-ita02sanp3] {
    padding: 12px 16px;
    border-top: 1px solid var(--border-color, #e5e7eb);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.btn-icon[b-ita02sanp3] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-secondary, #6b7280);
    transition: all 0.2s;
}

.btn-icon:hover[b-ita02sanp3] {
    background: var(--bg-hover, #f9fafb);
    color: var(--primary-color, #3b82f6);
}

.btn-icon.danger:hover[b-ita02sanp3] {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
    color: #ef4444;
}

.btn-icon svg[b-ita02sanp3] {
    width: 18px;
    height: 18px;
}

.btn-icon.loading[b-ita02sanp3] {
    pointer-events: none;
    opacity: 0.7;
}

.btn-spinner[b-ita02sanp3] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color, #e5e7eb);
    border-top-color: var(--primary-color, #3b82f6);
    border-radius: 50%;
    animation: spin-b-ita02sanp3 0.8s linear infinite;
}

/* Modal */
.modal-overlay[b-ita02sanp3] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.modal-content[b-ita02sanp3] {
    background: var(--bg-secondary, #fff);
    border-radius: 12px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header[b-ita02sanp3] {
    padding: 20px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2[b-ita02sanp3] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary, #1f2937);
}

.btn-close[b-ita02sanp3] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-secondary, #6b7280);
    border-radius: 6px;
}

.btn-close:hover[b-ita02sanp3] {
    background: var(--bg-tertiary, #f3f4f6);
}

.btn-close svg[b-ita02sanp3] {
    width: 20px;
    height: 20px;
}

.modal-body[b-ita02sanp3] {
    padding: 20px;
}

.form-group[b-ita02sanp3] {
    margin-bottom: 16px;
}

.form-group label[b-ita02sanp3] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary, #1f2937);
    margin-bottom: 6px;
}

.form-input[b-ita02sanp3],
.form-select[b-ita02sanp3],
.form-textarea[b-ita02sanp3] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--text-primary, #1f2937);
    background: var(--bg-secondary, #fff);
}

.form-input:focus[b-ita02sanp3],
.form-select:focus[b-ita02sanp3],
.form-textarea:focus[b-ita02sanp3] {
    outline: none;
    border-color: var(--primary-color, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-textarea[b-ita02sanp3] {
    min-height: 80px;
    resize: vertical;
}

.form-row[b-ita02sanp3] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.radio-group[b-ita02sanp3] {
    display: flex;
    gap: 16px;
}

.radio-label[b-ita02sanp3] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.radio-label input[b-ita02sanp3] {
    margin: 0;
}

.checkbox-label[b-ita02sanp3] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.checkbox-label input[b-ita02sanp3] {
    margin: 0;
}

.modal-footer[b-ita02sanp3] {
    padding: 16px 20px;
    border-top: 1px solid var(--border-color, #e5e7eb);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.btn-secondary[b-ita02sanp3] {
    padding: 10px 20px;
    background: var(--bg-secondary, #fff);
    color: var(--text-primary, #1f2937);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
}

.btn-secondary:hover[b-ita02sanp3] {
    background: var(--bg-hover, #f9fafb);
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .reports-grid[b-ita02sanp3] {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .scheduled-reports[b-ita02sanp3] {
        padding: 12px;
    }

    /* Header */
    .report-header[b-ita02sanp3] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 16px;
    }

    .header-left[b-ita02sanp3] {
        width: 100%;
        display: block;
    }

    .breadcrumb[b-ita02sanp3] {
        font-size: 0.75rem;
        gap: 0;
        margin-bottom: 8px;
        flex-wrap: wrap;
        background: var(--bg-tertiary, #f3f4f6);
        padding: 6px 10px;
        border-radius: 6px;
    }

    .breadcrumb span:not(:last-child)[b-ita02sanp3] {
        display: none;
    }

    .breadcrumb a[b-ita02sanp3] {
        position: relative;
        padding-right: 18px;
    }

    .breadcrumb a[b-ita02sanp3]::after {
        content: "›";
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted, #9ca3af);
        font-size: 0.85rem;
    }

    .breadcrumb span:last-child[b-ita02sanp3] {
        font-weight: 600;
        color: var(--text-primary, #1f2937);
    }

    .header-left h1[b-ita02sanp3] {
        font-size: 1.15rem;
        line-height: 1.3;
    }

    .header-desc[b-ita02sanp3] {
        font-size: 0.8rem;
    }

    .header-actions[b-ita02sanp3] {
        width: 100%;
    }

    .btn-primary[b-ita02sanp3] {
        width: 100%;
        justify-content: center;
        padding: 10px 16px;
        font-size: 0.875rem;
    }

    /* Empty State */
    .empty-state[b-ita02sanp3] {
        padding: 40px 16px;
    }

    .empty-icon[b-ita02sanp3] {
        width: 52px;
        height: 52px;
    }

    .empty-icon svg[b-ita02sanp3] {
        width: 26px;
        height: 26px;
    }

    .empty-state h3[b-ita02sanp3] {
        font-size: 1rem;
    }

    .empty-state p[b-ita02sanp3] {
        font-size: 0.8rem;
    }

    /* Report Cards */
    .reports-grid[b-ita02sanp3] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .report-card[b-ita02sanp3] {
        border-radius: 10px;
    }

    .report-card .card-header[b-ita02sanp3] {
        padding: 14px;
    }

    .report-info h3[b-ita02sanp3] {
        font-size: 0.9rem;
    }

    .report-type[b-ita02sanp3] {
        font-size: 0.7rem;
    }

    .status-badge[b-ita02sanp3] {
        font-size: 0.7rem;
        padding: 3px 6px;
    }

    .report-card .card-body[b-ita02sanp3] {
        padding: 12px 14px;
    }

    .detail-row[b-ita02sanp3] {
        padding: 6px 0;
    }

    .detail-label[b-ita02sanp3] {
        font-size: 0.8rem;
    }

    .detail-value[b-ita02sanp3] {
        font-size: 0.8rem;
    }

    .card-actions[b-ita02sanp3] {
        padding: 10px 14px;
    }

    .btn-icon[b-ita02sanp3] {
        width: 34px;
        height: 34px;
    }

    .btn-icon svg[b-ita02sanp3] {
        width: 16px;
        height: 16px;
    }

    /* Modal */
    .modal-overlay[b-ita02sanp3] {
        padding: 12px;
    }

    .modal-header[b-ita02sanp3] {
        padding: 16px;
    }

    .modal-header h2[b-ita02sanp3] {
        font-size: 1.1rem;
    }

    .modal-body[b-ita02sanp3] {
        padding: 16px;
    }

    .form-group[b-ita02sanp3] {
        margin-bottom: 14px;
    }

    .form-group label[b-ita02sanp3] {
        font-size: 0.8rem;
    }

    .form-input[b-ita02sanp3],
    .form-select[b-ita02sanp3],
    .form-textarea[b-ita02sanp3] {
        padding: 9px 10px;
        font-size: 0.8rem;
    }

    .form-row[b-ita02sanp3] {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .radio-group[b-ita02sanp3] {
        gap: 12px;
    }

    .modal-footer[b-ita02sanp3] {
        padding: 12px 16px;
        gap: 8px;
    }

    .btn-secondary[b-ita02sanp3],
    .modal-footer .btn-primary[b-ita02sanp3] {
        padding: 9px 16px;
        font-size: 0.85rem;
    }

    /* Loading & Error */
    .reports-loading[b-ita02sanp3],
    .reports-error[b-ita02sanp3] {
        min-height: 300px;
    }
}

/* Responsive - Small Mobile */
@media (max-width: 400px) {
    .scheduled-reports[b-ita02sanp3] {
        padding: 8px;
    }

    .report-card .card-header[b-ita02sanp3] {
        padding: 12px;
    }

    .report-card .card-body[b-ita02sanp3] {
        padding: 10px 12px;
    }

    .card-actions[b-ita02sanp3] {
        padding: 8px 12px;
    }
}
/* /Components/Pages/Settings/Currencies.razor.rz.scp.css */
/* Currencies page responsive */

/* ===== TABLET ===== */
@media (max-width: 1024px) {
    /* Exchange rate grid - fewer columns */
    .exchange-rate-grid[b-jw2kk30kym] {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 10px;
    }
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
    .code-badge[b-jw2kk30kym] {
        font-size: 12px;
        padding: 3px 8px;
    }

    .currency-symbol[b-jw2kk30kym] {
        font-size: 14px;
    }

    .rate-value[b-jw2kk30kym] {
        font-size: 13px;
    }

    .date-value[b-jw2kk30kym] {
        font-size: 11px;
    }

    .form-row[b-jw2kk30kym] {
        grid-template-columns: 1fr;
    }

    /* Exchange rate modal header - stack */
    .exchange-rate-header[b-jw2kk30kym] {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
        padding: 10px 12px;
        margin-bottom: 14px;
    }

    .rate-date[b-jw2kk30kym] {
        font-size: 13px;
    }

    .rate-actions[b-jw2kk30kym] {
        justify-content: center;
    }

    /* Exchange rate grid - 2 columns */
    .exchange-rate-grid[b-jw2kk30kym] {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        max-height: 350px;
        padding: 2px;
    }

    .rate-card[b-jw2kk30kym] {
        padding: 10px;
    }

    .rate-card-header[b-jw2kk30kym] {
        gap: 6px;
        margin-bottom: 6px;
    }

    .rate-code[b-jw2kk30kym] {
        font-size: 13px;
    }

    .rate-tag[b-jw2kk30kym] {
        font-size: 9px;
        padding: 1px 5px;
    }

    .rate-name[b-jw2kk30kym] {
        font-size: 11px;
    }

    .rate-value-large[b-jw2kk30kym] {
        font-size: 15px;
    }

    .selection-summary[b-jw2kk30kym] {
        margin-top: 12px;
        padding: 10px 12px;
        font-size: 13px;
    }
}

/* ===== SMALL MOBILE ===== */
@media (max-width: 480px) {
    .code-badge[b-jw2kk30kym] {
        font-size: 11px;
        padding: 2px 6px;
    }

    .currency-symbol[b-jw2kk30kym] {
        font-size: 13px;
    }

    .rate-value[b-jw2kk30kym] {
        font-size: 12px;
    }

    .date-value[b-jw2kk30kym] {
        font-size: 10px;
    }

    /* Exchange rate grid - still 2 columns but tighter */
    .exchange-rate-grid[b-jw2kk30kym] {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        max-height: 300px;
    }

    .rate-card[b-jw2kk30kym] {
        padding: 8px;
    }

    .rate-code[b-jw2kk30kym] {
        font-size: 12px;
    }

    .rate-value-large[b-jw2kk30kym] {
        font-size: 14px;
    }

    .rate-name[b-jw2kk30kym] {
        font-size: 10px;
    }

    .rate-checkbox input[type="checkbox"][b-jw2kk30kym] {
        width: 18px;
        height: 18px;
    }
}
/* /Components/Pages/Settings/Languages.razor.rz.scp.css */
/* Languages page responsive */

@media (max-width: 768px) {
    .flag-emoji[b-mb5jf51ht3] {
        font-size: 20px;
    }

    .code-badge[b-mb5jf51ht3] {
        font-size: 12px;
        padding: 3px 8px;
    }

    .sort-order[b-mb5jf51ht3] {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .flag-emoji[b-mb5jf51ht3] {
        font-size: 18px;
    }

    .code-badge[b-mb5jf51ht3] {
        font-size: 11px;
        padding: 2px 6px;
    }
}
/* /Components/Pages/Settings/OrderStatuses.razor.rz.scp.css */
/* OrderStatuses page responsive */

@media (max-width: 768px) {
    .sort-order-badge[b-l6uz1ewscp] {
        font-size: 12px;
    }

    .code-badge[b-l6uz1ewscp] {
        font-size: 12px;
        padding: 3px 8px;
    }

    .group-badge[b-l6uz1ewscp] {
        font-size: 11px;
        padding: 3px 8px;
    }

    .color-preview[b-l6uz1ewscp] {
        width: 20px;
        height: 20px;
    }

    .icon-preview[b-l6uz1ewscp] {
        font-size: 16px;
    }

    .form-row[b-l6uz1ewscp] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .code-badge[b-l6uz1ewscp] {
        font-size: 11px;
        padding: 2px 6px;
    }

    .group-badge[b-l6uz1ewscp] {
        font-size: 10px;
        padding: 2px 6px;
    }

    .color-preview[b-l6uz1ewscp] {
        width: 18px;
        height: 18px;
    }
}
/* /Components/Pages/Settings/Suppliers.razor.rz.scp.css */
.form-grid[b-6apzs2rqa9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}

.name-cell[b-6apzs2rqa9] {
    font-weight: 500;
}

.muted[b-6apzs2rqa9] {
    color: var(--text-secondary);
    font-size: 13px;
}

.code-badge[b-6apzs2rqa9] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: var(--bg-secondary);
    border-radius: 4px;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

@media (max-width: 768px) {
    .form-grid[b-6apzs2rqa9] {
        grid-template-columns: 1fr;
    }

    .code-badge[b-6apzs2rqa9] {
        font-size: 12px;
        padding: 2px 8px;
    }
}
/* /Components/Pages/Settings/VatRates.razor.rz.scp.css */
/* Page Container */
.page-container[b-cyxfcnlrb2] {
    padding: 32px;
    max-width: 100%;
}

/* Page Header */
.page-header[b-cyxfcnlrb2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
    flex-wrap: wrap;
}

.page-header-left h1[b-cyxfcnlrb2] {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 4px;
}

.page-header-left p[b-cyxfcnlrb2] {
    font-size: 14px;
    color: var(--text-muted);
}

.page-header-actions[b-cyxfcnlrb2] {
    display: flex;
    gap: 12px;
}

/* Filters Card */
.filters-card[b-cyxfcnlrb2] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    margin-bottom: 24px;
}

.filters-row[b-cyxfcnlrb2] {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.filter-group[b-cyxfcnlrb2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 200px;
}

.filter-group label[b-cyxfcnlrb2] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-actions[b-cyxfcnlrb2] {
    margin-left: auto;
}

/* Data Card */
.data-card[b-cyxfcnlrb2] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* Loading */
.loading-container[b-cyxfcnlrb2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px;
    gap: 16px;
    color: var(--text-muted);
}

.loading-spinner[b-cyxfcnlrb2] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Empty State */
.empty-state[b-cyxfcnlrb2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px;
    text-align: center;
    color: var(--text-muted);
}

.empty-state svg[b-cyxfcnlrb2] {
    opacity: 0.5;
    margin-bottom: 16px;
}

.empty-state h3[b-cyxfcnlrb2] {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

/* Table */
.table-container[b-cyxfcnlrb2] {
    overflow-x: auto;
}

.data-table[b-cyxfcnlrb2] {
    width: 100%;
    border-collapse: collapse;
}

.data-table th[b-cyxfcnlrb2] {
    text-align: left;
    padding: 14px 20px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-input);
}

.data-table th.sortable[b-cyxfcnlrb2] {
    cursor: pointer;
    user-select: none;
}

.data-table th.sortable:hover[b-cyxfcnlrb2] {
    color: var(--text-primary);
}

.sort-icon[b-cyxfcnlrb2] {
    margin-left: 4px;
    font-size: 10px;
}

.th-checkbox[b-cyxfcnlrb2] {
    width: 50px;
}

.th-actions[b-cyxfcnlrb2] {
    width: 100px;
    text-align: center;
}

.data-table td[b-cyxfcnlrb2] {
    padding: 16px 20px;
    font-size: 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.data-table tbody tr[b-cyxfcnlrb2] {
    transition: var(--transition);
}

.data-table tbody tr:hover[b-cyxfcnlrb2] {
    background: var(--bg-input);
}

.data-table tbody tr.selected[b-cyxfcnlrb2] {
    background: linear-gradient(135deg, var(--primary-alpha) 0%, transparent 100%);
}

/* Badges */
.code-badge[b-cyxfcnlrb2] {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--primary);
    padding: 4px 10px;
    background: var(--primary-alpha);
    border-radius: var(--radius-sm);
    font-size: 13px;
}

.rate-value[b-cyxfcnlrb2] {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 15px;
}

.status-badge[b-cyxfcnlrb2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.status-badge.active[b-cyxfcnlrb2] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.status-badge.inactive[b-cyxfcnlrb2] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.status-dot[b-cyxfcnlrb2] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Action Buttons */
.action-buttons[b-cyxfcnlrb2] {
    display: flex;
    gap: 8px;
    justify-content: center;
}

/* Pagination */
.pagination-container[b-cyxfcnlrb2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-top: 1px solid var(--border);
}

.pagination-info[b-cyxfcnlrb2] {
    font-size: 13px;
    color: var(--text-muted);
}

.pagination-buttons[b-cyxfcnlrb2] {
    display: flex;
    gap: 8px;
}

/* Text helpers */
.text-muted[b-cyxfcnlrb2] {
    color: var(--text-muted);
    font-size: 13px;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .page-container[b-cyxfcnlrb2] {
        padding: 20px;
    }

    .page-header-left h1[b-cyxfcnlrb2] {
        font-size: 24px;
    }

    .data-table th[b-cyxfcnlrb2],
    .data-table td[b-cyxfcnlrb2] {
        padding: 12px 16px;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .page-container[b-cyxfcnlrb2] {
        padding: 16px;
        padding-bottom: 100px;
    }

    .page-header[b-cyxfcnlrb2] {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 16px;
    }

    .page-header-left h1[b-cyxfcnlrb2] {
        font-size: 20px;
    }

    .page-header-left p[b-cyxfcnlrb2] {
        font-size: 12px;
    }

    .page-header-actions[b-cyxfcnlrb2] {
        width: 100%;
    }

    .page-header-actions .btn[b-cyxfcnlrb2] {
        flex: 1;
        justify-content: center;
    }

    .filters-row[b-cyxfcnlrb2] {
        flex-direction: column;
    }

    .filter-group[b-cyxfcnlrb2] {
        width: 100%;
        min-width: auto;
    }

    .filter-actions[b-cyxfcnlrb2] {
        margin-left: 0;
        width: 100%;
    }

    .filter-actions .btn[b-cyxfcnlrb2] {
        width: 100%;
        justify-content: center;
    }

    .data-table th[b-cyxfcnlrb2],
    .data-table td[b-cyxfcnlrb2] {
        padding: 10px 12px;
        font-size: 13px;
    }

    .data-table th[b-cyxfcnlrb2] {
        font-size: 10px;
    }

    .code-badge[b-cyxfcnlrb2] {
        font-size: 12px;
        padding: 3px 8px;
    }

    .rate-value[b-cyxfcnlrb2] {
        font-size: 13px;
    }

    .pagination-container[b-cyxfcnlrb2] {
        flex-direction: column;
        gap: 12px;
    }

    .empty-state[b-cyxfcnlrb2] {
        padding: 40px 16px;
    }
}

/* Responsive - Small Mobile */
@media (max-width: 480px) {
    .page-container[b-cyxfcnlrb2] {
        padding: 12px;
        padding-bottom: 100px;
    }

    .page-header-left h1[b-cyxfcnlrb2] {
        font-size: 18px;
    }

    .data-table th[b-cyxfcnlrb2],
    .data-table td[b-cyxfcnlrb2] {
        padding: 8px 10px;
        font-size: 12px;
    }

    .code-badge[b-cyxfcnlrb2] {
        font-size: 11px;
        padding: 2px 6px;
    }

    .rate-value[b-cyxfcnlrb2] {
        font-size: 12px;
    }

    .status-badge[b-cyxfcnlrb2] {
        font-size: 10px;
        padding: 4px 8px;
    }
}
/* /Components/Pages/Stock/StockMovements.razor.rz.scp.css */
.page-container[b-sjp8qxrl9x] {
    padding: 16px 24px;
}

.page-header h2[b-sjp8qxrl9x] {
    margin: 0 0 4px 0;
    color: var(--text-primary);
}

.page-subtitle[b-sjp8qxrl9x] {
    color: var(--text-secondary);
    font-size: 13px;
    margin: 0;
}

.filter-card[b-sjp8qxrl9x] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    margin: 16px 0;
}

.filter-grid[b-sjp8qxrl9x] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    align-items: end;
}

.filter-field label[b-sjp8qxrl9x] {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.filter-field .form-input[b-sjp8qxrl9x] {
    width: 100%;
    padding: 8px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
}

.filter-actions[b-sjp8qxrl9x] {
    display: flex;
    align-items: flex-end;
}

.table-card[b-sjp8qxrl9x] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow-x: auto;
}

.data-table[b-sjp8qxrl9x] {
    width: 100%;
    border-collapse: collapse;
}

.data-table th[b-sjp8qxrl9x] {
    text-align: left;
    padding: 10px 12px;
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    border-bottom: 1px solid var(--border);
}

.data-table td[b-sjp8qxrl9x] {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 13px;
}

.data-table tr:hover[b-sjp8qxrl9x] {
    background: var(--bg-input);
}

.text-right[b-sjp8qxrl9x] { text-align: right; }
.qty-neg[b-sjp8qxrl9x] { color: #ef4444; font-weight: 600; }
.qty-pos[b-sjp8qxrl9x] { color: #10b981; font-weight: 600; }

.movement-badge[b-sjp8qxrl9x] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.movement-badge--reserve[b-sjp8qxrl9x] { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.movement-badge--release[b-sjp8qxrl9x] { background: rgba(34, 197, 94, 0.15); color: #16a34a; }
.movement-badge--erpadjust[b-sjp8qxrl9x] { background: rgba(59, 130, 246, 0.15); color: #2563eb; }
.movement-badge--manualadjust[b-sjp8qxrl9x] { background: rgba(245, 158, 11, 0.15); color: #d97706; }

.pager[b-sjp8qxrl9x] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px;
    border-top: 1px solid var(--border);
}

.pager-info[b-sjp8qxrl9x] {
    color: var(--text-secondary);
    font-size: 13px;
}

.empty-state[b-sjp8qxrl9x] {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
}

code[b-sjp8qxrl9x] {
    background: var(--bg-input);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: ui-monospace, monospace;
    font-size: 12px;
}
/* /Components/Pages/Tasks/Calendar.razor.rz.scp.css */
/* Calendar Page - Full Layout */
.calendar-page[b-hteawe5613] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: calc(100vh - 120px);
    background: var(--bg-primary);
    padding: 1rem;
}

/* Calendar Header */
.calendar-header[b-hteawe5613] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    border-radius: 12px 12px 0 0;
    flex-shrink: 0;
    gap: 1rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 10;
}

.header-left[b-hteawe5613] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-right[b-hteawe5613] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Today Button */
.btn-today[b-hteawe5613] {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.btn-today:hover[b-hteawe5613] {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* Icon Button */
.btn-icon[b-hteawe5613] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-icon:hover[b-hteawe5613] {
    background: var(--bg-card-hover);
    border-color: var(--primary);
}

.btn-icon svg[b-hteawe5613] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Navigation Buttons */
.nav-buttons[b-hteawe5613] {
    display: flex;
    gap: 0.25rem;
}

.nav-buttons .btn-icon[b-hteawe5613] {
    padding: 0.5rem;
}

/* Current Period Title */
.current-period[b-hteawe5613] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    white-space: nowrap;
}

/* View Selector */
.view-selector[b-hteawe5613] {
    display: flex;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-card);
}

.view-selector button[b-hteawe5613] {
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s ease;
}

.view-selector button:not(:last-child)[b-hteawe5613] {
    border-right: 1px solid var(--border);
}

.view-selector button:hover[b-hteawe5613] {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.view-selector button.active[b-hteawe5613] {
    background: var(--primary);
    color: white;
}

/* Primary Button */
.btn-primary[b-hteawe5613] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border: none;
    border-radius: 8px;
    background: var(--primary);
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.btn-primary:hover[b-hteawe5613] {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-primary:active[b-hteawe5613] {
    transform: translateY(0);
}

.btn-primary svg[b-hteawe5613] {
    width: 18px;
    height: 18px;
}

/* Calendar Container */
.calendar-container[b-hteawe5613] {
    flex: 1;
    overflow: hidden;
    padding: 1rem;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.calendar-loading[b-hteawe5613] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    min-height: 400px;
}

.loading-spinner[b-hteawe5613] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-hteawe5613 0.8s linear infinite;
}

@keyframes spin-b-hteawe5613 {
    to { transform: rotate(360deg); }
}

/* Month View Grid */
.month-view[b-hteawe5613] {
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border);
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.weekday-header[b-hteawe5613] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid var(--border);
    background: var(--bg-primary);
}

.weekday[b-hteawe5613] {
    padding: 0.875rem 0.5rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.days-grid[b-hteawe5613] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(6, 1fr);
    flex: 1;
    min-height: 0;
}

.calendar-day[b-hteawe5613] {
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 0.5rem;
    min-height: 100px;
    cursor: pointer;
    transition: background 0.15s ease;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
}

.calendar-day:nth-child(7n)[b-hteawe5613] {
    border-right: none;
}

.calendar-day:nth-last-child(-n+7)[b-hteawe5613] {
    border-bottom: none;
}

.calendar-day:hover[b-hteawe5613] {
    background: var(--bg-card-hover);
}

.calendar-day.other-month[b-hteawe5613] {
    background: var(--bg-primary);
}

.calendar-day.other-month .day-number[b-hteawe5613] {
    color: var(--text-secondary);
}

.calendar-day.today[b-hteawe5613] {
    background: rgba(59, 130, 246, 0.04);
}

.calendar-day.today .day-number[b-hteawe5613] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    font-weight: 600;
}

/* Day Header */
.day-header[b-hteawe5613] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.day-number[b-hteawe5613] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.today-indicator[b-hteawe5613] {
    display: none;
}

/* Day Tasks */
.day-tasks[b-hteawe5613] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    overflow: hidden;
}

.task-item[b-hteawe5613] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: opacity 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
    border-left: 3px solid;
}

.task-item:hover[b-hteawe5613] {
    opacity: 0.85;
}

/* Priority renkleri — text border-left ile aynı medium ton (eski koyu hex'ler
   dark page background'unda okunmuyordu). Bg yarı saydam, hem light hem dark'ta
   ana arka plan üzerinde yeterli kontrast. */
.task-item.priority-0[b-hteawe5613] {
    background: rgba(16, 185, 129, 0.15);
    border-left-color: #10b981;
    color: #10b981;
}
.task-item.priority-1[b-hteawe5613] {
    background: rgba(59, 130, 246, 0.15);
    border-left-color: #3b82f6;
    color: #3b82f6;
}
.task-item.priority-2[b-hteawe5613] {
    background: rgba(245, 158, 11, 0.15);
    border-left-color: #f59e0b;
    color: #f59e0b;
}
.task-item.priority-3[b-hteawe5613] {
    background: rgba(239, 68, 68, 0.15);
    border-left-color: #ef4444;
    color: #ef4444;
}

/* Custom color override — fallback theme-aware (eski #1e293b dark'ta görünmüyordu) */
.task-item.custom-color[b-hteawe5613] {
    background: color-mix(in srgb, var(--task-color) 15%, transparent);
    color: var(--text-primary));
}

.task-item.status-2[b-hteawe5613] {
    opacity: 0.5;
    text-decoration: line-through;
}

.task-time[b-hteawe5613] {
    font-weight: 600;
    font-size: 0.7rem;
}

.task-title[b-hteawe5613] {
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.more-tasks[b-hteawe5613] {
    font-size: 0.75rem;
    color: var(--primary);
    cursor: pointer;
    padding: 2px 8px;
    font-weight: 500;
}

.more-tasks:hover[b-hteawe5613] {
    text-decoration: underline;
}

/* Week/Day View */
.week-view[b-hteawe5613], .day-view[b-hteawe5613] {
    display: flex;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border);
    flex: 1;
    min-height: 0;
    overflow: auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.time-column[b-hteawe5613] {
    width: 60px;
    flex-shrink: 0;
    border-right: 1px solid var(--border);
    background: var(--bg-primary);
    position: sticky;
    left: 0;
    z-index: 1;
}

.time-header[b-hteawe5613] {
    height: 50px;
    border-bottom: 1px solid var(--border);
}

.time-slot[b-hteawe5613] {
    height: 60px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 4px 8px;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
}

.day-column[b-hteawe5613] {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
}

.day-column:last-child[b-hteawe5613] {
    border-right: none;
}

.day-column.today[b-hteawe5613] {
    background: rgba(59, 130, 246, 0.02);
}

.day-column .day-header[b-hteawe5613] {
    height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--border);
    padding: 0.5rem;
    background: var(--bg-primary);
}

.day-name[b-hteawe5613] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.day-date[b-hteawe5613] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.day-column.today .day-date[b-hteawe5613] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
}

.day-content[b-hteawe5613] {
    position: relative;
    height: 1440px; /* 24 hours * 60px per hour */
    min-height: 1440px;
}

.task-block[b-hteawe5613] {
    position: absolute;
    left: 4px;
    right: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: pointer;
    overflow: hidden;
    color: white;
    z-index: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.task-block:hover[b-hteawe5613] {
    opacity: 0.9;
    z-index: 2;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

.task-block .task-content[b-hteawe5613] {
    display: flex;
    flex-direction: column;
}

/* Modal Overlay */
.modal-overlay[b-hteawe5613] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(4px);
    animation: fadeIn-b-hteawe5613 0.15s ease;
}

@keyframes fadeIn-b-hteawe5613 {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Modal */
.modal[b-hteawe5613] {
    background: var(--bg-card);
    border-radius: 16px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: slideUp-b-hteawe5613 0.2s ease;
}

@keyframes slideUp-b-hteawe5613 {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.task-modal[b-hteawe5613] {
    max-width: 520px;
}

.day-detail-modal[b-hteawe5613] {
    max-width: 420px;
}

.modal-header[b-hteawe5613] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
}

.modal-header h3[b-hteawe5613] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.btn-close[b-hteawe5613] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 8px;
    color: var(--text-secondary);
    transition: all 0.15s ease;
}

.btn-close:hover[b-hteawe5613] {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.btn-close svg[b-hteawe5613] {
    width: 20px;
    height: 20px;
}

.modal-body[b-hteawe5613] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

/* Form Styles */
.form-group[b-hteawe5613] {
    margin-bottom: 1.25rem;
}

.form-group label[b-hteawe5613] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.form-group input[type="text"][b-hteawe5613],
.form-group input[type="datetime-local"][b-hteawe5613],
.form-group textarea[b-hteawe5613],
.form-group select[b-hteawe5613] {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.875rem;
    transition: all 0.15s ease;
}

.form-group input:focus[b-hteawe5613],
.form-group textarea:focus[b-hteawe5613],
.form-group select:focus[b-hteawe5613] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.form-row[b-hteawe5613] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.checkbox-label[b-hteawe5613] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.875rem;
}

.checkbox-label input[b-hteawe5613] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

/* Color Picker */
.color-picker[b-hteawe5613] {
    display: flex;
    gap: 0.5rem;
}

.color-option[b-hteawe5613] {
    width: 32px;
    height: 32px;
    border: 2px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.color-option:hover[b-hteawe5613] {
    transform: scale(1.15);
}

.color-option.selected[b-hteawe5613] {
    border-color: var(--text-primary);
    transform: scale(1.15);
}

/* Reminders */
.reminders-list[b-hteawe5613] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.reminder-item[b-hteawe5613] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.reminder-item select[b-hteawe5613],
.reminder-item[b-hteawe5613]  .searchable-select {
    flex: 1;
}

/* SearchableSelect in form */
.form-group[b-hteawe5613]  .searchable-select {
    width: 100%;
}

.form-group[b-hteawe5613]  .searchable-select .select-trigger {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.875rem;
    transition: all 0.15s ease;
}

.form-group[b-hteawe5613]  .searchable-select .select-trigger:focus,
.form-group[b-hteawe5613]  .searchable-select.open .select-trigger {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.btn-remove[b-hteawe5613] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--text-secondary);
    border-radius: 8px;
    transition: all 0.15s ease;
}

.btn-remove:hover[b-hteawe5613] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.btn-remove svg[b-hteawe5613] {
    width: 18px;
    height: 18px;
}

.btn-add-reminder[b-hteawe5613] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem;
    border: 2px dashed var(--border);
    border-radius: 8px;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s ease;
}

.btn-add-reminder:hover[b-hteawe5613] {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(59, 130, 246, 0.05);
}

.btn-add-reminder svg[b-hteawe5613] {
    width: 18px;
    height: 18px;
}

/* Modal Footer */
.modal-footer[b-hteawe5613] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    background: var(--bg-primary);
}

.spacer[b-hteawe5613] {
    flex: 1;
}

.btn-secondary[b-hteawe5613] {
    padding: 0.625rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s ease;
}

.btn-secondary:hover[b-hteawe5613] {
    background: var(--bg-card-hover);
    border-color: var(--text-secondary);
}

.btn-danger[b-hteawe5613] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border: none;
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s ease;
}

.btn-danger:hover[b-hteawe5613] {
    background: rgba(239, 68, 68, 0.2);
}

.btn-danger svg[b-hteawe5613] {
    width: 18px;
    height: 18px;
}

.btn-success[b-hteawe5613] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border: none;
    border-radius: 8px;
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s ease;
}

.btn-success:hover[b-hteawe5613] {
    background: rgba(16, 185, 129, 0.2);
}

.btn-success svg[b-hteawe5613] {
    width: 18px;
    height: 18px;
}

.btn-primary:disabled[b-hteawe5613] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.spinner-small[b-hteawe5613] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-hteawe5613 0.8s linear infinite;
}

/* Day Detail Modal */
.empty-day[b-hteawe5613] {
    text-align: center;
    color: var(--text-secondary);
    padding: 2.5rem 1rem;
    font-size: 0.9rem;
}

.day-tasks-list[b-hteawe5613] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-bottom: 1rem;
}

.task-list-item[b-hteawe5613] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease;
    border: 1px solid var(--border);
}

.task-list-item:hover[b-hteawe5613] {
    background: var(--bg-card-hover);
    border-color: var(--primary);
}

.task-color[b-hteawe5613] {
    width: 4px;
    height: 44px;
    border-radius: 2px;
    flex-shrink: 0;
}

.task-info[b-hteawe5613] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.task-info .task-title[b-hteawe5613] {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.task-info .task-time[b-hteawe5613] {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.task-priority[b-hteawe5613] {
    padding: 0.25rem 0.625rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.task-priority.priority-0[b-hteawe5613] { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.task-priority.priority-1[b-hteawe5613] { background: rgba(59, 130, 246, 0.1); color: #2563eb; }
.task-priority.priority-2[b-hteawe5613] { background: rgba(245, 158, 11, 0.1); color: #d97706; }
.task-priority.priority-3[b-hteawe5613] { background: rgba(239, 68, 68, 0.1); color: #ef4444; }

.btn-add-task[b-hteawe5613] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.875rem;
    border: 2px dashed var(--border);
    border-radius: 10px;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.15s ease;
}

.btn-add-task:hover[b-hteawe5613] {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(59, 130, 246, 0.05);
}

.btn-add-task svg[b-hteawe5613] {
    width: 20px;
    height: 20px;
}

/* Responsive */
@media (max-width: 768px) {
    .calendar-page[b-hteawe5613] {
        padding: 0.5rem;
    }

    .calendar-header[b-hteawe5613] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        border-radius: 8px 8px 0 0;
    }

    .header-left[b-hteawe5613] {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }

    .header-right[b-hteawe5613] {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }

    .current-period[b-hteawe5613] {
        font-size: 1rem;
        width: 100%;
        text-align: center;
        order: -1;
    }

    .btn-today[b-hteawe5613] {
        padding: 0.375rem 0.75rem;
        font-size: 0.8rem;
    }

    .btn-primary[b-hteawe5613] {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }

    .view-selector button[b-hteawe5613] {
        padding: 0.375rem 0.75rem;
        font-size: 0.8rem;
    }

    /* Month View Mobile */
    .calendar-container[b-hteawe5613] {
        padding: 0.5rem;
    }

    .month-view[b-hteawe5613] {
        border-radius: 8px;
    }

    .weekday[b-hteawe5613] {
        padding: 0.5rem 0.25rem;
        font-size: 0.7rem;
    }

    .calendar-day[b-hteawe5613] {
        min-height: 70px;
        padding: 0.25rem;
    }

    .day-number[b-hteawe5613] {
        font-size: 0.75rem;
    }

    .calendar-day.today .day-number[b-hteawe5613] {
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
    }

    .task-item[b-hteawe5613] {
        padding: 2px 4px;
        font-size: 0.65rem;
        border-left-width: 2px;
    }

    .task-time[b-hteawe5613] {
        display: none;
    }

    .more-tasks[b-hteawe5613] {
        font-size: 0.65rem;
        padding: 2px 4px;
    }

    /* Week/Day View Mobile */
    .week-view[b-hteawe5613], .day-view[b-hteawe5613] {
        border-radius: 8px;
        overflow-x: auto;
    }

    .time-column[b-hteawe5613] {
        width: 45px;
    }

    .time-slot[b-hteawe5613] {
        font-size: 0.6rem;
        padding: 2px 4px;
        height: 50px;
    }

    .day-column .day-header[b-hteawe5613] {
        height: 40px;
        padding: 0.25rem;
    }

    .day-name[b-hteawe5613] {
        font-size: 0.6rem;
    }

    .day-date[b-hteawe5613] {
        font-size: 1rem;
    }

    .day-column.today .day-date[b-hteawe5613] {
        width: 26px;
        height: 26px;
    }

    .task-block[b-hteawe5613] {
        font-size: 0.65rem;
        padding: 2px 4px;
    }

    /* Modal Mobile */
    .form-row[b-hteawe5613] {
        grid-template-columns: 1fr;
    }

    .form-group label[b-hteawe5613] {
        font-size: 0.8rem;
    }

    .form-group input[b-hteawe5613],
    .form-group textarea[b-hteawe5613],
    .form-group select[b-hteawe5613] {
        font-size: 0.875rem;
        padding: 0.5rem 0.75rem;
    }

    .color-picker[b-hteawe5613] {
        gap: 0.375rem;
    }

    .color-option[b-hteawe5613] {
        width: 28px;
        height: 28px;
    }

    .reminder-item[b-hteawe5613] {
        flex-wrap: wrap;
    }

    .btn-add-reminder[b-hteawe5613] {
        font-size: 0.8rem;
        padding: 0.5rem;
    }

    /* Day Detail Modal Mobile */
    .task-list-item[b-hteawe5613] {
        padding: 0.625rem;
    }

    .task-color[b-hteawe5613] {
        height: 36px;
    }

    .task-info .task-title[b-hteawe5613] {
        font-size: 0.85rem;
    }

    .task-info .task-time[b-hteawe5613] {
        font-size: 0.75rem;
    }

    .task-priority[b-hteawe5613] {
        font-size: 0.6rem;
        padding: 0.2rem 0.5rem;
    }

    .btn-add-task[b-hteawe5613] {
        font-size: 0.85rem;
        padding: 0.75rem;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .calendar-day[b-hteawe5613] {
        min-height: 60px;
    }

    .task-item[b-hteawe5613] {
        display: none;
    }

    .day-tasks[b-hteawe5613] {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .day-tasks[b-hteawe5613]::before {
        content: attr(data-count);
    }

    .more-tasks[b-hteawe5613] {
        display: none;
    }

    /* Show task count indicator */
    .calendar-day:has(.task-item) .day-tasks[b-hteawe5613]::after {
        content: "";
        width: 6px;
        height: 6px;
        background: var(--primary);
        border-radius: 50%;
        position: absolute;
        bottom: 4px;
        left: 50%;
        transform: translateX(-50%);
    }

    .week-view .day-column[b-hteawe5613] {
        min-width: 80px;
    }
}
/* /Components/Pages/WmsPro/Locations.razor.rz.scp.css */
/* Path Badge */
.path-badge[b-2gjxprzcku] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: var(--primary);
    color: #ffffff;
    border-radius: 4px;
    font-family: var(--font-mono, monospace);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.025em;
}

.barcode-text[b-2gjxprzcku] {
    font-family: monospace;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Type Badge */
.type-badge[b-2gjxprzcku] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.type-badge.type-storage[b-2gjxprzcku] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.type-badge.type-receiving[b-2gjxprzcku] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.type-badge.type-staging[b-2gjxprzcku] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.type-badge.type-shipping[b-2gjxprzcku] {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.type-badge.type-quarantine[b-2gjxprzcku] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Capacity */
.capacity-text[b-2gjxprzcku] {
    font-size: 0.875rem;
    color: var(--text);
}

.capacity-text.unlimited[b-2gjxprzcku] {
    color: var(--text-secondary);
    font-style: italic;
}

/* Stock Count */
.stock-count[b-2gjxprzcku] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
}

/* Form row */
.form-row[b-2gjxprzcku] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 768px) {
    .form-row[b-2gjxprzcku] {
        grid-template-columns: 1fr;
    }
}

/* Form group */
.form-group[b-2gjxprzcku] {
    margin-bottom: 1rem;
}

.form-group label[b-2gjxprzcku] {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
}

/* Bulk Create */
.bulk-create-form[b-2gjxprzcku] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bulk-preview[b-2gjxprzcku] {
    padding: 1rem;
    background: var(--hover-bg);
    border-radius: 8px;
    margin-top: 0.5rem;
}

.bulk-preview h4[b-2gjxprzcku] {
    margin: 0 0 0.5rem 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
}

.bulk-preview p[b-2gjxprzcku] {
    margin: 0 0 0.75rem 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.preview-samples[b-2gjxprzcku] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.preview-sample[b-2gjxprzcku] {
    padding: 0.25rem 0.5rem;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.75rem;
}

/* Modal loading */
.modal-loading[b-2gjxprzcku] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    gap: 1rem;
}

.modal-loading .spinner[b-2gjxprzcku] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-2gjxprzcku 1s linear infinite;
}

@keyframes spin-b-2gjxprzcku {
    to {
        transform: rotate(360deg);
    }
}

/* Error message */
.error-message[b-2gjxprzcku] {
    padding: 0.75rem 1rem;
    background: var(--danger-light);
    color: var(--danger);
    border: 1px solid var(--danger);
    border-radius: 6px;
    font-size: 0.875rem;
    margin-top: 1rem;
}

/* Levels Grid */
.levels-grid[b-2gjxprzcku] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
}

.level-item[b-2gjxprzcku] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.level-label[b-2gjxprzcku] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.level-label .required[b-2gjxprzcku] {
    color: var(--danger);
}

.level-input[b-2gjxprzcku] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.875rem;
    font-family: monospace;
    text-transform: uppercase;
    background: var(--bg);
    color: var(--text);
}

.level-input:focus[b-2gjxprzcku] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.level-input[b-2gjxprzcku]::placeholder {
    text-transform: none;
    font-family: inherit;
}

/* Info Banner */
.info-banner[b-2gjxprzcku] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
}

.info-banner.warning[b-2gjxprzcku] {
    background: rgba(245, 158, 11, 0.1);
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.info-banner.warning svg[b-2gjxprzcku] {
    flex-shrink: 0;
    color: #f59e0b;
}

/* Form label */
.form-label[b-2gjxprzcku] {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
}

.form-label .required[b-2gjxprzcku] {
    color: var(--danger);
    margin-left: 0.125rem;
}

/* Type text */
.type-text[b-2gjxprzcku] {
    font-size: 0.875rem;
    color: var(--text);
}

/* Bulk Create Wizard */
.bulk-create-wizard[b-2gjxprzcku] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-hint[b-2gjxprzcku] {
    margin: 0.25rem 0 0.75rem 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* Level Ranges */
.level-ranges[b-2gjxprzcku] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.level-range-item[b-2gjxprzcku] {
    padding: 1rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.level-range-header[b-2gjxprzcku] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: var(--text);
}

.level-name[b-2gjxprzcku] {
    font-size: 0.875rem;
}

.level-range-inputs[b-2gjxprzcku] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
}

.range-input-group[b-2gjxprzcku] {
    flex: 1;
}

.range-input-group label[b-2gjxprzcku] {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.375rem;
}

.prefix-input-wrapper[b-2gjxprzcku] {
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg);
}

.prefix-input-wrapper:focus-within[b-2gjxprzcku] {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-alpha);
}

.input-prefix[b-2gjxprzcku] {
    padding: 0.5rem 0.75rem;
    background: var(--bg-input);
    color: var(--text);
    font-family: var(--font-mono, monospace);
    font-size: 0.875rem;
    font-weight: 600;
    border-right: 1px solid var(--border);
    white-space: nowrap;
}

.range-input-group .form-input[b-2gjxprzcku] {
    width: 100%;
    text-align: center;
    font-family: var(--font-mono, monospace);
}

.range-input-group .form-input.has-prefix[b-2gjxprzcku] {
    border: none;
    border-radius: 0;
}

.range-input-group .form-input.has-prefix:focus[b-2gjxprzcku] {
    box-shadow: none;
}

/* Hide number input arrows */
.range-input-group input[type="number"][b-2gjxprzcku]::-webkit-outer-spin-button,
.range-input-group input[type="number"][b-2gjxprzcku]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.range-input-group input[type="number"][b-2gjxprzcku] {
    -moz-appearance: textfield;
}

.level-prefix-info[b-2gjxprzcku] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 400;
    margin-left: 0.5rem;
}

.range-separator[b-2gjxprzcku] {
    padding-bottom: 0.625rem;
    color: var(--text-secondary);
    font-size: 1.25rem;
}

/* Bulk Preview */
.bulk-preview[b-2gjxprzcku] {
    padding: 1.25rem;
    background: linear-gradient(135deg, var(--primary-alpha) 0%, transparent 100%);
    border: 1px solid var(--primary);
    border-radius: 12px;
}

.preview-header[b-2gjxprzcku] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 500;
}

.preview-count[b-2gjxprzcku] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.preview-count .count[b-2gjxprzcku] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text);
}

.preview-count .label[b-2gjxprzcku] {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.preview-samples[b-2gjxprzcku] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.preview-sample[b-2gjxprzcku] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: var(--primary);
    color: #ffffff;
    border-radius: 4px;
    font-family: var(--font-mono, monospace);
    font-size: 0.75rem;
    font-weight: 600;
}

.preview-more[b-2gjxprzcku] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    color: var(--text-secondary);
    font-size: 0.75rem;
}

/* Label Preview Viewer */
.label-preview-viewer[b-2gjxprzcku] {
    min-height: 500px;
    display: flex;
    flex-direction: column;
}

/* Conflict Warning */
.conflict-warning[b-2gjxprzcku] {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 10px;
}

.conflict-header[b-2gjxprzcku] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #b45309;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
}

.conflict-header svg[b-2gjxprzcku] {
    color: #f59e0b;
    flex-shrink: 0;
}

.conflict-paths[b-2gjxprzcku] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.conflict-path[b-2gjxprzcku] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: rgba(245, 158, 11, 0.2);
    color: #b45309;
    border-radius: 4px;
    font-family: var(--font-mono, monospace);
    font-size: 0.75rem;
    font-weight: 500;
}

.conflict-more[b-2gjxprzcku] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    color: #b45309;
    font-size: 0.75rem;
}

.skip-existing-label[b-2gjxprzcku] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text);
}

.skip-existing-label input[type="checkbox"][b-2gjxprzcku] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

.skip-info[b-2gjxprzcku] {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 6px;
    font-size: 0.8125rem;
    color: #059669;
}
/* /Components/Pages/WmsPro/LowStock.razor.rz.scp.css */
.low-stock-thumb[b-ue1v2b8mwf] {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
}

.low-stock-thumb-empty[b-ue1v2b8mwf] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
}

.low-stock-name[b-ue1v2b8mwf] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.low-stock-product[b-ue1v2b8mwf] {
    font-weight: 600;
    color: var(--color-text);
}

.low-stock-variant[b-ue1v2b8mwf] {
    font-size: 12px;
    color: var(--color-text-muted);
}

.shortage-badge[b-ue1v2b8mwf] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--color-danger-bg, #fee2e2);
    color: var(--color-danger, #dc2626);
    font-weight: 600;
    font-size: 12px;
}

.link-btn[b-ue1v2b8mwf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: var(--color-text-muted);
    transition: background 0.15s, color 0.15s;
}

.link-btn:hover[b-ue1v2b8mwf] {
    background: var(--color-surface-alt);
    color: var(--color-primary);
}

.th-image[b-ue1v2b8mwf] {
    width: 56px;
}

.td-image[b-ue1v2b8mwf] {
    width: 56px;
}
/* /Components/Pages/WmsPro/QuickPlacement.razor.rz.scp.css */
.qp-page[b-aldbid5h2l] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 20px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* ====== HEADER ====== */
.qp-header[b-aldbid5h2l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 14px;
    padding: 18px 22px;
}

.qp-header-left[b-aldbid5h2l] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.qp-header-icon[b-aldbid5h2l] {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

.qp-header h1[b-aldbid5h2l] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text, #0f172a);
    line-height: 1.2;
}

.qp-header p[b-aldbid5h2l] {
    margin: 4px 0 0 0;
    font-size: 13px;
    color: var(--color-text-secondary, #64748b);
}

.qp-header-kpis[b-aldbid5h2l] {
    display: flex;
    gap: 12px;
}

.qp-kpi[b-aldbid5h2l] {
    min-width: 110px;
    padding: 10px 16px;
    background: var(--color-surface-alt, #f8fafc);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 10px;
    text-align: center;
}

.qp-kpi-label[b-aldbid5h2l] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-secondary, #64748b);
    font-weight: 500;
}

.qp-kpi-value[b-aldbid5h2l] {
    margin-top: 2px;
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text, #0f172a);
    line-height: 1.1;
}

/* ====== MODE BAR ====== */
.qp-mode-bar[b-aldbid5h2l] {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 12px;
    padding: 10px 14px;
}

.qp-mode-label[b-aldbid5h2l] {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.qp-mode-tabs[b-aldbid5h2l] {
    display: inline-flex;
    background: var(--color-surface-alt, #f1f5f9);
    border-radius: 10px;
    padding: 4px;
    gap: 2px;
}

.qp-mode-tab[b-aldbid5h2l] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary, #64748b);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}

.qp-mode-tab:hover[b-aldbid5h2l] {
    color: var(--color-text, #0f172a);
}

.qp-mode-tab.active[b-aldbid5h2l] {
    background: var(--color-surface, #fff);
    color: var(--color-primary, #3b82f6);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ====== QUICK PANEL ====== */
.qp-quick-panel[b-aldbid5h2l] {
    background: var(--color-surface, #fff);
    border: 2px solid var(--color-primary, #3b82f6);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
}

.qp-quick-head[b-aldbid5h2l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.qp-quick-title[b-aldbid5h2l] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-primary, #3b82f6);
}

.qp-quick-direction[b-aldbid5h2l] {
    display: inline-flex;
    gap: 6px;
    background: var(--color-surface-alt, #f1f5f9);
    padding: 4px;
    border-radius: 10px;
}

.qp-dir-btn[b-aldbid5h2l] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary, #64748b);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}

.qp-dir-btn:hover[b-aldbid5h2l] {
    color: var(--color-text, #0f172a);
}

.qp-dir-btn.in.active[b-aldbid5h2l] {
    background: var(--color-success, #16a34a);
    color: #fff;
    box-shadow: 0 2px 6px rgba(22, 163, 74, 0.25);
}

.qp-dir-btn.out.active[b-aldbid5h2l] {
    background: var(--color-danger, #dc2626);
    color: #fff;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25);
}

.qp-quick-scan-row[b-aldbid5h2l] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qp-quick-input[b-aldbid5h2l] {
    font-size: 18px;
    font-weight: 500;
    padding-top: 14px;
    padding-bottom: 14px;
}

.qp-scan-input-wrapper.dir-in[b-aldbid5h2l] {
    border-color: var(--color-success, #16a34a);
}

.qp-scan-input-wrapper.dir-in:focus-within[b-aldbid5h2l] {
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}

.qp-scan-input-wrapper.dir-out[b-aldbid5h2l] {
    border-color: var(--color-danger, #dc2626);
}

.qp-scan-input-wrapper.dir-out:focus-within[b-aldbid5h2l] {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.qp-quick-flash[b-aldbid5h2l] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    animation: qp-flash-in-b-aldbid5h2l 0.25s ease-out;
}

.qp-quick-flash.success[b-aldbid5h2l] {
    background: var(--color-success-bg, #dcfce7);
    color: var(--color-success, #15803d);
    border: 1px solid rgba(22, 163, 74, 0.25);
}

.qp-quick-flash.error[b-aldbid5h2l] {
    background: var(--color-danger-bg, #fef2f2);
    color: var(--color-danger, #b91c1c);
    border: 1px solid rgba(220, 38, 38, 0.25);
}

@keyframes qp-flash-in-b-aldbid5h2l {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ====== STEPS ====== */
.qp-steps[b-aldbid5h2l] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
}

@media (max-width: 900px) {
    .qp-steps[b-aldbid5h2l] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.qp-step[b-aldbid5h2l] {
    background: var(--color-surface, #fff);
    border: 2px solid var(--color-border, #e2e8f0);
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
    min-height: 160px;
    min-width: 0;
    overflow: hidden;
}

.qp-step.active[b-aldbid5h2l] {
    border-color: var(--color-primary, #3b82f6);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
}

.qp-step.completed[b-aldbid5h2l] {
    border-color: var(--color-success, #16a34a);
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.04) 0%, transparent 60%);
}

.qp-step.disabled[b-aldbid5h2l] {
    opacity: 0.55;
    border-style: dashed;
}

.qp-step-head[b-aldbid5h2l] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.qp-step-number[b-aldbid5h2l] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-surface-alt, #f1f5f9);
    color: var(--color-text-secondary, #64748b);
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.qp-step.active .qp-step-number[b-aldbid5h2l] {
    background: var(--color-primary, #3b82f6);
    color: #fff;
}

.qp-step.completed .qp-step-number[b-aldbid5h2l] {
    background: var(--color-success, #16a34a);
    color: #fff;
}

.qp-step-title[b-aldbid5h2l] {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text, #0f172a);
    flex: 1;
}

.qp-step-reset[b-aldbid5h2l] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 6px;
    color: var(--color-text-secondary, #64748b);
    cursor: pointer;
    transition: all 0.15s;
}

.qp-step-reset:hover[b-aldbid5h2l] {
    background: var(--color-hover, #f1f5f9);
    color: var(--color-text, #0f172a);
}

.qp-step-disabled-msg[b-aldbid5h2l] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    font-size: 13px;
    color: var(--color-text-secondary, #94a3b8);
    text-align: center;
}

/* ====== SCAN ROW ====== */
.qp-scan-row[b-aldbid5h2l] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qp-scan-input-wrapper[b-aldbid5h2l] {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    background: var(--color-input-bg, #fff);
    border: 2px solid var(--color-border, #cbd5e1);
    border-radius: 10px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.qp-scan-input-wrapper:focus-within[b-aldbid5h2l] {
    border-color: var(--color-primary, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.qp-scan-input-wrapper.loading[b-aldbid5h2l] {
    border-color: var(--color-primary, #3b82f6);
}

.qp-scan-input-wrapper.error[b-aldbid5h2l] {
    border-color: var(--color-danger, #dc2626);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.qp-scan-icon[b-aldbid5h2l] {
    margin-left: 12px;
    color: var(--color-text-secondary, #64748b);
    flex-shrink: 0;
}

.qp-scan-input[b-aldbid5h2l] {
    flex: 1;
    border: none;
    background: transparent;
    padding: 12px 12px 12px 10px;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text, #0f172a);
    outline: none;
    width: 100%;
}

.qp-scan-input:disabled[b-aldbid5h2l] {
    color: var(--color-text-secondary, #94a3b8);
    cursor: not-allowed;
}

.qp-spinner[b-aldbid5h2l] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-border, #e2e8f0);
    border-top-color: var(--color-primary, #3b82f6);
    border-radius: 50%;
    animation: qp-spin-b-aldbid5h2l 0.6s linear infinite;
    margin-right: 12px;
}

.qp-spinner-light[b-aldbid5h2l] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: qp-spin-b-aldbid5h2l 0.6s linear infinite;
}

@keyframes qp-spin-b-aldbid5h2l {
    to { transform: rotate(360deg); }
}

.qp-camera-btn[b-aldbid5h2l] {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-alt, #f1f5f9);
    border: 1px solid var(--color-border, #cbd5e1);
    border-radius: 10px;
    color: var(--color-text-secondary, #475569);
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.qp-camera-btn:hover[b-aldbid5h2l] {
    background: var(--color-hover, #e2e8f0);
    color: var(--color-text, #0f172a);
}

.qp-camera-btn.active[b-aldbid5h2l] {
    background: var(--color-danger, #dc2626);
    border-color: var(--color-danger, #dc2626);
    color: #fff;
}

.qp-step-error[b-aldbid5h2l] {
    background: var(--color-danger-bg, #fef2f2);
    border: 1px solid var(--color-danger-border, #fecaca);
    color: var(--color-danger, #b91c1c);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
}

/* ====== CONFIRMED CARD ====== */
.qp-confirmed[b-aldbid5h2l] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--color-success-bg, #dcfce7);
    border: 1px solid rgba(22, 163, 74, 0.25);
    border-radius: 10px;
}

.qp-confirmed-badge[b-aldbid5h2l] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-success, #16a34a);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.qp-confirmed-body[b-aldbid5h2l] {
    flex: 1;
    min-width: 0;
}

.qp-confirmed-line1[b-aldbid5h2l] {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text, #0f172a);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    line-height: 1.3;
}

.qp-confirmed-line2[b-aldbid5h2l] {
    margin-top: 4px;
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 11px;
    min-width: 0;
}

.qp-confirmed-line2 > *[b-aldbid5h2l] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qp-confirmed-line2 code[b-aldbid5h2l] {
    background: rgba(255, 255, 255, 0.6);
    padding: 2px 8px;
    border-radius: 4px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    color: var(--color-text-secondary, #475569);
}

.qp-confirmed-tag[b-aldbid5h2l] {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(22, 163, 74, 0.15);
    color: var(--color-success, #15803d);
    font-weight: 500;
}

/* ====== QTY ROW ====== */
.qp-qty-row[b-aldbid5h2l] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qp-qty-step[b-aldbid5h2l] {
    width: 42px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-alt, #f1f5f9);
    border: 1px solid var(--color-border, #cbd5e1);
    border-radius: 10px;
    color: var(--color-text, #0f172a);
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.qp-qty-step:hover:not(:disabled)[b-aldbid5h2l] {
    background: var(--color-hover, #e2e8f0);
}

.qp-qty-step:disabled[b-aldbid5h2l] {
    opacity: 0.5;
    cursor: not-allowed;
}

.qp-qty-input[b-aldbid5h2l] {
    flex: 1;
    height: 44px;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    border: 2px solid var(--color-border, #cbd5e1);
    border-radius: 10px;
    background: var(--color-input-bg, #fff);
    color: var(--color-text, #0f172a);
    outline: none;
    padding: 0 8px;
    min-width: 0;
    transition: border-color 0.15s, box-shadow 0.15s;
    -moz-appearance: textfield;
}

.qp-qty-input[b-aldbid5h2l]::-webkit-outer-spin-button,
.qp-qty-input[b-aldbid5h2l]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.qp-qty-input:focus[b-aldbid5h2l] {
    border-color: var(--color-primary, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.qp-actions-row[b-aldbid5h2l] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 4px;
}

.qp-submit-btn[b-aldbid5h2l] {
    height: 42px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    min-width: 0;
}

.qp-submit-btn.add[b-aldbid5h2l] {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    box-shadow: 0 2px 6px rgba(22, 163, 74, 0.25);
}

.qp-submit-btn.add:hover:not(:disabled)[b-aldbid5h2l] {
    filter: brightness(1.05);
    box-shadow: 0 4px 10px rgba(22, 163, 74, 0.35);
}

.qp-submit-btn.remove[b-aldbid5h2l] {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25);
}

.qp-submit-btn.remove:hover:not(:disabled)[b-aldbid5h2l] {
    filter: brightness(1.05);
    box-shadow: 0 4px 10px rgba(220, 38, 38, 0.35);
}

.qp-submit-btn:disabled[b-aldbid5h2l] {
    opacity: 0.6;
    cursor: not-allowed;
}

.qp-submit-btn span[b-aldbid5h2l] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qp-hint[b-aldbid5h2l] {
    margin-top: 2px;
    font-size: 12px;
    color: var(--color-text-secondary, #94a3b8);
    text-align: center;
}

/* ====== SERIAL PANEL ====== */
.qp-step.serial-mode[b-aldbid5h2l] {
    grid-column: span 2;
    min-width: 0;
}

@media (max-width: 900px) {
    .qp-step.serial-mode[b-aldbid5h2l] {
        grid-column: span 1;
    }
}

.qp-serial-count-badge[b-aldbid5h2l] {
    display: inline-block;
    margin-left: 8px;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    background: var(--color-primary, #3b82f6);
    color: #fff;
    border-radius: 999px;
    min-width: 22px;
    text-align: center;
}

.qp-serial-input-row[b-aldbid5h2l] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qp-serial-add-btn[b-aldbid5h2l] {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary, #3b82f6);
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.qp-serial-add-btn:hover:not(:disabled)[b-aldbid5h2l] {
    filter: brightness(1.05);
}

.qp-serial-add-btn:disabled[b-aldbid5h2l] {
    opacity: 0.5;
    cursor: not-allowed;
}

.qp-serial-list[b-aldbid5h2l] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 200px;
    overflow-y: auto;
    padding: 8px;
    background: var(--color-surface-alt, #f8fafc);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 10px;
}

.qp-serial-chip[b-aldbid5h2l] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 4px 4px 10px;
    background: #fff;
    border: 1px solid var(--color-border, #cbd5e1);
    border-radius: 20px;
    font-size: 13px;
    animation: qp-serial-in-b-aldbid5h2l 0.2s ease-out;
}

.qp-serial-chip code[b-aldbid5h2l] {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-weight: 600;
    color: var(--color-text, #0f172a);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qp-serial-index[b-aldbid5h2l] {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-text-secondary, #64748b);
    background: var(--color-surface-alt, #f1f5f9);
    padding: 2px 6px;
    border-radius: 6px;
}

.qp-serial-remove[b-aldbid5h2l] {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--color-text-secondary, #94a3b8);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.15s;
}

.qp-serial-remove:hover:not(:disabled)[b-aldbid5h2l] {
    background: var(--color-danger-bg, #fee2e2);
    color: var(--color-danger, #b91c1c);
}

.qp-serial-remove:disabled[b-aldbid5h2l] {
    opacity: 0.4;
    cursor: not-allowed;
}

@keyframes qp-serial-in-b-aldbid5h2l {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* OCR buton varyantı (yazı ikonu) */
.qp-camera-btn.ocr[b-aldbid5h2l] {
    background: #ede9fe;
    border-color: #c4b5fd;
    color: #6d28d9;
}
.qp-camera-btn.ocr:hover[b-aldbid5h2l] { background: #ddd6fe; }
.qp-camera-btn.ocr.active[b-aldbid5h2l] {
    background: var(--color-danger, #dc2626);
    border-color: var(--color-danger, #dc2626);
    color: #fff;
}

/* OCR paneli */
.qp-ocr-panel[b-aldbid5h2l] {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 8px;
}

.qp-ocr-video[b-aldbid5h2l] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.qp-ocr-overlay[b-aldbid5h2l] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.qp-ocr-region[b-aldbid5h2l] {
    position: relative;
    width: 80%;
    height: 25%;
    border: 2px solid #a78bfa;
    border-radius: 10px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}

.qp-ocr-scan-line[b-aldbid5h2l] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #a78bfa, transparent);
    box-shadow: 0 0 10px 1px rgba(167, 139, 250, 0.7);
    animation: qp-ocr-scan-b-aldbid5h2l 1.6s ease-in-out infinite;
}

@keyframes qp-ocr-scan-b-aldbid5h2l {
    0%, 100% { top: 0; }
    50% { top: calc(100% - 2px); }
}

.qp-ocr-hint[b-aldbid5h2l] {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 14px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 999px;
    white-space: nowrap;
    max-width: calc(100% - 32px);
    overflow: hidden;
    text-overflow: ellipsis;
}

.qp-ocr-loading[b-aldbid5h2l],
.qp-ocr-error[b-aldbid5h2l] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #fff;
    background: rgba(0, 0, 0, 0.7);
    z-index: 20;
    padding: 20px;
    text-align: center;
}

.qp-ocr-error[b-aldbid5h2l] {
    color: #fecaca;
}

.qp-ocr-actions[b-aldbid5h2l] {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 20;
}

.qp-ocr-capture-btn[b-aldbid5h2l] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(109, 40, 217, 0.4);
    transition: all 0.15s;
}

.qp-ocr-capture-btn:hover:not(:disabled)[b-aldbid5h2l] {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.qp-ocr-capture-btn:disabled[b-aldbid5h2l] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* ====== HISTORY ====== */
.qp-history[b-aldbid5h2l] {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 14px;
    overflow: hidden;
}

.qp-history-header[b-aldbid5h2l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    background: var(--color-surface-alt, #f8fafc);
}

.qp-history-header h3[b-aldbid5h2l] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text, #0f172a);
}

.qp-history-count[b-aldbid5h2l] {
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 10px;
    background: var(--color-border, #e2e8f0);
    color: var(--color-text-secondary, #64748b);
    font-weight: 500;
}

.qp-history-empty[b-aldbid5h2l] {
    padding: 48px 20px;
    text-align: center;
    color: var(--color-text-secondary, #94a3b8);
}

.qp-history-empty svg[b-aldbid5h2l] {
    opacity: 0.4;
    margin-bottom: 10px;
}

.qp-history-empty p[b-aldbid5h2l] {
    margin: 0;
    font-size: 13px;
}

.qp-history-table[b-aldbid5h2l] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.qp-history-table thead[b-aldbid5h2l] {
    background: var(--color-surface-alt, #f8fafc);
}

.qp-history-table th[b-aldbid5h2l] {
    text-align: left;
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-secondary, #64748b);
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.qp-history-table td[b-aldbid5h2l] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border-light, #f1f5f9);
    color: var(--color-text, #0f172a);
    vertical-align: middle;
}

.qp-history-table tbody tr:last-child td[b-aldbid5h2l] {
    border-bottom: none;
}

.qp-history-table tbody tr.just-added[b-aldbid5h2l] {
    background: rgba(22, 163, 74, 0.08);
    animation: qp-flash-b-aldbid5h2l 2s ease-out;
}

@keyframes qp-flash-b-aldbid5h2l {
    0%, 30% { background: rgba(22, 163, 74, 0.22); }
    100% { background: transparent; }
}

.qp-history-table tbody tr.reversed[b-aldbid5h2l] {
    opacity: 0.5;
}

.qp-history-table tbody tr.reversed td[b-aldbid5h2l] {
    text-decoration: line-through;
    text-decoration-color: rgba(100, 116, 139, 0.5);
}

.qp-history-table tbody tr.reversed td:last-child[b-aldbid5h2l] {
    text-decoration: none;
}

.qp-history-table .th-number[b-aldbid5h2l],
.qp-history-table .td-number[b-aldbid5h2l] {
    text-align: right;
}

.qp-history-table .td-right[b-aldbid5h2l] {
    text-align: right;
}

.qp-history-table code.qp-subtle[b-aldbid5h2l] {
    display: inline-block;
    margin-top: 2px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 11px;
    color: var(--color-text-secondary, #94a3b8);
}

.nowrap[b-aldbid5h2l] {
    white-space: nowrap;
}

.qp-delta[b-aldbid5h2l] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 13px;
    min-width: 48px;
    text-align: center;
}

.qp-delta.in[b-aldbid5h2l] {
    background: var(--color-success-bg, #dcfce7);
    color: var(--color-success, #15803d);
}

.qp-delta.out[b-aldbid5h2l] {
    background: var(--color-danger-bg, #fee2e2);
    color: var(--color-danger, #b91c1c);
}

.qp-undo-btn[b-aldbid5h2l] {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--color-border, #cbd5e1);
    border-radius: 8px;
    color: var(--color-text-secondary, #64748b);
    cursor: pointer;
    transition: all 0.15s;
}

.qp-undo-btn:hover:not(:disabled)[b-aldbid5h2l] {
    background: var(--color-danger-bg, #fef2f2);
    color: var(--color-danger, #b91c1c);
    border-color: var(--color-danger-border, #fecaca);
}

.qp-undo-btn:disabled[b-aldbid5h2l] {
    opacity: 0.6;
    cursor: not-allowed;
}

.qp-reversed-tag[b-aldbid5h2l] {
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--color-surface-alt, #f1f5f9);
    color: var(--color-text-secondary, #94a3b8);
    font-weight: 500;
    text-decoration: none !important;
}
/* /Components/Pages/WmsPro/Scan.razor.rz.scp.css */
.scan-page[b-3h858qvcrz] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 20px;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* ===== SCAN BAR ===== */
.scan-bar[b-3h858qvcrz] {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 12px;
    padding: 12px 16px;
}

.scan-input-wrapper[b-3h858qvcrz] {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.scan-icon[b-3h858qvcrz] {
    position: absolute;
    left: 14px;
    color: var(--color-text-secondary, #64748b);
    pointer-events: none;
}

.scan-input[b-3h858qvcrz] {
    width: 100%;
    padding: 14px 100px 14px 48px;
    font-size: 18px;
    font-weight: 500;
    border: 2px solid var(--color-border, #cbd5e1);
    border-radius: 10px;
    background: var(--color-input-bg, #fff);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.scan-input:focus[b-3h858qvcrz] {
    border-color: var(--color-primary, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.scan-input:disabled[b-3h858qvcrz] {
    background: var(--color-surface-alt, #f1f5f9);
    color: var(--color-text-secondary, #64748b);
    cursor: not-allowed;
}

.scan-camera-btn[b-3h858qvcrz] {
    position: absolute;
    right: 46px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-alt, #f1f5f9);
    border: 1px solid var(--color-border, #cbd5e1);
    border-radius: 8px;
    cursor: pointer;
    color: var(--color-text-secondary, #475569);
}

.scan-camera-btn:hover[b-3h858qvcrz] { background: var(--color-hover, #e2e8f0); }
.scan-camera-btn.active[b-3h858qvcrz] { background: var(--color-danger, #dc2626); border-color: var(--color-danger, #dc2626); color: #fff; }

.scan-clear[b-3h858qvcrz] {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    color: var(--color-text-secondary, #64748b);
    border-radius: 6px;
    display: flex;
    align-items: center;
}
.scan-clear:hover[b-3h858qvcrz] { background: var(--color-hover, #f1f5f9); }

.scan-status-loading[b-3h858qvcrz] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-text-secondary, #64748b);
}

.spinner[b-3h858qvcrz] {
    width: 14px;
    height: 14px;
    border: 2px solid var(--color-border, #cbd5e1);
    border-top-color: var(--color-primary, #3b82f6);
    border-radius: 50%;
    animation: spin-b-3h858qvcrz 0.6s linear infinite;
}

@keyframes spin-b-3h858qvcrz { to { transform: rotate(360deg); } }

.scan-input-wrapper.loading .scan-input[b-3h858qvcrz] {
    border-color: var(--color-primary, #3b82f6);
}

/* ===== EMPTY / NOT FOUND ===== */
.empty-state-lg[b-3h858qvcrz] {
    padding: 60px 20px;
    text-align: center;
    color: var(--color-text-secondary, #64748b);
    background: var(--color-surface, #fff);
    border: 1px dashed var(--color-border, #e2e8f0);
    border-radius: 14px;
}

.empty-state-lg svg[b-3h858qvcrz] {
    margin-bottom: 16px;
    opacity: 0.4;
}

.empty-state-lg h3[b-3h858qvcrz] { margin: 0 0 8px 0; color: var(--color-text, #0f172a); font-size: 18px; }
.empty-state-lg p[b-3h858qvcrz] { margin: 0 0 24px 0; font-size: 14px; }

.scan-hint-grid[b-3h858qvcrz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    max-width: 720px;
    margin: 0 auto;
}

.scan-hint-item[b-3h858qvcrz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px;
    background: var(--color-surface-alt, #f8fafc);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 10px;
}

.scan-hint-item code[b-3h858qvcrz] {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 13px;
    font-weight: 700;
    padding: 3px 10px;
    background: #fff;
    border-radius: 6px;
    color: var(--color-primary, #1d4ed8);
}

.scan-hint-item span[b-3h858qvcrz] {
    font-size: 12px;
    color: var(--color-text-secondary, #64748b);
}

.alert-error[b-3h858qvcrz] {
    background: var(--color-danger-bg, #fef2f2);
    border: 1px solid var(--color-danger-border, #fecaca);
    color: var(--color-danger, #dc2626);
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
}

/* ===== SCOPE STRIP ===== */
.scope-strip[b-3h858qvcrz] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 18px 22px;
    border-radius: 14px;
    color: #fff;
}

.scope-strip.warehouse[b-3h858qvcrz] { background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%); }
.scope-strip.location[b-3h858qvcrz] { background: linear-gradient(135deg, #10b981 0%, #047857 100%); }
.scope-strip.locationprefix[b-3h858qvcrz] { background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%); }
.scope-strip.product[b-3h858qvcrz] { background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%); }

.scope-badge[b-3h858qvcrz] {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.scope-info[b-3h858qvcrz] {
    min-width: 0;
}

.scope-label[b-3h858qvcrz] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    opacity: 0.85;
}

.scope-title[b-3h858qvcrz] {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
    margin-top: 2px;
    word-break: break-all;
}

.scope-sub[b-3h858qvcrz] {
    margin-top: 2px;
    font-size: 13px;
    opacity: 0.9;
    word-break: break-all;
}

.scope-kpis[b-3h858qvcrz] {
    display: flex;
    gap: 16px;
}

.scope-kpi[b-3h858qvcrz] {
    text-align: right;
    min-width: 80px;
}

.scope-kpi-label[b-3h858qvcrz] {
    font-size: 11px;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.scope-kpi-value[b-3h858qvcrz] {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    margin-top: 2px;
}

/* ===== PRODUCT QUICK CARD ===== */
.product-quick-card[b-3h858qvcrz] {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 12px;
    padding: 18px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.product-quick-name[b-3h858qvcrz] {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text, #0f172a);
}

.product-quick-meta[b-3h858qvcrz] {
    margin-top: 4px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--color-text-secondary, #64748b);
}

.product-quick-meta strong[b-3h858qvcrz] {
    color: var(--color-text, #0f172a);
    margin-right: 4px;
}

.serial-tag[b-3h858qvcrz] {
    display: inline-block;
    padding: 2px 10px;
    background: #fef3c7;
    color: #a16207;
    border: 1px solid #fde68a;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.product-quick-link[b-3h858qvcrz] {
    padding: 10px 16px;
    background: var(--color-primary, #3b82f6);
    color: #fff;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: filter 0.15s;
}

.product-quick-link:hover[b-3h858qvcrz] {
    filter: brightness(1.05);
    text-decoration: none;
    color: #fff;
}

/* ===== PANEL + TABLE (simple, shared-ish) ===== */
.panel[b-3h858qvcrz] {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 12px;
    overflow: hidden;
}

.panel-header[b-3h858qvcrz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    background: var(--color-surface-alt, #f8fafc);
}

.panel-header h3[b-3h858qvcrz] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text, #0f172a);
}

.panel-count[b-3h858qvcrz] {
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 10px;
    background: var(--color-border, #e2e8f0);
    color: var(--color-text-secondary, #64748b);
    font-weight: 500;
}

.panel-body.no-padding[b-3h858qvcrz] { padding: 0; }

.simple-table[b-3h858qvcrz] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.simple-table thead[b-3h858qvcrz] {
    background: var(--color-surface-alt, #f8fafc);
}

.simple-table th[b-3h858qvcrz] {
    text-align: left;
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-secondary, #64748b);
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.simple-table td[b-3h858qvcrz] {
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border-light, #f1f5f9);
    color: var(--color-text, #0f172a);
    vertical-align: middle;
}

.simple-table tbody tr:last-child td[b-3h858qvcrz] { border-bottom: none; }
.simple-table tbody tr:hover[b-3h858qvcrz] { background: var(--color-hover, #f8fafc); }

.simple-table .th-number[b-3h858qvcrz], .simple-table .td-number[b-3h858qvcrz] { text-align: right; }

.simple-table code[b-3h858qvcrz] {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 12px;
    background: var(--color-surface-alt, #f1f5f9);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--color-text-secondary, #475569);
}

.simple-table code.subtle[b-3h858qvcrz] {
    display: block;
    margin-top: 2px;
    background: transparent;
    padding: 0;
    color: var(--color-text-secondary, #94a3b8);
}
/* /Components/Pages/WmsPro/StockMovements.razor.rz.scp.css */
.stock-movements-page[b-q4e48tco1p] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 20px;
}

/* Scan bar */
.scan-bar[b-q4e48tco1p] {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.scan-input-wrapper[b-q4e48tco1p] {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.scan-icon[b-q4e48tco1p] {
    position: absolute;
    left: 14px;
    color: var(--color-text-secondary, #64748b);
    pointer-events: none;
}

.scan-input[b-q4e48tco1p] {
    width: 100%;
    padding: 14px 100px 14px 48px;
    font-size: 18px;
    font-weight: 500;
    border: 2px solid var(--color-border, #cbd5e1);
    border-radius: 10px;
    background: var(--color-input-bg, #fff);
    color: var(--color-text, #0f172a);
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}

.scan-input:disabled[b-q4e48tco1p] {
    background: var(--color-surface-alt, #f1f5f9);
    color: var(--color-text-secondary, #64748b);
    cursor: not-allowed;
}

.scan-camera-btn[b-q4e48tco1p] {
    position: absolute;
    right: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--color-surface-alt, #f1f5f9);
    border: 1px solid var(--color-border, #cbd5e1);
    color: var(--color-text-secondary, #475569);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}

.scan-camera-btn:hover[b-q4e48tco1p] {
    background: var(--color-hover, #e2e8f0);
    color: var(--color-text, #0f172a);
}

.scan-camera-btn.active[b-q4e48tco1p] {
    background: var(--color-danger, #dc2626);
    border-color: var(--color-danger, #dc2626);
    color: #fff;
}

.scan-camera-btn.active:hover[b-q4e48tco1p] {
    background: #b91c1c;
}

.scan-input:focus[b-q4e48tco1p] {
    border-color: var(--color-primary, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.scan-clear[b-q4e48tco1p] {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    color: var(--color-text-secondary, #64748b);
    border-radius: 6px;
    display: flex;
    align-items: center;
}

.scan-clear:hover[b-q4e48tco1p] {
    background: var(--color-hover, #f1f5f9);
}

.scan-status[b-q4e48tco1p] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-text-secondary, #64748b);
}

.spinner[b-q4e48tco1p] {
    width: 14px;
    height: 14px;
    border: 2px solid var(--color-border, #cbd5e1);
    border-top-color: var(--color-primary, #3b82f6);
    border-radius: 50%;
    animation: spin-b-q4e48tco1p 0.6s linear infinite;
}

@keyframes spin-b-q4e48tco1p {
    to { transform: rotate(360deg); }
}

/* Empty/Not found state */
.empty-state-lg[b-q4e48tco1p] {
    padding: 80px 20px;
    text-align: center;
    color: var(--color-text-secondary, #64748b);
}

.empty-state-lg svg[b-q4e48tco1p] {
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state-lg h3[b-q4e48tco1p] {
    margin: 0 0 8px 0;
    font-size: 18px;
    color: var(--color-text, #0f172a);
}

.empty-state-lg p[b-q4e48tco1p] {
    margin: 0;
    font-size: 14px;
}

/* Alert */
.alert-error[b-q4e48tco1p] {
    background: var(--color-danger-bg, #fef2f2);
    border: 1px solid var(--color-danger-border, #fecaca);
    color: var(--color-danger, #dc2626);
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
}

/* Product strip */
.product-strip[b-q4e48tco1p] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 12px;
    padding: 20px 24px;
    align-items: center;
}

.product-name[b-q4e48tco1p] {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text, #0f172a);
    margin-bottom: 8px;
}

.product-meta[b-q4e48tco1p] {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 14px;
    color: var(--color-text-secondary, #64748b);
}

.meta-item strong[b-q4e48tco1p] {
    color: var(--color-text, #0f172a);
    margin-right: 4px;
    font-weight: 500;
}

.total-qty-card[b-q4e48tco1p] {
    text-align: center;
    padding: 12px 28px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
    border-radius: 10px;
    min-width: 160px;
}

.total-qty-label[b-q4e48tco1p] {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
}

.total-qty-value[b-q4e48tco1p] {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
    margin-top: 4px;
}

.total-qty-sub[b-q4e48tco1p] {
    font-size: 12px;
    opacity: 0.85;
    margin-top: 4px;
}

/* Two column grid */
.two-col-grid[b-q4e48tco1p] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
}

@media (max-width: 1024px) {
    .two-col-grid[b-q4e48tco1p] {
        grid-template-columns: 1fr;
    }
}

/* Panels */
.panel[b-q4e48tco1p] {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 12px;
    overflow: hidden;
}

.panel-header[b-q4e48tco1p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    background: var(--color-surface-alt, #f8fafc);
}

.panel-header h3[b-q4e48tco1p] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text, #0f172a);
}

.panel-count[b-q4e48tco1p] {
    font-size: 12px;
    background: var(--color-border, #e2e8f0);
    padding: 2px 10px;
    border-radius: 10px;
    color: var(--color-text-secondary, #64748b);
    font-weight: 500;
}

.panel-body[b-q4e48tco1p] {
    padding: 16px 20px;
}

.panel-body.no-padding[b-q4e48tco1p] {
    padding: 0;
}

.empty-inline[b-q4e48tco1p] {
    padding: 40px 20px;
    text-align: center;
    color: var(--color-text-secondary, #94a3b8);
    font-size: 13px;
}

/* Simple table */
.simple-table[b-q4e48tco1p] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.simple-table thead[b-q4e48tco1p] {
    background: var(--color-surface-alt, #f8fafc);
}

.simple-table th[b-q4e48tco1p] {
    text-align: left;
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-secondary, #64748b);
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.simple-table td[b-q4e48tco1p] {
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border-light, #f1f5f9);
    color: var(--color-text, #0f172a);
}

.simple-table tbody tr:last-child td[b-q4e48tco1p] {
    border-bottom: none;
}

.simple-table tbody tr:hover[b-q4e48tco1p] {
    background: var(--color-hover, #f8fafc);
}

.simple-table .th-number[b-q4e48tco1p],
.simple-table .td-number[b-q4e48tco1p] {
    text-align: right;
}

.simple-table code[b-q4e48tco1p] {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    background: var(--color-surface-alt, #f1f5f9);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--color-text-secondary, #475569);
}

.nowrap[b-q4e48tco1p] {
    white-space: nowrap;
}

/* Delta badge */
.delta-badge[b-q4e48tco1p] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 13px;
    min-width: 48px;
    text-align: center;
}

.delta-badge.in[b-q4e48tco1p] {
    background: var(--color-success-bg, #dcfce7);
    color: var(--color-success, #15803d);
}

.delta-badge.out[b-q4e48tco1p] {
    background: var(--color-danger-bg, #fee2e2);
    color: var(--color-danger, #b91c1c);
}

.badge-type[b-q4e48tco1p] {
    display: inline-block;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.2px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.badge-type.type-placement[b-q4e48tco1p] {
    background: #dbeafe;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.badge-type.type-manual[b-q4e48tco1p] {
    background: #f1f5f9;
    color: #475569;
    border-color: #e2e8f0;
}

.badge-type.type-receiving[b-q4e48tco1p] {
    background: #dcfce7;
    color: #15803d;
    border-color: #bbf7d0;
}

.badge-type.type-picking[b-q4e48tco1p] {
    background: #ede9fe;
    color: #6d28d9;
    border-color: #ddd6fe;
}

.badge-type.type-transfer[b-q4e48tco1p] {
    background: #e0e7ff;
    color: #4338ca;
    border-color: #c7d2fe;
}

.badge-type.type-count[b-q4e48tco1p] {
    background: #fef3c7;
    color: #a16207;
    border-color: #fde68a;
}

.badge-type.type-return[b-q4e48tco1p] {
    background: #ffe4e6;
    color: #be123c;
    border-color: #fecdd3;
}

/* Adjust form */
.form-group[b-q4e48tco1p] {
    margin-bottom: 14px;
}

.form-group label[b-q4e48tco1p] {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text, #0f172a);
    margin-bottom: 6px;
}

.form-group .required[b-q4e48tco1p] {
    color: var(--color-danger, #dc2626);
}

.delta-input-row[b-q4e48tco1p] {
    display: flex;
    gap: 6px;
    align-items: stretch;
}

.delta-sign[b-q4e48tco1p] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    background: var(--color-surface, #fff);
    border: 2px solid var(--color-border, #cbd5e1);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary, #64748b);
    transition: all 0.15s;
}

.delta-sign:hover:not(:disabled)[b-q4e48tco1p] {
    border-color: var(--color-border-strong, #94a3b8);
}

.delta-sign.active.positive[b-q4e48tco1p] {
    background: var(--color-success-bg, #dcfce7);
    border-color: var(--color-success, #16a34a);
    color: var(--color-success, #15803d);
}

.delta-sign.active.negative[b-q4e48tco1p] {
    background: var(--color-danger-bg, #fee2e2);
    border-color: var(--color-danger, #dc2626);
    color: var(--color-danger, #b91c1c);
}

.delta-sign:disabled[b-q4e48tco1p] {
    opacity: 0.6;
    cursor: not-allowed;
}

.delta-input[b-q4e48tco1p] {
    flex: 1;
    text-align: right;
    font-size: 16px;
    font-weight: 600;
}

.adjust-actions[b-q4e48tco1p] {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

/* Seri takipli ürün için uyarı */
.serial-notice[b-q4e48tco1p] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #f59e0b;
    border-radius: 10px;
    color: #92400e;
}

.serial-notice > svg[b-q4e48tco1p] {
    flex-shrink: 0;
    color: #d97706;
}

.serial-notice > div[b-q4e48tco1p] {
    flex: 1;
    min-width: 0;
}

.serial-notice strong[b-q4e48tco1p] {
    display: block;
    font-size: 14px;
    margin-bottom: 6px;
    color: #78350f;
}

.serial-notice p[b-q4e48tco1p] {
    margin: 0 0 10px 0;
    font-size: 13px;
    line-height: 1.5;
}

.serial-notice-link[b-q4e48tco1p] {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: #b45309;
    text-decoration: none;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    transition: background 0.15s;
}

.serial-notice-link:hover[b-q4e48tco1p] {
    background: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

/* Hareket satırında seri listesi */
.movement-serials[b-q4e48tco1p] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 280px;
}

.movement-serials-head[b-q4e48tco1p] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-primary, #1d4ed8);
}

.movement-serials-chips[b-q4e48tco1p] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.serial-chip[b-q4e48tco1p] {
    display: inline-block;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 11px;
    padding: 1px 7px;
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.serial-more[b-q4e48tco1p] {
    display: inline-block;
    font-size: 11px;
    padding: 1px 7px;
    background: var(--color-surface-alt, #f1f5f9);
    color: var(--color-text-secondary, #475569);
    border-radius: 6px;
    font-weight: 600;
    cursor: help;
}

.movement-note[b-q4e48tco1p] {
    margin-top: 4px;
    font-size: 12px;
    color: var(--color-text-secondary, #64748b);
    font-style: italic;
}

.subtle[b-q4e48tco1p] {
    color: var(--color-text-secondary, #94a3b8);
}
/* /Components/Pages/WmsPro/Warehouses.razor.rz.scp.css */
/* Code and Count badges */
.code-badge[b-ituxc7of5g] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: var(--primary);
    color: #ffffff;
    border-radius: 4px;
    font-family: var(--font-mono, monospace);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.025em;
}

.count-badge[b-ituxc7of5g] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: var(--bg-input);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Form row */
.form-row[b-ituxc7of5g] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (max-width: 640px) {
    .form-row[b-ituxc7of5g] {
        grid-template-columns: 1fr;
    }
}

/* Zone Levels Modal */
.levels-info[b-ituxc7of5g] {
    padding: 1rem;
    background: var(--info-light);
    border: 1px solid var(--info);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.levels-info p[b-ituxc7of5g] {
    margin: 0;
    color: var(--info);
    font-size: 0.875rem;
}

.levels-list[b-ituxc7of5g] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.level-item[b-ituxc7of5g] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--hover-bg);
    border-radius: 8px;
}

.level-order[b-ituxc7of5g] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    font-size: 0.875rem;
    font-weight: 600;
    flex-shrink: 0;
}

.level-fields[b-ituxc7of5g] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.level-fields .form-input[b-ituxc7of5g] {
    flex: 1;
    min-width: 100px;
}

.level-fields .prefix-input[b-ituxc7of5g] {
    max-width: 80px;
    flex: 0;
}

.level-fields .code-length-input[b-ituxc7of5g] {
    max-width: 100px;
    flex: 0;
}

.checkbox-label[b-ituxc7of5g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.checkbox-label input[type="checkbox"][b-ituxc7of5g] {
    width: 16px;
    height: 16px;
}

.remove-level-btn[b-ituxc7of5g] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--danger);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.remove-level-btn:hover[b-ituxc7of5g] {
    background: var(--danger-light);
    border-color: var(--danger);
}

.add-level-btn[b-ituxc7of5g] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem;
    margin-top: 0.75rem;
    background: transparent;
    border: 2px dashed var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.add-level-btn:hover[b-ituxc7of5g] {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-light);
}

/* Modal loading */
.modal-loading[b-ituxc7of5g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    gap: 1rem;
}

.modal-loading .spinner[b-ituxc7of5g] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-ituxc7of5g 1s linear infinite;
}

@keyframes spin-b-ituxc7of5g {
    to {
        transform: rotate(360deg);
    }
}

/* Error message */
.error-message[b-ituxc7of5g] {
    padding: 0.75rem 1rem;
    background: var(--danger-light);
    color: var(--danger);
    border: 1px solid var(--danger);
    border-radius: 6px;
    font-size: 0.875rem;
    margin-top: 1rem;
}

/* Action button for extra actions */
.action-btn[b-ituxc7of5g] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.action-btn:hover[b-ituxc7of5g] {
    background: var(--hover-bg);
    color: var(--primary);
    border-color: var(--primary);
}

/* ===== Template Selection Section ===== */
.template-section[b-ituxc7of5g] {
    margin-bottom: 1.5rem;
}

.template-section-title[b-ituxc7of5g] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.75rem;
}

.template-cards[b-ituxc7of5g] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

@media (max-width: 900px) {
    .template-cards[b-ituxc7of5g] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .template-cards[b-ituxc7of5g] {
        grid-template-columns: 1fr;
    }
}

.template-card[b-ituxc7of5g] {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    background: var(--bg-input);
    border: 2px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.template-card:hover[b-ituxc7of5g] {
    border-color: var(--primary);
    background: var(--hover-bg);
}

.template-card.selected[b-ituxc7of5g] {
    border-color: var(--primary);
    background: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 59, 130, 246), 0.15);
}

.template-card-icon[b-ituxc7of5g] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--bg-input);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    color: var(--text-secondary);
}

.template-card.selected .template-card-icon[b-ituxc7of5g] {
    background: var(--primary);
    color: white;
}

.template-card-content[b-ituxc7of5g] {
    flex: 1;
}

.template-card-title[b-ituxc7of5g] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.25rem;
}

.template-card-desc[b-ituxc7of5g] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.template-card-preview[b-ituxc7of5g] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: var(--bg-input);
    border-radius: 4px;
    font-family: var(--font-mono, monospace);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary);
}

.template-card.selected .template-card-preview[b-ituxc7of5g] {
    background: white;
}

/* ===== Path Preview ===== */
.path-preview[b-ituxc7of5g] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: linear-gradient(135deg, var(--primary-light), var(--bg-input));
    border: 1px solid var(--primary);
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.path-preview-label[b-ituxc7of5g] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

.path-preview-value[b-ituxc7of5g] {
    flex: 1;
    padding: 0.5rem 1rem;
    background: white;
    border-radius: 6px;
    font-family: var(--font-mono, monospace);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--primary);
    text-align: center;
    letter-spacing: 0.05em;
}

/* ===== Levels Section ===== */
.levels-section[b-ituxc7of5g] {
    margin-top: 1rem;
}

.levels-section-header[b-ituxc7of5g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.levels-section-title[b-ituxc7of5g] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
}

.levels-section-hint[b-ituxc7of5g] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

@media (max-width: 640px) {
    .levels-section-hint[b-ituxc7of5g] {
        display: none;
    }
}

/* ===== Level Item with Drag-Drop ===== */
.level-item[b-ituxc7of5g] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--hover-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: grab;
    transition: all 0.15s ease;
}

.level-item:hover[b-ituxc7of5g] {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.level-item.dragging[b-ituxc7of5g] {
    opacity: 0.5;
    cursor: grabbing;
}

.level-item.drag-over[b-ituxc7of5g] {
    border-color: var(--primary);
    border-style: dashed;
    background: var(--primary-light);
}

/* Drag Handle */
.level-drag-handle[b-ituxc7of5g] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    color: var(--text-muted);
    cursor: grab;
    flex-shrink: 0;
}

.level-drag-handle:active[b-ituxc7of5g] {
    cursor: grabbing;
}

@media (max-width: 640px) {
    .level-drag-handle[b-ituxc7of5g] {
        display: none;
    }
}

/* Mobile Move Buttons */
.level-move-buttons[b-ituxc7of5g] {
    display: none;
    flex-direction: column;
    gap: 2px;
}

@media (max-width: 640px) {
    .level-move-buttons[b-ituxc7of5g] {
        display: flex;
    }
}

.level-move-btn[b-ituxc7of5g] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 20px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.level-move-btn:hover:not(:disabled)[b-ituxc7of5g] {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.level-move-btn:disabled[b-ituxc7of5g] {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Level Fields Responsive */
@media (max-width: 768px) {
    .level-fields[b-ituxc7of5g] {
        flex-direction: column;
        align-items: stretch;
    }

    .level-fields .form-input[b-ituxc7of5g] {
        min-width: auto;
        max-width: none;
    }

    .level-fields .prefix-input[b-ituxc7of5g],
    .level-fields .code-length-input[b-ituxc7of5g] {
        max-width: none;
    }

    .checkbox-label[b-ituxc7of5g] {
        margin-top: 0.25rem;
    }
}

/* ===== Location Types Modal ===== */
.types-info[b-ituxc7of5g] {
    padding: 1rem;
    background: var(--info-light);
    border: 1px solid var(--info);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.types-info p[b-ituxc7of5g] {
    margin: 0;
    color: var(--info);
    font-size: 0.875rem;
}

.types-list[b-ituxc7of5g] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.type-item[b-ituxc7of5g] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--hover-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: all 0.2s;
}

.type-item:hover[b-ituxc7of5g] {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.type-icon[b-ituxc7of5g] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex-shrink: 0;
}

.type-icon.storage[b-ituxc7of5g] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.type-icon.receiving[b-ituxc7of5g] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.type-icon.staging[b-ituxc7of5g] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.type-icon.shipping[b-ituxc7of5g] {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.type-icon.quarantine[b-ituxc7of5g] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.type-content[b-ituxc7of5g] {
    flex: 1;
    min-width: 0;
}

.type-name[b-ituxc7of5g] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.25rem;
}

.type-details[b-ituxc7of5g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.type-badge[b-ituxc7of5g] {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    background: var(--bg-input);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.type-tag[b-ituxc7of5g] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 500;
}

.type-tag.mixed[b-ituxc7of5g] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.type-tag.weight[b-ituxc7of5g] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.type-actions[b-ituxc7of5g] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.type-actions .btn-icon[b-ituxc7of5g] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.type-actions .btn-icon:hover[b-ituxc7of5g] {
    background: var(--hover-bg);
    border-color: var(--primary);
    color: var(--primary);
}

.type-actions .btn-icon.danger:hover[b-ituxc7of5g] {
    background: var(--danger-light);
    border-color: var(--danger);
    color: var(--danger);
}

.add-type-btn[b-ituxc7of5g] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.875rem;
    margin-top: 1rem;
    background: transparent;
    border: 2px dashed var(--border);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.add-type-btn:hover[b-ituxc7of5g] {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-light);
}

/* Type Edit Modal */
.form-group[b-ituxc7of5g] {
    flex: 1;
}

.form-group .form-label[b-ituxc7of5g] {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
}

/* ===== Operational Badge ===== */
.operational-badge[b-ituxc7of5g] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.operational-badge.ready[b-ituxc7of5g] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.operational-badge.pending[b-ituxc7of5g] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

/* Success button style */
[b-ituxc7of5g] .btn-icon.success {
    color: #10b981;
}

[b-ituxc7of5g] .btn-icon.success:hover {
    background: rgba(16, 185, 129, 0.1);
    border-color: #10b981;
}
/* /Components/Pages/Wms/Packing.razor.rz.scp.css */
/* Stats Grid */
.stats-grid[b-fcpyl98ao9] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.stat-card[b-fcpyl98ao9] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    transition: var(--transition);
}

.stat-card:hover[b-fcpyl98ao9] {
    border-color: var(--border-hover);
    transform: translateY(-2px);
}

.stat-icon[b-fcpyl98ao9] {
    width: 52px;
    height: 52px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon svg[b-fcpyl98ao9] {
    width: 26px;
    height: 26px;
}

.stat-icon.blue[b-fcpyl98ao9] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.stat-icon.green[b-fcpyl98ao9] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.stat-icon.purple[b-fcpyl98ao9] {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.stat-content h3[b-fcpyl98ao9] {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 4px;
}

.stat-content p[b-fcpyl98ao9] {
    font-size: 13px;
    color: var(--text-muted);
}

/* Filter Tabs */
.filter-tabs-container[b-fcpyl98ao9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

.filter-tabs[b-fcpyl98ao9] {
    display: flex;
    gap: 8px;
    padding: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: fit-content;
}

.filter-tab[b-fcpyl98ao9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.filter-tab:hover[b-fcpyl98ao9] {
    color: var(--text-primary);
    background: var(--bg-input);
}

.filter-tab.active[b-fcpyl98ao9] {
    background: var(--primary);
    color: white;
}

/* Loading & Empty State */
.loading-state[b-fcpyl98ao9], .empty-state[b-fcpyl98ao9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.empty-state .empty-icon[b-fcpyl98ao9] {
    width: 48px;
    height: 48px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.empty-state .empty-desc[b-fcpyl98ao9] {
    font-size: 14px;
    color: var(--text-muted);
    margin-top: 8px;
}

/* =============================================
   MASTER-DETAIL ORDER VIEW STYLES
   ============================================= */

.master-detail-container[b-fcpyl98ao9] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Expand/Collapse Controls */
.expand-controls[b-fcpyl98ao9] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.expand-btn[b-fcpyl98ao9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s;
}

.expand-btn:hover[b-fcpyl98ao9] {
    background: var(--bg-input);
    color: var(--text-primary);
}

/* Orders Master List */
.orders-master-list[b-fcpyl98ao9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Order Master Card */
.order-master-card[b-fcpyl98ao9] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all 0.2s;
}

.order-master-card:hover[b-fcpyl98ao9] {
    border-color: var(--border-hover);
}

.order-master-card.expanded[b-fcpyl98ao9] {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

/* Order Master Header */
.order-master-header[b-fcpyl98ao9] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.2s;
}

.order-master-header:hover[b-fcpyl98ao9] {
    background: var(--bg-input);
}

.order-expand-icon[b-fcpyl98ao9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.order-expand-icon svg[b-fcpyl98ao9] {
    transition: transform 0.2s;
}

.order-expand-icon svg.rotated[b-fcpyl98ao9] {
    transform: rotate(90deg);
}

/* Order Image Button */
.order-image-btn[b-fcpyl98ao9] {
    position: relative;
    width: 56px;
    height: 56px;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.order-image-btn:hover[b-fcpyl98ao9] {
    transform: scale(1.05);
}

.order-image-btn .order-image[b-fcpyl98ao9] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.order-image-btn .order-image-placeholder[b-fcpyl98ao9] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    border-radius: 8px;
    border: 1px solid var(--border);
    color: var(--text-muted);
}

.order-image-btn .order-image-placeholder svg[b-fcpyl98ao9] {
    width: 24px;
    height: 24px;
}

.order-image-scan-overlay[b-fcpyl98ao9] {
    position: absolute;
    inset: 0;
    background: rgba(34, 197, 94, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    border-radius: 8px;
}

.order-image-btn:hover .order-image-scan-overlay[b-fcpyl98ao9] {
    opacity: 1;
}

.order-image-scan-overlay svg[b-fcpyl98ao9] {
    width: 24px;
    height: 24px;
    color: white;
}

/* Order Master Info */
.order-master-info[b-fcpyl98ao9] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.order-master-top[b-fcpyl98ao9] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.order-number-text[b-fcpyl98ao9] {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--primary);
    font-size: 13px;
}

.order-master-middle[b-fcpyl98ao9] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

.order-master-middle .order-customer[b-fcpyl98ao9] {
    font-weight: 500;
    color: var(--text-primary);
}

.order-master-middle .order-city[b-fcpyl98ao9] {
    color: var(--text-muted);
    font-size: 13px;
}

.order-master-bottom[b-fcpyl98ao9] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.store-badge[b-fcpyl98ao9], .cargo-badge[b-fcpyl98ao9], .date-badge[b-fcpyl98ao9], .tracking-badge[b-fcpyl98ao9], .delivery-date-badge[b-fcpyl98ao9] {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--bg-input);
    color: var(--text-secondary);
}

.store-badge[b-fcpyl98ao9] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.tracking-badge[b-fcpyl98ao9] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    font-family: var(--font-mono);
    font-weight: 500;
}

.tracking-badge svg[b-fcpyl98ao9] {
    flex-shrink: 0;
}

/* Delivery Date Badge */
.delivery-date-badge[b-fcpyl98ao9] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
    font-weight: 500;
}

.delivery-date-badge svg[b-fcpyl98ao9] {
    flex-shrink: 0;
}

.delivery-date-badge.urgent[b-fcpyl98ao9] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    font-weight: 600;
}

/* Status Badge */
.status-badge[b-fcpyl98ao9] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.status-badge.success[b-fcpyl98ao9] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

/* Order Master Progress */
.order-master-progress[b-fcpyl98ao9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    min-width: 80px;
}

.progress-circle-mini[b-fcpyl98ao9] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    background: var(--bg-input);
    border-radius: var(--radius);
    border: 2px solid var(--border);
}

.progress-circle-mini.complete[b-fcpyl98ao9] {
    background: rgba(34, 197, 94, 0.1);
    border-color: #22c55e;
}

.progress-circle-mini .progress-num[b-fcpyl98ao9] {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.progress-circle-mini.complete .progress-num[b-fcpyl98ao9] {
    color: #22c55e;
}

.order-master-progress .progress-label[b-fcpyl98ao9] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Order Master Actions */
.order-master-actions[b-fcpyl98ao9] {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.btn-icon-sm[b-fcpyl98ao9] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-icon-sm svg[b-fcpyl98ao9] {
    width: 16px;
    height: 16px;
}

.btn-icon-sm.success[b-fcpyl98ao9] {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.btn-icon-sm.success:hover[b-fcpyl98ao9] {
    background: rgba(34, 197, 94, 0.2);
}

/* Order Detail Section */
.order-detail-section[b-fcpyl98ao9] {
    border-top: 1px solid var(--border);
    background: var(--bg-secondary);
    padding: 16px;
    animation: slideDown-b-fcpyl98ao9 0.2s ease;
}

@keyframes slideDown-b-fcpyl98ao9 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.order-items-header[b-fcpyl98ao9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.items-title[b-fcpyl98ao9] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.pack-btn[b-fcpyl98ao9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s;
}

.pack-btn:hover[b-fcpyl98ao9] {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    transform: translateY(-1px);
}

/* Order Items List */
.order-items-list[b-fcpyl98ao9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.items-loading[b-fcpyl98ao9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    color: var(--text-muted);
}

.order-item-row[b-fcpyl98ao9] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: all 0.2s;
}

.order-item-row:hover[b-fcpyl98ao9] {
    border-color: var(--border-hover);
}

/* Item Image */
.item-image[b-fcpyl98ao9] {
    position: relative;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.item-image img[b-fcpyl98ao9] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.item-image-placeholder[b-fcpyl98ao9] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    color: var(--text-muted);
}

.item-image-placeholder svg[b-fcpyl98ao9] {
    width: 24px;
    height: 24px;
}

/* Item Details */
.item-details[b-fcpyl98ao9] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.item-name[b-fcpyl98ao9] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-variant[b-fcpyl98ao9] {
    font-size: 12px;
    color: var(--text-secondary);
}

.item-codes[b-fcpyl98ao9] {
    display: flex;
    gap: 8px;
    margin-top: 2px;
    flex-wrap: wrap;
}

.item-barcode[b-fcpyl98ao9] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-family: var(--font-mono);
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
}

.item-sku[b-fcpyl98ao9] {
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--text-muted);
    background: var(--bg-input);
    padding: 2px 6px;
    border-radius: 4px;
}

.item-location[b-fcpyl98ao9] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(251, 191, 36, 0.15);
    color: #f59e0b;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

.item-quantity[b-fcpyl98ao9] {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: var(--radius);
    background: var(--bg-input);
    font-weight: 700;
}

.item-quantity.complete[b-fcpyl98ao9] {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.item-quantity .qty-total[b-fcpyl98ao9] {
    font-size: 16px;
}

/* Barcode Scanner Styles */
.barcode-scanner-container[b-fcpyl98ao9] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.scan-input-section[b-fcpyl98ao9] {
    text-align: center;
}

.scan-input-wrapper[b-fcpyl98ao9] {
    display: flex;
    gap: 8px;
    max-width: 400px;
    margin: 0 auto;
}

.scan-input[b-fcpyl98ao9] {
    flex: 1;
    padding: 16px 20px;
    font-size: 18px;
    font-family: var(--font-mono);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    color: var(--text-primary);
    text-align: center;
    transition: all 0.2s;
}

.scan-input:focus[b-fcpyl98ao9] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.scan-button[b-fcpyl98ao9] {
    width: 56px;
    height: 56px;
    border: none;
    border-radius: var(--radius);
    background: var(--primary);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.scan-button:hover:not(:disabled)[b-fcpyl98ao9] {
    background: var(--primary-hover);
}

.scan-button:disabled[b-fcpyl98ao9] {
    opacity: 0.6;
    cursor: not-allowed;
}

.scan-button svg[b-fcpyl98ao9] {
    width: 24px;
    height: 24px;
}

.spinner-small[b-fcpyl98ao9] {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin-b-fcpyl98ao9 0.8s linear infinite;
}

@keyframes spin-b-fcpyl98ao9 {
    to {
        transform: rotate(360deg);
    }
}

.scan-hint[b-fcpyl98ao9] {
    margin-top: 8px;
    font-size: 13px;
    color: var(--text-muted);
}

/* Scan Result */
.scan-result[b-fcpyl98ao9] {
    display: block;
    width: 100%;
    padding: 20px;
    border-radius: var(--radius-lg);
    animation: fadeIn-b-fcpyl98ao9 0.3s ease;
}

@keyframes fadeIn-b-fcpyl98ao9 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.scan-result.success[b-fcpyl98ao9] {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.scan-result.error[b-fcpyl98ao9] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.scan-result-content[b-fcpyl98ao9] {
    width: 100%;
}

.scan-result-message[b-fcpyl98ao9] {
    margin: 0;
    font-weight: 600;
    color: var(--text-primary);
}

/* Packing Modal Content */
.packing-modal-content[b-fcpyl98ao9] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Order Picking Header */
.order-picking-header[b-fcpyl98ao9] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(139, 92, 246, 0.05) 100%);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: var(--radius-lg);
    padding: 16px;
}

.order-picking-info[b-fcpyl98ao9] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.order-picking-image[b-fcpyl98ao9] {
    width: 64px;
    height: 64px;
    border-radius: var(--radius);
    object-fit: cover;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.order-picking-image-placeholder[b-fcpyl98ao9] {
    width: 64px;
    height: 64px;
    border-radius: var(--radius);
    background: var(--bg-input);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    flex-shrink: 0;
}

.order-picking-image-placeholder svg[b-fcpyl98ao9] {
    width: 28px;
    height: 28px;
}

.order-picking-details[b-fcpyl98ao9] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.order-picking-number[b-fcpyl98ao9] {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 700;
    color: var(--primary);
}

.order-picking-customer[b-fcpyl98ao9] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.order-picking-meta[b-fcpyl98ao9] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.order-picking-meta .meta-badge[b-fcpyl98ao9] {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 4px;
}

.order-picking-meta .meta-badge.store[b-fcpyl98ao9] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.order-picking-meta .meta-badge.city[b-fcpyl98ao9] {
    background: var(--bg-input);
    color: var(--text-secondary);
}

.order-picking-meta .meta-badge.tracking[b-fcpyl98ao9] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    font-family: var(--font-mono);
}

.order-picking-meta .meta-badge.tracking svg[b-fcpyl98ao9] {
    flex-shrink: 0;
}

.detail-item.tracking[b-fcpyl98ao9] {
    background: rgba(16, 185, 129, 0.05);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: var(--radius);
    padding: 8px 12px;
}

.detail-item.tracking .tracking-number[b-fcpyl98ao9] {
    font-family: var(--font-mono);
    font-weight: 600;
    color: #10b981;
}

.order-picking-progress[b-fcpyl98ao9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    min-width: 80px;
}

.order-picking-progress .progress-circle[b-fcpyl98ao9] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.order-picking-progress .progress-value[b-fcpyl98ao9] {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
}

.order-picking-progress .progress-label[b-fcpyl98ao9] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Order Details Section */
.order-details-section[b-fcpyl98ao9] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.detail-item[b-fcpyl98ao9] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-input);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--text-secondary);
}

.detail-item svg[b-fcpyl98ao9] {
    color: var(--text-muted);
}

/* Order Items Section */
.order-items-section[b-fcpyl98ao9] {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 16px;
    max-height: 400px;
    overflow-y: auto;
}

.order-items-section .order-items-header[b-fcpyl98ao9] {
    margin-bottom: 16px;
}

.order-items-title[b-fcpyl98ao9] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.items-count[b-fcpyl98ao9] {
    font-weight: 400;
    color: var(--text-muted);
}

/* Order Items Grid */
.order-items-grid[b-fcpyl98ao9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.order-item-card[b-fcpyl98ao9] {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: all 0.2s;
}

.order-item-card:hover[b-fcpyl98ao9] {
    border-color: var(--border-hover);
}

.item-image-wrapper[b-fcpyl98ao9] {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    background: var(--bg-input);
}

.item-image-wrapper .item-img[b-fcpyl98ao9] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item-image-wrapper .item-img-placeholder[b-fcpyl98ao9] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.item-image-wrapper .item-img-placeholder svg[b-fcpyl98ao9] {
    width: 48px;
    height: 48px;
}

.item-qty-badge[b-fcpyl98ao9] {
    position: absolute;
    bottom: 8px;
    right: 8px;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.75);
    color: white;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
}

.item-info-wrapper[b-fcpyl98ao9] {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.item-name-text[b-fcpyl98ao9] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.item-variant-text[b-fcpyl98ao9] {
    font-size: 12px;
    color: var(--text-secondary);
}

.item-barcode-text[b-fcpyl98ao9] {
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════ */
/* RESPONSIVE                                          */
/* ═══════════════════════════════════════════════════ */

@media (max-width: 1200px) {
    .stats-grid[b-fcpyl98ao9] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablet */
@media (max-width: 1024px) {
    .stats-grid[b-fcpyl98ao9] {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 16px;
    }

    .stat-card[b-fcpyl98ao9] {
        padding: 16px;
    }

    .stat-card:hover[b-fcpyl98ao9] {
        transform: none;
    }

    .stat-icon[b-fcpyl98ao9] {
        width: 44px;
        height: 44px;
    }

    .stat-icon svg[b-fcpyl98ao9] {
        width: 22px;
        height: 22px;
    }

    .stat-content h3[b-fcpyl98ao9] {
        font-size: 22px;
    }

    .stat-content p[b-fcpyl98ao9] {
        font-size: 12px;
    }

    /* Filter tabs */
    .filter-tabs-container[b-fcpyl98ao9] {
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 16px;
    }

    .filter-tabs[b-fcpyl98ao9],
    .filter-tabs-right[b-fcpyl98ao9] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .filter-tab[b-fcpyl98ao9] {
        padding: 8px 14px;
        font-size: 12px;
        white-space: nowrap;
    }

    /* Cancelled alert */
    .cancelled-alert-banner[b-fcpyl98ao9] {
        padding: 12px 16px;
    }

    .cancelled-alert-button[b-fcpyl98ao9] {
        font-size: 12px;
        white-space: nowrap;
    }

    /* Cancelled actions */
    .cancelled-actions[b-fcpyl98ao9] {
        margin-bottom: 12px;
    }

    /* Order master */
    .order-master-header[b-fcpyl98ao9] {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px;
    }

    .order-master-info[b-fcpyl98ao9] {
        flex-basis: 100%;
        order: 3;
        padding-left: 0;
        margin-top: 4px;
    }

    .order-master-progress[b-fcpyl98ao9] {
        order: 2;
        margin-left: auto;
    }

    .order-master-actions[b-fcpyl98ao9] {
        order: 4;
        width: 100%;
        justify-content: flex-end;
        margin-top: 4px;
    }

    /* Expand controls */
    .expand-controls[b-fcpyl98ao9] {
        margin-bottom: 12px;
    }

    .expand-btn[b-fcpyl98ao9] {
        padding: 6px 12px;
        font-size: 12px;
    }
}

/* Cancelled Alert Banner */
.cancelled-alert-banner[b-fcpyl98ao9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.05));
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
}

.cancelled-alert-content[b-fcpyl98ao9] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cancelled-alert-content svg[b-fcpyl98ao9] {
    width: 24px;
    height: 24px;
    color: #ef4444;
    flex-shrink: 0;
}

.cancelled-alert-content .alert-text[b-fcpyl98ao9] {
    font-size: 14px;
    color: var(--text-primary);
}

.cancelled-alert-content .alert-text strong[b-fcpyl98ao9] {
    color: #ef4444;
    font-weight: 700;
}

.cancelled-alert-button[b-fcpyl98ao9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.cancelled-alert-button:hover[b-fcpyl98ao9] {
    background: #dc2626;
}

/* Mobile */
@media (max-width: 768px) {
    .stats-grid[b-fcpyl98ao9] {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 12px;
    }

    .stat-card[b-fcpyl98ao9] {
        padding: 14px;
        gap: 12px;
    }

    .stat-icon[b-fcpyl98ao9] {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .stat-icon svg[b-fcpyl98ao9] {
        width: 20px;
        height: 20px;
    }

    .stat-content h3[b-fcpyl98ao9] {
        font-size: 20px;
        margin-bottom: 2px;
    }

    .stat-content p[b-fcpyl98ao9] {
        font-size: 11px;
    }

    /* Filter tabs */
    .filter-tabs-container[b-fcpyl98ao9] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 12px;
    }

    .filter-tabs[b-fcpyl98ao9] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        width: 100%;
    }

    .filter-tabs[b-fcpyl98ao9]::-webkit-scrollbar {
        display: none;
    }

    .filter-tabs-right[b-fcpyl98ao9] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .filter-tabs-right[b-fcpyl98ao9]::-webkit-scrollbar {
        display: none;
    }

    .filter-tab[b-fcpyl98ao9] {
        padding: 7px 12px;
        font-size: 12px;
        white-space: nowrap;
        gap: 6px;
    }

    .filter-tab .count[b-fcpyl98ao9] {
        font-size: 10px;
    }

    /* Cancelled alert */
    .cancelled-alert-banner[b-fcpyl98ao9] {
        flex-direction: column;
        padding: 12px;
        gap: 10px;
        text-align: center;
        margin-bottom: 12px;
    }

    .cancelled-alert-content[b-fcpyl98ao9] {
        justify-content: center;
    }

    .alert-text[b-fcpyl98ao9] {
        font-size: 13px;
    }

    .cancelled-alert-button[b-fcpyl98ao9] {
        width: 100%;
        justify-content: center;
        font-size: 12px;
        padding: 8px 12px;
    }

    /* Cancelled actions */
    .cancelled-actions[b-fcpyl98ao9] {
        margin-bottom: 12px;
    }

    .cancelled-actions .btn[b-fcpyl98ao9] {
        width: 100%;
        justify-content: center;
        font-size: 13px;
    }

    /* Expand controls */
    .expand-controls[b-fcpyl98ao9] {
        display: none;
    }

    /* Order master card */
    .order-master-card[b-fcpyl98ao9] {
        border-radius: var(--radius);
    }

    .order-master-header[b-fcpyl98ao9] {
        display: grid;
        grid-template-columns: auto auto 1fr auto;
        grid-template-rows: auto auto;
        gap: 8px 10px;
        padding: 12px;
        align-items: center;
    }

    .order-expand-icon[b-fcpyl98ao9] {
        grid-row: 1;
        grid-column: 1;
    }

    .order-image-btn[b-fcpyl98ao9] {
        grid-row: 1;
        grid-column: 2;
        width: 40px;
        height: 40px;
    }

    .order-image-btn .order-image[b-fcpyl98ao9],
    .order-image-btn .order-image-placeholder[b-fcpyl98ao9] {
        width: 40px;
        height: 40px;
    }

    .order-image-btn .order-image-placeholder svg[b-fcpyl98ao9],
    .order-image-btn .order-image-scan-overlay svg[b-fcpyl98ao9] {
        width: 18px;
        height: 18px;
    }

    .order-master-info[b-fcpyl98ao9] {
        grid-row: 1;
        grid-column: 3;
        padding-left: 0;
        margin-top: 0;
    }

    .order-master-top[b-fcpyl98ao9] {
        flex-wrap: wrap;
        gap: 4px;
    }

    .order-number-text[b-fcpyl98ao9] {
        font-size: 13px;
    }

    .status-badge[b-fcpyl98ao9] {
        font-size: 10px;
        padding: 2px 6px;
    }

    .order-master-middle[b-fcpyl98ao9] {
        font-size: 13px;
        margin-top: 2px;
    }

    .order-master-bottom[b-fcpyl98ao9] {
        margin-top: 4px;
        flex-wrap: wrap;
        gap: 4px;
    }

    .store-badge[b-fcpyl98ao9], .cargo-badge[b-fcpyl98ao9], .date-badge[b-fcpyl98ao9], .tracking-badge[b-fcpyl98ao9], .delivery-date-badge[b-fcpyl98ao9] {
        font-size: 10px;
        padding: 2px 6px;
    }

    .tracking-badge[b-fcpyl98ao9] {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .order-master-progress[b-fcpyl98ao9] {
        grid-row: 1;
        grid-column: 4;
        padding: 4px 8px;
        min-width: 50px;
    }

    .progress-circle-mini[b-fcpyl98ao9] {
        padding: 4px 8px;
    }

    .progress-circle-mini .progress-num[b-fcpyl98ao9] {
        font-size: 12px;
    }

    .order-master-progress .progress-label[b-fcpyl98ao9] {
        font-size: 10px;
    }

    .order-master-actions[b-fcpyl98ao9] {
        grid-row: 2;
        grid-column: 1 / -1;
        display: flex;
        gap: 8px;
        margin-top: 0;
        padding-top: 8px;
        border-top: 1px solid var(--border);
    }

    .order-master-actions .btn-icon-sm[b-fcpyl98ao9] {
        flex: 1;
        height: 36px;
        border-radius: var(--radius);
    }

    /* Order detail */
    .order-detail-section[b-fcpyl98ao9] {
        padding: 12px;
    }

    .order-items-header .items-title[b-fcpyl98ao9] {
        font-size: 12px;
    }

    .pack-btn[b-fcpyl98ao9] {
        font-size: 12px;
        padding: 6px 12px;
    }

    /* Order item row */
    .order-item-row[b-fcpyl98ao9] {
        padding: 10px;
        gap: 10px;
    }

    .item-image[b-fcpyl98ao9] {
        width: 44px;
        height: 44px;
    }

    .item-name[b-fcpyl98ao9] {
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .item-variant[b-fcpyl98ao9] {
        font-size: 11px;
    }

    .item-codes[b-fcpyl98ao9] {
        display: none;
    }

    .item-location[b-fcpyl98ao9] {
        display: none;
    }

    .item-quantity[b-fcpyl98ao9] {
        padding: 4px 8px;
        min-width: 40px;
    }

    .item-quantity .qty-total[b-fcpyl98ao9] {
        font-size: 13px;
    }

    /* Order items grid (picking modal) */
    .order-items-grid[b-fcpyl98ao9] {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .item-info-wrapper[b-fcpyl98ao9] {
        padding: 8px;
    }

    .item-name-text[b-fcpyl98ao9] {
        font-size: 12px;
    }

    .item-qty-badge[b-fcpyl98ao9] {
        font-size: 12px;
        padding: 3px 8px;
    }

    /* Packing modal */
    .order-picking-info[b-fcpyl98ao9] {
        flex-wrap: wrap;
        gap: 12px;
    }

    .order-picking-image[b-fcpyl98ao9],
    .order-picking-image-placeholder[b-fcpyl98ao9] {
        width: 50px;
        height: 50px;
    }

    .order-picking-number[b-fcpyl98ao9] {
        font-size: 14px;
    }

    .order-picking-customer[b-fcpyl98ao9] {
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Empty state */
    .empty-state[b-fcpyl98ao9] {
        padding: 40px 20px;
    }

    .empty-icon[b-fcpyl98ao9] {
        width: 48px;
        height: 48px;
    }

    .empty-state p[b-fcpyl98ao9] {
        font-size: 14px;
    }

    .empty-desc[b-fcpyl98ao9] {
        font-size: 12px;
    }

    /* Pagination */
    .pagination-container[b-fcpyl98ao9] {
        flex-direction: column;
        gap: 10px;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .stats-grid[b-fcpyl98ao9] {
        gap: 8px;
    }

    .stat-card[b-fcpyl98ao9] {
        padding: 12px;
        gap: 10px;
    }

    .stat-icon[b-fcpyl98ao9] {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }

    .stat-icon svg[b-fcpyl98ao9] {
        width: 18px;
        height: 18px;
    }

    .stat-content h3[b-fcpyl98ao9] {
        font-size: 18px;
    }

    .stat-content p[b-fcpyl98ao9] {
        font-size: 10px;
    }

    /* Order master */
    .order-master-header[b-fcpyl98ao9] {
        padding: 10px;
        gap: 6px 8px;
    }

    .order-image-btn[b-fcpyl98ao9] {
        width: 36px;
        height: 36px;
    }

    .order-image-btn .order-image[b-fcpyl98ao9],
    .order-image-btn .order-image-placeholder[b-fcpyl98ao9] {
        width: 36px;
        height: 36px;
    }

    .order-number-text[b-fcpyl98ao9] {
        font-size: 12px;
    }

    .order-master-middle[b-fcpyl98ao9] {
        font-size: 12px;
    }

    .order-customer[b-fcpyl98ao9] {
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .order-master-bottom[b-fcpyl98ao9] {
        gap: 3px;
    }

    .store-badge[b-fcpyl98ao9], .cargo-badge[b-fcpyl98ao9], .date-badge[b-fcpyl98ao9], .tracking-badge[b-fcpyl98ao9], .delivery-date-badge[b-fcpyl98ao9] {
        font-size: 9px;
        padding: 1px 4px;
    }

    .tracking-badge[b-fcpyl98ao9] {
        max-width: 80px;
    }

    .progress-circle-mini .progress-num[b-fcpyl98ao9] {
        font-size: 11px;
    }

    /* Item row */
    .item-image[b-fcpyl98ao9] {
        width: 38px;
        height: 38px;
    }

    .item-name[b-fcpyl98ao9] {
        font-size: 12px;
    }

    /* Order items grid */
    .order-items-grid[b-fcpyl98ao9] {
        grid-template-columns: 1fr;
    }

    /* Filter tabs */
    .filter-tab[b-fcpyl98ao9] {
        padding: 6px 10px;
        font-size: 11px;
    }
}

/* =============================================
   BARCODE SCANNER STYLES
   ============================================= */

/* Mode Toggle */
.scan-mode-toggle[b-fcpyl98ao9] {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 4px;
    background: var(--bg-input);
    border-radius: var(--radius);
    margin-bottom: 16px;
}

.mode-btn[b-fcpyl98ao9] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}

.mode-btn:hover[b-fcpyl98ao9] {
    color: var(--text-primary);
    background: var(--bg-card);
}

.mode-btn.active[b-fcpyl98ao9] {
    background: var(--primary);
    color: white;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

.mode-btn svg[b-fcpyl98ao9] {
    flex-shrink: 0;
}

/* Camera Container */
.camera-container[b-fcpyl98ao9] {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    aspect-ratio: 4/3;
    background: #000;
    border-radius: var(--radius);
    overflow: hidden;
}

.camera-video[b-fcpyl98ao9] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.camera-overlay[b-fcpyl98ao9] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.scan-region[b-fcpyl98ao9] {
    width: 70%;
    height: 30%;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius);
    position: relative;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
}

.scan-line[b-fcpyl98ao9] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #3b82f6, transparent);
    animation: scanLine-b-fcpyl98ao9 2s ease-in-out infinite;
}

@keyframes scanLine-b-fcpyl98ao9 {
    0%, 100% { top: 0; }
    50% { top: calc(100% - 2px); }
}

.camera-loading[b-fcpyl98ao9],
.camera-error[b-fcpyl98ao9] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
}

.camera-error svg[b-fcpyl98ao9] {
    color: #ef4444;
}

.retry-btn[b-fcpyl98ao9] {
    padding: 8px 16px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    font-weight: 600;
}

.camera-controls[b-fcpyl98ao9] {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
}

.camera-control-btn[b-fcpyl98ao9] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.camera-control-btn:hover[b-fcpyl98ao9] {
    background: rgba(255, 255, 255, 0.3);
}

.camera-control-btn.active[b-fcpyl98ao9] {
    background: var(--primary);
}

/* Scan Input */
.scan-input-wrapper[b-fcpyl98ao9] {
    display: flex;
    gap: 8px;
    max-width: 400px;
    margin: 0 auto;
}

.scan-input[b-fcpyl98ao9] {
    flex: 1;
    padding: 14px 16px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    font-size: 16px;
    font-family: var(--font-mono);
    background: var(--bg-input);
    color: var(--text-primary);
    transition: all 0.2s;
}

.scan-input:focus[b-fcpyl98ao9] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.scan-button[b-fcpyl98ao9] {
    width: 52px;
    height: 52px;
    border: none;
    background: var(--primary);
    color: white;
    border-radius: var(--radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.scan-button:hover:not(:disabled)[b-fcpyl98ao9] {
    background: var(--primary-hover);
}

.scan-button:disabled[b-fcpyl98ao9] {
    opacity: 0.6;
    cursor: not-allowed;
}

.scan-button svg[b-fcpyl98ao9] {
    width: 24px;
    height: 24px;
}

.scan-hint[b-fcpyl98ao9] {
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 12px;
}

/* Mobile Responsive - Scanner */
@media (max-width: 576px) {
    .scan-mode-toggle[b-fcpyl98ao9] {
        flex-direction: row;
        padding: 3px;
        margin-bottom: 12px;
    }

    .mode-btn[b-fcpyl98ao9] {
        flex: 1;
        justify-content: center;
        padding: 10px 8px;
        font-size: 12px;
        gap: 6px;
    }

    .mode-btn svg[b-fcpyl98ao9] {
        width: 16px;
        height: 16px;
    }

    .scan-input[b-fcpyl98ao9] {
        padding: 12px;
        font-size: 16px;
    }

    .scan-button[b-fcpyl98ao9] {
        width: 48px;
        height: 48px;
    }

    .camera-container[b-fcpyl98ao9] {
        max-width: 100%;
    }

    .scan-region[b-fcpyl98ao9] {
        width: 80%;
        height: 25%;
    }

    .camera-controls[b-fcpyl98ao9] {
        bottom: 8px;
        gap: 8px;
    }

    .camera-control-btn[b-fcpyl98ao9] {
        width: 40px;
        height: 40px;
    }
}

/* =============================================
   FILTER & SORT MODAL STYLES
   ============================================= */

.filter-modal-content[b-fcpyl98ao9] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.filter-row[b-fcpyl98ao9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.filter-group[b-fcpyl98ao9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-group label[b-fcpyl98ao9] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}

.date-time-row[b-fcpyl98ao9] {
    display: flex;
    gap: 8px;
}

.time-input[b-fcpyl98ao9] {
    width: 100px;
}

.filter-divider[b-fcpyl98ao9] {
    height: 1px;
    background: var(--border);
    margin: 8px 0;
}

.filter-section[b-fcpyl98ao9] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.filter-section-header[b-fcpyl98ao9] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.filter-section-header svg[b-fcpyl98ao9] {
    color: var(--primary);
}

.filter-group.full-width[b-fcpyl98ao9] {
    grid-column: 1 / -1;
}

@media (max-width: 576px) {
    .filter-row[b-fcpyl98ao9] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Wms/Picking.razor.rz.scp.css */
/* Search Input - Wide */
.search-input-wide[b-ztdaj6gzw2] {
    min-width: 400px !important;
    width: 100%;
    max-width: 600px;
}

@media (max-width: 768px) {
    .search-input-wide[b-ztdaj6gzw2] {
        min-width: 100% !important;
        max-width: 100%;
    }
}

/* Filter Button with Badge */
.filter-button-wrapper[b-ztdaj6gzw2] {
    position: relative;
    display: inline-flex;
}

.filter-badge[b-ztdaj6gzw2] {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
    z-index: 1;
    animation: badgePop-b-ztdaj6gzw2 0.3s ease-out;
}

@keyframes badgePop-b-ztdaj6gzw2 {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Stats Grid */
.stats-grid[b-ztdaj6gzw2] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.stat-card[b-ztdaj6gzw2] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    transition: var(--transition);
}

.stat-card:hover[b-ztdaj6gzw2] {
    border-color: var(--border-hover);
    transform: translateY(-2px);
}

.stat-icon[b-ztdaj6gzw2] {
    width: 52px;
    height: 52px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon svg[b-ztdaj6gzw2] {
    width: 26px;
    height: 26px;
}

.stat-icon.blue[b-ztdaj6gzw2] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.stat-icon.green[b-ztdaj6gzw2] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.stat-icon.purple[b-ztdaj6gzw2] {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.stat-icon.orange[b-ztdaj6gzw2] {
    background: rgba(251, 146, 60, 0.15);
    color: #fb923c;
}

.stat-icon.red[b-ztdaj6gzw2] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* Cancelled Alert Banner */
.cancelled-alert-banner[b-ztdaj6gzw2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.05));
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
}

.cancelled-alert-content[b-ztdaj6gzw2] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cancelled-alert-banner .alert-icon[b-ztdaj6gzw2] {
    width: 24px;
    height: 24px;
    color: #ef4444;
    flex-shrink: 0;
}

.cancelled-alert-banner .alert-text[b-ztdaj6gzw2] {
    font-size: 14px;
    color: var(--text-primary);
}

.cancelled-alert-banner .alert-text strong[b-ztdaj6gzw2] {
    color: #ef4444;
    font-weight: 700;
}

.cancelled-alert-button[b-ztdaj6gzw2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.cancelled-alert-button:hover[b-ztdaj6gzw2] {
    background: #dc2626;
}

/* Cancelled Modal */
.cancelled-modal-header[b-ztdaj6gzw2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.cancelled-modal-desc[b-ztdaj6gzw2] {
    font-size: 14px;
    color: var(--text-muted);
}

.cancelled-modal-controls[b-ztdaj6gzw2] {
    display: flex;
    gap: 8px;
}

.cancelled-modal-controls .expand-btn[b-ztdaj6gzw2] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.cancelled-modal-controls .expand-btn:hover[b-ztdaj6gzw2] {
    background: var(--bg-muted);
    border-color: var(--border-focus);
}

/* Cancelled Orders List */
.cancelled-orders-list[b-ztdaj6gzw2] {
    max-height: 450px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cancelled-order-card[b-ztdaj6gzw2] {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-card);
    overflow: hidden;
    transition: all 0.2s;
}

.cancelled-order-card.selected[b-ztdaj6gzw2] {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.05);
}

.cancelled-order-card.expanded[b-ztdaj6gzw2] {
    border-color: var(--border-focus);
}

/* Order Header */
.cancelled-order-header[b-ztdaj6gzw2] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
}

.cancelled-order-header:hover[b-ztdaj6gzw2] {
    background: var(--bg-muted);
}

.order-checkbox[b-ztdaj6gzw2] {
    flex-shrink: 0;
}

.order-checkbox input[type="checkbox"][b-ztdaj6gzw2] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.order-expand-toggle[b-ztdaj6gzw2] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.order-expand-toggle svg[b-ztdaj6gzw2] {
    transition: transform 0.2s;
    color: var(--text-muted);
}

.order-expand-toggle svg.rotated[b-ztdaj6gzw2] {
    transform: rotate(90deg);
}

.order-image-section[b-ztdaj6gzw2] {
    flex-shrink: 0;
}

.cancelled-order-header .order-image[b-ztdaj6gzw2] {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.cancelled-order-header .order-image-placeholder[b-ztdaj6gzw2] {
    width: 48px;
    height: 48px;
    background: var(--bg-muted);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
}

.cancelled-order-header .order-image-placeholder svg[b-ztdaj6gzw2] {
    width: 24px;
    height: 24px;
    color: var(--text-muted);
}

.order-info-section[b-ztdaj6gzw2] {
    flex: 1;
    min-width: 0;
}

.order-info-top[b-ztdaj6gzw2] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.order-info-top .order-number[b-ztdaj6gzw2] {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.order-info-top .status-badge.cancelled[b-ztdaj6gzw2] {
    background: #fef2f2;
    color: #ef4444;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 500;
}

.order-info-middle[b-ztdaj6gzw2] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 2px;
}

.order-info-middle .customer-name[b-ztdaj6gzw2] {
    font-weight: 500;
}

.order-info-middle .customer-city[b-ztdaj6gzw2] {
    color: var(--text-muted);
}

.order-info-bottom[b-ztdaj6gzw2] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.order-info-bottom .store-badge[b-ztdaj6gzw2] {
    background: #f0f9ff;
    color: #0284c7;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 500;
}

.order-info-bottom .date-text[b-ztdaj6gzw2] {
    color: var(--text-muted);
}

.order-stats[b-ztdaj6gzw2] {
    flex-shrink: 0;
    text-align: center;
}

.order-stats .stat-circle[b-ztdaj6gzw2] {
    width: 40px;
    height: 40px;
    background: var(--bg-muted);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 4px;
}

.order-stats .stat-num[b-ztdaj6gzw2] {
    font-weight: 700;
    font-size: 14px;
    color: var(--text-primary);
}

.order-stats .stat-label[b-ztdaj6gzw2] {
    font-size: 11px;
    color: var(--text-muted);
}

.order-actions[b-ztdaj6gzw2] {
    flex-shrink: 0;
}

.btn-icon-sm[b-ztdaj6gzw2] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-icon-sm svg[b-ztdaj6gzw2] {
    width: 18px;
    height: 18px;
}

.btn-icon-sm.danger[b-ztdaj6gzw2] {
    color: #ef4444;
}

.btn-icon-sm.danger:hover[b-ztdaj6gzw2] {
    background: #fef2f2;
    border-color: #ef4444;
}

.btn-icon-sm:disabled[b-ztdaj6gzw2] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Order Detail Section */
.cancelled-order-detail[b-ztdaj6gzw2] {
    border-top: 1px solid var(--border-color);
    background: var(--bg-muted);
    padding: 12px 16px;
}

.items-header[b-ztdaj6gzw2] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.items-header svg[b-ztdaj6gzw2] {
    color: var(--text-muted);
}

.items-list[b-ztdaj6gzw2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.item-row[b-ztdaj6gzw2] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-card);
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.item-row .item-image[b-ztdaj6gzw2] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
}

.item-row .item-image img[b-ztdaj6gzw2] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.item-row .item-image-placeholder[b-ztdaj6gzw2] {
    width: 40px;
    height: 40px;
    background: var(--bg-muted);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-row .item-image-placeholder svg[b-ztdaj6gzw2] {
    width: 20px;
    height: 20px;
    color: var(--text-muted);
}

.item-row .item-info[b-ztdaj6gzw2] {
    flex: 1;
    min-width: 0;
}

.item-row .item-name[b-ztdaj6gzw2] {
    display: block;
    font-weight: 500;
    font-size: 13px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-row .item-variant[b-ztdaj6gzw2] {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
}

.item-row .item-sku[b-ztdaj6gzw2] {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    font-family: monospace;
}

.item-row .item-qty[b-ztdaj6gzw2] {
    flex-shrink: 0;
    text-align: center;
}

.item-row .qty-value[b-ztdaj6gzw2] {
    display: block;
    font-weight: 600;
    font-size: 16px;
    color: var(--text-primary);
}

.item-row .qty-label[b-ztdaj6gzw2] {
    font-size: 11px;
    color: var(--text-muted);
}

/* Modal Footer */
.cancelled-modal-actions[b-ztdaj6gzw2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.cancelled-modal-actions .selection-info[b-ztdaj6gzw2] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-secondary);
}

.cancelled-modal-actions .selection-info input[type="checkbox"][b-ztdaj6gzw2] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.cancelled-modal-actions .action-buttons[b-ztdaj6gzw2] {
    display: flex;
    gap: 8px;
}

.loading-state[b-ztdaj6gzw2], .empty-state[b-ztdaj6gzw2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.empty-state .empty-icon[b-ztdaj6gzw2] {
    width: 48px;
    height: 48px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.stat-content h3[b-ztdaj6gzw2] {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 4px;
}

.stat-content p[b-ztdaj6gzw2] {
    font-size: 13px;
    color: var(--text-muted);
}

/* Filter Tabs */
.filter-tabs-container[b-ztdaj6gzw2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

.filter-tabs[b-ztdaj6gzw2] {
    display: flex;
    gap: 8px;
    padding: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: fit-content;
}

.filter-tabs-right[b-ztdaj6gzw2] {
    display: flex;
    gap: 4px;
}

.filter-tab[b-ztdaj6gzw2] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.filter-tab:hover[b-ztdaj6gzw2] {
    color: var(--text-primary);
    background: var(--bg-input);
}

.filter-tab.active[b-ztdaj6gzw2] {
    background: var(--primary);
    color: white;
}

.filter-tab.small[b-ztdaj6gzw2] {
    padding: 6px 12px;
    font-size: 12px;
}

.filter-tab svg[b-ztdaj6gzw2] {
    flex-shrink: 0;
}

.filter-tab .count[b-ztdaj6gzw2],
.filter-tab .tab-count[b-ztdaj6gzw2] {
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    font-size: 11px;
}

.filter-tab.small .tab-count[b-ztdaj6gzw2] {
    padding: 1px 6px;
    font-size: 10px;
    margin-left: 4px;
}

.filter-tab:not(.active) .count[b-ztdaj6gzw2],
.filter-tab:not(.active) .tab-count[b-ztdaj6gzw2] {
    background: var(--bg-input);
}

/* Order Cell */
.order-cell[b-ztdaj6gzw2] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.order-image[b-ztdaj6gzw2], .product-image[b-ztdaj6gzw2] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--border);
}

.order-image-placeholder[b-ztdaj6gzw2], .product-image-placeholder[b-ztdaj6gzw2] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.order-image-placeholder svg[b-ztdaj6gzw2], .product-image-placeholder svg[b-ztdaj6gzw2] {
    width: 24px;
    height: 24px;
}

.product-image-btn[b-ztdaj6gzw2] {
    position: relative;
    flex-shrink: 0;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
}

.product-image-btn:hover .product-image-scan-overlay[b-ztdaj6gzw2] {
    opacity: 1;
}

.product-image-scan-overlay[b-ztdaj6gzw2] {
    position: absolute;
    inset: 0;
    background: rgba(59, 130, 246, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    border-radius: 8px;
}

.product-image-scan-overlay svg[b-ztdaj6gzw2] {
    width: 24px;
    height: 24px;
    color: white;
}

.order-info[b-ztdaj6gzw2], .product-info[b-ztdaj6gzw2] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.order-number[b-ztdaj6gzw2] {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--primary);
    font-size: 13px;
}

.order-number-link[b-ztdaj6gzw2] {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--primary);
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}

.order-number-link:hover[b-ztdaj6gzw2] {
    color: var(--primary-hover);
    text-decoration: underline;
}

.order-customer[b-ztdaj6gzw2] {
    font-size: 14px;
    color: var(--text-primary);
}

.order-city[b-ztdaj6gzw2] {
    font-size: 12px;
    color: var(--text-muted);
}

/* Product Cell */
.product-cell[b-ztdaj6gzw2] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.product-name[b-ztdaj6gzw2] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
}

.product-codes[b-ztdaj6gzw2] {
    display: flex;
    gap: 6px;
    margin-top: 2px;
}

.code[b-ztdaj6gzw2] {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--font-mono);
}

.code.barcode[b-ztdaj6gzw2] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.code.sku[b-ztdaj6gzw2] {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

/* Store Cell */
.store-cell[b-ztdaj6gzw2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.store-name[b-ztdaj6gzw2] {
    font-weight: 500;
    color: var(--text-primary);
}

.platform-badge[b-ztdaj6gzw2] {
    font-size: 11px;
    padding: 2px 6px;
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border-radius: 4px;
    width: fit-content;
}

/* Progress Cell */
.progress-cell[b-ztdaj6gzw2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.progress-bar-mini[b-ztdaj6gzw2] {
    height: 6px;
    background: var(--bg-input);
    border-radius: 3px;
    overflow: hidden;
    width: 80px;
}

.progress-fill[b-ztdaj6gzw2] {
    height: 100%;
    background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.progress-text[b-ztdaj6gzw2] {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Quantity Cell */
.quantity-cell[b-ztdaj6gzw2] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.qty-large[b-ztdaj6gzw2] {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.qty-label[b-ztdaj6gzw2] {
    font-size: 12px;
    color: var(--text-muted);
}

/* Badges */
.item-count[b-ztdaj6gzw2] {
    font-size: 13px;
    color: var(--text-secondary);
}

.location-badge[b-ztdaj6gzw2] {
    padding: 4px 8px;
    background: rgba(251, 191, 36, 0.15);
    color: #f59e0b;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.order-count-badge[b-ztdaj6gzw2] {
    padding: 4px 8px;
    background: var(--bg-input);
    border-radius: 4px;
    font-size: 13px;
}

.date-text[b-ztdaj6gzw2] {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Status Badge */
.status-badge[b-ztdaj6gzw2] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.status-badge.warning[b-ztdaj6gzw2] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.status-badge.info[b-ztdaj6gzw2] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.status-badge.success[b-ztdaj6gzw2] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.status-badge.default[b-ztdaj6gzw2] {
    background: var(--bg-input);
    color: var(--text-muted);
}

/* Action Buttons */
.action-buttons[b-ztdaj6gzw2] {
    display: flex;
    gap: 4px;
}

.btn-icon-sm[b-ztdaj6gzw2] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-icon-sm svg[b-ztdaj6gzw2] {
    width: 16px;
    height: 16px;
}

.btn-icon-sm.success[b-ztdaj6gzw2] {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.btn-icon-sm.success:hover[b-ztdaj6gzw2] {
    background: rgba(34, 197, 94, 0.2);
}

.btn-icon-sm.danger[b-ztdaj6gzw2] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.btn-icon-sm.danger:hover[b-ztdaj6gzw2] {
    background: rgba(239, 68, 68, 0.2);
}

.btn-icon-sm.info[b-ztdaj6gzw2] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.btn-icon-sm.info:hover[b-ztdaj6gzw2] {
    background: rgba(59, 130, 246, 0.2);
}

.th-actions[b-ztdaj6gzw2] {
    width: 100px;
    text-align: center;
}

/* Filter Modal */
.filter-modal-content[b-ztdaj6gzw2] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.filter-row[b-ztdaj6gzw2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.filter-group[b-ztdaj6gzw2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-group label[b-ztdaj6gzw2] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}

.date-time-row[b-ztdaj6gzw2] {
    display: flex;
    gap: 8px;
}

.time-input[b-ztdaj6gzw2] {
    width: 100px;
}

.filter-divider[b-ztdaj6gzw2] {
    height: 1px;
    background: var(--border);
    margin: 8px 0;
}

.filter-section[b-ztdaj6gzw2] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.filter-section-header[b-ztdaj6gzw2] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.filter-section-header svg[b-ztdaj6gzw2] {
    color: var(--primary);
}

.filter-group.full-width[b-ztdaj6gzw2] {
    grid-column: 1 / -1;
}

@media (max-width: 576px) {
    .filter-row[b-ztdaj6gzw2] {
        grid-template-columns: 1fr;
    }
}

/* Product Orders Modal */
.product-orders-header[b-ztdaj6gzw2] {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.product-orders-header h4[b-ztdaj6gzw2] {
    margin: 0 0 4px;
    color: var(--text-primary);
}

.product-orders-header p[b-ztdaj6gzw2] {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

.simple-table[b-ztdaj6gzw2] {
    width: 100%;
    border-collapse: collapse;
}

.simple-table th[b-ztdaj6gzw2],
.simple-table td[b-ztdaj6gzw2] {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.simple-table th[b-ztdaj6gzw2] {
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 14px;
}

.text-muted[b-ztdaj6gzw2] {
    color: var(--text-muted);
}

@media (max-width: 1400px) {
    .stats-grid[b-ztdaj6gzw2] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablet */
@media (max-width: 1024px) {
    .stats-grid[b-ztdaj6gzw2] {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 16px;
    }

    .stat-card[b-ztdaj6gzw2] {
        padding: 16px;
    }

    .stat-card:hover[b-ztdaj6gzw2] {
        transform: none;
    }

    .stat-icon[b-ztdaj6gzw2] {
        width: 44px;
        height: 44px;
    }

    .stat-icon svg[b-ztdaj6gzw2] {
        width: 22px;
        height: 22px;
    }

    .stat-content h3[b-ztdaj6gzw2] {
        font-size: 22px;
    }

    .stat-content p[b-ztdaj6gzw2] {
        font-size: 12px;
    }

    /* Filter tabs - both groups scroll */
    .filter-tabs-container[b-ztdaj6gzw2] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .filter-tabs[b-ztdaj6gzw2],
    .filter-tabs-right[b-ztdaj6gzw2] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .filter-tab[b-ztdaj6gzw2] {
        padding: 8px 14px;
        font-size: 12px;
        white-space: nowrap;
    }

    /* Cancelled alert */
    .cancelled-alert-banner[b-ztdaj6gzw2] {
        padding: 12px 16px;
        gap: 12px;
    }

    .cancelled-alert-button[b-ztdaj6gzw2] {
        white-space: nowrap;
        font-size: 12px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .stats-grid[b-ztdaj6gzw2] {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 12px;
    }

    .stat-card[b-ztdaj6gzw2] {
        padding: 14px;
        gap: 12px;
    }

    .stat-icon[b-ztdaj6gzw2] {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .stat-icon svg[b-ztdaj6gzw2] {
        width: 20px;
        height: 20px;
    }

    .stat-content h3[b-ztdaj6gzw2] {
        font-size: 20px;
        margin-bottom: 2px;
    }

    .stat-content p[b-ztdaj6gzw2] {
        font-size: 11px;
    }

    /* Filter tabs */
    .filter-tabs-container[b-ztdaj6gzw2] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 12px;
    }

    .filter-tabs[b-ztdaj6gzw2] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        width: 100%;
    }

    .filter-tabs[b-ztdaj6gzw2]::-webkit-scrollbar {
        display: none;
    }

    .filter-tabs-right[b-ztdaj6gzw2] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .filter-tabs-right[b-ztdaj6gzw2]::-webkit-scrollbar {
        display: none;
    }

    .filter-tab[b-ztdaj6gzw2] {
        padding: 7px 12px;
        font-size: 12px;
        white-space: nowrap;
        gap: 6px;
    }

    .filter-tab .count[b-ztdaj6gzw2],
    .tab-count[b-ztdaj6gzw2] {
        font-size: 10px;
    }

    /* Cancelled alert banner */
    .cancelled-alert-banner[b-ztdaj6gzw2] {
        flex-direction: column;
        padding: 12px;
        gap: 10px;
        text-align: center;
    }

    .cancelled-alert-content[b-ztdaj6gzw2] {
        justify-content: center;
    }

    .alert-text[b-ztdaj6gzw2] {
        font-size: 13px;
    }

    .cancelled-alert-button[b-ztdaj6gzw2] {
        width: 100%;
        justify-content: center;
        font-size: 12px;
        padding: 8px 12px;
    }

    /* Search input */
    .search-input-wide[b-ztdaj6gzw2] {
        font-size: 13px;
    }

    /* Simple table in modals */
    .simple-table th[b-ztdaj6gzw2],
    .simple-table td[b-ztdaj6gzw2] {
        padding: 10px 8px;
        font-size: 13px;
    }

    .simple-table th[b-ztdaj6gzw2] {
        font-size: 11px;
    }
}

/* Barcode Scanner Styles */
.barcode-scanner-container[b-ztdaj6gzw2] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.scan-input-section[b-ztdaj6gzw2] {
    text-align: center;
}

.scan-input-wrapper[b-ztdaj6gzw2] {
    display: flex;
    gap: 8px;
    max-width: 400px;
    margin: 0 auto;
}

.scan-input[b-ztdaj6gzw2] {
    flex: 1;
    padding: 16px 20px;
    font-size: 18px;
    font-family: var(--font-mono);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    color: var(--text-primary);
    text-align: center;
    transition: all 0.2s;
}

.scan-input:focus[b-ztdaj6gzw2] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.scan-button[b-ztdaj6gzw2] {
    width: 56px;
    height: 56px;
    border: none;
    border-radius: var(--radius);
    background: var(--primary);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.scan-button:hover:not(:disabled)[b-ztdaj6gzw2] {
    background: var(--primary-hover);
}

.scan-button:disabled[b-ztdaj6gzw2] {
    opacity: 0.6;
    cursor: not-allowed;
}

.scan-button svg[b-ztdaj6gzw2] {
    width: 24px;
    height: 24px;
}

.spinner-small[b-ztdaj6gzw2] {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin-b-ztdaj6gzw2 0.8s linear infinite;
}

@keyframes spin-b-ztdaj6gzw2 {
    to {
        transform: rotate(360deg);
    }
}

.scan-hint[b-ztdaj6gzw2] {
    margin-top: 8px;
    font-size: 13px;
    color: var(--text-muted);
}

/* Scan Result */
.scan-result[b-ztdaj6gzw2] {
    display: block;
    width: 100%;
    padding: 20px;
    border-radius: var(--radius-lg);
    animation: fadeIn-b-ztdaj6gzw2 0.3s ease;
}

@keyframes fadeIn-b-ztdaj6gzw2 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.scan-result.success[b-ztdaj6gzw2] {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.scan-result.warning[b-ztdaj6gzw2] {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.scan-result.error[b-ztdaj6gzw2] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.scan-result.info[b-ztdaj6gzw2] {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.scan-result-content[b-ztdaj6gzw2] {
    width: 100%;
}

.scan-result-message[b-ztdaj6gzw2] {
    margin: 0 0 12px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Scanned Item Info */
.scanned-item-info[b-ztdaj6gzw2] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    width: 100%;
    box-sizing: border-box;
}

.scanned-item-image[b-ztdaj6gzw2] {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    object-fit: cover;
}

.scanned-item-image-placeholder[b-ztdaj6gzw2] {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.scanned-item-image-placeholder svg[b-ztdaj6gzw2] {
    width: 32px;
    height: 32px;
}

.scanned-item-details[b-ztdaj6gzw2] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.scanned-item-name[b-ztdaj6gzw2] {
    font-weight: 600;
    color: var(--text-primary);
}

.scanned-item-variant[b-ztdaj6gzw2] {
    font-size: 13px;
    color: var(--text-secondary);
}

.scanned-item-meta[b-ztdaj6gzw2] {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}

.meta-item[b-ztdaj6gzw2] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-muted);
}

.scanned-item-qty[b-ztdaj6gzw2] {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-top: 4px;
}

.qty-picked[b-ztdaj6gzw2] {
    font-size: 18px;
    font-weight: 700;
    color: #10b981;
}

.qty-separator[b-ztdaj6gzw2] {
    color: var(--text-muted);
}

.qty-total[b-ztdaj6gzw2] {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Multiple Orders */
/* Multi-Product Card */
.multi-product-card[b-ztdaj6gzw2] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
    width: 100%;
    box-sizing: border-box;
}

.multi-product-image-section[b-ztdaj6gzw2] {
    flex-shrink: 0;
}

.multi-product-image[b-ztdaj6gzw2] {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.multi-product-image-placeholder[b-ztdaj6gzw2] {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.multi-product-image-placeholder svg[b-ztdaj6gzw2] {
    width: 32px;
    height: 32px;
    color: var(--text-muted);
}

.multi-product-info[b-ztdaj6gzw2] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.multi-product-name[b-ztdaj6gzw2] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.multi-product-variant[b-ztdaj6gzw2] {
    display: flex;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.multi-product-codes[b-ztdaj6gzw2] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.product-code[b-ztdaj6gzw2] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg-secondary);
    padding: 2px 8px;
    border-radius: 4px;
}

.multi-product-count[b-ztdaj6gzw2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background: var(--primary);
    border-radius: var(--radius);
    color: white;
    min-width: 60px;
}

.count-number[b-ztdaj6gzw2] {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}

.count-label[b-ztdaj6gzw2] {
    font-size: 10px;
    text-transform: uppercase;
    opacity: 0.9;
    margin-top: 2px;
}

/* Multiple Orders List */
.multiple-orders-list[b-ztdaj6gzw2] {
    margin-top: 8px;
    width: 100%;
}

.multiple-orders-title[b-ztdaj6gzw2] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.multiple-order-item[b-ztdaj6gzw2] {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    padding: 0;
    margin-bottom: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    overflow: hidden;
}

.multiple-order-item:hover[b-ztdaj6gzw2] {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.multiple-order-item.warning[b-ztdaj6gzw2] {
    border-left: 3px solid var(--warning);
}

.multiple-order-item.urgent[b-ztdaj6gzw2] {
    border-left: 3px solid #F97316;
    background: rgba(249, 115, 22, 0.03);
}

.multiple-order-item.overdue[b-ztdaj6gzw2] {
    border-left: 3px solid var(--error);
    background: rgba(239, 68, 68, 0.03);
}

.multiple-order-item:disabled[b-ztdaj6gzw2] {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.multiple-order-item.processing[b-ztdaj6gzw2] {
    position: relative;
    pointer-events: none;
}

.item-loading-overlay[b-ztdaj6gzw2] {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: inherit;
}

[data-theme="dark"] .item-loading-overlay[b-ztdaj6gzw2] {
    background: rgba(0, 0, 0, 0.5);
}

.order-item-left[b-ztdaj6gzw2] {
    flex: 1;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.order-item-right[b-ztdaj6gzw2] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border);
    min-width: 100px;
}

.order-select-header[b-ztdaj6gzw2] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.order-select-number[b-ztdaj6gzw2] {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
}

.delivery-type-badge[b-ztdaj6gzw2] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.delivery-type-badge.fast[b-ztdaj6gzw2] {
    background: rgba(139, 92, 246, 0.15);
    color: #8B5CF6;
}

.order-select-customer[b-ztdaj6gzw2] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
}

.customer-city[b-ztdaj6gzw2] {
    font-weight: 400;
    color: var(--text-secondary);
}

.order-select-meta[b-ztdaj6gzw2] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: var(--text-secondary);
}

.order-meta-item[b-ztdaj6gzw2] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.order-meta-item.store[b-ztdaj6gzw2] {
    color: var(--primary);
}

.detail-icon[b-ztdaj6gzw2] {
    width: 13px;
    height: 13px;
    opacity: 0.6;
}

.order-select-qty[b-ztdaj6gzw2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 4px;
}

.order-select-qty .qty-value[b-ztdaj6gzw2] {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.order-select-qty .qty-unit[b-ztdaj6gzw2] {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: lowercase;
}

.order-deadline[b-ztdaj6gzw2] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.order-deadline .detail-icon[b-ztdaj6gzw2] {
    width: 12px;
    height: 12px;
}

.order-deadline.normal[b-ztdaj6gzw2] {
    background: rgba(34, 197, 94, 0.1);
    color: #22C55E;
}

.order-deadline.warning[b-ztdaj6gzw2] {
    background: rgba(245, 158, 11, 0.1);
    color: #F59E0B;
}

.order-deadline.urgent[b-ztdaj6gzw2] {
    background: rgba(249, 115, 22, 0.15);
    color: #F97316;
}

.order-deadline.overdue[b-ztdaj6gzw2] {
    background: rgba(239, 68, 68, 0.15);
    color: #EF4444;
}

/* Recent Scans */
.recent-scans-section[b-ztdaj6gzw2] {
    border-top: 1px solid var(--border);
    padding-top: 20px;
}

.recent-scans-title[b-ztdaj6gzw2] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 12px;
}

.recent-scans-list[b-ztdaj6gzw2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.recent-scan-item[b-ztdaj6gzw2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--bg-input);
    border-radius: var(--radius);
    border-left: 3px solid;
}

.recent-scan-item.success[b-ztdaj6gzw2] {
    border-left-color: #10b981;
}

.recent-scan-item.failed[b-ztdaj6gzw2] {
    border-left-color: #ef4444;
}

.recent-scan-info[b-ztdaj6gzw2] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.recent-scan-barcode[b-ztdaj6gzw2] {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
}

.recent-scan-name[b-ztdaj6gzw2] {
    font-size: 13px;
    color: var(--text-primary);
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recent-scan-status[b-ztdaj6gzw2] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.recent-scan-item.success .recent-scan-status[b-ztdaj6gzw2] {
    color: #10b981;
}

.recent-scan-item.failed .recent-scan-status[b-ztdaj6gzw2] {
    color: #ef4444;
}

.recent-scan-status svg[b-ztdaj6gzw2] {
    width: 18px;
    height: 18px;
}

/* Order Image Button (for order-based picking) */
.order-image-btn[b-ztdaj6gzw2] {
    position: relative;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s;
}

.order-image-btn:hover[b-ztdaj6gzw2] {
    transform: scale(1.05);
}

.order-image-btn .order-image[b-ztdaj6gzw2],
.order-image-btn .order-image-placeholder[b-ztdaj6gzw2] {
    display: block;
}

.order-image-scan-overlay[b-ztdaj6gzw2] {
    position: absolute;
    inset: 0;
    background: rgba(59, 130, 246, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    border-radius: 8px;
}

.order-image-btn:hover .order-image-scan-overlay[b-ztdaj6gzw2] {
    opacity: 1;
}

.order-image-scan-overlay svg[b-ztdaj6gzw2] {
    width: 24px;
    height: 24px;
    color: white;
}

/* Order Picking Header (in scanner modal) */
.order-picking-header[b-ztdaj6gzw2] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(139, 92, 246, 0.05) 100%);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 20px;
}

.order-picking-info[b-ztdaj6gzw2] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.order-picking-image[b-ztdaj6gzw2] {
    width: 64px;
    height: 64px;
    border-radius: var(--radius);
    object-fit: cover;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.order-picking-image-placeholder[b-ztdaj6gzw2] {
    width: 64px;
    height: 64px;
    border-radius: var(--radius);
    background: var(--bg-input);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    flex-shrink: 0;
}

.order-picking-image-placeholder svg[b-ztdaj6gzw2] {
    width: 28px;
    height: 28px;
}

.order-picking-details[b-ztdaj6gzw2] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.order-picking-number[b-ztdaj6gzw2] {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 700;
    color: var(--primary);
}

.order-picking-customer[b-ztdaj6gzw2] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.order-picking-meta[b-ztdaj6gzw2] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.order-picking-meta .meta-badge[b-ztdaj6gzw2] {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 4px;
}

.order-picking-meta .meta-badge.store[b-ztdaj6gzw2] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.order-picking-meta .meta-badge.city[b-ztdaj6gzw2] {
    background: var(--bg-input);
    color: var(--text-secondary);
}

.order-picking-meta .meta-badge.tracking[b-ztdaj6gzw2] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    font-family: var(--font-mono);
}

.order-picking-meta .meta-badge.tracking svg[b-ztdaj6gzw2] {
    flex-shrink: 0;
}

.order-picking-progress[b-ztdaj6gzw2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    min-width: 80px;
}

.order-picking-progress .progress-circle[b-ztdaj6gzw2] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.order-picking-progress .progress-value[b-ztdaj6gzw2] {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
}

.order-picking-progress .progress-label[b-ztdaj6gzw2] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* =============================================
   MASTER-DETAIL ORDER VIEW STYLES
   ============================================= */

.master-detail-container[b-ztdaj6gzw2] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Expand/Collapse Controls */
.expand-controls[b-ztdaj6gzw2] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.expand-btn[b-ztdaj6gzw2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s;
}

.expand-btn:hover[b-ztdaj6gzw2] {
    background: var(--bg-input);
    color: var(--text-primary);
}

/* Orders Master List */
.orders-master-list[b-ztdaj6gzw2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Order Master Card */
.order-master-card[b-ztdaj6gzw2] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all 0.2s;
}

.order-master-card:hover[b-ztdaj6gzw2] {
    border-color: var(--border-hover);
}

.order-master-card.expanded[b-ztdaj6gzw2] {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

.order-master-card.completed[b-ztdaj6gzw2] {
    opacity: 0.7;
}

.order-master-card.completed:hover[b-ztdaj6gzw2] {
    opacity: 1;
}

/* Order Master Header */
.order-master-header[b-ztdaj6gzw2] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.2s;
}

.order-master-header:hover[b-ztdaj6gzw2] {
    background: var(--bg-input);
}

.order-expand-icon[b-ztdaj6gzw2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.order-expand-icon svg[b-ztdaj6gzw2] {
    transition: transform 0.2s;
}

.order-expand-icon svg.rotated[b-ztdaj6gzw2] {
    transform: rotate(90deg);
}

.order-master-checkbox[b-ztdaj6gzw2] {
    flex-shrink: 0;
}

.order-master-checkbox input[type="checkbox"][b-ztdaj6gzw2] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Order Master Info */
.order-master-info[b-ztdaj6gzw2] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.order-master-top[b-ztdaj6gzw2] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.fast-delivery-badge[b-ztdaj6gzw2] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 10px;
    background: rgba(139, 92, 246, 0.15);
    color: #8B5CF6;
    text-transform: uppercase;
}

.order-master-middle[b-ztdaj6gzw2] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

.order-master-middle .order-customer[b-ztdaj6gzw2] {
    font-weight: 500;
    color: var(--text-primary);
}

.order-master-middle .order-city[b-ztdaj6gzw2] {
    color: var(--text-muted);
    font-size: 13px;
}

.order-master-bottom[b-ztdaj6gzw2] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.store-badge[b-ztdaj6gzw2], .cargo-badge[b-ztdaj6gzw2], .date-badge[b-ztdaj6gzw2], .tracking-badge[b-ztdaj6gzw2] {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--bg-input);
    color: var(--text-secondary);
}

.store-badge[b-ztdaj6gzw2] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.tracking-badge[b-ztdaj6gzw2] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    font-family: var(--font-mono);
    font-weight: 500;
}

.tracking-badge svg[b-ztdaj6gzw2] {
    flex-shrink: 0;
}

.delivery-date-badge[b-ztdaj6gzw2] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
    font-weight: 500;
}

.delivery-date-badge svg[b-ztdaj6gzw2] {
    flex-shrink: 0;
}

.delivery-date-badge.urgent[b-ztdaj6gzw2] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    font-weight: 600;
}

.delivery-cell[b-ztdaj6gzw2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

.fast-delivery-badge-sm[b-ztdaj6gzw2] {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(249, 115, 22, 0.15);
    color: #f97316;
    font-weight: 600;
}

/* Order Master Progress */
.order-master-progress[b-ztdaj6gzw2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    min-width: 80px;
}

.progress-circle-mini[b-ztdaj6gzw2] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    background: var(--bg-input);
    border-radius: var(--radius);
    border: 2px solid var(--border);
}

.progress-circle-mini.complete[b-ztdaj6gzw2] {
    background: rgba(34, 197, 94, 0.1);
    border-color: #22c55e;
}

.progress-circle-mini .progress-num[b-ztdaj6gzw2] {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.progress-circle-mini.complete .progress-num[b-ztdaj6gzw2] {
    color: #22c55e;
}

.order-master-progress .progress-label[b-ztdaj6gzw2] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Order Master Actions */
.order-master-actions[b-ztdaj6gzw2] {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* Order Detail Section */
.order-detail-section[b-ztdaj6gzw2] {
    border-top: 1px solid var(--border);
    background: var(--bg-secondary);
    padding: 16px;
    animation: slideDown-b-ztdaj6gzw2 0.2s ease;
}

@keyframes slideDown-b-ztdaj6gzw2 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.order-items-header[b-ztdaj6gzw2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.items-title[b-ztdaj6gzw2] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Order Items List */
.order-items-list[b-ztdaj6gzw2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.order-item-row[b-ztdaj6gzw2] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: all 0.2s;
}

.order-item-row:hover[b-ztdaj6gzw2] {
    border-color: var(--border-hover);
}

.order-item-row.picked[b-ztdaj6gzw2] {
    opacity: 0.6;
    background: rgba(34, 197, 94, 0.05);
}

/* Clickable Order Item Row (button) */
button.order-item-row.clickable[b-ztdaj6gzw2] {
    width: 100%;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
}

button.order-item-row.clickable:hover:not(.picked):not(.disabled)[b-ztdaj6gzw2] {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
    transform: translateY(-1px);
}

button.order-item-row.clickable.disabled[b-ztdaj6gzw2] {
    pointer-events: none;
    opacity: 0.5;
}

button.order-item-row.clickable.picked[b-ztdaj6gzw2] {
    cursor: default;
}

/* Just Picked Animation */
button.order-item-row.clickable.just-picked[b-ztdaj6gzw2] {
    background: rgba(34, 197, 94, 0.1);
    border-color: #22c55e;
    animation: pickFlash-b-ztdaj6gzw2 0.3s ease-out;
}

@keyframes pickFlash-b-ztdaj6gzw2 {
    0% {
        transform: scale(1);
        background: rgba(34, 197, 94, 0.3);
    }
    50% {
        transform: scale(1.02);
        background: rgba(34, 197, 94, 0.2);
    }
    100% {
        transform: scale(1);
        background: rgba(34, 197, 94, 0.1);
    }
}

.item-picked-overlay.animate[b-ztdaj6gzw2] {
    animation: checkmarkPop-b-ztdaj6gzw2 0.3s ease-out;
}

@keyframes checkmarkPop-b-ztdaj6gzw2 {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Item Image */
.item-image[b-ztdaj6gzw2] {
    position: relative;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.item-image img[b-ztdaj6gzw2] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.item-image-placeholder[b-ztdaj6gzw2] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    color: var(--text-muted);
}

.item-image-placeholder svg[b-ztdaj6gzw2] {
    width: 24px;
    height: 24px;
}

.item-picked-overlay[b-ztdaj6gzw2] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(34, 197, 94, 0.85);
    border-radius: var(--radius);
    color: white;
}

.item-picked-overlay svg[b-ztdaj6gzw2] {
    width: 28px;
    height: 28px;
}

/* Item Details */
.item-details[b-ztdaj6gzw2] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.item-name[b-ztdaj6gzw2] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-variant[b-ztdaj6gzw2] {
    font-size: 12px;
    color: var(--text-secondary);
}

.item-codes[b-ztdaj6gzw2] {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.item-barcode[b-ztdaj6gzw2], .item-sku[b-ztdaj6gzw2] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--text-muted);
    background: var(--bg-input);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Item Location */
.item-location[b-ztdaj6gzw2] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: rgba(251, 191, 36, 0.1);
    color: #f59e0b;
    border-radius: var(--radius);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

/* Item Quantity */
.item-quantity[b-ztdaj6gzw2] {
    display: flex;
    align-items: baseline;
    gap: 2px;
    padding: 6px 12px;
    background: var(--bg-input);
    border-radius: var(--radius);
    min-width: 60px;
    justify-content: center;
}

.item-quantity.complete[b-ztdaj6gzw2] {
    background: rgba(34, 197, 94, 0.1);
}

.item-quantity .qty-picked[b-ztdaj6gzw2] {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.item-quantity.complete .qty-picked[b-ztdaj6gzw2] {
    color: #22c55e;
}

.item-quantity .qty-sep[b-ztdaj6gzw2] {
    color: var(--text-muted);
    font-size: 14px;
}

.item-quantity .qty-total[b-ztdaj6gzw2] {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Item Status */
.item-status[b-ztdaj6gzw2] {
    flex-shrink: 0;
}

.status-icon[b-ztdaj6gzw2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

.status-icon svg[b-ztdaj6gzw2] {
    width: 16px;
    height: 16px;
}

.status-icon.success[b-ztdaj6gzw2] {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.status-icon.pending[b-ztdaj6gzw2] {
    background: var(--bg-input);
    color: var(--text-muted);
}

/* =============================================
   MOBILE RESPONSIVE STYLES
   ============================================= */

/* Tablet (768px) */
@media (max-width: 768px) {
    .order-master-header[b-ztdaj6gzw2] {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px;
    }

    .order-master-info[b-ztdaj6gzw2] {
        order: 3;
        flex-basis: 100%;
        padding-left: 0;
        margin-top: 8px;
    }

    .order-master-progress[b-ztdaj6gzw2] {
        order: 2;
        margin-left: auto;
    }

    .order-master-actions[b-ztdaj6gzw2] {
        order: 4;
        margin-top: 8px;
        width: 100%;
        justify-content: flex-end;
    }

    .order-expand-icon[b-ztdaj6gzw2] {
        order: 1;
    }

    .order-master-checkbox[b-ztdaj6gzw2] {
        order: 1;
    }

    .order-image-btn[b-ztdaj6gzw2] {
        order: 1;
    }
}

/* Mobile (576px) */
@media (max-width: 576px) {
    /* Stats Grid - 2 columns on mobile */
    .stats-grid[b-ztdaj6gzw2] {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .stat-card[b-ztdaj6gzw2] {
        padding: 16px;
        gap: 12px;
    }

    .stat-icon[b-ztdaj6gzw2] {
        width: 40px;
        height: 40px;
    }

    .stat-icon svg[b-ztdaj6gzw2] {
        width: 20px;
        height: 20px;
    }

    .stat-content h3[b-ztdaj6gzw2] {
        font-size: 20px;
    }

    .stat-content p[b-ztdaj6gzw2] {
        font-size: 11px;
    }

    /* Filter Tabs */
    .filter-tabs-container[b-ztdaj6gzw2] {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-tabs[b-ztdaj6gzw2] {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .filter-tab[b-ztdaj6gzw2] {
        padding: 8px 12px;
        font-size: 12px;
        white-space: nowrap;
    }

    /* Expand Controls */
    .expand-controls[b-ztdaj6gzw2] {
        display: none;
    }

    /* Order Master Card - Simplified Mobile Layout */
    .order-master-card[b-ztdaj6gzw2] {
        border-radius: var(--radius);
    }

    .order-master-header[b-ztdaj6gzw2] {
        display: grid;
        grid-template-columns: auto auto 1fr auto;
        grid-template-rows: auto auto;
        gap: 8px 10px;
        padding: 12px;
        align-items: center;
    }

    .order-expand-icon[b-ztdaj6gzw2] {
        grid-row: 1;
        grid-column: 1;
    }

    .order-master-checkbox[b-ztdaj6gzw2] {
        display: none; /* Hide checkbox on mobile for cleaner UI */
    }

    .order-image-btn[b-ztdaj6gzw2] {
        grid-row: 1;
        grid-column: 2;
        width: 40px;
        height: 40px;
    }

    .order-image-btn .order-image[b-ztdaj6gzw2] {
        width: 40px;
        height: 40px;
    }

    .order-image-btn .order-image-placeholder[b-ztdaj6gzw2] {
        width: 40px;
        height: 40px;
    }

    .order-image-btn .order-image-placeholder svg[b-ztdaj6gzw2] {
        width: 18px;
        height: 18px;
    }

    .order-image-btn .order-image-scan-overlay svg[b-ztdaj6gzw2] {
        width: 18px;
        height: 18px;
    }

    .order-master-info[b-ztdaj6gzw2] {
        grid-row: 1;
        grid-column: 3;
        padding-left: 0;
        margin-top: 0;
    }

    .order-master-top[b-ztdaj6gzw2] {
        flex-wrap: wrap;
        gap: 4px;
    }

    .order-number-link[b-ztdaj6gzw2] {
        font-size: 13px;
    }

    .status-badge[b-ztdaj6gzw2] {
        font-size: 10px;
        padding: 2px 6px;
    }

    .fast-delivery-badge[b-ztdaj6gzw2] {
        font-size: 9px;
        padding: 2px 6px;
    }

    .order-master-middle[b-ztdaj6gzw2] {
        font-size: 13px;
        margin-top: 2px;
    }

    .order-master-bottom[b-ztdaj6gzw2] {
        margin-top: 4px;
        flex-wrap: wrap;
        gap: 4px;
    }

    .store-badge[b-ztdaj6gzw2], .cargo-badge[b-ztdaj6gzw2], .date-badge[b-ztdaj6gzw2], .tracking-badge[b-ztdaj6gzw2], .delivery-date-badge[b-ztdaj6gzw2] {
        font-size: 10px;
        padding: 2px 6px;
    }

    .tracking-badge[b-ztdaj6gzw2] {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .order-master-progress[b-ztdaj6gzw2] {
        grid-row: 1;
        grid-column: 4;
        padding: 4px 8px;
        min-width: 60px;
    }

    .progress-circle-mini[b-ztdaj6gzw2] {
        padding: 4px 8px;
    }

    .progress-circle-mini .progress-num[b-ztdaj6gzw2] {
        font-size: 12px;
    }

    .order-master-progress .progress-label[b-ztdaj6gzw2] {
        font-size: 10px;
    }

    .order-master-actions[b-ztdaj6gzw2] {
        grid-row: 2;
        grid-column: 1 / -1;
        display: flex;
        gap: 8px;
        margin-top: 0;
        padding-top: 8px;
        border-top: 1px solid var(--border);
    }

    .order-master-actions .btn-icon-sm[b-ztdaj6gzw2] {
        flex: 1;
        height: 36px;
        border-radius: var(--radius);
    }

    /* Order Detail Section */
    .order-detail-section[b-ztdaj6gzw2] {
        padding: 12px;
    }

    .order-items-header .items-title[b-ztdaj6gzw2] {
        font-size: 12px;
    }

    /* Order Item Row in detail */
    .order-item-row[b-ztdaj6gzw2] {
        padding: 10px;
        gap: 10px;
    }

    .item-image[b-ztdaj6gzw2] {
        width: 48px;
        height: 48px;
    }

    .item-details[b-ztdaj6gzw2] {
        min-width: 0;
    }

    .item-name[b-ztdaj6gzw2] {
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .item-variant[b-ztdaj6gzw2] {
        font-size: 11px;
    }

    .item-codes[b-ztdaj6gzw2] {
        display: none; /* Hide codes on mobile */
    }

    .item-location[b-ztdaj6gzw2] {
        display: none; /* Hide location on mobile to simplify */
    }

    .item-quantity[b-ztdaj6gzw2] {
        padding: 4px 8px;
        min-width: 50px;
    }

    .item-quantity .qty-picked[b-ztdaj6gzw2] {
        font-size: 14px;
    }

    .item-quantity .qty-sep[b-ztdaj6gzw2],
    .item-quantity .qty-total[b-ztdaj6gzw2] {
        font-size: 12px;
    }

    .item-status[b-ztdaj6gzw2] {
        display: none; /* Hide status icon on mobile */
    }

    /* Clickable Order Item Row */
    button.order-item-row.clickable[b-ztdaj6gzw2] {
        padding: 10px;
    }
}

/* Small Mobile (420px) */
@media (max-width: 420px) {
    .stats-grid[b-ztdaj6gzw2] {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .stat-card[b-ztdaj6gzw2] {
        padding: 12px;
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }

    .stat-icon[b-ztdaj6gzw2] {
        width: 36px;
        height: 36px;
    }

    .stat-content h3[b-ztdaj6gzw2] {
        font-size: 18px;
    }

    .order-master-header[b-ztdaj6gzw2] {
        padding: 10px;
        gap: 6px 8px;
    }

    .order-image-btn[b-ztdaj6gzw2] {
        width: 36px;
        height: 36px;
    }

    .order-image-btn .order-image[b-ztdaj6gzw2],
    .order-image-btn .order-image-placeholder[b-ztdaj6gzw2] {
        width: 36px;
        height: 36px;
    }

    .order-master-info[b-ztdaj6gzw2] {
        gap: 2px;
    }

    .order-number-link[b-ztdaj6gzw2] {
        font-size: 12px;
    }

    .order-master-middle[b-ztdaj6gzw2] {
        font-size: 12px;
    }

    .order-customer[b-ztdaj6gzw2] {
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .order-master-bottom[b-ztdaj6gzw2] {
        gap: 3px;
    }

    .store-badge[b-ztdaj6gzw2], .cargo-badge[b-ztdaj6gzw2], .date-badge[b-ztdaj6gzw2], .tracking-badge[b-ztdaj6gzw2], .delivery-date-badge[b-ztdaj6gzw2] {
        font-size: 9px;
        padding: 1px 4px;
    }

    .tracking-badge[b-ztdaj6gzw2] {
        max-width: 80px;
    }

    .order-master-progress[b-ztdaj6gzw2] {
        min-width: 50px;
    }

    .progress-circle-mini .progress-num[b-ztdaj6gzw2] {
        font-size: 11px;
    }
}

/* =============================================
   CAMERA SCANNER STYLES
   ============================================= */

/* Mode Toggle */
.scan-mode-toggle[b-ztdaj6gzw2] {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 4px;
    background: var(--bg-input);
    border-radius: var(--radius);
    margin-bottom: 16px;
}

.mode-btn[b-ztdaj6gzw2] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}

.mode-btn:hover[b-ztdaj6gzw2] {
    color: var(--text-primary);
    background: var(--bg-card);
}

.mode-btn.active[b-ztdaj6gzw2] {
    background: var(--primary);
    color: white;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

.mode-btn svg[b-ztdaj6gzw2] {
    flex-shrink: 0;
}

/* Camera Container */
.camera-container[b-ztdaj6gzw2] {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #000;
    aspect-ratio: 4/3;
}

.camera-video[b-ztdaj6gzw2] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.camera-overlay[b-ztdaj6gzw2] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.scan-region[b-ztdaj6gzw2] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 30%;
    border: 2px solid rgba(59, 130, 246, 0.8);
    border-radius: 8px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
}

.scan-line[b-ztdaj6gzw2] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #3b82f6, transparent);
    animation: scanMove-b-ztdaj6gzw2 2s ease-in-out infinite;
}

@keyframes scanMove-b-ztdaj6gzw2 {
    0%, 100% {
        top: 0;
    }
    50% {
        top: calc(100% - 2px);
    }
}

/* Camera Loading */
.camera-loading[b-ztdaj6gzw2] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    gap: 12px;
}

.camera-loading .spinner[b-ztdaj6gzw2] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin-b-ztdaj6gzw2 0.8s linear infinite;
}

.camera-loading p[b-ztdaj6gzw2] {
    margin: 0;
    font-size: 14px;
}

/* Camera Error */
.camera-error[b-ztdaj6gzw2] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    gap: 12px;
    padding: 20px;
    text-align: center;
}

.camera-error svg[b-ztdaj6gzw2] {
    color: #ef4444;
}

.camera-error p[b-ztdaj6gzw2] {
    margin: 0;
    font-size: 14px;
    max-width: 280px;
}

.retry-btn[b-ztdaj6gzw2] {
    padding: 8px 20px;
    border: none;
    background: var(--primary);
    color: white;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--radius);
    cursor: pointer;
    margin-top: 8px;
    transition: background 0.2s;
}

.retry-btn:hover[b-ztdaj6gzw2] {
    background: var(--primary-hover);
}

/* Camera Controls */
.camera-controls[b-ztdaj6gzw2] {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
}

.camera-control-btn[b-ztdaj6gzw2] {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    backdrop-filter: blur(4px);
}

.camera-control-btn:hover[b-ztdaj6gzw2] {
    background: rgba(255, 255, 255, 0.3);
}

.camera-control-btn.active[b-ztdaj6gzw2] {
    background: #fbbf24;
    color: #000;
}

.camera-control-btn svg[b-ztdaj6gzw2] {
    width: 20px;
    height: 20px;
}

/* Camera Hint */
.camera-hint[b-ztdaj6gzw2] {
    text-align: center;
    margin-top: 12px;
}

/* Mobile Responsive - Camera Scanner */
@media (max-width: 576px) {
    /* Barcode Scanner Container */
    .barcode-scanner-container[b-ztdaj6gzw2] {
        gap: 16px;
    }

    /* Order Picking Header in Modal */
    .order-picking-header[b-ztdaj6gzw2] {
        padding: 12px;
        margin-bottom: 12px;
    }

    .order-picking-info[b-ztdaj6gzw2] {
        flex-wrap: wrap;
        gap: 12px;
    }

    .order-picking-image[b-ztdaj6gzw2],
    .order-picking-image-placeholder[b-ztdaj6gzw2] {
        width: 50px;
        height: 50px;
    }

    .order-picking-details[b-ztdaj6gzw2] {
        flex: 1;
        min-width: 0;
    }

    .order-picking-number[b-ztdaj6gzw2] {
        font-size: 14px;
    }

    .order-picking-customer[b-ztdaj6gzw2] {
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .order-picking-meta[b-ztdaj6gzw2] {
        flex-wrap: wrap;
        gap: 4px;
    }

    .order-picking-meta .meta-badge[b-ztdaj6gzw2] {
        font-size: 10px;
        padding: 2px 6px;
    }

    .order-picking-meta .meta-badge.tracking[b-ztdaj6gzw2] {
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .order-picking-progress[b-ztdaj6gzw2] {
        padding: 8px 12px;
        min-width: 60px;
        position: absolute;
        top: 12px;
        right: 12px;
    }

    .order-picking-header[b-ztdaj6gzw2] {
        position: relative;
    }

    .order-picking-progress .progress-value[b-ztdaj6gzw2] {
        font-size: 14px;
    }

    .order-picking-progress .progress-label[b-ztdaj6gzw2] {
        font-size: 10px;
    }

    /* Scan Mode Toggle */
    .scan-mode-toggle[b-ztdaj6gzw2] {
        flex-direction: row;
        padding: 3px;
        margin-bottom: 12px;
    }

    .mode-btn[b-ztdaj6gzw2] {
        flex: 1;
        justify-content: center;
        padding: 10px 8px;
        font-size: 12px;
        gap: 6px;
    }

    .mode-btn svg[b-ztdaj6gzw2] {
        width: 16px;
        height: 16px;
    }

    /* Scan Input */
    .scan-input-wrapper[b-ztdaj6gzw2] {
        max-width: 100%;
    }

    .scan-input[b-ztdaj6gzw2] {
        padding: 14px 16px;
        font-size: 16px; /* Prevent zoom on iOS */
    }

    .scan-button[b-ztdaj6gzw2] {
        width: 52px;
        height: 52px;
    }

    .scan-hint[b-ztdaj6gzw2] {
        font-size: 12px;
    }

    /* Camera Container */
    .camera-container[b-ztdaj6gzw2] {
        max-width: 100%;
        border-radius: var(--radius);
        aspect-ratio: 4/3;
    }

    .scan-region[b-ztdaj6gzw2] {
        width: 85%;
        height: 30%;
    }

    .camera-controls[b-ztdaj6gzw2] {
        bottom: 8px;
        gap: 8px;
    }

    .camera-control-btn[b-ztdaj6gzw2] {
        width: 40px;
        height: 40px;
    }

    /* Scan Result */
    .scan-result[b-ztdaj6gzw2] {
        padding: 12px;
    }

    .scan-result-message[b-ztdaj6gzw2] {
        font-size: 14px;
        margin-bottom: 8px;
    }

    /* Scanned Item Info */
    .scanned-item-info[b-ztdaj6gzw2] {
        padding: 10px;
        gap: 10px;
    }

    .scanned-item-image[b-ztdaj6gzw2],
    .scanned-item-image-placeholder[b-ztdaj6gzw2] {
        width: 50px;
        height: 50px;
    }

    .scanned-item-name[b-ztdaj6gzw2] {
        font-size: 14px;
    }

    .scanned-item-variant[b-ztdaj6gzw2] {
        font-size: 12px;
    }

    .scanned-item-meta[b-ztdaj6gzw2] {
        gap: 8px;
        flex-wrap: wrap;
    }

    .meta-item[b-ztdaj6gzw2] {
        font-size: 11px;
    }

    /* Multiple Orders List */
    .multiple-orders-title[b-ztdaj6gzw2] {
        font-size: 12px;
    }

    .multiple-order-item[b-ztdaj6gzw2] {
        margin-bottom: 8px;
    }

    .order-item-left[b-ztdaj6gzw2] {
        padding: 10px 12px;
        gap: 4px;
    }

    .order-select-header[b-ztdaj6gzw2] {
        gap: 6px;
    }

    .order-select-number[b-ztdaj6gzw2] {
        font-size: 13px;
    }

    .delivery-type-badge[b-ztdaj6gzw2] {
        font-size: 9px;
        padding: 1px 6px;
    }

    .order-select-customer[b-ztdaj6gzw2] {
        font-size: 12px;
    }

    .order-select-meta[b-ztdaj6gzw2] {
        gap: 8px;
        font-size: 11px;
    }

    .order-item-right[b-ztdaj6gzw2] {
        padding: 10px 12px;
        min-width: 70px;
    }

    .order-select-qty .qty-value[b-ztdaj6gzw2] {
        font-size: 16px;
    }

    .order-select-qty .qty-unit[b-ztdaj6gzw2] {
        font-size: 10px;
    }

    .order-deadline[b-ztdaj6gzw2] {
        font-size: 10px;
        padding: 2px 6px;
    }

    /* Multi-Product Card */
    .multi-product-card[b-ztdaj6gzw2] {
        flex-direction: column;
        padding: 12px;
        gap: 12px;
    }

    .multi-product-image[b-ztdaj6gzw2],
    .multi-product-image-placeholder[b-ztdaj6gzw2] {
        width: 60px;
        height: 60px;
    }

    .multi-product-name[b-ztdaj6gzw2] {
        font-size: 14px;
    }

    .multi-product-variant[b-ztdaj6gzw2] {
        font-size: 12px;
    }

    .multi-product-codes[b-ztdaj6gzw2] {
        gap: 8px;
    }

    .product-code[b-ztdaj6gzw2] {
        font-size: 11px;
    }

    .multi-product-count[b-ztdaj6gzw2] {
        align-self: flex-start;
        padding: 6px 12px;
    }

    .count-number[b-ztdaj6gzw2] {
        font-size: 20px;
    }

    .count-label[b-ztdaj6gzw2] {
        font-size: 9px;
    }

    /* Order Items Section in Modal */
    .order-items-section[b-ztdaj6gzw2] {
        margin-top: 12px;
        padding-top: 12px;
    }

    .order-items-header[b-ztdaj6gzw2] {
        margin-bottom: 12px;
    }

    .order-items-title[b-ztdaj6gzw2] {
        font-size: 13px;
    }

    .items-hint[b-ztdaj6gzw2] {
        display: none;
    }

    /* Order Items List in Modal */
    .order-items-list[b-ztdaj6gzw2] {
        gap: 6px;
    }

    button.order-item-row.clickable[b-ztdaj6gzw2] {
        padding: 10px;
        gap: 10px;
    }

    button.order-item-row.clickable .item-image[b-ztdaj6gzw2] {
        width: 44px;
        height: 44px;
    }

    button.order-item-row.clickable .item-name[b-ztdaj6gzw2] {
        font-size: 13px;
    }

    button.order-item-row.clickable .item-variant[b-ztdaj6gzw2] {
        font-size: 11px;
    }

    button.order-item-row.clickable .item-codes[b-ztdaj6gzw2] {
        display: none;
    }

    button.order-item-row.clickable .item-location[b-ztdaj6gzw2] {
        padding: 4px 8px;
        font-size: 11px;
    }

    button.order-item-row.clickable .item-quantity[b-ztdaj6gzw2] {
        padding: 4px 8px;
        min-width: 45px;
    }

    button.order-item-row.clickable .item-quantity .qty-picked[b-ztdaj6gzw2] {
        font-size: 14px;
    }

    button.order-item-row.clickable .item-status[b-ztdaj6gzw2] {
        display: none;
    }

    /* Recent Scans */
    .recent-scans-section[b-ztdaj6gzw2] {
        padding-top: 12px;
    }

    .recent-scans-title[b-ztdaj6gzw2] {
        font-size: 13px;
        margin-bottom: 8px;
    }

    .recent-scans-list[b-ztdaj6gzw2] {
        gap: 6px;
    }

    .recent-scan-item[b-ztdaj6gzw2] {
        padding: 8px 10px;
    }

    .recent-scan-barcode[b-ztdaj6gzw2] {
        font-size: 11px;
    }

    .recent-scan-name[b-ztdaj6gzw2] {
        font-size: 12px;
        max-width: 180px;
    }

    .recent-scan-status[b-ztdaj6gzw2] {
        width: 20px;
        height: 20px;
    }

    .recent-scan-status svg[b-ztdaj6gzw2] {
        width: 14px;
        height: 14px;
    }
}

/* =============================================
   PRODUCT-BASED PICKING STYLES
   ============================================= */

/* Product Picking Header */
.product-picking-header[b-ztdaj6gzw2] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(59, 130, 246, 0.05) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 20px;
}

.product-picking-info[b-ztdaj6gzw2] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.product-picking-image[b-ztdaj6gzw2] {
    width: 80px;
    height: 80px;
    border-radius: var(--radius);
    object-fit: cover;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.product-picking-image-placeholder[b-ztdaj6gzw2] {
    width: 80px;
    height: 80px;
    border-radius: var(--radius);
    background: var(--bg-input);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    flex-shrink: 0;
}

.product-picking-image-placeholder svg[b-ztdaj6gzw2] {
    width: 32px;
    height: 32px;
}

.product-picking-details[b-ztdaj6gzw2] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.product-picking-name[b-ztdaj6gzw2] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.product-picking-codes[b-ztdaj6gzw2] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.code-badge[b-ztdaj6gzw2] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 4px;
}

.code-badge.barcode[b-ztdaj6gzw2] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.code-badge.sku[b-ztdaj6gzw2] {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.product-picking-location[b-ztdaj6gzw2] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #f59e0b;
    font-weight: 500;
}

.product-picking-progress[b-ztdaj6gzw2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    min-width: 80px;
}

.product-picking-progress .progress-circle[b-ztdaj6gzw2] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-picking-progress .progress-value[b-ztdaj6gzw2] {
    font-size: 18px;
    font-weight: 700;
    color: #8b5cf6;
}

.product-picking-progress .progress-label[b-ztdaj6gzw2] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Product Orders Section */
.product-orders-section[b-ztdaj6gzw2] {
    margin-top: 0;
}

.product-orders-header[b-ztdaj6gzw2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 8px;
}

.product-orders-title[b-ztdaj6gzw2] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.product-orders-title svg[b-ztdaj6gzw2] {
    color: #8b5cf6;
}

.orders-count[b-ztdaj6gzw2] {
    font-weight: 400;
    color: var(--text-muted);
}

.orders-hint[b-ztdaj6gzw2] {
    font-size: 12px;
    color: var(--text-muted);
}

/* Product Orders List */
.product-orders-list[b-ztdaj6gzw2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.product-order-row[b-ztdaj6gzw2] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: all 0.2s;
    width: 100%;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
}

.product-order-row:hover:not(.picked):not(.disabled)[b-ztdaj6gzw2] {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
    transform: translateY(-1px);
}

.product-order-row.picked[b-ztdaj6gzw2] {
    opacity: 0.6;
    background: rgba(34, 197, 94, 0.05);
    cursor: default;
}

.product-order-row.disabled[b-ztdaj6gzw2] {
    pointer-events: none;
    opacity: 0.5;
}

.product-order-row.just-picked[b-ztdaj6gzw2] {
    background: rgba(34, 197, 94, 0.1);
    border-color: #22c55e;
    animation: pickFlash-b-ztdaj6gzw2 0.3s ease-out;
}

.order-main-info[b-ztdaj6gzw2] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.order-number-row[b-ztdaj6gzw2] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.order-number-row .order-number[b-ztdaj6gzw2] {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
}

.order-customer-row[b-ztdaj6gzw2] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-primary);
}

.order-customer-row svg[b-ztdaj6gzw2] {
    color: var(--text-muted);
    flex-shrink: 0;
}

.order-store-row[b-ztdaj6gzw2] {
    margin-top: 2px;
}

.order-store-row .store-badge[b-ztdaj6gzw2] {
    font-size: 11px;
    padding: 2px 8px;
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border-radius: 4px;
}

.order-quantity-info[b-ztdaj6gzw2] {
    display: flex;
    align-items: baseline;
    gap: 2px;
    padding: 8px 12px;
    background: var(--bg-input);
    border-radius: var(--radius);
    min-width: 60px;
    justify-content: center;
}

.order-quantity-info.complete[b-ztdaj6gzw2] {
    background: rgba(34, 197, 94, 0.1);
}

.order-quantity-info .qty-picked[b-ztdaj6gzw2] {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.order-quantity-info.complete .qty-picked[b-ztdaj6gzw2] {
    color: #22c55e;
}

.order-quantity-info .qty-sep[b-ztdaj6gzw2] {
    color: var(--text-muted);
    font-size: 14px;
}

.order-quantity-info .qty-total[b-ztdaj6gzw2] {
    font-size: 14px;
    color: var(--text-secondary);
}

.order-status-icon[b-ztdaj6gzw2] {
    flex-shrink: 0;
}

.order-status-icon .status-icon.animate[b-ztdaj6gzw2] {
    animation: checkmarkPop-b-ztdaj6gzw2 0.3s ease-out;
}

/* Mobile Responsive - Product-based Picking */
@media (max-width: 576px) {
    .product-picking-header[b-ztdaj6gzw2] {
        padding: 12px;
        margin-bottom: 12px;
    }

    .product-picking-info[b-ztdaj6gzw2] {
        flex-wrap: wrap;
        gap: 12px;
    }

    .product-picking-image[b-ztdaj6gzw2],
    .product-picking-image-placeholder[b-ztdaj6gzw2] {
        width: 60px;
        height: 60px;
    }

    .product-picking-details[b-ztdaj6gzw2] {
        flex: 1;
        min-width: 0;
    }

    .product-picking-name[b-ztdaj6gzw2] {
        font-size: 14px;
    }

    .product-picking-codes[b-ztdaj6gzw2] {
        gap: 6px;
    }

    .code-badge[b-ztdaj6gzw2] {
        font-size: 11px;
        padding: 2px 6px;
    }

    .product-picking-location[b-ztdaj6gzw2] {
        font-size: 12px;
    }

    .product-picking-progress[b-ztdaj6gzw2] {
        position: absolute;
        top: 12px;
        right: 12px;
        padding: 8px 12px;
        min-width: 60px;
    }

    .product-picking-header[b-ztdaj6gzw2] {
        position: relative;
    }

    .product-picking-progress .progress-value[b-ztdaj6gzw2] {
        font-size: 14px;
    }

    .product-picking-progress .progress-label[b-ztdaj6gzw2] {
        font-size: 10px;
    }

    /* Product Orders List */
    .product-orders-header[b-ztdaj6gzw2] {
        margin-bottom: 12px;
    }

    .product-orders-title[b-ztdaj6gzw2] {
        font-size: 13px;
    }

    .orders-hint[b-ztdaj6gzw2] {
        display: none;
    }

    .product-orders-list[b-ztdaj6gzw2] {
        gap: 6px;
    }

    .product-order-row[b-ztdaj6gzw2] {
        padding: 10px 12px;
        gap: 10px;
    }

    .order-number-row .order-number[b-ztdaj6gzw2] {
        font-size: 13px;
    }

    .order-customer-row[b-ztdaj6gzw2] {
        font-size: 12px;
    }

    .order-store-row .store-badge[b-ztdaj6gzw2] {
        font-size: 10px;
    }

    .order-quantity-info[b-ztdaj6gzw2] {
        padding: 6px 10px;
        min-width: 50px;
    }

    .order-quantity-info .qty-picked[b-ztdaj6gzw2] {
        font-size: 14px;
    }

    .order-quantity-info .qty-sep[b-ztdaj6gzw2],
    .order-quantity-info .qty-total[b-ztdaj6gzw2] {
        font-size: 12px;
    }
}

/* =============================================
   ORDER ITEMS IN MODAL (Order-based Picking)
   ============================================= */

.order-items-section[b-ztdaj6gzw2] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.order-items-header[b-ztdaj6gzw2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 8px;
}

.order-items-title[b-ztdaj6gzw2] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.order-items-title svg[b-ztdaj6gzw2] {
    color: var(--primary);
}

.items-count[b-ztdaj6gzw2] {
    font-weight: 400;
    color: var(--text-muted);
}

.items-hint[b-ztdaj6gzw2] {
    font-size: 12px;
    color: var(--text-muted);
}

.order-items-grid[b-ztdaj6gzw2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.order-item-card[b-ztdaj6gzw2] {
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    cursor: pointer;
    transition: all 0.2s;
    overflow: hidden;
    text-align: left;
    font-family: inherit;
}

.order-item-card:hover:not(.picked):not(.disabled)[b-ztdaj6gzw2] {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
    transform: translateY(-2px);
}

.order-item-card.picked[b-ztdaj6gzw2] {
    opacity: 0.6;
    cursor: default;
}

.order-item-card.disabled[b-ztdaj6gzw2] {
    pointer-events: none;
    opacity: 0.5;
}

.item-image-wrapper[b-ztdaj6gzw2] {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    background: var(--bg-input);
}

.item-img[b-ztdaj6gzw2] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item-img-placeholder[b-ztdaj6gzw2] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.item-img-placeholder svg[b-ztdaj6gzw2] {
    width: 40px;
    height: 40px;
}

.picked-overlay[b-ztdaj6gzw2] {
    position: absolute;
    inset: 0;
    background: rgba(34, 197, 94, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.picked-overlay svg[b-ztdaj6gzw2] {
    width: 48px;
    height: 48px;
}

.item-qty-badge[b-ztdaj6gzw2] {
    position: absolute;
    bottom: 8px;
    right: 8px;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.75);
    color: white;
    font-size: 13px;
    font-weight: 700;
    border-radius: 20px;
    backdrop-filter: blur(4px);
}

.item-qty-badge.complete[b-ztdaj6gzw2] {
    background: rgba(34, 197, 94, 0.9);
}

.item-info-wrapper[b-ztdaj6gzw2] {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.item-name-text[b-ztdaj6gzw2] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.item-variant-text[b-ztdaj6gzw2] {
    font-size: 12px;
    color: var(--text-secondary);
}

.item-location-text[b-ztdaj6gzw2] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #f59e0b;
    font-weight: 500;
}

.item-barcode-text[b-ztdaj6gzw2] {
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--text-muted);
}

/* Mobile responsive - Order Items Grid (legacy) */
@media (max-width: 576px) {
    .order-items-grid[b-ztdaj6gzw2] {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .item-info-wrapper[b-ztdaj6gzw2] {
        padding: 8px;
    }

    .item-name-text[b-ztdaj6gzw2] {
        font-size: 12px;
    }

    .item-qty-badge[b-ztdaj6gzw2] {
        font-size: 12px;
        padding: 3px 8px;
    }
}

/* Extra Small Mobile (360px) */
@media (max-width: 360px) {
    .stats-grid[b-ztdaj6gzw2] {
        grid-template-columns: 1fr;
    }

    .stat-card[b-ztdaj6gzw2] {
        flex-direction: row;
        text-align: left;
    }

    .order-master-header[b-ztdaj6gzw2] {
        padding: 8px;
        gap: 4px 6px;
    }

    .order-image-btn[b-ztdaj6gzw2] {
        width: 32px;
        height: 32px;
    }

    .order-image-btn .order-image[b-ztdaj6gzw2],
    .order-image-btn .order-image-placeholder[b-ztdaj6gzw2] {
        width: 32px;
        height: 32px;
    }

    .order-image-btn .order-image-placeholder svg[b-ztdaj6gzw2] {
        width: 14px;
        height: 14px;
    }

    .order-expand-icon[b-ztdaj6gzw2] {
        width: 20px;
        height: 20px;
    }

    .order-expand-icon svg[b-ztdaj6gzw2] {
        width: 14px;
        height: 14px;
    }

    .order-master-info[b-ztdaj6gzw2] {
        gap: 1px;
    }

    .order-number-link[b-ztdaj6gzw2] {
        font-size: 11px;
    }

    .status-badge[b-ztdaj6gzw2],
    .fast-delivery-badge[b-ztdaj6gzw2] {
        font-size: 8px;
        padding: 1px 3px;
    }

    .order-master-middle[b-ztdaj6gzw2] {
        font-size: 11px;
    }

    .order-customer[b-ztdaj6gzw2] {
        max-width: 80px;
    }

    .order-master-bottom[b-ztdaj6gzw2] {
        display: none; /* Hide extra info on very small screens */
    }

    .order-master-progress[b-ztdaj6gzw2] {
        padding: 2px 6px;
        min-width: 45px;
    }

    .progress-circle-mini[b-ztdaj6gzw2] {
        padding: 3px 6px;
    }

    .progress-circle-mini .progress-num[b-ztdaj6gzw2] {
        font-size: 10px;
    }

    .order-master-progress .progress-label[b-ztdaj6gzw2] {
        font-size: 9px;
    }

    .order-master-actions .btn-icon-sm[b-ztdaj6gzw2] {
        height: 32px;
    }

    /* Scanner Modal */
    .order-picking-image[b-ztdaj6gzw2],
    .order-picking-image-placeholder[b-ztdaj6gzw2] {
        width: 40px;
        height: 40px;
    }

    .order-picking-number[b-ztdaj6gzw2] {
        font-size: 13px;
    }

    .order-picking-customer[b-ztdaj6gzw2] {
        font-size: 12px;
    }

    .order-picking-meta .meta-badge[b-ztdaj6gzw2] {
        font-size: 9px;
    }

    .mode-btn[b-ztdaj6gzw2] {
        padding: 8px 6px;
        font-size: 11px;
    }

    .scan-input[b-ztdaj6gzw2] {
        padding: 12px;
        font-size: 16px;
    }

    .scan-button[b-ztdaj6gzw2] {
        width: 48px;
        height: 48px;
    }

    button.order-item-row.clickable .item-image[b-ztdaj6gzw2] {
        width: 36px;
        height: 36px;
    }

    button.order-item-row.clickable .item-name[b-ztdaj6gzw2] {
        font-size: 12px;
    }

    button.order-item-row.clickable .item-location[b-ztdaj6gzw2] {
        display: none;
    }
}
/* /Components/Pages/Wms/WmsSettings.razor.rz.scp.css */
/* Company Selector */
.company-selector-card[b-inp6wmph0t] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.company-selector-card .form-label[b-inp6wmph0t] {
    margin: 0;
    font-weight: 500;
    white-space: nowrap;
}

.company-selector-card .form-select[b-inp6wmph0t] {
    max-width: 400px;
}

.company-selector-card[b-inp6wmph0t]  .searchable-select {
    width: 400px;
}

/* Settings Grid */
.settings-grid[b-inp6wmph0t] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

@media (max-width: 1200px) {
    .settings-grid[b-inp6wmph0t] {
        grid-template-columns: 1fr;
    }
}

/* Settings Card */
.settings-card[b-inp6wmph0t] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.settings-card-header[b-inp6wmph0t] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
}

.settings-card-icon[b-inp6wmph0t] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.settings-card-icon svg[b-inp6wmph0t] {
    width: 24px;
    height: 24px;
}

.settings-card-icon.blue[b-inp6wmph0t] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.settings-card-icon.green[b-inp6wmph0t] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.settings-card-icon.purple[b-inp6wmph0t] {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.settings-card-icon.orange[b-inp6wmph0t] {
    background: rgba(251, 146, 60, 0.15);
    color: #fb923c;
}

.settings-card-icon.cyan[b-inp6wmph0t] {
    background: rgba(6, 182, 212, 0.15);
    color: #06b6d4;
}

.settings-card-icon.red[b-inp6wmph0t] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.settings-card-title h3[b-inp6wmph0t] {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.settings-card-title p[b-inp6wmph0t] {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}

.settings-card-body[b-inp6wmph0t] {
    padding: 0;
}

/* Setting Item */
.setting-item[b-inp6wmph0t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    gap: 16px;
}

.setting-item:last-child[b-inp6wmph0t] {
    border-bottom: none;
}

/* Setting Item Select (for dropdowns) */
.setting-item-select[b-inp6wmph0t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    gap: 16px;
}

.setting-item-select:last-child[b-inp6wmph0t] {
    border-bottom: none;
}

.setting-item-select[b-inp6wmph0t]  .searchable-select {
    width: 400px;
    flex-shrink: 0;
}

/* SwitchField overrides */
.settings-card-body[b-inp6wmph0t]  .form-group {
    margin: 0;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.settings-card-body[b-inp6wmph0t]  .form-group:last-child {
    border-bottom: none;
}

.settings-card-body[b-inp6wmph0t]  .switch-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.settings-card-body[b-inp6wmph0t]  .switch-field-label {
    flex: 1;
}

.settings-card-body[b-inp6wmph0t]  .switch-field-title {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.settings-card-body[b-inp6wmph0t]  .switch-field-desc {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
}

.setting-info[b-inp6wmph0t] {
    flex: 1;
    min-width: 0;
}

.setting-label[b-inp6wmph0t] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.setting-desc[b-inp6wmph0t] {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
}

.setting-select[b-inp6wmph0t] {
    width: 180px;
    flex-shrink: 0;
}

/* Switch Toggle */
.switch[b-inp6wmph0t] {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}

.switch input[b-inp6wmph0t] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider[b-inp6wmph0t] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-input);
    border: 1px solid var(--border);
    transition: 0.3s;
    border-radius: 26px;
}

.slider[b-inp6wmph0t]:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

input:checked + .slider[b-inp6wmph0t] {
    background-color: var(--primary);
    border-color: var(--primary);
}

input:checked + .slider[b-inp6wmph0t]:before {
    transform: translateX(22px);
}

/* Time Input */
.time-input-wrapper[b-inp6wmph0t] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.time-input[b-inp6wmph0t] {
    width: 100px;
    text-align: center;
}

.time-unit[b-inp6wmph0t] {
    font-size: 13px;
    color: var(--text-muted);
}

/* Volume Control */
.volume-control[b-inp6wmph0t] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.volume-slider[b-inp6wmph0t] {
    width: 120px;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--bg-input);
    border-radius: 3px;
    outline: none;
}

.volume-slider[b-inp6wmph0t]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.volume-slider[b-inp6wmph0t]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.volume-value[b-inp6wmph0t] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    min-width: 40px;
}

/* Loading State */
.loading-state[b-inp6wmph0t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
}

.spinner[b-inp6wmph0t] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-inp6wmph0t 0.8s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin-b-inp6wmph0t {
    to {
        transform: rotate(360deg);
    }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .setting-item[b-inp6wmph0t],
    .setting-item-select[b-inp6wmph0t] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .setting-select[b-inp6wmph0t],
    .time-input-wrapper[b-inp6wmph0t],
    .volume-control[b-inp6wmph0t] {
        width: 100%;
    }

    .setting-select[b-inp6wmph0t] {
        width: 100%;
    }

    .setting-item-select[b-inp6wmph0t]  .searchable-select {
        width: 100%;
    }

    .volume-slider[b-inp6wmph0t] {
        flex: 1;
    }

    .settings-card-body[b-inp6wmph0t]  .switch-field {
        flex-direction: row;
    }
}
/* /Components/Shared/BackgroundAnimation.razor.rz.scp.css */
/* BackgroundAnimation component styles */
/* Styles are in wwwroot/css/app.css */
/* /Components/Shared/ClaimScanModal.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   CLAIM SCAN MODAL
   ═══════════════════════════════════════════════════════════════ */

.claim-scan-modal[b-61najtkalf] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Barcode Section */
.barcode-section[b-61najtkalf] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.barcode-input-container[b-61najtkalf] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-muted);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    transition: var(--transition);
}

.barcode-input-container:focus-within[b-61najtkalf] {
    border-color: var(--primary);
    background: var(--bg-card);
}

.barcode-input-container.scanning[b-61najtkalf] {
    border-color: var(--primary);
    animation: pulse-b-61najtkalf 1s ease-in-out infinite;
}

@keyframes pulse-b-61najtkalf {
    0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.3); }
    50% { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0); }
}

.barcode-input-icon[b-61najtkalf] {
    flex-shrink: 0;
    color: var(--text-muted);
}

.barcode-input-icon svg[b-61najtkalf] {
    width: 24px;
    height: 24px;
}

.barcode-input-field[b-61najtkalf] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 16px;
    font-family: var(--font-mono, monospace);
    color: var(--text-primary);
    outline: none;
}

.barcode-input-field[b-61najtkalf]::placeholder {
    color: var(--text-muted);
    font-family: var(--font-sans);
}

.barcode-input-actions[b-61najtkalf] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.barcode-action-btn[b-61najtkalf] {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.barcode-action-btn.search[b-61najtkalf] {
    background: var(--primary);
    color: white;
}

.barcode-action-btn.search:hover[b-61najtkalf] {
    background: var(--primary-hover);
}

.scan-spinner[b-61najtkalf] {
    width: 24px;
    height: 24px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-61najtkalf 0.8s linear infinite;
}

@keyframes spin-b-61najtkalf {
    to { transform: rotate(360deg); }
}

/* Camera Toggle */
.camera-toggle[b-61najtkalf] {
    cursor: pointer;
}

.camera-toggle input[b-61najtkalf] {
    display: none;
}

.toggle-track[b-61najtkalf] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: var(--transition);
}

.camera-toggle input:checked + .toggle-track[b-61najtkalf] {
    background: var(--primary);
    border-color: var(--primary);
}

.toggle-thumb[b-61najtkalf] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.camera-toggle input:checked + .toggle-track .toggle-thumb[b-61najtkalf] {
    color: white;
}

/* Camera Container */
.camera-container[b-61najtkalf] {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    max-height: 280px;
    background: #000;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.camera-video[b-61najtkalf] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.camera-overlay[b-61najtkalf] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.scan-line[b-61najtkalf] {
    width: 80%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    animation: scanMove-b-61najtkalf 2s ease-in-out infinite;
}

@keyframes scanMove-b-61najtkalf {
    0%, 100% { transform: translateY(-60px); opacity: 0.5; }
    50% { transform: translateY(60px); opacity: 1; }
}

.camera-loading[b-61najtkalf],
.camera-error[b-61najtkalf] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
}

.camera-loading .spinner[b-61najtkalf] {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-61najtkalf 0.8s linear infinite;
}

.camera-error[b-61najtkalf] {
    color: #ef4444;
}

/* Error Message */
.scan-error[b-61najtkalf] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--radius);
    color: #dc2626;
    font-size: 14px;
}

/* Found Claim */
.found-claim[b-61najtkalf] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.claim-header-card[b-61najtkalf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: var(--bg-muted);
    border-radius: var(--radius-lg);
    gap: 16px;
}

.claim-main-info[b-61najtkalf] {
    display: flex;
    gap: 24px;
}

.claim-main-info > div[b-61najtkalf] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.claim-main-info .label[b-61najtkalf] {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

.claim-main-info .value[b-61najtkalf] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.claim-meta[b-61najtkalf] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.claim-amount[b-61najtkalf] {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

/* Cargo Info */
.cargo-info-card[b-61najtkalf] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(59, 130, 246, 0.06);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-size: 13px;
}

.cargo-info-card svg[b-61najtkalf] {
    color: var(--primary);
    flex-shrink: 0;
}

.cargo-provider[b-61najtkalf] {
    font-weight: 500;
}

.tracking-number[b-61najtkalf] {
    font-family: var(--font-mono, monospace);
    background: var(--bg-card);
    padding: 2px 8px;
    border-radius: 4px;
}

/* Claim Items Section */
.claim-items-section h4[b-61najtkalf] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 10px;
}

.claim-items-list[b-61najtkalf] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 250px;
    overflow-y: auto;
}

.claim-item-row[b-61najtkalf] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: var(--transition);
}

.claim-item-row.accepted[b-61najtkalf] {
    background: rgba(16, 185, 129, 0.04);
    border-color: rgba(16, 185, 129, 0.2);
}

.claim-item-row.rejected[b-61najtkalf] {
    background: rgba(239, 68, 68, 0.04);
    border-color: rgba(239, 68, 68, 0.2);
}

.item-image[b-61najtkalf] {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.item-image img[b-61najtkalf] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item-image .no-image[b-61najtkalf] {
    width: 100%;
    height: 100%;
    background: var(--bg-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.item-info[b-61najtkalf] {
    flex: 1;
    min-width: 0;
}

.item-name[b-61najtkalf] {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-meta[b-61najtkalf] {
    display: flex;
    gap: 8px;
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.item-barcode[b-61najtkalf] {
    font-family: var(--font-mono, monospace);
}

.item-variant[b-61najtkalf] {
    color: #6366f1;
}

.item-reason[b-61najtkalf] {
    flex: 0 0 150px;
}

.reason-text[b-61najtkalf] {
    font-size: 11px;
    color: #ea580c;
    background: rgba(251, 146, 60, 0.1);
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-block;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-status[b-61najtkalf] {
    flex: 0 0 90px;
    text-align: center;
}

.item-price[b-61najtkalf] {
    flex: 0 0 80px;
    text-align: right;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
}

/* Status Badge */
.status-badge[b-61najtkalf] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.status-badge.small[b-61najtkalf] {
    padding: 3px 8px;
    font-size: 10px;
}

.status-created[b-61najtkalf] { background: rgba(156, 163, 175, 0.15); color: #6b7280; }
.status-waiting[b-61najtkalf] { background: rgba(245, 158, 11, 0.15); color: #d97706; }
.status-accepted[b-61najtkalf] { background: rgba(16, 185, 129, 0.15); color: #059669; }
.status-rejected[b-61najtkalf] { background: rgba(239, 68, 68, 0.15); color: #dc2626; }
.status-unresolved[b-61najtkalf] { background: rgba(139, 92, 246, 0.15); color: #7c3aed; }
.status-cancelled[b-61najtkalf] { background: rgba(107, 114, 128, 0.15); color: #6b7280; }
.status-default[b-61najtkalf] { background: var(--bg-muted); color: var(--text-secondary); }

/* Empty State */
.empty-scan-state[b-61najtkalf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
}

.empty-scan-state svg[b-61najtkalf] {
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-scan-state h4[b-61najtkalf] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 6px;
}

.empty-scan-state p[b-61najtkalf] {
    font-size: 13px;
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .claim-header-card[b-61najtkalf] {
        flex-direction: column;
        align-items: flex-start;
    }

    .claim-main-info[b-61najtkalf] {
        flex-direction: column;
        gap: 12px;
    }

    .claim-meta[b-61najtkalf] {
        width: 100%;
        justify-content: space-between;
    }

    .claim-item-row[b-61najtkalf] {
        flex-wrap: wrap;
    }

    .item-reason[b-61najtkalf],
    .item-status[b-61najtkalf] {
        flex: 0 0 auto;
    }
}
/* /Components/Shared/ErpSyncProgressModal.razor.rz.scp.css */
/* Modal Backdrop */
.modal-backdrop[b-851xbkscki] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-backdrop.open[b-851xbkscki] {
    opacity: 1;
    visibility: visible;
}

/* Modal Container */
.sync-progress-modal[b-851xbkscki] {
    background: var(--card-bg, #fff);
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 520px;
    margin: 1rem;
    transform: scale(0.95) translateY(20px);
    opacity: 0;
    transition: all 0.3s ease;
}

.sync-progress-modal.open[b-851xbkscki] {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Header */
.sync-progress-header[b-851xbkscki] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem 1.5rem 1rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.sync-progress-icon[b-851xbkscki] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    animation: pulse-glow-b-851xbkscki 2s ease-in-out infinite;
}

@keyframes pulse-glow-b-851xbkscki {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4);
    }
    50% {
        box-shadow: 0 0 20px 4px rgba(99, 102, 241, 0.2);
    }
}

.sync-progress-icon svg[b-851xbkscki] {
    color: white;
}

.sync-progress-title-area[b-851xbkscki] {
    flex: 1;
}

.sync-progress-title-area h3[b-851xbkscki] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
}

.sync-progress-title-area p[b-851xbkscki] {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
}

.sync-progress-close[b-851xbkscki] {
    background: none;
    border: none;
    padding: 0.5rem;
    margin: -0.5rem -0.5rem 0 0;
    cursor: pointer;
    border-radius: 8px;
    color: var(--text-secondary, #6b7280);
    transition: all 0.2s;
}

.sync-progress-close:hover[b-851xbkscki] {
    background: var(--hover-bg, #f3f4f6);
    color: var(--text-primary, #1f2937);
}

/* Content */
.sync-progress-content[b-851xbkscki] {
    padding: 1.5rem;
}

/* Overall Progress */
.overall-progress[b-851xbkscki] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.overall-progress-bar[b-851xbkscki] {
    flex: 1;
    height: 8px;
    background: var(--progress-bg, #e5e7eb);
    border-radius: 4px;
    overflow: hidden;
}

.overall-progress-fill[b-851xbkscki] {
    height: 100%;
    background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
    border-radius: 4px;
    transition: width 0.5s ease;
    position: relative;
}

.overall-progress-fill[b-851xbkscki]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shimmer-b-851xbkscki 2s infinite;
}

@keyframes shimmer-b-851xbkscki {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.overall-progress-text[b-851xbkscki] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
    min-width: 40px;
    text-align: right;
}

/* Sync Steps */
.sync-steps[b-851xbkscki] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sync-step[b-851xbkscki] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--step-bg, #f9fafb);
    border-radius: 12px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.sync-step.pending[b-851xbkscki] {
    opacity: 0.6;
}

.sync-step.in-progress[b-851xbkscki] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    border-color: rgba(99, 102, 241, 0.3);
    animation: step-pulse-b-851xbkscki 2s ease-in-out infinite;
}

@keyframes step-pulse-b-851xbkscki {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.2);
    }
    50% {
        box-shadow: 0 0 15px 2px rgba(99, 102, 241, 0.15);
    }
}

.sync-step.completed[b-851xbkscki] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(52, 211, 153, 0.1) 100%);
    border-color: rgba(16, 185, 129, 0.3);
}

.sync-step.error[b-851xbkscki] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(248, 113, 113, 0.1) 100%);
    border-color: rgba(239, 68, 68, 0.3);
}

/* Step Indicator */
.sync-step-indicator[b-851xbkscki] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--indicator-bg, #e5e7eb);
    color: var(--text-secondary, #6b7280);
    transition: all 0.3s ease;
}

.sync-step.in-progress .sync-step-indicator[b-851xbkscki] {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
}

.sync-step.completed .sync-step-indicator[b-851xbkscki] {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    color: white;
}

.sync-step.error .sync-step-indicator[b-851xbkscki] {
    background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
    color: white;
}

.step-number[b-851xbkscki] {
    font-size: 0.75rem;
    font-weight: 600;
}

.step-spinner[b-851xbkscki] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-851xbkscki 0.8s linear infinite;
}

@keyframes spin-b-851xbkscki {
    to { transform: rotate(360deg); }
}

/* Step Content */
.sync-step-content[b-851xbkscki] {
    flex: 1;
    min-width: 0;
}

.sync-step-header[b-851xbkscki] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sync-step-title[b-851xbkscki] {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary, #1f2937);
}

.sync-step-count[b-851xbkscki] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
}

/* Elapsed timer — InProgress step'lerin geçen süresi (3dk 14sn) */
.sync-step-elapsed[b-851xbkscki] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
    background: rgba(0, 0, 0, 0.04);
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-variant-numeric: tabular-nums;
    margin-left: 0.25rem;
}

.sync-step-message[b-851xbkscki] {
    display: block;
    font-size: 0.8125rem;
    color: var(--text-secondary, #6b7280);
    margin-top: 0.25rem;
}

.sync-step-message.error[b-851xbkscki] {
    color: #ef4444;
}

/* Step Icon */
.sync-step-icon[b-851xbkscki] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--step-icon-bg, rgba(99, 102, 241, 0.1));
    color: var(--step-icon-color, #6366f1);
    flex-shrink: 0;
}

.sync-step.completed .sync-step-icon[b-851xbkscki] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.sync-step.error .sync-step-icon[b-851xbkscki] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Summary */
.sync-summary[b-851xbkscki] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    margin-top: 1.5rem;
}

.sync-summary.success[b-851xbkscki] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(52, 211, 153, 0.1) 100%);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.sync-summary.has-errors[b-851xbkscki] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(251, 191, 36, 0.1) 100%);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.sync-summary-icon[b-851xbkscki] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sync-summary.success .sync-summary-icon[b-851xbkscki] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.sync-summary.has-errors .sync-summary-icon[b-851xbkscki] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.sync-summary-content[b-851xbkscki] {
    flex: 1;
}

.sync-summary-title[b-851xbkscki] {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
}

.sync-summary-stats[b-851xbkscki] {
    display: block;
    font-size: 0.8125rem;
    color: var(--text-secondary, #6b7280);
    margin-top: 0.125rem;
}

/* Footer */
.sync-progress-footer[b-851xbkscki] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem 1.5rem;
    border-top: 1px solid var(--border-color, #e5e7eb);
}

/* Buttons */
.btn[b-851xbkscki] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary[b-851xbkscki] {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-851xbkscki] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.btn-secondary[b-851xbkscki] {
    background: var(--btn-secondary-bg, #f3f4f6);
    color: var(--text-primary, #374151);
}

.btn-secondary:hover:not(:disabled)[b-851xbkscki] {
    background: var(--btn-secondary-hover, #e5e7eb);
}

.btn:disabled[b-851xbkscki] {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-spinner[b-851xbkscki] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-851xbkscki 0.8s linear infinite;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .sync-progress-modal[b-851xbkscki] {
        --card-bg: #1f2937;
        --border-color: #374151;
        --text-primary: #f9fafb;
        --text-secondary: #9ca3af;
        --step-bg: #374151;
        --progress-bg: #374151;
        --indicator-bg: #4b5563;
        --hover-bg: #374151;
        --btn-secondary-bg: #374151;
        --btn-secondary-hover: #4b5563;
    }
}
/* /Components/Shared/FilterEditor/FilterEditor.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════
   Filter Editor — site theme uyumlu (data-theme="light|dark" üzerinden)
   ════════════════════════════════════════════════════════════════ */

.filter-editor[b-376orbnjzm] {
    width: 100%;
}

/* Empty state — koşul yokken davet kartı */
.filter-editor-empty[b-376orbnjzm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 40px 24px;
    background: var(--bg-input);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    transition: var(--transition);
}

.filter-editor-empty:hover[b-376orbnjzm] {
    border-color: var(--border-hover);
    background: var(--bg-card-hover);
}

.filter-editor-empty p[b-376orbnjzm] {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.filter-btn-add[b-376orbnjzm] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--gradient);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.filter-btn-add:hover[b-376orbnjzm] {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow: 0 6px 16px var(--primary-alpha);
}

.filter-btn-add:active[b-376orbnjzm] {
    transform: translateY(0);
}

/* ── Preset şablonları ───────────────────────────────────────── */
.filter-editor-presets[b-376orbnjzm] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-editor-presets-label[b-376orbnjzm] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    font-weight: 600;
}

.filter-editor-presets-grid[b-376orbnjzm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
}

.filter-preset-card[b-376orbnjzm] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
}

.filter-preset-card:hover[b-376orbnjzm] {
    border-color: var(--primary);
    background: var(--bg-card-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--primary-alpha);
}

.filter-preset-card strong[b-376orbnjzm] {
    font-size: 13px;
    font-weight: 600;
}

.filter-preset-card small[b-376orbnjzm] {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}

.filter-editor-or[b-376orbnjzm] {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    position: relative;
    width: 100%;
    text-align: center;
}

.filter-editor-or[b-376orbnjzm]::before,
.filter-editor-or[b-376orbnjzm]::after {
    content: "";
    position: absolute;
    top: 50%;
    width: calc(50% - 28px);
    height: 1px;
    background: var(--border);
}

.filter-editor-or[b-376orbnjzm]::before { left: 0; }
.filter-editor-or[b-376orbnjzm]::after { right: 0; }
/* /Components/Shared/FilterEditor/FilterGroupView.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════
   Filter Group — recursive And/Or grupları
   ════════════════════════════════════════════════════════════════ */

.filter-group[b-30yxj8gau5] {
    position: relative;
    margin: 8px 0;
    padding: 12px 12px 12px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.filter-group:hover[b-30yxj8gau5] {
    border-color: var(--border-hover);
}

.filter-group-root[b-30yxj8gau5] {
    margin: 0;
    background: transparent;
    border: none;
    padding: 0;
}

/* Header (And/Or toggle + actions) */
.filter-group-header[b-30yxj8gau5] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.filter-group-root .filter-group-header[b-30yxj8gau5] {
    margin-bottom: 12px;
    padding-bottom: 0;
    border-bottom: none;
}

/* Logic toggle (VE / VEYA) */
.filter-logic-btn[b-30yxj8gau5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    padding: 6px 12px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ffffff;
    background: var(--gradient);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 2px 6px var(--primary-alpha);
}

.filter-logic-btn:hover[b-30yxj8gau5] {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow: 0 4px 10px var(--primary-alpha);
}

.filter-logic-btn:active[b-30yxj8gau5] {
    transform: translateY(0);
}

/* OR ayrı vurgu için ek opacity ile farklılaşır */
.filter-logic-btn.logic-or[b-30yxj8gau5] {
    opacity: 0.85;
}

/* Action buttons (add condition, add group, remove) */
.filter-group-actions[b-30yxj8gau5] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
}

.filter-icon-btn[b-30yxj8gau5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
}

.filter-icon-btn:hover[b-30yxj8gau5] {
    background: var(--bg-card-hover);
    color: var(--text-primary);
    border-color: var(--border-hover);
}

.filter-icon-btn:active[b-30yxj8gau5] {
    transform: scale(0.95);
}

.filter-icon-btn-danger:hover[b-30yxj8gau5] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.4);
}

/* Children stack */
.filter-group-children[b-30yxj8gau5] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* /Components/Shared/FilterEditor/FilterRowView.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════
   Filter Row — bir koşul satırı (field + operator + value)
   Site theme'i ile uyumlu (data-theme="light|dark")
   ════════════════════════════════════════════════════════════════ */

.filter-row[b-lz1ihg2e8f] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: var(--transition);
    flex-wrap: wrap;
}

.filter-row:hover[b-lz1ihg2e8f] {
    border-color: var(--border-hover);
}

/* Tamamlanmamış koşul — değer eksik (Apply butonu disable olur).
   Kırmızı tonu hem light hem dark tema ile yeterli kontrast veriyor. */
.filter-row.is-incomplete[b-lz1ihg2e8f] {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.06);
}

.filter-row.is-incomplete:hover[b-lz1ihg2e8f] {
    border-color: #ef4444;
}

/* Cell'ler — field/operator/value alanları için flex slot */
.filter-cell[b-lz1ihg2e8f] {
    display: flex;
    align-items: center;
    min-width: 0;
}

.filter-cell-field[b-lz1ihg2e8f] {
    flex: 0 0 240px;
}

.filter-cell-op[b-lz1ihg2e8f] {
    flex: 0 0 170px;
}

.filter-cell-value[b-lz1ihg2e8f] {
    flex: 1;
    min-width: 220px;
}

/* SearchableSelect & MultiSelectChips otomatik olarak %100 doldurur */
.filter-cell[b-lz1ihg2e8f]  .searchable-select,
.filter-cell[b-lz1ihg2e8f]  .multi-select-chips {
    width: 100%;
}

/* SearchableSelect trigger'ını biraz daha kompakt yap (filter satırı yoğun) */
.filter-cell[b-lz1ihg2e8f]  .searchable-select-trigger {
    padding: 8px 12px;
    font-size: 13px;
    border-radius: var(--radius-sm);
}

/* Field selector — vurgu rengiyle (DevExpress benzeri "alan adı vurgusu") */
.filter-cell-field[b-lz1ihg2e8f]  .searchable-select-trigger {
    color: var(--primary);
    font-weight: 600;
}

.filter-cell-field[b-lz1ihg2e8f]  .searchable-select-value.placeholder {
    color: var(--text-muted);
    font-weight: 500;
}

/* Operator selector — secondary text */
.filter-cell-op[b-lz1ihg2e8f]  .searchable-select-trigger {
    color: var(--text-secondary);
}

/* Native input (text/number/date) — site input stiliyle hizalı */
.filter-value-input[b-lz1ihg2e8f] {
    width: 100%;
    padding: 9px 12px;
    font-family: inherit;
    font-size: 13px;
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.filter-value-input:hover[b-lz1ihg2e8f] {
    border-color: var(--border-hover);
}

.filter-value-input:focus[b-lz1ihg2e8f] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-alpha);
    background: var(--bg-card);
}

.filter-value-input[b-lz1ihg2e8f]::placeholder {
    color: var(--text-muted);
}

/* Pair (between) layout */
.filter-pair[b-lz1ihg2e8f] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.filter-pair .filter-value-input[b-lz1ihg2e8f] {
    flex: 1;
    min-width: 0;
}

.filter-pair-sep[b-lz1ihg2e8f] {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    flex-shrink: 0;
}

/* Date picker icon dark mode */
.filter-value-input[type="date"][b-lz1ihg2e8f]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}

[data-theme="dark"] .filter-value-input[type="date"][b-lz1ihg2e8f]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

.filter-value-input[type="date"]:hover[b-lz1ihg2e8f]::-webkit-calendar-picker-indicator {
    opacity: 1;
}

/* Remove (x) — sağ tarafta sabit */
.filter-row-remove[b-lz1ihg2e8f] {
    margin-left: auto;
    flex-shrink: 0;
}

/* ── Mobile / dar viewport ────────────────────────────────────── */
@media (max-width: 768px) {
    .filter-row[b-lz1ihg2e8f] {
        gap: 6px;
    }

    .filter-cell-field[b-lz1ihg2e8f],
    .filter-cell-op[b-lz1ihg2e8f],
    .filter-cell-value[b-lz1ihg2e8f] {
        flex: 1 1 100%;
        min-width: 100%;
    }

    .filter-row-remove[b-lz1ihg2e8f] {
        margin-left: 0;
        margin-top: 4px;
    }
}
/* /Components/Shared/FilterEditor/SavedFiltersDropdown.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════
   Saved Filters Dropdown — site theme uyumlu (data-theme="light|dark")
   ════════════════════════════════════════════════════════════════ */

.saved-filters[b-ck8yxnl7m0] {
    position: relative;
    display: inline-block;
}

/* Trigger button — filter bar'a yerleştirilir */
.saved-filters-trigger[b-ck8yxnl7m0] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.saved-filters-trigger:hover[b-ck8yxnl7m0] {
    border-color: var(--border-hover);
    background: var(--bg-card-hover);
}

.saved-filters-trigger.has-default[b-ck8yxnl7m0] {
    border-color: var(--primary);
    color: var(--primary);
}

.saved-filters-trigger.has-default svg:first-child[b-ck8yxnl7m0] {
    color: var(--primary);
    fill: var(--primary);
}

.saved-filters-count[b-ck8yxnl7m0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 9px;
}

.saved-filters-arrow[b-ck8yxnl7m0] {
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.saved-filters.open .saved-filters-arrow[b-ck8yxnl7m0] {
    transform: rotate(180deg);
}

/* Backdrop */
.saved-filters-backdrop[b-ck8yxnl7m0] {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 998;
}

/* Dropdown */
.saved-filters-dropdown[b-ck8yxnl7m0] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 999;
    min-width: 320px;
    max-width: 400px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    backdrop-filter: blur(8px);
    animation: saved-filters-fade-in-b-ck8yxnl7m0 0.15s ease-out;
}

@keyframes saved-filters-fade-in-b-ck8yxnl7m0 {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Sections */
.saved-filters-section[b-ck8yxnl7m0] {
    padding: 10px;
    border-bottom: 1px solid var(--border);
}

.save-current-btn[b-ck8yxnl7m0] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px 12px;
    background: var(--gradient);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.save-current-btn:hover:not(:disabled)[b-ck8yxnl7m0] {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow: 0 4px 10px var(--primary-alpha);
}

.save-current-btn:disabled[b-ck8yxnl7m0] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Save form (input + checkbox + buttons) */
.save-form[b-ck8yxnl7m0] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.save-form-input[b-ck8yxnl7m0] {
    width: 100%;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 13px;
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.save-form-input:focus[b-ck8yxnl7m0] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-alpha);
}

.save-form-default[b-ck8yxnl7m0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}

.save-form-default input[type="checkbox"][b-ck8yxnl7m0] {
    accent-color: var(--primary);
}

.save-form-actions[b-ck8yxnl7m0] {
    display: flex;
    gap: 6px;
}

.save-btn[b-ck8yxnl7m0] {
    flex: 1;
    padding: 7px 12px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--transition);
}

.save-btn-primary[b-ck8yxnl7m0] {
    background: var(--gradient);
    color: #fff;
}

.save-btn-primary:hover:not(:disabled)[b-ck8yxnl7m0] {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

.save-btn-primary:disabled[b-ck8yxnl7m0] {
    opacity: 0.5;
    cursor: not-allowed;
}

.save-btn-ghost[b-ck8yxnl7m0] {
    background: var(--bg-input);
    color: var(--text-secondary);
    border-color: var(--border);
}

.save-btn-ghost:hover[b-ck8yxnl7m0] {
    background: var(--bg-card-hover);
    color: var(--text-primary);
    border-color: var(--border-hover);
}

/* Empty state */
.saved-filters-empty[b-ck8yxnl7m0] {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-muted);
}

.saved-filters-empty svg[b-ck8yxnl7m0] {
    color: var(--text-muted);
    opacity: 0.5;
    margin-bottom: 8px;
}

.saved-filters-empty p[b-ck8yxnl7m0] {
    margin: 4px 0 2px;
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.saved-filters-empty small[b-ck8yxnl7m0] {
    font-size: 11px;
    color: var(--text-muted);
}

/* List */
.saved-filters-list[b-ck8yxnl7m0] {
    display: flex;
    flex-direction: column;
    padding: 4px;
    max-height: 320px;
    overflow-y: auto;
}

.saved-filter-item[b-ck8yxnl7m0] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}

.saved-filter-item:hover[b-ck8yxnl7m0] {
    background: var(--bg-card-hover);
}

.saved-filter-item.is-default[b-ck8yxnl7m0] {
    background: var(--primary-alpha);
}

.saved-filter-apply[b-ck8yxnl7m0] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: transparent;
    color: var(--text-primary);
    border: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
    min-width: 0;
}

.saved-filter-apply:hover[b-ck8yxnl7m0] {
    color: var(--primary);
}

.saved-filter-apply svg[b-ck8yxnl7m0] {
    color: var(--primary);
    flex-shrink: 0;
}

.saved-filter-name[b-ck8yxnl7m0] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.saved-filter-icon-btn[b-ck8yxnl7m0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
}

.saved-filter-icon-btn:hover[b-ck8yxnl7m0] {
    background: var(--bg-input);
    color: var(--primary);
    border-color: var(--border);
}

.saved-filter-icon-btn-danger:hover[b-ck8yxnl7m0] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.4);
}
/* /Components/Shared/FilterEditor/SortEditor.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════
   Sort Editor — site theme uyumlu (data-theme="light|dark")
   ════════════════════════════════════════════════════════════════ */

.sort-editor[b-j952dqvz72] {
    width: 100%;
}

.sort-editor-empty[b-j952dqvz72] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 24px;
    background: var(--bg-input);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    transition: var(--transition);
}

.sort-editor-empty:hover[b-j952dqvz72] {
    border-color: var(--border-hover);
}

.sort-editor-empty p[b-j952dqvz72] {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.sort-btn-add[b-j952dqvz72],
.sort-btn-add-row[b-j952dqvz72] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: var(--gradient);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.sort-btn-add:hover:not(:disabled)[b-j952dqvz72],
.sort-btn-add-row:hover:not(:disabled)[b-j952dqvz72] {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow: 0 4px 10px var(--primary-alpha);
}

.sort-btn-add:disabled[b-j952dqvz72],
.sort-btn-add-row:disabled[b-j952dqvz72] {
    opacity: 0.5;
    cursor: not-allowed;
}

.sort-btn-add-row[b-j952dqvz72] {
    margin-top: 8px;
    padding: 7px 12px;
    font-size: 12px;
    background: var(--bg-input);
    color: var(--primary);
    border: 1px dashed var(--primary);
    box-shadow: none;
}

.sort-btn-add-row:hover:not(:disabled)[b-j952dqvz72] {
    background: var(--primary-alpha);
    border-style: solid;
}

.sort-editor-list[b-j952dqvz72] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* /Components/Shared/FilterEditor/SortRowView.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════
   Sort Row — bir sıralama kriteri (öncelik + alan + yön)
   ════════════════════════════════════════════════════════════════ */

.sort-row[b-ktnqk0e9lf] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.sort-row:hover[b-ktnqk0e9lf] {
    border-color: var(--border-hover);
}

/* Öncelik numarası (1, 2, 3 — primary, secondary, tertiary) */
.sort-row-priority[b-ktnqk0e9lf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    background: var(--primary-alpha);
    color: var(--primary);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    border-radius: 13px;
}

/* Cell'ler */
.sort-cell[b-ktnqk0e9lf] {
    display: flex;
    align-items: center;
    min-width: 0;
}

.sort-cell-field[b-ktnqk0e9lf] {
    flex: 1;
    min-width: 200px;
}

.sort-cell-direction[b-ktnqk0e9lf] {
    flex: 0 0 auto;
}

.sort-cell[b-ktnqk0e9lf]  .searchable-select {
    width: 100%;
}

.sort-cell[b-ktnqk0e9lf]  .searchable-select-trigger {
    padding: 8px 12px;
    font-size: 13px;
    border-radius: var(--radius-sm);
    color: var(--primary);
    font-weight: 600;
}

/* Yön toggle butonu */
.sort-direction-toggle[b-ktnqk0e9lf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    min-width: 130px;
    justify-content: center;
}

.sort-direction-toggle:hover[b-ktnqk0e9lf] {
    border-color: var(--border-hover);
    background: var(--bg-card-hover);
}

.sort-direction-toggle.is-asc[b-ktnqk0e9lf] {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--primary-alpha);
}

.sort-direction-toggle.is-desc[b-ktnqk0e9lf] {
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.5);
    background: rgba(245, 158, 11, 0.1);
}

.sort-direction-toggle:active[b-ktnqk0e9lf] {
    transform: scale(0.98);
}

.sort-row-remove[b-ktnqk0e9lf] {
    margin-left: auto;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .sort-row[b-ktnqk0e9lf] {
        flex-wrap: wrap;
    }

    .sort-cell-field[b-ktnqk0e9lf] {
        flex: 1 1 100%;
        order: 2;
    }

    .sort-cell-direction[b-ktnqk0e9lf] {
        flex: 1 1 auto;
        order: 3;
    }

    .sort-row-priority[b-ktnqk0e9lf] {
        order: 1;
    }
}
/* /Components/Shared/GroupedJobOperationSelect.razor.rz.scp.css */
/* GroupedJobOperationSelect — SearchableSelect tema değişkenleri pattern'iyle */

.grouped-op-select[b-pe2bkq7t4p] {
    position: relative;
    width: 100%;
}

.grouped-op-select.disabled[b-pe2bkq7t4p] {
    opacity: 0.6;
    pointer-events: none;
}

/* Trigger */
.grouped-op-select-trigger[b-pe2bkq7t4p] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
}

.grouped-op-select-trigger:hover[b-pe2bkq7t4p] {
    border-color: var(--border-hover, rgba(255, 255, 255, 0.15));
    background: var(--bg-card-hover, rgba(255, 255, 255, 0.03));
}

.grouped-op-select.open .grouped-op-select-trigger[b-pe2bkq7t4p] {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-alpha, rgba(16, 185, 129, 0.15));
}

.grouped-op-select-value[b-pe2bkq7t4p] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grouped-op-select-value.placeholder[b-pe2bkq7t4p] {
    color: var(--text-muted);
}

.grouped-op-select-arrow[b-pe2bkq7t4p] {
    color: var(--text-muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.grouped-op-select.open .grouped-op-select-arrow[b-pe2bkq7t4p] {
    transform: rotate(180deg);
}

/* Backdrop (SearchableSelect ile aynı z-stack: 99998 < dropdown 99999) */
.grouped-op-select-backdrop[b-pe2bkq7t4p] {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 99998;
}

/* Dropdown — JS pozisyonlaması SearchableSelect ile aynı (fixed) */
/* background: var(--bg-card) bazı tema bağlamlarında semi-transparent yorumlanıyor;
   solid fallback ve background-color/image ayrımı ile opaklık garanti edilir. */
.grouped-op-select-dropdown[b-pe2bkq7t4p] {
    position: fixed;
    background-color: var(--bg-card, #1a1d23);
    background-image: none;
    backdrop-filter: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55),
                0 6px 16px rgba(0, 0, 0, 0.35);
    z-index: 99999;
    overflow-y: auto;
    max-height: 420px;
    padding: 6px;
    animation: groupedOpSelectIn-b-pe2bkq7t4p 0.2s ease;
}

@keyframes groupedOpSelectIn-b-pe2bkq7t4p {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.grouped-op-select-dropdown[b-pe2bkq7t4p]::-webkit-scrollbar {
    width: 6px;
}

.grouped-op-select-dropdown[b-pe2bkq7t4p]::-webkit-scrollbar-track {
    background: transparent;
}

.grouped-op-select-dropdown[b-pe2bkq7t4p]::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

/* Group */
.grouped-op-select-group[b-pe2bkq7t4p] {
    padding: 4px 0;
}

.grouped-op-select-group + .grouped-op-select-group[b-pe2bkq7t4p] {
    border-top: 1px solid var(--border);
    margin-top: 4px;
    padding-top: 8px;
}

.grouped-op-select-group-header[b-pe2bkq7t4p] {
    padding: 6px 14px 4px 14px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Option */
.grouped-op-select-option[b-pe2bkq7t4p] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background-color: transparent;
    border: none;
    border-radius: calc(var(--radius) - 4px);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
    /* Pointer-event'in option'a düşmesi garanti — JS interop'ın container outside-click
       handler'ı dropdown içeriği üzerinde tetiklenmez. */
    position: relative;
    z-index: 1;
}

.grouped-op-select-option:hover:not(:disabled):not(.disabled)[b-pe2bkq7t4p],
.grouped-op-select-option:focus-visible:not(:disabled):not(.disabled)[b-pe2bkq7t4p] {
    /* Sabit rgba — proje değişkeni yoksa bile belirgin hover */
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    outline: none;
}

.grouped-op-select-option.selected[b-pe2bkq7t4p] {
    background-color: rgba(16, 185, 129, 0.14);
    color: var(--primary, #10b981);
}

.grouped-op-select-option.selected:hover:not(:disabled):not(.disabled)[b-pe2bkq7t4p] {
    background-color: rgba(16, 185, 129, 0.22);
}

.grouped-op-select-option.disabled[b-pe2bkq7t4p],
.grouped-op-select-option:disabled[b-pe2bkq7t4p] {
    opacity: 0.42;
    cursor: not-allowed;
    color: var(--text-muted);
    background-color: transparent;
}

.grouped-op-select-option.disabled:hover[b-pe2bkq7t4p],
.grouped-op-select-option:disabled:hover[b-pe2bkq7t4p] {
    background-color: transparent;
}

.grouped-op-select-option-text[b-pe2bkq7t4p] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grouped-op-select-option-badge[b-pe2bkq7t4p] {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--bg-input);
    color: var(--text-muted);
    border: 1px solid var(--border);
    white-space: nowrap;
    flex-shrink: 0;
}
/* /Components/Shared/ImportImagesFromBarcodesModal.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   Barkoddan Resim Çek Modal'ı
   ═══════════════════════════════════════════════════════════════ */

.bcimg-info[b-6ceyhhsccc] {
    background: var(--bg-secondary);
    border-left: 3px solid var(--primary);
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.bcimg-controls[b-6ceyhhsccc] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: end;
    padding: 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 16px;
}

.bcimg-controls .form-group[b-6ceyhhsccc] {
    margin-bottom: 0;
}

.bcimg-meta[b-6ceyhhsccc] {
    color: var(--text-secondary);
    font-size: 13px;
    padding: 8px 0;
}

/* Loading */
.bcimg-loading[b-6ceyhhsccc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px;
    color: var(--text-secondary);
}

.bcimg-spinner[b-6ceyhhsccc] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: bcimg-spin-b-6ceyhhsccc 0.8s linear infinite;
}

@keyframes bcimg-spin-b-6ceyhhsccc {
    to { transform: rotate(360deg); }
}

/* Summary */
.bcimg-summary[b-6ceyhhsccc] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 12px;
}

.bcimg-selected[b-6ceyhhsccc] {
    color: var(--primary);
    font-weight: 600;
}

.bcimg-summary-actions[b-6ceyhhsccc] {
    margin-left: auto;
    display: flex;
    gap: 12px;
}

.bcimg-link[b-6ceyhhsccc] {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 13px;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

.bcimg-link:hover[b-6ceyhhsccc] {
    text-decoration: none;
    opacity: 0.85;
}

/* Groups */
.bcimg-groups[b-6ceyhhsccc] {
    max-height: 480px;
    overflow-y: auto;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bcimg-group[b-6ceyhhsccc] {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.bcimg-group-header[b-6ceyhhsccc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.bcimg-group-meta[b-6ceyhhsccc] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.bcimg-group-meta strong[b-6ceyhhsccc] {
    font-family: monospace;
    font-size: 13px;
    color: var(--text-primary);
}

.bcimg-variant-title[b-6ceyhhsccc] {
    color: var(--text-secondary);
    font-style: italic;
}

.bcimg-group-count[b-6ceyhhsccc] {
    background: var(--bg-primary);
    color: var(--text-secondary);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

/* Thumbnails */
.bcimg-thumbs[b-6ceyhhsccc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    padding: 12px;
}

.bcimg-thumb[b-6ceyhhsccc] {
    position: relative;
    aspect-ratio: 1;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-secondary);
    transition: all 0.15s ease;
}

.bcimg-thumb:hover[b-6ceyhhsccc] {
    border-color: var(--primary);
    transform: translateY(-1px);
}

.bcimg-thumb.selected[b-6ceyhhsccc] {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.bcimg-thumb img[b-6ceyhhsccc] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bcimg-primary-badge[b-6ceyhhsccc] {
    position: absolute;
    top: 4px;
    left: 4px;
    background: var(--primary);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.bcimg-check[b-6ceyhhsccc] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

.bcimg-thumb.selected .bcimg-check[b-6ceyhhsccc] {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* Not found banner */
.bcimg-notfound[b-6ceyhhsccc] {
    background: rgba(245, 158, 11, 0.1);
    border-left: 3px solid var(--warning);
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 13px;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bcimg-notfound span[b-6ceyhhsccc] {
    font-family: monospace;
    color: var(--text-secondary);
    font-size: 12px;
    word-break: break-all;
}

.bcimg-empty[b-6ceyhhsccc] {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
    font-size: 14px;
    background: var(--bg-secondary);
    border-radius: 8px;
}

/* Responsive */
@media (max-width: 768px) {
    .bcimg-controls[b-6ceyhhsccc] {
        grid-template-columns: 1fr;
    }

    .bcimg-thumbs[b-6ceyhhsccc] {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    }
}
/* /Components/Shared/ImportImagesFromUrlModal.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   Linkten Resim Çek Modal'ı (Trendyol)
   ═══════════════════════════════════════════════════════════════ */

.urlimg-info[b-x5mrmp1sm1] {
    background: var(--bg-secondary);
    border-left: 3px solid var(--primary);
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.urlimg-controls[b-x5mrmp1sm1] {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    padding: 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 16px;
}

.urlimg-field[b-x5mrmp1sm1] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.urlimg-label[b-x5mrmp1sm1] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}

.urlimg-input-wrap[b-x5mrmp1sm1] {
    position: relative;
    display: flex;
    align-items: center;
}

.urlimg-input-icon[b-x5mrmp1sm1] {
    position: absolute;
    left: 12px;
    color: var(--text-secondary);
    pointer-events: none;
}

.urlimg-input[b-x5mrmp1sm1] {
    flex: 1;
    width: 100%;
    height: 38px;
    padding: 0 36px 0 36px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.urlimg-input[b-x5mrmp1sm1]::placeholder {
    color: var(--text-secondary);
    opacity: 0.65;
}

.urlimg-input:hover:not(:disabled)[b-x5mrmp1sm1] {
    border-color: var(--text-secondary);
}

.urlimg-input:focus[b-x5mrmp1sm1] {
    border-color: var(--primary);
    background: var(--bg-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.urlimg-input:disabled[b-x5mrmp1sm1] {
    opacity: 0.55;
    cursor: not-allowed;
}

.urlimg-input-clear[b-x5mrmp1sm1] {
    position: absolute;
    right: 8px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    transition: background 0.15s, color 0.15s;
}

.urlimg-input-clear:hover[b-x5mrmp1sm1] {
    background: var(--bg-primary);
    color: var(--text-primary);
}

.urlimg-loading[b-x5mrmp1sm1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px;
    color: var(--text-secondary);
}

.urlimg-spinner[b-x5mrmp1sm1] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: urlimg-spin-b-x5mrmp1sm1 0.8s linear infinite;
}

@keyframes urlimg-spin-b-x5mrmp1sm1 {
    to { transform: rotate(360deg); }
}

.urlimg-product-meta[b-x5mrmp1sm1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bg-secondary);
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 12px;
}

.urlimg-meta-pill[b-x5mrmp1sm1] {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
}

.urlimg-meta-pill.muted[b-x5mrmp1sm1] {
    color: var(--text-secondary);
}

.urlimg-match-info[b-x5mrmp1sm1] {
    margin-left: auto;
    font-size: 12px;
}

.urlimg-match-yes[b-x5mrmp1sm1] {
    color: var(--success, #10b981);
    font-weight: 600;
}

.urlimg-match-no[b-x5mrmp1sm1] {
    color: var(--warning, #f59e0b);
    font-weight: 600;
}

.urlimg-group-select[b-x5mrmp1sm1] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-bottom: 12px;
    position: relative;
}

.urlimg-suggested-tag[b-x5mrmp1sm1] {
    position: absolute;
    top: 12px;
    right: 14px;
    font-size: 11px;
    color: var(--primary);
    background: rgba(59, 130, 246, 0.1);
    padding: 2px 8px;
    border-radius: 999px;
}

.urlimg-summary[b-x5mrmp1sm1] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 12px;
}

.urlimg-selected[b-x5mrmp1sm1] {
    color: var(--primary);
    font-weight: 600;
}

.urlimg-summary-actions[b-x5mrmp1sm1] {
    margin-left: auto;
    display: flex;
    gap: 12px;
}

.urlimg-link[b-x5mrmp1sm1] {
    background: none;
    border: none;
    color: var(--primary);
    cursor: pointer;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
}

.urlimg-link:hover[b-x5mrmp1sm1] {
    text-decoration: underline;
}

.urlimg-thumbs[b-x5mrmp1sm1] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}

.urlimg-thumb[b-x5mrmp1sm1] {
    position: relative;
    aspect-ratio: 1;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-secondary);
    transition: border-color 0.15s, transform 0.15s;
}

.urlimg-thumb:hover[b-x5mrmp1sm1] {
    border-color: var(--primary);
}

.urlimg-thumb.selected[b-x5mrmp1sm1] {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.urlimg-thumb img[b-x5mrmp1sm1] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.urlimg-check[b-x5mrmp1sm1] {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: white;
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

.urlimg-thumb.selected .urlimg-check[b-x5mrmp1sm1] {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.urlimg-empty[b-x5mrmp1sm1] {
    padding: 30px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
    background: var(--bg-secondary);
    border-radius: 6px;
}
/* /Components/Shared/LoadingOverlay.razor.rz.scp.css */
/* Page-content içinde çalışan loading overlay — sidebar/header'ı kapatmaz.
   Theme-aware (--bg-primary, --bg-card, --border, --primary, --text-secondary). */

.loading-overlay[b-8hq67rwyf0] {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--bg-primary) 65%, transparent);
    backdrop-filter: blur(6px) saturate(140%);
    -webkit-backdrop-filter: blur(6px) saturate(140%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    animation: overlay-fade-in-b-8hq67rwyf0 180ms ease-out;
}

.loading-overlay-content[b-8hq67rwyf0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 28px 36px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow:
        0 24px 56px rgba(0, 0, 0, 0.18),
        0 2px 8px rgba(0, 0, 0, 0.08),
        inset 0 0 0 1px color-mix(in srgb, var(--primary) 6%, transparent);
}

.loading-overlay-content p[b-8hq67rwyf0] {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--text-secondary);
    animation: overlay-text-pulse-b-8hq67rwyf0 2s ease-in-out infinite;
}

@keyframes overlay-fade-in-b-8hq67rwyf0 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes overlay-text-pulse-b-8hq67rwyf0 {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1; }
}
/* /Components/Shared/Messaging/ChatPanel.razor.rz.scp.css */
/* WhatsApp Web Style - Chat Panel */
.chat-panel[b-h7mng23z62] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #0b141a;
}

.no-conversation-selected[b-h7mng23z62] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #8696a0;
    text-align: center;
    padding: 40px;
    background: #222e35;
    border-bottom: 6px solid #00a884;
}

.no-conversation-selected svg[b-h7mng23z62] {
    opacity: 0.3;
    margin-bottom: 24px;
    color: #8696a0;
}

.no-conversation-selected h3[b-h7mng23z62] {
    font-size: 32px;
    font-weight: 300;
    color: #e9edef;
    margin: 0 0 16px 0;
}

.no-conversation-selected p[b-h7mng23z62] {
    font-size: 14px;
    margin: 0;
    color: #8696a0;
}

.chat-header[b-h7mng23z62] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: #202c33;
    height: 59px;
    box-sizing: border-box;
}

.back-button[b-h7mng23z62] {
    display: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: #aebac1;
    cursor: pointer;
    transition: all 0.2s;
}

.back-button:hover[b-h7mng23z62] {
    background: rgba(255, 255, 255, 0.1);
    color: #e9edef;
}

@media (max-width: 768px) {
    .back-button[b-h7mng23z62] {
        display: flex;
    }
}

.chat-user-avatar[b-h7mng23z62] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #6b7c85;
    color: #cfd6da;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 400;
    flex-shrink: 0;
    text-transform: uppercase;
}

.chat-user-info[b-h7mng23z62] {
    flex: 1;
    min-width: 0;
}

.chat-user-name[b-h7mng23z62] {
    display: block;
    font-size: 16px;
    font-weight: 400;
    color: #e9edef;
}

.typing-status[b-h7mng23z62] {
    display: block;
    font-size: 13px;
    color: #00a884;
}

.online-status[b-h7mng23z62] {
    display: block;
    font-size: 13px;
    color: #00a884;
}

.online-indicator[b-h7mng23z62] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #00a884;
    flex-shrink: 0;
    margin-left: auto;
    box-shadow: 0 0 0 2px #202c33;
}

.chat-messages[b-h7mng23z62] {
    flex: 1;
    overflow-y: auto;
    padding: 20px 60px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='pattern' patternUnits='userSpaceOnUse' width='100' height='100'%3E%3Cpath d='M0 0h100v100H0z' fill='%23061118'/%3E%3Ccircle cx='50' cy='50' r='1' fill='%230a1a24' opacity='0.5'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23pattern)' width='100%25' height='100%25'/%3E%3C/svg%3E");
    background-color: #0b141a;
}

.chat-messages[b-h7mng23z62]::-webkit-scrollbar {
    width: 6px;
}

.chat-messages[b-h7mng23z62]::-webkit-scrollbar-track {
    background: transparent;
}

.chat-messages[b-h7mng23z62]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.loading-messages[b-h7mng23z62] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #8696a0;
    gap: 12px;
}

.no-messages[b-h7mng23z62] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #8696a0;
    gap: 12px;
    text-align: center;
}

.no-messages svg[b-h7mng23z62] {
    opacity: 0.3;
}

.no-messages p[b-h7mng23z62] {
    font-size: 14px;
    font-weight: 400;
    color: #e9edef;
    margin: 0;
}

.no-messages span[b-h7mng23z62] {
    font-size: 13px;
    color: #8696a0;
}

/* Date Separator - WhatsApp Style */
.date-separator[b-h7mng23z62] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 12px 0;
}

.date-separator span[b-h7mng23z62] {
    background: #182229;
    color: #8696a0;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 400;
    box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
    text-transform: uppercase;
}

.spinner[b-h7mng23z62] {
    width: 24px;
    height: 24px;
    border: 2px solid #2a3942;
    border-top-color: #00a884;
    border-radius: 50%;
    animation: spin-b-h7mng23z62 0.8s linear infinite;
}

@keyframes spin-b-h7mng23z62 {
    to {
        transform: rotate(360deg);
    }
}

.typing-indicator-wrapper[b-h7mng23z62] {
    padding: 0 60px 8px 60px;
}

/* Message Info Panel - WhatsApp Style */
.message-info-overlay[b-h7mng23z62] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(11, 20, 26, 0.6);
    z-index: 100;
}

.message-info-panel[b-h7mng23z62] {
    position: absolute;
    top: 0;
    right: 0;
    width: 320px;
    height: 100%;
    background: #111b21;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
    z-index: 101;
    display: flex;
    flex-direction: column;
    animation: slideInRight-b-h7mng23z62 0.2s ease;
}

@keyframes slideInRight-b-h7mng23z62 {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

.message-info-header[b-h7mng23z62] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 24px;
    background: #202c33;
    height: 59px;
}

.message-info-header h4[b-h7mng23z62] {
    font-size: 19px;
    font-weight: 500;
    color: #e9edef;
    margin: 0;
}

.message-info-close[b-h7mng23z62] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: #aebac1;
    cursor: pointer;
    transition: all 0.15s;
}

.message-info-close:hover[b-h7mng23z62] {
    background: rgba(255, 255, 255, 0.1);
    color: #e9edef;
}

.message-info-content[b-h7mng23z62] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.info-message-preview[b-h7mng23z62] {
    padding: 16px;
    background: #0b141a;
    border-radius: 8px;
    margin-bottom: 16px;
}

.info-message-bubble[b-h7mng23z62] {
    background: #005c4b;
    color: #e9edef;
    padding: 8px 12px;
    border-radius: 7.5px;
    font-size: 14px;
    line-height: 19px;
    max-width: 100%;
    word-wrap: break-word;
}

.info-section[b-h7mng23z62] {
    background: #202c33;
    border-radius: 8px;
    overflow: hidden;
}

.info-row[b-h7mng23z62] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid #2a3942;
}

.info-row:last-child[b-h7mng23z62] {
    border-bottom: none;
}

.info-label[b-h7mng23z62] {
    font-size: 14px;
    color: #8696a0;
}

.info-value[b-h7mng23z62] {
    font-size: 14px;
    color: #e9edef;
    text-align: right;
}

.info-value.read-status[b-h7mng23z62] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #00a884;
}

.info-value .read-icon[b-h7mng23z62] {
    color: #00a884;
}
/* /Components/Shared/Messaging/ConversationItem.razor.rz.scp.css */
/* WhatsApp Web Style - Conversation Item */
.conversation-item[b-ttlzmlsae7] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: none;
    position: relative;
}

.conversation-item[b-ttlzmlsae7]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 72px;
    right: 16px;
    height: 1px;
    background: #2a3942;
}

.conversation-item:hover[b-ttlzmlsae7] {
    background: #202c33;
}

.conversation-item.selected[b-ttlzmlsae7] {
    background: #2a3942;
}

.conversation-item.unread .conversation-name[b-ttlzmlsae7] {
    font-weight: 500;
    color: #e9edef;
}

.conversation-item.unread .conversation-preview[b-ttlzmlsae7] {
    color: #d1d7db;
}

.conversation-item.unread .conversation-time[b-ttlzmlsae7] {
    color: #00a884;
}

.conversation-avatar[b-ttlzmlsae7] {
    width: 49px;
    height: 49px;
    border-radius: 50%;
    background: #6b7c85;
    color: #cfd6da;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 400;
    flex-shrink: 0;
    text-transform: uppercase;
}

.conversation-info[b-ttlzmlsae7] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.conversation-header[b-ttlzmlsae7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}

.conversation-name[b-ttlzmlsae7] {
    font-size: 17px;
    font-weight: 400;
    color: #e9edef;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-time[b-ttlzmlsae7] {
    font-size: 12px;
    color: #8696a0;
    flex-shrink: 0;
    margin-left: 8px;
}

.conversation-preview[b-ttlzmlsae7] {
    font-size: 14px;
    color: #8696a0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 4px;
}

.no-messages[b-ttlzmlsae7] {
    font-style: italic;
    color: #8696a0;
}

.conversation-actions[b-ttlzmlsae7] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.unread-badge[b-ttlzmlsae7] {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #00a884;
    color: #111b21;
    font-size: 12px;
    font-weight: 500;
    border-radius: 10px;
    flex-shrink: 0;
}

.conversation-menu-btn[b-ttlzmlsae7] {
    width: 28px;
    height: 28px;
    display: none;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: #8696a0;
    cursor: pointer;
    transition: all 0.15s;
}

.conversation-item:hover .conversation-menu-btn[b-ttlzmlsae7] {
    display: flex;
}

.conversation-menu-btn:hover[b-ttlzmlsae7] {
    background: rgba(255, 255, 255, 0.1);
    color: #e9edef;
}

.menu-container[b-ttlzmlsae7] {
    position: relative;
}

.conversation-menu-overlay[b-ttlzmlsae7] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 998;
}

.conversation-menu[b-ttlzmlsae7] {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    background: #233138;
    border-radius: 3px;
    box-shadow: 0 2px 5px 0 rgba(11, 20, 26, 0.26), 0 2px 10px 0 rgba(11, 20, 26, 0.16);
    padding: 8px 0;
    min-width: 180px;
    z-index: 999;
    animation: menuFadeIn-b-ttlzmlsae7 0.15s ease;
}

@keyframes menuFadeIn-b-ttlzmlsae7 {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.conversation-menu-item[b-ttlzmlsae7] {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 10px 20px;
    background: transparent;
    border: none;
    color: #e9edef;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s;
    text-align: left;
}

.conversation-menu-item:hover[b-ttlzmlsae7] {
    background: #182229;
}

.conversation-menu-item.danger[b-ttlzmlsae7] {
    color: #f15c6d;
}

.conversation-menu-item.danger svg[b-ttlzmlsae7] {
    color: #f15c6d;
}

.conversation-menu-item svg[b-ttlzmlsae7] {
    color: #8696a0;
    flex-shrink: 0;
}
/* /Components/Shared/Messaging/ConversationList.razor.rz.scp.css */
/* WhatsApp Web Style - Conversation List */
.conversation-list[b-6b9gncgmd4] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #111b21;
}

.conversation-list-header[b-6b9gncgmd4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #202c33;
    height: 59px;
    box-sizing: border-box;
}

.conversation-list-header h3[b-6b9gncgmd4] {
    font-size: 16px;
    font-weight: 500;
    color: #e9edef;
    margin: 0;
}

.new-message-btn[b-6b9gncgmd4] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: #aebac1;
    cursor: pointer;
    transition: all 0.2s;
}

.new-message-btn:hover[b-6b9gncgmd4] {
    background: rgba(255, 255, 255, 0.1);
    color: #00a884;
}

.conversation-search[b-6b9gncgmd4] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    margin: 8px 12px;
    background: #202c33;
    border-radius: 8px;
}

.conversation-search svg[b-6b9gncgmd4] {
    color: #8696a0;
    flex-shrink: 0;
}

.conversation-search input[b-6b9gncgmd4] {
    flex: 1;
    background: transparent;
    border: none;
    color: #e9edef;
    font-size: 14px;
    outline: none;
}

.conversation-search input[b-6b9gncgmd4]::placeholder {
    color: #8696a0;
}

.conversation-list-content[b-6b9gncgmd4] {
    flex: 1;
    overflow-y: auto;
}

.conversation-list-content[b-6b9gncgmd4]::-webkit-scrollbar {
    width: 6px;
}

.conversation-list-content[b-6b9gncgmd4]::-webkit-scrollbar-track {
    background: transparent;
}

.conversation-list-content[b-6b9gncgmd4]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.loading-state[b-6b9gncgmd4],
.empty-state[b-6b9gncgmd4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #8696a0;
    gap: 16px;
    text-align: center;
}

.empty-state svg[b-6b9gncgmd4] {
    opacity: 0.4;
    color: #8696a0;
}

.empty-state p[b-6b9gncgmd4] {
    font-size: 14px;
    margin: 0;
    color: #e9edef;
}

.start-conversation-btn[b-6b9gncgmd4] {
    margin-top: 8px;
    padding: 10px 24px;
    background: #00a884;
    border: none;
    border-radius: 24px;
    color: #111b21;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.start-conversation-btn:hover[b-6b9gncgmd4] {
    background: #06cf9c;
}

.spinner[b-6b9gncgmd4] {
    width: 24px;
    height: 24px;
    border: 2px solid #2a3942;
    border-top-color: #00a884;
    border-radius: 50%;
    animation: spin-b-6b9gncgmd4 0.8s linear infinite;
}

@keyframes spin-b-6b9gncgmd4 {
    to {
        transform: rotate(360deg);
    }
}
/* /Components/Shared/Messaging/MessageBadge.razor.rz.scp.css */
.message-badge-btn[b-qsuayst2gk] {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
    cursor: pointer;
    transition: all 0.2s;
}

.message-badge-btn:hover[b-qsuayst2gk] {
    background: var(--bg-tertiary, rgba(255, 255, 255, 0.05));
    color: var(--text-primary, white);
}

.message-badge-btn .badge[b-qsuayst2gk] {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-danger, #ef4444);
    color: white;
    font-size: 10px;
    font-weight: 600;
    border-radius: 8px;
    line-height: 1;
}
/* /Components/Shared/Messaging/MessageBubble.razor.rz.scp.css */
/* WhatsApp Web Style - Message Bubble */
.message-wrapper[b-5ibbre71xx] {
    display: flex;
    flex-direction: column;
    position: relative;
    max-width: 65%;
    margin-bottom: 1px;
}

.message-wrapper.mine[b-5ibbre71xx] {
    align-self: flex-end;
    margin-left: auto;
}

.message-wrapper.theirs[b-5ibbre71xx] {
    align-self: flex-start;
    margin-right: auto;
}

/* Reply Reference - WhatsApp Style */
.reply-reference[b-5ibbre71xx] {
    display: flex;
    align-items: stretch;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 7px;
    padding: 5px 12px 7px 8px;
    margin-bottom: 3px;
    cursor: pointer;
    overflow: hidden;
    border-left: 4px solid #00a884;
}

.message-wrapper.theirs .reply-reference[b-5ibbre71xx] {
    border-left-color: #53bdeb;
}

.reply-bar[b-5ibbre71xx] {
    display: none;
}

.reply-content[b-5ibbre71xx] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.reply-sender[b-5ibbre71xx] {
    font-size: 12.5px;
    font-weight: 500;
    color: #00a884;
}

.message-wrapper.theirs .reply-sender[b-5ibbre71xx] {
    color: #53bdeb;
}

.reply-text[b-5ibbre71xx] {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Message Bubble - WhatsApp Style */
.message-bubble[b-5ibbre71xx] {
    position: relative;
    padding: 6px 7px 8px 9px;
    border-radius: 7.5px;
    word-wrap: break-word;
    box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}

.message-wrapper.mine .message-bubble[b-5ibbre71xx] {
    background: #005c4b;
    color: #e9edef;
}

.message-wrapper.theirs .message-bubble[b-5ibbre71xx] {
    background: #202c33;
    color: #e9edef;
}

.message-bubble.deleted[b-5ibbre71xx] {
    opacity: 0.7;
}

/* Message Menu Container */
.message-menu-container[b-5ibbre71xx] {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 10;
}

/* Hover Dropdown Button - WhatsApp Style */
.message-dropdown-btn[b-5ibbre71xx] {
    width: 24px;
    height: 24px;
    display: none;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.15s;
}

.message-bubble:hover .message-dropdown-btn[b-5ibbre71xx] {
    display: flex;
}

.message-dropdown-btn:hover[b-5ibbre71xx] {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.1);
}

/* Dropdown Overlay */
.message-dropdown-overlay[b-5ibbre71xx] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
}

/* Dropdown Menu */
.message-dropdown[b-5ibbre71xx] {
    position: absolute;
    top: 100%;
    margin-top: 4px;
    background: #233138;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    padding: 6px 0;
    min-width: 140px;
    z-index: 100;
    animation: dropdownFadeIn-b-5ibbre71xx 0.15s ease;
}

.message-dropdown.mine[b-5ibbre71xx] {
    right: 0;
}

.message-dropdown.theirs[b-5ibbre71xx] {
    left: 0;
}

@keyframes dropdownFadeIn-b-5ibbre71xx {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-item[b-5ibbre71xx] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 16px;
    background: transparent;
    border: none;
    color: #e9edef;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s;
    text-align: left;
}

.dropdown-item:hover[b-5ibbre71xx] {
    background: rgba(255, 255, 255, 0.08);
}

.dropdown-item svg[b-5ibbre71xx] {
    flex-shrink: 0;
    color: #8696a0;
}

.dropdown-item.danger[b-5ibbre71xx] {
    color: #f15c6d;
}

.dropdown-item.danger svg[b-5ibbre71xx] {
    color: #f15c6d;
}

.dropdown-divider[b-5ibbre71xx] {
    height: 1px;
    background: #2a3942;
    margin: 4px 0;
}

/* Message Content */
.message-text[b-5ibbre71xx] {
    font-size: 14.2px;
    line-height: 19px;
    white-space: pre-wrap;
    word-break: break-word;
    margin-right: 48px;
}

.deleted-content[b-5ibbre71xx] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-style: italic;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14.2px;
}

.deleted-content svg[b-5ibbre71xx] {
    opacity: 0.6;
    flex-shrink: 0;
}

/* Message Footer - WhatsApp Style */
.message-footer[b-5ibbre71xx] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    float: right;
    margin: -10px 0 -5px 4px;
    position: relative;
}

.edited-label[b-5ibbre71xx] {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
}

.message-time[b-5ibbre71xx] {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
}

.message-status[b-5ibbre71xx] {
    display: flex;
    align-items: center;
    margin-left: 2px;
}

.status-icon[b-5ibbre71xx] {
    color: rgba(255, 255, 255, 0.5);
    width: 16px;
    height: 11px;
}

.status-icon.read[b-5ibbre71xx] {
    color: #00a884;
}

.status-icon.delivered[b-5ibbre71xx] {
    color: rgba(255, 255, 255, 0.5);
}

/* Message highlight animation for scroll-to */
:global(.message-highlight) .message-bubble[b-5ibbre71xx] {
    animation: highlightPulse-b-5ibbre71xx 2s ease-out;
}

@keyframes highlightPulse-b-5ibbre71xx {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 168, 132, 0.6);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(0, 168, 132, 0.2);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 168, 132, 0);
    }
}
/* /Components/Shared/Messaging/MessageInput.razor.rz.scp.css */
/* WhatsApp Web Style - Message Input */
.message-input-wrapper[b-awa9mgsk8d] {
    background: #202c33;
    padding: 0;
}

/* Reply/Edit Preview - WhatsApp Style */
.input-preview[b-awa9mgsk8d] {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 8px 16px;
    background: #1e2a30;
    border-left: 4px solid #00a884;
    margin: 5px 16px 0 16px;
    border-radius: 4px;
}

.edit-preview[b-awa9mgsk8d] {
    border-left-color: #53bdeb;
}

.preview-icon[b-awa9mgsk8d] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #8696a0;
}

.preview-content[b-awa9mgsk8d] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.preview-label[b-awa9mgsk8d] {
    font-size: 13px;
    font-weight: 500;
    color: #00a884;
}

.edit-preview .preview-label[b-awa9mgsk8d] {
    color: #53bdeb;
}

.preview-text[b-awa9mgsk8d] {
    font-size: 13px;
    color: #8696a0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preview-close[b-awa9mgsk8d] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: #8696a0;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.preview-close:hover[b-awa9mgsk8d] {
    background: rgba(255, 255, 255, 0.1);
    color: #e9edef;
}

/* Input Container - WhatsApp Style */
.message-input-container[b-awa9mgsk8d] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 5px 16px 5px 10px;
    min-height: 62px;
    box-sizing: border-box;
}

/* Attachment Button - WhatsApp Style */
.attachment-btn[b-awa9mgsk8d] {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: #8696a0;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.attachment-btn:hover:not(:disabled)[b-awa9mgsk8d] {
    color: #00a884;
}

.attachment-btn:disabled[b-awa9mgsk8d] {
    opacity: 0.5;
    cursor: not-allowed;
}

.message-input[b-awa9mgsk8d] {
    flex: 1;
    min-height: 42px;
    max-height: 100px;
    padding: 9px 12px;
    background: #2a3942;
    border: none;
    border-radius: 8px;
    color: #e9edef;
    font-size: 15px;
    line-height: 20px;
    resize: none;
    outline: none;
    font-family: inherit;
}

.message-input[b-awa9mgsk8d]::placeholder {
    color: #8696a0;
}

.message-input:disabled[b-awa9mgsk8d] {
    opacity: 0.5;
    cursor: not-allowed;
}

.send-button[b-awa9mgsk8d] {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: #8696a0;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.send-button:hover:not(:disabled)[b-awa9mgsk8d] {
    color: #00a884;
}

.send-button:disabled[b-awa9mgsk8d] {
    opacity: 0.5;
    cursor: not-allowed;
}

.send-button.edit-mode[b-awa9mgsk8d] {
    color: #53bdeb;
}

.send-button.edit-mode:hover:not(:disabled)[b-awa9mgsk8d] {
    color: #7dcbf5;
}

.spinner-small[b-awa9mgsk8d] {
    width: 20px;
    height: 20px;
    border: 2px solid #2a3942;
    border-top-color: #00a884;
    border-radius: 50%;
    animation: spin-b-awa9mgsk8d 0.8s linear infinite;
}

@keyframes spin-b-awa9mgsk8d {
    to {
        transform: rotate(360deg);
    }
}
/* /Components/Shared/Messaging/MessagingDrawer.razor.rz.scp.css */
/* WhatsApp Web Style - Messaging Drawer */
.messaging-drawer-overlay[b-lnyv5t3zsy] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.messaging-drawer-overlay.open[b-lnyv5t3zsy] {
    opacity: 1;
    visibility: visible;
}

.messaging-drawer[b-lnyv5t3zsy] {
    position: fixed;
    top: 0;
    right: 0;
    width: 900px;
    max-width: 100%;
    height: 100%;
    background: #111b21;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.5);
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
    display: flex;
    flex-direction: column;
    z-index: 1001;
}

.messaging-drawer.open[b-lnyv5t3zsy] {
    transform: translateX(0);
}

.drawer-header[b-lnyv5t3zsy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #202c33;
    height: 59px;
    box-sizing: border-box;
}

.drawer-header h2[b-lnyv5t3zsy] {
    font-size: 16px;
    font-weight: 500;
    color: #e9edef;
    margin: 0;
}

.close-button[b-lnyv5t3zsy] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: #aebac1;
    cursor: pointer;
    transition: all 0.2s;
}

.close-button:hover[b-lnyv5t3zsy] {
    background: rgba(255, 255, 255, 0.1);
    color: #e9edef;
}

.drawer-content[b-lnyv5t3zsy] {
    flex: 1;
    display: flex;
    overflow: hidden;
    background: #111b21;
}

.conversation-panel[b-lnyv5t3zsy] {
    width: 340px;
    flex-shrink: 0;
    border-right: 1px solid #2a3942;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #111b21;
}

.chat-panel-container[b-lnyv5t3zsy] {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #0b141a;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .messaging-drawer[b-lnyv5t3zsy] {
        width: 100%;
    }

    .conversation-panel[b-lnyv5t3zsy] {
        width: 100%;
        border-right: none;
    }

    .conversation-panel.hidden-mobile[b-lnyv5t3zsy] {
        display: none;
    }

    .chat-panel-container.hidden-mobile[b-lnyv5t3zsy] {
        display: none;
    }
}

/* Delete Confirmation Modal */
.delete-confirm-overlay[b-lnyv5t3zsy] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn-b-lnyv5t3zsy 0.2s ease;
}

@keyframes fadeIn-b-lnyv5t3zsy {
    from { opacity: 0; }
    to { opacity: 1; }
}

.delete-confirm-modal[b-lnyv5t3zsy] {
    background: #233138;
    border-radius: 8px;
    padding: 24px;
    max-width: 380px;
    width: 90%;
    text-align: center;
    animation: scaleIn-b-lnyv5t3zsy 0.2s ease;
}

@keyframes scaleIn-b-lnyv5t3zsy {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.delete-confirm-icon[b-lnyv5t3zsy] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(241, 92, 109, 0.15);
    color: #f15c6d;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.delete-confirm-modal h3[b-lnyv5t3zsy] {
    font-size: 18px;
    font-weight: 500;
    color: #e9edef;
    margin: 0 0 12px 0;
}

.delete-confirm-modal p[b-lnyv5t3zsy] {
    font-size: 14px;
    color: #8696a0;
    margin: 0 0 8px 0;
    line-height: 1.5;
}

.delete-confirm-modal .warning-text[b-lnyv5t3zsy] {
    color: #f59e0b;
    font-size: 13px;
    margin-bottom: 20px;
}

.delete-confirm-actions[b-lnyv5t3zsy] {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.delete-confirm-actions button[b-lnyv5t3zsy] {
    padding: 10px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cancel-btn[b-lnyv5t3zsy] {
    background: #2a3942;
    color: #e9edef;
}

.cancel-btn:hover[b-lnyv5t3zsy] {
    background: #374751;
}

.delete-btn[b-lnyv5t3zsy] {
    background: #f15c6d;
    color: white;
}

.delete-btn:hover:not(:disabled)[b-lnyv5t3zsy] {
    background: #e74c5d;
}

.delete-btn:disabled[b-lnyv5t3zsy] {
    opacity: 0.7;
    cursor: not-allowed;
}

.spinner-small[b-lnyv5t3zsy] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-lnyv5t3zsy 0.8s linear infinite;
}

@keyframes spin-b-lnyv5t3zsy {
    to { transform: rotate(360deg); }
}
/* /Components/Shared/Messaging/NewConversationModal.razor.rz.scp.css */
/* WhatsApp Web Style - New Conversation Modal */
.modal-overlay[b-gqirt5dau5] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(11, 20, 26, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.modal-overlay.open[b-gqirt5dau5] {
    opacity: 1;
    visibility: visible;
}

.modal-content[b-gqirt5dau5] {
    width: 500px;
    max-width: 90vw;
    max-height: 80vh;
    background: #111b21;
    border-radius: 3px;
    box-shadow: 0 2px 5px 0 rgba(11, 20, 26, 0.26), 0 2px 10px 0 rgba(11, 20, 26, 0.16);
    display: flex;
    flex-direction: column;
    transform: scale(0.95);
    transition: transform 0.2s;
}

.modal-overlay.open .modal-content[b-gqirt5dau5] {
    transform: scale(1);
}

.modal-header[b-gqirt5dau5] {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 24px;
    background: #202c33;
    height: 59px;
}

.modal-header h3[b-gqirt5dau5] {
    font-size: 19px;
    font-weight: 500;
    color: #e9edef;
    margin: 0;
    flex: 1;
}

.close-btn[b-gqirt5dau5] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: #aebac1;
    cursor: pointer;
    transition: all 0.15s;
}

.close-btn:hover[b-gqirt5dau5] {
    background: rgba(255, 255, 255, 0.1);
    color: #e9edef;
}

.modal-body[b-gqirt5dau5] {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.search-box[b-gqirt5dau5] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    margin: 8px 12px;
    background: #202c33;
    border-radius: 8px;
}

.search-box svg[b-gqirt5dau5] {
    color: #8696a0;
    flex-shrink: 0;
}

.search-box input[b-gqirt5dau5] {
    flex: 1;
    background: transparent;
    border: none;
    color: #e9edef;
    font-size: 14px;
    outline: none;
}

.search-box input[b-gqirt5dau5]::placeholder {
    color: #8696a0;
}

.user-list[b-gqirt5dau5] {
    flex: 1;
    overflow-y: auto;
    max-height: 350px;
}

.user-list[b-gqirt5dau5]::-webkit-scrollbar {
    width: 6px;
}

.user-list[b-gqirt5dau5]::-webkit-scrollbar-track {
    background: transparent;
}

.user-list[b-gqirt5dau5]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.user-item[b-gqirt5dau5] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 24px;
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
}

.user-item[b-gqirt5dau5]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 82px;
    right: 24px;
    height: 1px;
    background: #2a3942;
}

.user-item:hover[b-gqirt5dau5] {
    background: #202c33;
}

.user-item.selected[b-gqirt5dau5] {
    background: #2a3942;
}

.user-avatar[b-gqirt5dau5] {
    width: 49px;
    height: 49px;
    border-radius: 50%;
    background: #6b7c85;
    color: #cfd6da;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 400;
    flex-shrink: 0;
    text-transform: uppercase;
}

.user-info[b-gqirt5dau5] {
    flex: 1;
    min-width: 0;
}

.user-name[b-gqirt5dau5] {
    display: block;
    font-size: 17px;
    font-weight: 400;
    color: #e9edef;
    margin-bottom: 2px;
}

.user-email[b-gqirt5dau5] {
    display: block;
    font-size: 14px;
    color: #8696a0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.check-icon[b-gqirt5dau5] {
    color: #00a884;
    flex-shrink: 0;
}

.loading-state[b-gqirt5dau5],
.empty-state[b-gqirt5dau5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #8696a0;
    gap: 16px;
}

.empty-state p[b-gqirt5dau5] {
    font-size: 14px;
    margin: 0;
    color: #e9edef;
}

.spinner[b-gqirt5dau5] {
    width: 24px;
    height: 24px;
    border: 2px solid #2a3942;
    border-top-color: #00a884;
    border-radius: 50%;
    animation: spin-b-gqirt5dau5 0.8s linear infinite;
}

@keyframes spin-b-gqirt5dau5 {
    to {
        transform: rotate(360deg);
    }
}

.modal-footer[b-gqirt5dau5] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    background: #202c33;
}

.cancel-btn[b-gqirt5dau5] {
    padding: 10px 24px;
    background: transparent;
    border: none;
    border-radius: 3px;
    color: #00a884;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.15s;
}

.cancel-btn:hover[b-gqirt5dau5] {
    background: rgba(0, 168, 132, 0.1);
}

.start-btn[b-gqirt5dau5] {
    padding: 10px 24px;
    background: #00a884;
    border: none;
    border-radius: 3px;
    color: #111b21;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
}

.start-btn:hover:not(:disabled)[b-gqirt5dau5] {
    background: #06cf9c;
}

.start-btn:disabled[b-gqirt5dau5] {
    opacity: 0.5;
    cursor: not-allowed;
}

.spinner-small[b-gqirt5dau5] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(17, 27, 33, 0.3);
    border-top-color: #111b21;
    border-radius: 50%;
    animation: spin-b-gqirt5dau5 0.8s linear infinite;
}
/* /Components/Shared/Messaging/TypingIndicator.razor.rz.scp.css */
.typing-indicator[b-yjmpx188bi] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: var(--bg-tertiary, rgba(255, 255, 255, 0.05));
    border-radius: 12px;
    width: fit-content;
}

.typing-dot[b-yjmpx188bi] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-tertiary, rgba(255, 255, 255, 0.4));
    animation: typing-bounce-b-yjmpx188bi 1.4s infinite ease-in-out both;
}

.typing-dot:nth-child(1)[b-yjmpx188bi] {
    animation-delay: 0s;
}

.typing-dot:nth-child(2)[b-yjmpx188bi] {
    animation-delay: 0.16s;
}

.typing-dot:nth-child(3)[b-yjmpx188bi] {
    animation-delay: 0.32s;
}

@keyframes typing-bounce-b-yjmpx188bi {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}
/* /Components/Shared/MultiSelectChips.razor.rz.scp.css */
.multi-select-chips[b-yogw1o51vl] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 6px 10px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    background: var(--bg-primary, white);
    transition: border-color 0.15s ease;
}

.multi-select-chips:hover:not(.disabled)[b-yogw1o51vl] {
    border-color: var(--primary-color, #3b82f6);
}

.multi-select-chips.disabled[b-yogw1o51vl] {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--bg-secondary, #f9fafb);
}

.multi-select-chips-container[b-yogw1o51vl] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.multi-select-placeholder[b-yogw1o51vl] {
    color: var(--text-muted, #9ca3af);
    font-size: 0.875rem;
}

/* Chips */
.multi-select-chip[b-yogw1o51vl] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--primary-color, #3b82f6);
    color: white;
    border-radius: 4px;
    font-size: 0.8125rem;
    font-weight: 500;
    animation: chipFadeIn-b-yogw1o51vl 0.15s ease;
}

@keyframes chipFadeIn-b-yogw1o51vl {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.multi-select-chip-remove[b-yogw1o51vl] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    cursor: pointer;
    transition: background 0.15s ease;
}

.multi-select-chip-remove:hover[b-yogw1o51vl] {
    background: rgba(255, 255, 255, 0.4);
}

/* Add Button */
.multi-select-add-wrapper[b-yogw1o51vl] {
    position: relative;
}

.multi-select-add-btn[b-yogw1o51vl] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px dashed var(--border-color, #d1d5db);
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary, #6b7280);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.multi-select-add-btn:hover[b-yogw1o51vl] {
    border-color: var(--primary-color, #3b82f6);
    color: var(--primary-color, #3b82f6);
    background: rgba(59, 130, 246, 0.05);
}

/* Dropdown */
.multi-select-dropdown[b-yogw1o51vl] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 220px;
    max-height: 280px;
    background: var(--bg-primary, white);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    z-index: 99999;
    animation: dropdownFadeIn-b-yogw1o51vl 0.15s ease;
}

@keyframes dropdownFadeIn-b-yogw1o51vl {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.multi-select-search[b-yogw1o51vl] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    background: var(--bg-secondary, #f9fafb);
}

.multi-select-search input[b-yogw1o51vl] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.875rem;
    outline: none;
}

.multi-select-search svg[b-yogw1o51vl] {
    color: var(--text-muted, #9ca3af);
}

.multi-select-options[b-yogw1o51vl] {
    max-height: 220px;
    overflow-y: auto;
}

.multi-select-option[b-yogw1o51vl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    font-size: 0.875rem;
    color: var(--text-primary, #111827);
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
}

.multi-select-option:hover[b-yogw1o51vl] {
    background: var(--primary-color, #3b82f6);
    color: white;
}

.multi-select-option svg[b-yogw1o51vl] {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.multi-select-option:hover svg[b-yogw1o51vl] {
    opacity: 1;
}

.multi-select-empty[b-yogw1o51vl] {
    padding: 16px 12px;
    text-align: center;
    color: var(--text-muted, #9ca3af);
    font-size: 0.875rem;
}

/* Clear All */
.multi-select-clear-all[b-yogw1o51vl] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted, #9ca3af);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.multi-select-clear-all:hover[b-yogw1o51vl] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color, #ef4444);
}

/* Backdrop */
.multi-select-backdrop[b-yogw1o51vl] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99998;
}
/* /Components/Shared/PackingModal.razor.rz.scp.css */
/* Packing Modal Container */
.packing-modal[b-und2u3ybqk] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-height: 70vh;
    overflow-y: auto;
}

/* Header Section */
.packing-header[b-und2u3ybqk] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--bg-muted);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.packing-header-image[b-und2u3ybqk] {
    flex-shrink: 0;
}

.packing-header-image img[b-und2u3ybqk] {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.packing-header-image .image-placeholder[b-und2u3ybqk] {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    color: var(--text-muted);
}

.packing-header-image .image-placeholder svg[b-und2u3ybqk] {
    width: 32px;
    height: 32px;
}

.packing-header-info[b-und2u3ybqk] {
    flex: 1;
    min-width: 0;
}

.packing-header-title[b-und2u3ybqk] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.packing-header-title .order-number[b-und2u3ybqk] {
    font-weight: 600;
    font-size: 16px;
    color: var(--text-primary);
}

.packing-header-customer[b-und2u3ybqk] {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.packing-header-meta[b-und2u3ybqk] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.packing-header-meta .meta-item[b-und2u3ybqk] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
}

.packing-header-meta .meta-item.store[b-und2u3ybqk] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.packing-header-meta .meta-item.city[b-und2u3ybqk] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.packing-header-meta .meta-item.cargo[b-und2u3ybqk] {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.packing-header-progress[b-und2u3ybqk] {
    flex-shrink: 0;
    text-align: center;
}

.progress-circle[b-und2u3ybqk] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bg-input);
    border: 3px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 4px;
    transition: all 0.3s ease;
}

.progress-circle.complete[b-und2u3ybqk] {
    background: rgba(16, 185, 129, 0.1);
    border-color: #10b981;
}

.progress-circle .progress-value[b-und2u3ybqk] {
    font-weight: 700;
    font-size: 13px;
    color: var(--text-primary);
}

.progress-circle.complete .progress-value[b-und2u3ybqk] {
    color: #10b981;
}

.progress-label[b-und2u3ybqk] {
    font-size: 11px;
    color: var(--text-muted);
}

/* Barcode Section */
.barcode-section[b-und2u3ybqk] {
    padding: 20px;
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-muted) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

/* Premium Barcode Input */
.barcode-input-container[b-und2u3ybqk] {
    display: flex;
    align-items: center;
    background: var(--bg-input);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 4px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.barcode-input-container[b-und2u3ybqk]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.03) 0%, rgba(139, 92, 246, 0.03) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 0;
}

.barcode-input-container:focus-within[b-und2u3ybqk] {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1), 0 4px 12px rgba(0, 0, 0, 0.05);
}

.barcode-input-container:focus-within[b-und2u3ybqk]::before {
    opacity: 1;
}

.barcode-input-container.camera-active[b-und2u3ybqk] {
    border-color: #ef4444;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1), 0 4px 12px rgba(239, 68, 68, 0.1);
}

.barcode-input-container.scanning[b-und2u3ybqk] {
    border-color: #f59e0b;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15);
    animation: scanPulse-b-und2u3ybqk 1.5s ease-in-out infinite;
}

@keyframes scanPulse-b-und2u3ybqk {
    0%, 100% { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15); }
    50% { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0.05), 0 0 20px rgba(245, 158, 11, 0.1); }
}

/* Sol ikon */
.barcode-input-icon[b-und2u3ybqk] {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border-radius: 8px;
    color: white;
    margin-right: 4px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.barcode-input-icon svg[b-und2u3ybqk] {
    width: 22px;
    height: 22px;
}

.barcode-input-container.camera-active .barcode-input-icon[b-und2u3ybqk] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.barcode-input-container.scanning .barcode-input-icon[b-und2u3ybqk] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    animation: iconPulse-b-und2u3ybqk 1s ease-in-out infinite;
}

@keyframes iconPulse-b-und2u3ybqk {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(0.95); }
}

/* Input alanı */
.barcode-input-field[b-und2u3ybqk] {
    flex: 1;
    min-width: 0;
    padding: 12px 16px;
    font-size: 17px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-weight: 500;
    letter-spacing: 0.5px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    outline: none;
    position: relative;
    z-index: 1;
}

.barcode-input-field[b-und2u3ybqk]::placeholder {
    color: var(--text-muted);
    font-weight: 400;
    letter-spacing: normal;
}

.barcode-input-field:disabled[b-und2u3ybqk] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Sağ aksiyonlar */
.barcode-input-actions[b-und2u3ybqk] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding-right: 4px;
    position: relative;
    z-index: 1;
}

/* Loading spinner */
.barcode-loading[b-und2u3ybqk] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.barcode-spinner[b-und2u3ybqk] {
    width: 24px;
    height: 24px;
    border: 3px solid var(--border);
    border-top-color: #f59e0b;
    border-radius: 50%;
    animation: spin-b-und2u3ybqk 0.8s linear infinite;
}

/* Kamera Toggle - Premium Minimal */
.camera-mode-toggle[b-und2u3ybqk] {
    display: block;
    cursor: pointer;
}

.camera-mode-toggle input[b-und2u3ybqk] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.camera-mode-toggle .toggle-track[b-und2u3ybqk] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--bg-muted);
    border: 2px solid transparent;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.camera-mode-toggle .toggle-thumb[b-und2u3ybqk] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: white;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.camera-mode-toggle .toggle-thumb svg[b-und2u3ybqk] {
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.camera-mode-toggle:hover .toggle-track[b-und2u3ybqk] {
    background: var(--bg-input);
    border-color: var(--border);
}

.camera-mode-toggle:hover .toggle-thumb svg[b-und2u3ybqk] {
    color: var(--text-primary);
}

/* Kamera modu aktif */
.camera-mode-toggle input:checked + .toggle-track[b-und2u3ybqk] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-color: #dc2626;
}

.camera-mode-toggle input:checked + .toggle-track .toggle-thumb[b-und2u3ybqk] {
    background: white;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}

.camera-mode-toggle input:checked + .toggle-track .toggle-thumb svg[b-und2u3ybqk] {
    color: #dc2626;
}

/* Camera Container */
.camera-container[b-und2u3ybqk] {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 16px auto 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #000;
    aspect-ratio: 4/3;
}

.camera-video[b-und2u3ybqk] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.camera-overlay[b-und2u3ybqk] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.scan-region[b-und2u3ybqk] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 35%;
    border: 2px solid rgba(139, 92, 246, 0.8);
    border-radius: 8px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
}

.scan-line[b-und2u3ybqk] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #8b5cf6, transparent);
    animation: scanMove-b-und2u3ybqk 2s ease-in-out infinite;
}

@keyframes scanMove-b-und2u3ybqk {
    0%, 100% { top: 0; }
    50% { top: calc(100% - 2px); }
}

/* Camera Loading */
.camera-loading[b-und2u3ybqk] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    color: white;
}

.camera-loading .spinner[b-und2u3ybqk] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-und2u3ybqk 0.8s linear infinite;
    margin-bottom: 12px;
}

.camera-loading p[b-und2u3ybqk] {
    margin: 0;
    font-size: 14px;
}

/* Camera Error */
.camera-error[b-und2u3ybqk] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 24px;
    text-align: center;
}

.camera-error svg[b-und2u3ybqk] {
    color: #ef4444;
    margin-bottom: 12px;
}

.camera-error p[b-und2u3ybqk] {
    margin: 0 0 16px;
    font-size: 14px;
}

.retry-btn[b-und2u3ybqk] {
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 500;
    color: white;
    background: var(--primary-color);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s;
}

.retry-btn:hover[b-und2u3ybqk] {
    background: var(--primary-hover);
}

/* Camera Controls */
.camera-controls[b-und2u3ybqk] {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
}

.camera-control-btn[b-und2u3ybqk] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
    backdrop-filter: blur(4px);
}

.camera-control-btn:hover:not(:disabled)[b-und2u3ybqk] {
    background: rgba(0, 0, 0, 0.8);
    border-color: rgba(255, 255, 255, 0.4);
}

.camera-control-btn.active[b-und2u3ybqk] {
    background: #8b5cf6;
    border-color: #8b5cf6;
}

.camera-control-btn:disabled[b-und2u3ybqk] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Barcode Hint */
.barcode-hint[b-und2u3ybqk] {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
}

/* Scan Message */
.scan-message[b-und2u3ybqk] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: var(--radius);
    font-size: 13px;
}

.scan-message.success[b-und2u3ybqk] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.scan-message.warning[b-und2u3ybqk] {
    background: rgba(251, 146, 60, 0.1);
    color: #f97316;
    border: 1px solid rgba(251, 146, 60, 0.3);
}

.scan-message.error[b-und2u3ybqk] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Items Section */
.items-section[b-und2u3ybqk] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.items-header[b-und2u3ybqk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-muted);
    border-bottom: 1px solid var(--border);
}

.items-header h4[b-und2u3ybqk] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.items-header h4 svg[b-und2u3ybqk] {
    color: var(--text-muted);
}

.items-header .items-count[b-und2u3ybqk] {
    font-weight: 400;
    color: var(--text-muted);
}

.items-header .items-hint[b-und2u3ybqk] {
    font-size: 12px;
    color: var(--text-muted);
}

.items-header .items-hint.barcode-required[b-und2u3ybqk] {
    color: #8b5cf6;
    font-weight: 500;
}

.items-list[b-und2u3ybqk] {
    max-height: 300px;
    overflow-y: auto;
}

/* Item Card */
.item-card[b-und2u3ybqk] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    transition: all 0.2s;
}

.item-card:last-child[b-und2u3ybqk] {
    border-bottom: none;
}

.item-card.clickable[b-und2u3ybqk] {
    cursor: pointer;
}

.item-card.clickable:hover[b-und2u3ybqk] {
    background: var(--bg-muted);
}

.item-card.scanned[b-und2u3ybqk] {
    opacity: 0.6;
    background: rgba(139, 92, 246, 0.05);
}

.item-card.active[b-und2u3ybqk] {
    background: rgba(139, 92, 246, 0.1);
    border-left: 3px solid #8b5cf6;
}

.item-image[b-und2u3ybqk] {
    position: relative;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
}

.item-image img[b-und2u3ybqk] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.image-placeholder-sm[b-und2u3ybqk] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-muted);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    color: var(--text-muted);
}

.image-placeholder-sm svg[b-und2u3ybqk] {
    width: 24px;
    height: 24px;
}

.scanned-overlay[b-und2u3ybqk] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(139, 92, 246, 0.9);
    border-radius: var(--radius);
    color: white;
}

.scanned-overlay svg[b-und2u3ybqk] {
    width: 24px;
    height: 24px;
}

.item-info[b-und2u3ybqk] {
    flex: 1;
    min-width: 0;
}

.item-name[b-und2u3ybqk] {
    display: block;
    font-weight: 500;
    font-size: 14px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-variant[b-und2u3ybqk] {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
}

.item-codes[b-und2u3ybqk] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.item-barcode[b-und2u3ybqk],
.item-sku[b-und2u3ybqk] {
    font-size: 11px;
    font-family: monospace;
    color: var(--text-muted);
    background: var(--bg-muted);
    padding: 2px 6px;
    border-radius: 4px;
}

.item-location[b-und2u3ybqk] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    font-size: 12px;
    color: var(--text-secondary);
    padding: 4px 8px;
    background: var(--bg-muted);
    border-radius: 4px;
}

.item-quantity[b-und2u3ybqk] {
    flex-shrink: 0;
    text-align: center;
    padding: 4px 12px;
    background: var(--bg-muted);
    border-radius: var(--radius);
}

.item-quantity .qty-value[b-und2u3ybqk] {
    font-weight: 700;
    font-size: 16px;
    color: var(--text-primary);
}

.item-quantity .qty-label[b-und2u3ybqk] {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.item-status[b-und2u3ybqk] {
    flex-shrink: 0;
}

.status-icon[b-und2u3ybqk] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.status-icon svg[b-und2u3ybqk] {
    width: 16px;
    height: 16px;
}

.status-icon.success[b-und2u3ybqk] {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.status-icon.pending[b-und2u3ybqk] {
    background: var(--bg-muted);
    color: var(--text-muted);
}

/* Status Badge */
.status-badge[b-und2u3ybqk] {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 4px;
}

.status-badge.pending[b-und2u3ybqk] {
    background: rgba(251, 146, 60, 0.1);
    color: #fb923c;
}

.status-badge.completed[b-und2u3ybqk] {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

/* Empty State */
.empty-scan-state[b-und2u3ybqk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}

.empty-icon[b-und2u3ybqk] {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-muted);
    border-radius: 50%;
    margin-bottom: 16px;
}

.empty-icon svg[b-und2u3ybqk] {
    width: 40px;
    height: 40px;
    color: var(--text-muted);
}

.empty-scan-state h4[b-und2u3ybqk] {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.empty-scan-state p[b-und2u3ybqk] {
    margin: 0;
    font-size: 14px;
    color: var(--text-muted);
}

/* Completed State */
.completed-state[b-und2u3ybqk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    background: rgba(139, 92, 246, 0.05);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: var(--radius-lg);
    text-align: center;
}

.completed-icon[b-und2u3ybqk] {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(139, 92, 246, 0.15);
    border-radius: 50%;
    margin-bottom: 16px;
}

.completed-icon svg[b-und2u3ybqk] {
    width: 32px;
    height: 32px;
    color: #8b5cf6;
}

.completed-state h4[b-und2u3ybqk] {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    color: #8b5cf6;
}

.completed-state p[b-und2u3ybqk] {
    margin: 0 0 16px;
    font-size: 14px;
    color: var(--text-secondary);
}

/* Modal Footer */
.modal-footer-content[b-und2u3ybqk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.footer-info[b-und2u3ybqk] {
    font-size: 14px;
    color: var(--text-secondary);
}

.footer-progress[b-und2u3ybqk] {
    font-weight: 500;
}

.footer-actions[b-und2u3ybqk] {
    display: flex;
    gap: 8px;
}

/* Animations */
@keyframes spin-b-und2u3ybqk {
    to {
        transform: rotate(360deg);
    }
}

/* Print Modal */
.print-modal-content[b-und2u3ybqk] {
    min-height: 400px;
    display: flex;
    flex-direction: column;
}

.print-loading[b-und2u3ybqk] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}

.print-loading .spinner[b-und2u3ybqk] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin-b-und2u3ybqk 0.8s linear infinite;
    margin-bottom: 12px;
}

.print-loading p[b-und2u3ybqk] {
    margin: 0;
    font-size: 14px;
    color: var(--text-muted);
}

.print-error[b-und2u3ybqk] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}

.print-error svg[b-und2u3ybqk] {
    color: #ef4444;
    margin-bottom: 16px;
}

.print-error p[b-und2u3ybqk] {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
}

/* Responsive */
@media (max-width: 640px) {
    .packing-header[b-und2u3ybqk] {
        flex-direction: column;
        text-align: center;
    }

    .packing-header-info[b-und2u3ybqk] {
        text-align: center;
    }

    .packing-header-meta[b-und2u3ybqk] {
        justify-content: center;
    }

    .item-card[b-und2u3ybqk] {
        flex-wrap: wrap;
    }

    .item-info[b-und2u3ybqk] {
        width: 100%;
    }
}
/* /Components/Shared/PickingModal.razor.rz.scp.css */
/* Picking Modal Container */
.picking-modal[b-f3vm7khek2] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-height: 70vh;
    overflow-y: auto;
}

/* Header Section */
.picking-header[b-f3vm7khek2] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--bg-muted);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.picking-header-image[b-f3vm7khek2] {
    flex-shrink: 0;
}

.picking-header-image img[b-f3vm7khek2] {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.picking-header-image .image-placeholder[b-f3vm7khek2] {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    color: var(--text-muted);
}

.picking-header-image .image-placeholder svg[b-f3vm7khek2] {
    width: 32px;
    height: 32px;
}

.picking-header-info[b-f3vm7khek2] {
    flex: 1;
    min-width: 0;
}

.picking-header-title[b-f3vm7khek2] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.picking-header-title .order-number[b-f3vm7khek2],
.picking-header-title .product-name[b-f3vm7khek2] {
    font-weight: 600;
    font-size: 16px;
    color: var(--text-primary);
}

.picking-header-customer[b-f3vm7khek2],
.picking-header-variant[b-f3vm7khek2] {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.picking-header-meta[b-f3vm7khek2] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.picking-header-meta .meta-item[b-f3vm7khek2] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
}

.picking-header-meta .meta-item.store[b-f3vm7khek2] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.picking-header-meta .meta-item.city[b-f3vm7khek2] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.picking-header-meta .meta-item.tracking[b-f3vm7khek2],
.picking-header-meta .meta-item.barcode[b-f3vm7khek2] {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.picking-header-meta .meta-item.sku[b-f3vm7khek2],
.picking-header-meta .meta-item.location[b-f3vm7khek2] {
    background: rgba(251, 146, 60, 0.1);
    color: #fb923c;
}

.picking-header-progress[b-f3vm7khek2] {
    flex-shrink: 0;
    text-align: center;
}

.progress-circle[b-f3vm7khek2] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bg-input);
    border: 3px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 4px;
    transition: all 0.3s ease;
}

.progress-circle.complete[b-f3vm7khek2] {
    background: rgba(16, 185, 129, 0.1);
    border-color: #10b981;
}

.progress-circle .progress-value[b-f3vm7khek2] {
    font-weight: 700;
    font-size: 13px;
    color: var(--text-primary);
}

.progress-circle.complete .progress-value[b-f3vm7khek2] {
    color: #10b981;
}

.progress-label[b-f3vm7khek2] {
    font-size: 11px;
    color: var(--text-muted);
}

/* Barcode Section */
.barcode-section[b-f3vm7khek2] {
    padding: 20px;
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-muted) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

/* ===== Premium Barcode Input ===== */
.barcode-input-container[b-f3vm7khek2] {
    display: flex;
    align-items: center;
    background: var(--bg-input);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 4px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.barcode-input-container[b-f3vm7khek2]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.03) 0%, rgba(139, 92, 246, 0.03) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 0;
}

.barcode-input-container:focus-within[b-f3vm7khek2] {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1), 0 4px 12px rgba(0, 0, 0, 0.05);
}

.barcode-input-container:focus-within[b-f3vm7khek2]::before {
    opacity: 1;
}

.barcode-input-container.camera-active[b-f3vm7khek2] {
    border-color: #ef4444;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1), 0 4px 12px rgba(239, 68, 68, 0.1);
}

.barcode-input-container.scanning[b-f3vm7khek2] {
    border-color: #f59e0b;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15);
    animation: scanPulse-b-f3vm7khek2 1.5s ease-in-out infinite;
}

@keyframes scanPulse-b-f3vm7khek2 {
    0%, 100% { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15); }
    50% { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0.05), 0 0 20px rgba(245, 158, 11, 0.1); }
}

/* Sol ikon */
.barcode-input-icon[b-f3vm7khek2] {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-color) 0%, #6366f1 100%);
    border-radius: 8px;
    color: white;
    margin-right: 4px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.barcode-input-icon svg[b-f3vm7khek2] {
    width: 22px;
    height: 22px;
}

.barcode-input-container.camera-active .barcode-input-icon[b-f3vm7khek2] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.barcode-input-container.scanning .barcode-input-icon[b-f3vm7khek2] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    animation: iconPulse-b-f3vm7khek2 1s ease-in-out infinite;
}

@keyframes iconPulse-b-f3vm7khek2 {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(0.95); }
}

/* Input alanı */
.barcode-input-field[b-f3vm7khek2] {
    flex: 1;
    min-width: 0;
    padding: 12px 16px;
    font-size: 17px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-weight: 500;
    letter-spacing: 0.5px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    outline: none;
    position: relative;
    z-index: 1;
}

.barcode-input-field[b-f3vm7khek2]::placeholder {
    color: var(--text-muted);
    font-weight: 400;
    letter-spacing: normal;
}

.barcode-input-field:disabled[b-f3vm7khek2] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Sağ aksiyonlar */
.barcode-input-actions[b-f3vm7khek2] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding-right: 4px;
    position: relative;
    z-index: 1;
}

/* Loading spinner */
.barcode-loading[b-f3vm7khek2] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.barcode-spinner[b-f3vm7khek2] {
    width: 24px;
    height: 24px;
    border: 3px solid var(--border);
    border-top-color: #f59e0b;
    border-radius: 50%;
    animation: spin-b-f3vm7khek2 0.8s linear infinite;
}

/* Kamera Toggle - Premium Minimal */
.camera-mode-toggle[b-f3vm7khek2] {
    display: block;
    cursor: pointer;
}

.camera-mode-toggle input[b-f3vm7khek2] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.camera-mode-toggle .toggle-track[b-f3vm7khek2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--bg-muted);
    border: 2px solid transparent;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.camera-mode-toggle .toggle-thumb[b-f3vm7khek2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: white;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.camera-mode-toggle .toggle-thumb svg[b-f3vm7khek2] {
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.camera-mode-toggle:hover .toggle-track[b-f3vm7khek2] {
    background: var(--bg-input);
    border-color: var(--border);
}

.camera-mode-toggle:hover .toggle-thumb svg[b-f3vm7khek2] {
    color: var(--text-primary);
}

/* Kamera modu aktif */
.camera-mode-toggle input:checked + .toggle-track[b-f3vm7khek2] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-color: #dc2626;
}

.camera-mode-toggle input:checked + .toggle-track .toggle-thumb[b-f3vm7khek2] {
    background: white;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}

.camera-mode-toggle input:checked + .toggle-track .toggle-thumb svg[b-f3vm7khek2] {
    color: #dc2626;
}

/* Camera Container */
.camera-container[b-f3vm7khek2] {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 16px auto 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #000;
    aspect-ratio: 4/3;
}

.camera-video[b-f3vm7khek2] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.camera-overlay[b-f3vm7khek2] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.scan-region[b-f3vm7khek2] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 35%;
    border: 2px solid rgba(239, 68, 68, 0.8);
    border-radius: 8px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
}

.scan-line[b-f3vm7khek2] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ef4444, transparent);
    animation: scanMove-b-f3vm7khek2 2s ease-in-out infinite;
}

@keyframes scanMove-b-f3vm7khek2 {
    0%, 100% {
        top: 0;
    }
    50% {
        top: calc(100% - 2px);
    }
}

/* Camera Loading */
.camera-loading[b-f3vm7khek2] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    color: white;
}

.camera-loading .spinner[b-f3vm7khek2] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-f3vm7khek2 0.8s linear infinite;
    margin-bottom: 12px;
}

.camera-loading p[b-f3vm7khek2] {
    margin: 0;
    font-size: 14px;
}

/* Camera Error */
.camera-error[b-f3vm7khek2] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 24px;
    text-align: center;
}

.camera-error svg[b-f3vm7khek2] {
    color: #ef4444;
    margin-bottom: 12px;
}

.camera-error p[b-f3vm7khek2] {
    margin: 0 0 16px;
    font-size: 14px;
}

.retry-btn[b-f3vm7khek2] {
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 500;
    color: white;
    background: var(--primary-color);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s;
}

.retry-btn:hover[b-f3vm7khek2] {
    background: var(--primary-hover);
}

/* Camera Controls */
.camera-controls[b-f3vm7khek2] {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
}

.camera-control-btn[b-f3vm7khek2] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
    backdrop-filter: blur(4px);
}

.camera-control-btn:hover:not(:disabled)[b-f3vm7khek2] {
    background: rgba(0, 0, 0, 0.8);
    border-color: rgba(255, 255, 255, 0.4);
}

.camera-control-btn.active[b-f3vm7khek2] {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.camera-control-btn:disabled[b-f3vm7khek2] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Camera Hint */
.camera-hint[b-f3vm7khek2] {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.barcode-hint[b-f3vm7khek2] {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
}

/* Scan Message */
.scan-message[b-f3vm7khek2] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: var(--radius);
    font-size: 13px;
}

.scan-message.success[b-f3vm7khek2] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.scan-message.warning[b-f3vm7khek2] {
    background: rgba(251, 146, 60, 0.1);
    color: #f97316;
    border: 1px solid rgba(251, 146, 60, 0.3);
}

.scan-message.error[b-f3vm7khek2] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Items Section */
.items-section[b-f3vm7khek2] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.items-header[b-f3vm7khek2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-muted);
    border-bottom: 1px solid var(--border);
}

.items-header h4[b-f3vm7khek2] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.items-header h4 svg[b-f3vm7khek2] {
    color: var(--text-muted);
}

.items-header .items-count[b-f3vm7khek2] {
    font-weight: 400;
    color: var(--text-muted);
}

.items-header .items-hint[b-f3vm7khek2] {
    font-size: 12px;
    color: var(--text-muted);
}

.items-header .items-hint.barcode-required[b-f3vm7khek2] {
    color: #ef4444;
    font-weight: 500;
}

.items-list[b-f3vm7khek2] {
    max-height: 300px;
    overflow-y: auto;
}

/* Item Card */
.item-card[b-f3vm7khek2] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    transition: all 0.2s;
}

.item-card:last-child[b-f3vm7khek2] {
    border-bottom: none;
}

.item-card.clickable[b-f3vm7khek2] {
    cursor: pointer;
}

.item-card.clickable:hover[b-f3vm7khek2] {
    background: var(--bg-muted);
}

.item-card.picked[b-f3vm7khek2] {
    opacity: 0.6;
    background: rgba(16, 185, 129, 0.05);
}

.item-card.active[b-f3vm7khek2] {
    background: rgba(59, 130, 246, 0.1);
    border-left: 3px solid var(--primary-color);
}

.item-image[b-f3vm7khek2] {
    position: relative;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
}

.item-image img[b-f3vm7khek2] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.image-placeholder-sm[b-f3vm7khek2] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-muted);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    color: var(--text-muted);
}

.image-placeholder-sm svg[b-f3vm7khek2] {
    width: 24px;
    height: 24px;
}

.picked-overlay[b-f3vm7khek2] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 185, 129, 0.9);
    border-radius: var(--radius);
    color: white;
}

.picked-overlay svg[b-f3vm7khek2] {
    width: 24px;
    height: 24px;
}

.item-info[b-f3vm7khek2] {
    flex: 1;
    min-width: 0;
}

.item-name[b-f3vm7khek2] {
    display: block;
    font-weight: 500;
    font-size: 14px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-variant[b-f3vm7khek2] {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
}

.item-codes[b-f3vm7khek2] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.item-barcode[b-f3vm7khek2],
.item-sku[b-f3vm7khek2] {
    font-size: 11px;
    font-family: monospace;
    color: var(--text-muted);
    background: var(--bg-muted);
    padding: 2px 6px;
    border-radius: 4px;
}

.item-location[b-f3vm7khek2] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    font-size: 12px;
    color: var(--text-secondary);
    padding: 4px 8px;
    background: var(--bg-muted);
    border-radius: 4px;
}

.item-quantity[b-f3vm7khek2] {
    flex-shrink: 0;
    text-align: center;
    padding: 4px 12px;
    background: var(--bg-muted);
    border-radius: var(--radius);
}

.item-quantity .qty-picked[b-f3vm7khek2] {
    font-weight: 700;
    font-size: 16px;
    color: var(--text-primary);
}

.item-quantity .qty-sep[b-f3vm7khek2] {
    color: var(--text-muted);
    margin: 0 2px;
}

.item-quantity .qty-total[b-f3vm7khek2] {
    font-size: 14px;
    color: var(--text-muted);
}

.item-quantity.complete[b-f3vm7khek2] {
    background: rgba(16, 185, 129, 0.1);
}

.item-quantity.complete .qty-picked[b-f3vm7khek2] {
    color: #10b981;
}

.item-status[b-f3vm7khek2] {
    flex-shrink: 0;
}

.status-icon[b-f3vm7khek2] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.status-icon svg[b-f3vm7khek2] {
    width: 16px;
    height: 16px;
}

.status-icon.success[b-f3vm7khek2] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.status-icon.pending[b-f3vm7khek2] {
    background: var(--bg-muted);
    color: var(--text-muted);
}

/* Order Card (Product-based) */
.order-card[b-f3vm7khek2] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    transition: all 0.2s;
}

.order-card:last-child[b-f3vm7khek2] {
    border-bottom: none;
}

.order-card.clickable[b-f3vm7khek2] {
    cursor: pointer;
}

.order-card.clickable:hover[b-f3vm7khek2] {
    background: var(--bg-muted);
}

.order-card.picked[b-f3vm7khek2] {
    opacity: 0.6;
    background: rgba(16, 185, 129, 0.05);
}

.order-card.active[b-f3vm7khek2] {
    background: rgba(59, 130, 246, 0.1);
    border-left: 3px solid var(--primary-color);
}

.order-main[b-f3vm7khek2] {
    flex: 1;
    min-width: 0;
}

.order-number-row[b-f3vm7khek2] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.order-number[b-f3vm7khek2] {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.delivery-badge[b-f3vm7khek2] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
}

.delivery-badge.normal[b-f3vm7khek2] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.delivery-badge.warning[b-f3vm7khek2] {
    background: rgba(251, 146, 60, 0.1);
    color: #fb923c;
}

.delivery-badge.urgent[b-f3vm7khek2] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.delivery-badge.overdue[b-f3vm7khek2] {
    background: rgba(239, 68, 68, 0.2);
    color: #dc2626;
    font-weight: 600;
}

.order-customer[b-f3vm7khek2] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.order-customer svg[b-f3vm7khek2] {
    color: var(--text-muted);
}

.order-store[b-f3vm7khek2] {
    display: flex;
    gap: 8px;
}

.store-badge[b-f3vm7khek2] {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.order-quantity[b-f3vm7khek2] {
    flex-shrink: 0;
    text-align: center;
    padding: 4px 12px;
    background: var(--bg-muted);
    border-radius: var(--radius);
}

.order-quantity .qty-picked[b-f3vm7khek2] {
    font-weight: 700;
    font-size: 16px;
    color: var(--text-primary);
}

.order-quantity .qty-sep[b-f3vm7khek2] {
    color: var(--text-muted);
    margin: 0 2px;
}

.order-quantity .qty-total[b-f3vm7khek2] {
    font-size: 14px;
    color: var(--text-muted);
}

.order-quantity.complete[b-f3vm7khek2] {
    background: rgba(16, 185, 129, 0.1);
}

.order-quantity.complete .qty-picked[b-f3vm7khek2] {
    color: #10b981;
}

.order-status[b-f3vm7khek2] {
    flex-shrink: 0;
}

/* Status Badge */
.status-badge[b-f3vm7khek2] {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 4px;
}

.status-badge.pending[b-f3vm7khek2] {
    background: rgba(251, 146, 60, 0.1);
    color: #fb923c;
}

.status-badge.partial[b-f3vm7khek2] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.status-badge.completed[b-f3vm7khek2] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

/* Empty State */
.empty-scan-state[b-f3vm7khek2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}

.empty-icon[b-f3vm7khek2] {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-muted);
    border-radius: 50%;
    margin-bottom: 16px;
}

.empty-icon svg[b-f3vm7khek2] {
    width: 40px;
    height: 40px;
    color: var(--text-muted);
}

.empty-scan-state h4[b-f3vm7khek2] {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.empty-scan-state p[b-f3vm7khek2] {
    margin: 0;
    font-size: 14px;
    color: var(--text-muted);
}

/* Completed State */
.completed-state[b-f3vm7khek2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    background: rgba(16, 185, 129, 0.05);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: var(--radius-lg);
    text-align: center;
}

.completed-icon[b-f3vm7khek2] {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 185, 129, 0.15);
    border-radius: 50%;
    margin-bottom: 16px;
}

.completed-icon svg[b-f3vm7khek2] {
    width: 32px;
    height: 32px;
    color: #10b981;
}

.completed-state h4[b-f3vm7khek2] {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    color: #10b981;
}

.completed-state p[b-f3vm7khek2] {
    margin: 0 0 16px;
    font-size: 14px;
    color: var(--text-secondary);
}

/* Modal Footer */
.modal-footer-content[b-f3vm7khek2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.footer-info[b-f3vm7khek2] {
    font-size: 14px;
    color: var(--text-secondary);
}

.footer-progress[b-f3vm7khek2] {
    font-weight: 500;
}

.footer-actions[b-f3vm7khek2] {
    display: flex;
    gap: 8px;
}

/* Animations */
@keyframes spin-b-f3vm7khek2 {
    to {
        transform: rotate(360deg);
    }
}

/* ═══════════════════ RESPONSIVE ═══════════════════ */

/* Tablet */
@media (max-width: 1024px) {
    .picking-modal[b-f3vm7khek2] {
        max-height: 75vh;
        gap: 16px;
    }

    .picking-header[b-f3vm7khek2] {
        padding: 14px;
        gap: 14px;
    }

    .picking-header-image img[b-f3vm7khek2],
    .picking-header-image .image-placeholder[b-f3vm7khek2] {
        width: 56px;
        height: 56px;
    }

    .picking-header-title .order-number[b-f3vm7khek2],
    .picking-header-title .product-name[b-f3vm7khek2] {
        font-size: 15px;
    }

    .progress-circle[b-f3vm7khek2] {
        width: 50px;
        height: 50px;
    }

    .progress-circle .progress-value[b-f3vm7khek2] {
        font-size: 12px;
    }

    .barcode-section[b-f3vm7khek2] {
        padding: 16px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .picking-modal[b-f3vm7khek2] {
        max-height: none;
        gap: 14px;
    }

    /* Header - compact */
    .picking-header[b-f3vm7khek2] {
        padding: 12px;
        gap: 12px;
        border-radius: var(--radius);
    }

    .picking-header-image img[b-f3vm7khek2],
    .picking-header-image .image-placeholder[b-f3vm7khek2] {
        width: 48px;
        height: 48px;
        border-radius: 10px;
    }

    .picking-header-image .image-placeholder svg[b-f3vm7khek2] {
        width: 24px;
        height: 24px;
    }

    .picking-header-title[b-f3vm7khek2] {
        flex-wrap: wrap;
        gap: 6px;
    }

    .picking-header-title .order-number[b-f3vm7khek2],
    .picking-header-title .product-name[b-f3vm7khek2] {
        font-size: 14px;
    }

    .picking-header-title .status-badge[b-f3vm7khek2] {
        font-size: 10px;
        padding: 2px 6px;
    }

    .picking-header-customer[b-f3vm7khek2],
    .picking-header-variant[b-f3vm7khek2] {
        font-size: 13px;
    }

    .picking-header-meta[b-f3vm7khek2] {
        gap: 6px;
    }

    .picking-header-meta .meta-item[b-f3vm7khek2] {
        font-size: 11px;
        padding: 2px 6px;
    }

    .picking-header-meta .meta-item.tracking[b-f3vm7khek2] {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .picking-header-progress[b-f3vm7khek2] {
        position: absolute;
        top: 12px;
        right: 12px;
    }

    .picking-header[b-f3vm7khek2] {
        position: relative;
    }

    .progress-circle[b-f3vm7khek2] {
        width: 44px;
        height: 44px;
        border-width: 2px;
    }

    .progress-circle .progress-value[b-f3vm7khek2] {
        font-size: 11px;
    }

    .progress-label[b-f3vm7khek2] {
        font-size: 10px;
    }

    /* Barcode section */
    .barcode-section[b-f3vm7khek2] {
        padding: 14px;
        border-radius: var(--radius);
    }

    .barcode-input-icon[b-f3vm7khek2] {
        width: 40px;
        height: 40px;
        border-radius: 8px;
    }

    .barcode-input-icon svg[b-f3vm7khek2] {
        width: 20px;
        height: 20px;
    }

    .barcode-input-field[b-f3vm7khek2] {
        padding: 10px 12px;
        font-size: 16px; /* Prevent iOS zoom */
    }

    .barcode-hint[b-f3vm7khek2] {
        font-size: 12px;
    }

    /* Camera */
    .camera-container[b-f3vm7khek2] {
        border-radius: var(--radius);
    }

    .quagga-video-container[b-f3vm7khek2] {
        border-radius: var(--radius);
    }

    .scan-region[b-f3vm7khek2] {
        width: 85%;
        height: 30%;
    }

    .camera-controls[b-f3vm7khek2] {
        bottom: 8px;
        gap: 8px;
    }

    .camera-control-btn[b-f3vm7khek2] {
        width: 40px;
        height: 40px;
    }

    /* Camera toggle */
    .camera-mode-toggle .toggle-track[b-f3vm7khek2] {
        width: 52px;
        height: 28px;
    }

    /* Scan message */
    .scan-message[b-f3vm7khek2] {
        font-size: 13px;
        padding: 10px 12px;
    }

    /* Items section */
    .items-section[b-f3vm7khek2] {
        gap: 12px;
    }

    .items-header h4[b-f3vm7khek2] {
        font-size: 14px;
    }

    .items-hint[b-f3vm7khek2] {
        font-size: 11px;
    }

    /* Item cards */
    .item-card[b-f3vm7khek2] {
        padding: 10px;
        gap: 10px;
    }

    .item-card .item-image[b-f3vm7khek2] {
        width: 44px;
        height: 44px;
    }

    .item-card .item-image img[b-f3vm7khek2],
    .item-card .image-placeholder-sm[b-f3vm7khek2] {
        width: 44px;
        height: 44px;
    }

    .item-name[b-f3vm7khek2] {
        font-size: 13px;
    }

    .item-variant[b-f3vm7khek2] {
        font-size: 11px;
    }

    .item-codes[b-f3vm7khek2] {
        display: none;
    }

    .item-location[b-f3vm7khek2] {
        display: none;
    }

    .item-quantity[b-f3vm7khek2] {
        padding: 4px 8px;
        min-width: 45px;
    }

    .item-quantity .qty-picked[b-f3vm7khek2] {
        font-size: 14px;
    }

    .item-quantity .qty-sep[b-f3vm7khek2],
    .item-quantity .qty-total[b-f3vm7khek2] {
        font-size: 12px;
    }

    .item-status[b-f3vm7khek2] {
        display: none;
    }

    /* Order cards (product-based) */
    .order-card[b-f3vm7khek2] {
        padding: 10px;
        gap: 10px;
    }

    .order-number-row[b-f3vm7khek2] {
        flex-wrap: wrap;
        gap: 4px;
    }

    .order-number-row .order-number[b-f3vm7khek2] {
        font-size: 13px;
    }

    .order-number-row .status-badge[b-f3vm7khek2] {
        font-size: 10px;
        padding: 2px 6px;
    }

    .delivery-badge[b-f3vm7khek2] {
        font-size: 10px;
        padding: 2px 6px;
    }

    .order-customer[b-f3vm7khek2] {
        font-size: 12px;
    }

    .store-badge[b-f3vm7khek2] {
        font-size: 10px;
    }

    .order-quantity[b-f3vm7khek2] {
        padding: 4px 8px;
        min-width: 45px;
    }

    .order-quantity .qty-picked[b-f3vm7khek2] {
        font-size: 14px;
    }

    .order-status[b-f3vm7khek2] {
        display: none;
    }

    /* Empty/completed states */
    .empty-scan-state[b-f3vm7khek2],
    .completed-state[b-f3vm7khek2] {
        padding: 32px 16px;
    }

    .empty-scan-state .empty-icon svg[b-f3vm7khek2] {
        width: 48px;
        height: 48px;
    }

    .empty-scan-state h4[b-f3vm7khek2],
    .completed-state h4[b-f3vm7khek2] {
        font-size: 16px;
    }

    .empty-scan-state p[b-f3vm7khek2],
    .completed-state p[b-f3vm7khek2] {
        font-size: 13px;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .picking-header[b-f3vm7khek2] {
        padding: 10px;
        gap: 10px;
    }

    .picking-header-image img[b-f3vm7khek2],
    .picking-header-image .image-placeholder[b-f3vm7khek2] {
        width: 40px;
        height: 40px;
    }

    .picking-header-title .order-number[b-f3vm7khek2],
    .picking-header-title .product-name[b-f3vm7khek2] {
        font-size: 13px;
    }

    .picking-header-customer[b-f3vm7khek2],
    .picking-header-variant[b-f3vm7khek2] {
        font-size: 12px;
    }

    .picking-header-progress[b-f3vm7khek2] {
        top: 10px;
        right: 10px;
    }

    .progress-circle[b-f3vm7khek2] {
        width: 40px;
        height: 40px;
    }

    .progress-circle .progress-value[b-f3vm7khek2] {
        font-size: 10px;
    }

    /* Barcode input */
    .barcode-section[b-f3vm7khek2] {
        padding: 10px;
    }

    .barcode-input-icon[b-f3vm7khek2] {
        width: 36px;
        height: 36px;
    }

    .barcode-input-field[b-f3vm7khek2] {
        padding: 8px 10px;
    }

    /* Item cards tighter */
    .item-card .item-image[b-f3vm7khek2],
    .item-card .item-image img[b-f3vm7khek2],
    .item-card .image-placeholder-sm[b-f3vm7khek2] {
        width: 38px;
        height: 38px;
    }

    .item-name[b-f3vm7khek2] {
        font-size: 12px;
    }

    .order-number-row .order-number[b-f3vm7khek2] {
        font-size: 12px;
    }

    .order-customer[b-f3vm7khek2] {
        font-size: 11px;
    }
}
/* /Components/Shared/ProductListingSortCriteriaList.razor.rz.scp.css */
.sortable-criteria-list[b-mqrjitjheg] {
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    background: var(--bg-secondary, #f9fafb);
    padding: 12px;
}

.sortable-criteria-header[b-mqrjitjheg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.sortable-criteria-add-wrapper[b-mqrjitjheg] {
    position: relative;
}

.sortable-criteria-title[b-mqrjitjheg] {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--text-primary, #111827);
}

.sortable-criteria-add-btn[b-mqrjitjheg] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px dashed var(--primary-color, #3b82f6);
    border-radius: 6px;
    background: transparent;
    color: var(--primary-color, #3b82f6);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.sortable-criteria-add-btn:hover[b-mqrjitjheg] {
    background: var(--primary-color, #3b82f6);
    color: white;
}

.sortable-criteria-empty[b-mqrjitjheg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    color: var(--text-muted, #9ca3af);
    font-size: 0.875rem;
}

.sortable-criteria-items[b-mqrjitjheg] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sortable-criteria-item[b-mqrjitjheg] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-primary, white);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    cursor: grab;
    transition: all 0.15s ease;
}

.sortable-criteria-item:hover[b-mqrjitjheg] {
    border-color: var(--primary-color, #3b82f6);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.sortable-criteria-item.dragging[b-mqrjitjheg] {
    opacity: 0.5;
    cursor: grabbing;
}

.sortable-criteria-item.drag-over[b-mqrjitjheg] {
    border-color: var(--primary-color, #3b82f6);
    border-style: dashed;
    background: rgba(59, 130, 246, 0.05);
}

.sortable-criteria-drag-handle[b-mqrjitjheg] {
    display: flex;
    align-items: center;
    color: var(--text-muted, #9ca3af);
    cursor: grab;
}

.sortable-criteria-drag-handle:active[b-mqrjitjheg] {
    cursor: grabbing;
}

.sortable-criteria-index[b-mqrjitjheg] {
    min-width: 24px;
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text-secondary, #6b7280);
}

.sortable-criteria-field-name[b-mqrjitjheg] {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary, #111827);
}

.sortable-criteria-direction-btn[b-mqrjitjheg] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 4px;
    background: var(--bg-secondary, #f9fafb);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    transition: all 0.15s ease;
}

.sortable-criteria-direction-btn:hover[b-mqrjitjheg] {
    border-color: var(--primary-color, #3b82f6);
    color: var(--primary-color, #3b82f6);
}

.sortable-criteria-direction-btn.asc[b-mqrjitjheg] {
    color: var(--success-color, #10b981);
    border-color: rgba(16, 185, 129, 0.3);
    background: rgba(16, 185, 129, 0.05);
}

.sortable-criteria-direction-btn.desc[b-mqrjitjheg] {
    color: var(--warning-color, #f59e0b);
    border-color: rgba(245, 158, 11, 0.3);
    background: rgba(245, 158, 11, 0.05);
}

.sortable-criteria-remove-btn[b-mqrjitjheg] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted, #9ca3af);
    cursor: pointer;
    transition: all 0.15s ease;
}

.sortable-criteria-remove-btn:hover[b-mqrjitjheg] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color, #ef4444);
}

/* Dropdown */
.sortable-criteria-dropdown-backdrop[b-mqrjitjheg] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 998;
}

.sortable-criteria-dropdown[b-mqrjitjheg] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 220px;
    background: var(--bg-primary, white);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    z-index: 999;
    animation: dropdownFadeIn-b-mqrjitjheg 0.15s ease;
}

@keyframes dropdownFadeIn-b-mqrjitjheg {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sortable-criteria-dropdown-header[b-mqrjitjheg] {
    padding: 10px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #9ca3af);
    background: var(--bg-secondary, #f9fafb);
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.sortable-criteria-dropdown-item[b-mqrjitjheg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    font-size: 0.875rem;
    color: var(--text-primary, #111827);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.sortable-criteria-dropdown-item:hover[b-mqrjitjheg] {
    background: var(--primary-color, #3b82f6);
    color: white;
}

.sortable-criteria-dropdown-item svg[b-mqrjitjheg] {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.sortable-criteria-dropdown-item:hover svg[b-mqrjitjheg] {
    opacity: 1;
}
/* /Components/Shared/ProductSortCriteriaList.razor.rz.scp.css */
.sortable-criteria-list[b-pn8unr9dnk] {
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    background: var(--bg-secondary, #f9fafb);
    padding: 12px;
}

.sortable-criteria-header[b-pn8unr9dnk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.sortable-criteria-add-wrapper[b-pn8unr9dnk] {
    position: relative;
}

.sortable-criteria-title[b-pn8unr9dnk] {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--text-primary, #111827);
}

.sortable-criteria-add-btn[b-pn8unr9dnk] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px dashed var(--primary-color, #3b82f6);
    border-radius: 6px;
    background: transparent;
    color: var(--primary-color, #3b82f6);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.sortable-criteria-add-btn:hover[b-pn8unr9dnk] {
    background: var(--primary-color, #3b82f6);
    color: white;
}

.sortable-criteria-empty[b-pn8unr9dnk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    color: var(--text-muted, #9ca3af);
    font-size: 0.875rem;
}

.sortable-criteria-items[b-pn8unr9dnk] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sortable-criteria-item[b-pn8unr9dnk] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-primary, white);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    cursor: grab;
    transition: all 0.15s ease;
}

.sortable-criteria-item:hover[b-pn8unr9dnk] {
    border-color: var(--primary-color, #3b82f6);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.sortable-criteria-item.dragging[b-pn8unr9dnk] {
    opacity: 0.5;
    cursor: grabbing;
}

.sortable-criteria-item.drag-over[b-pn8unr9dnk] {
    border-color: var(--primary-color, #3b82f6);
    border-style: dashed;
    background: rgba(59, 130, 246, 0.05);
}

.sortable-criteria-drag-handle[b-pn8unr9dnk] {
    display: flex;
    align-items: center;
    color: var(--text-muted, #9ca3af);
    cursor: grab;
}

.sortable-criteria-drag-handle:active[b-pn8unr9dnk] {
    cursor: grabbing;
}

.sortable-criteria-index[b-pn8unr9dnk] {
    min-width: 24px;
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text-secondary, #6b7280);
}

.sortable-criteria-field-name[b-pn8unr9dnk] {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary, #111827);
}

.sortable-criteria-direction-btn[b-pn8unr9dnk] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 4px;
    background: var(--bg-secondary, #f9fafb);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    transition: all 0.15s ease;
}

.sortable-criteria-direction-btn:hover[b-pn8unr9dnk] {
    border-color: var(--primary-color, #3b82f6);
    color: var(--primary-color, #3b82f6);
}

.sortable-criteria-direction-btn.asc[b-pn8unr9dnk] {
    color: var(--success-color, #10b981);
    border-color: rgba(16, 185, 129, 0.3);
    background: rgba(16, 185, 129, 0.05);
}

.sortable-criteria-direction-btn.desc[b-pn8unr9dnk] {
    color: var(--warning-color, #f59e0b);
    border-color: rgba(245, 158, 11, 0.3);
    background: rgba(245, 158, 11, 0.05);
}

.sortable-criteria-remove-btn[b-pn8unr9dnk] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted, #9ca3af);
    cursor: pointer;
    transition: all 0.15s ease;
}

.sortable-criteria-remove-btn:hover[b-pn8unr9dnk] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color, #ef4444);
}

/* Dropdown */
.sortable-criteria-dropdown-backdrop[b-pn8unr9dnk] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 998;
}

.sortable-criteria-dropdown[b-pn8unr9dnk] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 220px;
    background: var(--bg-primary, white);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    z-index: 999;
    animation: dropdownFadeIn-b-pn8unr9dnk 0.15s ease;
}

@keyframes dropdownFadeIn-b-pn8unr9dnk {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sortable-criteria-dropdown-header[b-pn8unr9dnk] {
    padding: 10px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #9ca3af);
    background: var(--bg-secondary, #f9fafb);
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.sortable-criteria-dropdown-item[b-pn8unr9dnk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    font-size: 0.875rem;
    color: var(--text-primary, #111827);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.sortable-criteria-dropdown-item:hover[b-pn8unr9dnk] {
    background: var(--primary-color, #3b82f6);
    color: white;
}

.sortable-criteria-dropdown-item svg[b-pn8unr9dnk] {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.sortable-criteria-dropdown-item:hover svg[b-pn8unr9dnk] {
    opacity: 1;
}
/* /Components/Shared/ReportViewer.razor.rz.scp.css */
.report-viewer[b-tb9731ful1] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.report-viewer.fullscreen[b-tb9731ful1] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    border-radius: 0;
}

/* Toolbar */
.rv-toolbar[b-tb9731ful1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    gap: 16px;
    flex-shrink: 0;
}

.rv-toolbar-left[b-tb9731ful1],
.rv-toolbar-center[b-tb9731ful1],
.rv-toolbar-right[b-tb9731ful1] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rv-toolbar-left[b-tb9731ful1] {
    flex: 1;
}

.rv-toolbar-right[b-tb9731ful1] {
    flex: 1;
    justify-content: flex-end;
}

.rv-title[b-tb9731ful1] {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    margin-right: 16px;
}

/* Buttons */
.rv-btn[b-tb9731ful1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
}

.rv-btn:hover:not(:disabled)[b-tb9731ful1] {
    background: var(--bg-input);
    color: var(--text-primary);
}

.rv-btn:disabled[b-tb9731ful1] {
    opacity: 0.4;
    cursor: not-allowed;
}

.rv-btn svg[b-tb9731ful1] {
    flex-shrink: 0;
}

.rv-btn-text[b-tb9731ful1] {
    font-size: 13px;
    font-weight: 500;
}

.rv-btn-close:hover[b-tb9731ful1] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Pagination */
.rv-pagination[b-tb9731ful1] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: var(--bg-input);
    border-radius: var(--radius);
}

.rv-page-info[b-tb9731ful1] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.rv-page-input[b-tb9731ful1] {
    width: 48px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 13px;
    text-align: center;
    -moz-appearance: textfield;
}

.rv-page-input[b-tb9731ful1]::-webkit-outer-spin-button,
.rv-page-input[b-tb9731ful1]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.rv-page-input:focus[b-tb9731ful1] {
    outline: none;
    border-color: var(--primary);
}

/* Zoom */
.rv-zoom[b-tb9731ful1] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: var(--bg-input);
    border-radius: var(--radius);
}

.rv-zoom-select[b-tb9731ful1] {
    padding: 6px 8px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    min-width: 70px;
    text-align: center;
}

.rv-zoom-select:focus[b-tb9731ful1] {
    outline: none;
}

/* Content */
.rv-content[b-tb9731ful1] {
    flex: 1;
    overflow: auto;
    background: #525659;
    display: flex;
    justify-content: center;
    padding: 20px;
}

.rv-iframe-container[b-tb9731ful1] {
    display: flex;
    justify-content: center;
    transition: transform 0.2s ease;
}

.rv-iframe[b-tb9731ful1] {
    width: 100%;
    max-width: 900px;
    height: calc(100vh - 200px);
    border: none;
    background: white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.report-viewer.fullscreen .rv-iframe[b-tb9731ful1] {
    height: calc(100vh - 80px);
}

/* Loading */
.rv-loading[b-tb9731ful1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: #fff;
}

.rv-spinner[b-tb9731ful1] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: rv-spin-b-tb9731ful1 0.8s linear infinite;
}

@keyframes rv-spin-b-tb9731ful1 {
    to { transform: rotate(360deg); }
}

/* Error */
.rv-error[b-tb9731ful1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: #fff;
    text-align: center;
    padding: 40px;
}

.rv-error svg[b-tb9731ful1] {
    color: #f59e0b;
}

.rv-error p[b-tb9731ful1] {
    font-size: 14px;
    max-width: 400px;
}

.rv-retry-btn[b-tb9731ful1] {
    padding: 10px 20px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
}

.rv-retry-btn:hover[b-tb9731ful1] {
    background: var(--primary-hover);
}

/* Empty */
.rv-empty[b-tb9731ful1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
}

.rv-empty p[b-tb9731ful1] {
    font-size: 14px;
}

/* Responsive */
@media (max-width: 768px) {
    .rv-toolbar[b-tb9731ful1] {
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px;
    }

    .rv-toolbar-left[b-tb9731ful1],
    .rv-toolbar-center[b-tb9731ful1],
    .rv-toolbar-right[b-tb9731ful1] {
        flex: none;
    }

    .rv-btn-text[b-tb9731ful1] {
        display: none;
    }

    .rv-title[b-tb9731ful1] {
        display: none;
    }

    .rv-content[b-tb9731ful1] {
        padding: 10px;
    }
}
/* /Components/Shared/RichTextEditor.razor.rz.scp.css */
.rich-editor-container[b-2nmdux8ha2] {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-primary);
    overflow: hidden;
}

.rich-editor-container.loading[b-2nmdux8ha2] {
    pointer-events: none;
    opacity: 0.7;
}

/* Toolbar */
.editor-toolbar[b-2nmdux8ha2] {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 8px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.toolbar-btn[b-2nmdux8ha2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.toolbar-btn:hover[b-2nmdux8ha2] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.toolbar-btn:disabled[b-2nmdux8ha2] {
    opacity: 0.5;
    cursor: not-allowed;
}

.toolbar-divider[b-2nmdux8ha2] {
    width: 1px;
    height: 20px;
    background: var(--border);
    margin: 0 4px;
}

/* Editor Content */
.editor-content[b-2nmdux8ha2] {
    height: 61vh;
    padding: 12px;
    overflow-y: auto;
    outline: none;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary);
}

.editor-content:empty[b-2nmdux8ha2]::before {
    content: attr(data-placeholder);
    color: var(--text-muted);
    pointer-events: none;
}

.editor-content:focus[b-2nmdux8ha2] {
    outline: none;
}

/* AI Dropdown */
.ai-dropdown[b-2nmdux8ha2] {
    position: relative;
}

.ai-btn[b-2nmdux8ha2] {
    width: auto !important;
    padding: 0 8px !important;
    gap: 4px;
    font-weight: 500;
    font-size: 12px;
}

.ai-btn .ai-label[b-2nmdux8ha2] {
    font-size: 12px;
    font-weight: 600;
}

.ai-btn .chevron[b-2nmdux8ha2] {
    margin-left: 2px;
    transition: transform 0.2s ease;
}

.ai-btn.active .chevron[b-2nmdux8ha2] {
    transform: rotate(180deg);
}

.ai-btn.active[b-2nmdux8ha2],
.ai-btn:hover[b-2nmdux8ha2] {
    background: var(--primary-light);
    color: var(--primary);
}

.ai-spinner[b-2nmdux8ha2] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-2nmdux8ha2 0.8s linear infinite;
}

/* AI Menu */
.ai-menu[b-2nmdux8ha2] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 180px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    padding: 4px;
    animation: fadeIn-b-2nmdux8ha2 0.15s ease;
}

.ai-menu-item[b-2nmdux8ha2] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-primary);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ai-menu-item:hover[b-2nmdux8ha2] {
    background: var(--bg-secondary);
}

.ai-menu-item:disabled[b-2nmdux8ha2] {
    opacity: 0.5;
    cursor: not-allowed;
}

.ai-menu-item svg[b-2nmdux8ha2] {
    flex-shrink: 0;
    color: var(--text-secondary);
}

.ai-menu-item .submenu-arrow[b-2nmdux8ha2] {
    margin-left: auto;
}

.ai-menu-divider[b-2nmdux8ha2] {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

/* AI Submenu */
.ai-menu-item.has-submenu[b-2nmdux8ha2] {
    position: relative;
}

.ai-submenu[b-2nmdux8ha2] {
    position: absolute;
    left: calc(100% + 4px);
    top: 0;
    min-width: 150px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    padding: 4px;
    animation: fadeIn-b-2nmdux8ha2 0.15s ease;
}

/* AI Loading Overlay */
.ai-loading-overlay[b-2nmdux8ha2] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(var(--bg-primary-rgb), 0.9);
    z-index: 10;
}

.ai-loading-spinner[b-2nmdux8ha2] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-2nmdux8ha2 0.8s linear infinite;
}

.ai-loading-overlay span[b-2nmdux8ha2] {
    font-size: 14px;
    color: var(--text-secondary);
}

/* AI Backdrop */
.ai-backdrop[b-2nmdux8ha2] {
    position: fixed;
    inset: 0;
    z-index: 999;
}

/* Animations */
@keyframes spin-b-2nmdux8ha2 {
    to {
        transform: rotate(360deg);
    }
}

@keyframes fadeIn-b-2nmdux8ha2 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Components/Shared/SearchableSelect.razor.rz.scp.css */
/* SearchableSelect Component */
.searchable-select[b-20yxm80bpy] {
    position: relative;
    width: 100%;
}

.searchable-select.disabled[b-20yxm80bpy] {
    opacity: 0.6;
    pointer-events: none;
}

/* Trigger Button */
.searchable-select-trigger[b-20yxm80bpy] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
}

.searchable-select-trigger:hover[b-20yxm80bpy] {
    border-color: var(--border-hover, rgba(255, 255, 255, 0.15));
    background: var(--bg-card-hover, rgba(255, 255, 255, 0.03));
}

.searchable-select-trigger:focus[b-20yxm80bpy] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-alpha, rgba(16, 185, 129, 0.15));
}

.searchable-select.open .searchable-select-trigger[b-20yxm80bpy] {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-alpha, rgba(16, 185, 129, 0.15));
}

/* Value Display */
.searchable-select-value[b-20yxm80bpy] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.searchable-select-value.placeholder[b-20yxm80bpy] {
    color: var(--text-muted);
}

/* Icons */
.searchable-select-icons[b-20yxm80bpy] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.searchable-select-arrow[b-20yxm80bpy] {
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.searchable-select.open .searchable-select-arrow[b-20yxm80bpy] {
    transform: rotate(180deg);
}

.searchable-select-clear[b-20yxm80bpy] {
    width: 22px;
    height: 22px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border: none;
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
}

.searchable-select-clear:hover[b-20yxm80bpy] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* Fixed dropdown - rendered outside container, positioned via JS */
.searchable-select-dropdown[b-20yxm80bpy] {
    position: fixed;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35),
                0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 99999;
    overflow: hidden;
    animation: selectDropdownIn-b-20yxm80bpy 0.2s ease;
}

.searchable-select-dropdown.dropdown-above[b-20yxm80bpy] {
    animation: selectDropdownInAbove-b-20yxm80bpy 0.2s ease;
}

@keyframes selectDropdownInAbove-b-20yxm80bpy {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes selectDropdownIn-b-20yxm80bpy {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Search Input */
.searchable-select-search[b-20yxm80bpy] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-input);
}

.searchable-select-search svg[b-20yxm80bpy] {
    flex-shrink: 0;
    color: var(--text-muted);
}

.searchable-select-search input[b-20yxm80bpy] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
}

.searchable-select-search input[b-20yxm80bpy]::placeholder {
    color: var(--text-muted);
}

/* Options List */
.searchable-select-options[b-20yxm80bpy] {
    max-height: 280px;
    overflow-y: auto;
    padding: 6px;
}

.searchable-select-options[b-20yxm80bpy]::-webkit-scrollbar {
    width: 6px;
}

.searchable-select-options[b-20yxm80bpy]::-webkit-scrollbar-track {
    background: transparent;
}

.searchable-select-options[b-20yxm80bpy]::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

.searchable-select-options[b-20yxm80bpy]::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Option Item */
.searchable-select-option[b-20yxm80bpy] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: transparent;
    border: none;
    border-radius: calc(var(--radius) - 4px);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
}

.searchable-select-option:hover[b-20yxm80bpy],
.searchable-select-option.highlighted[b-20yxm80bpy] {
    background: var(--bg-input);
}

.searchable-select-option.selected[b-20yxm80bpy] {
    background: var(--primary-alpha, rgba(16, 185, 129, 0.15));
    color: var(--primary);
}

.searchable-select-option.selected:hover[b-20yxm80bpy],
.searchable-select-option.selected.highlighted[b-20yxm80bpy] {
    background: var(--primary-alpha, rgba(16, 185, 129, 0.2));
}

.searchable-select-option-text[b-20yxm80bpy] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.searchable-select-option svg[b-20yxm80bpy] {
    flex-shrink: 0;
    color: var(--primary);
}

/* Empty State */
.searchable-select-empty[b-20yxm80bpy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 16px;
    color: var(--text-muted);
    text-align: center;
}

.searchable-select-empty svg[b-20yxm80bpy] {
    opacity: 0.5;
}

.searchable-select-empty span[b-20yxm80bpy] {
    font-size: 13px;
}

/* Backdrop */
.searchable-select-backdrop[b-20yxm80bpy] {
    position: fixed;
    inset: 0;
    z-index: 99998;
}

/* Responsive */
@media (max-width: 768px) {
    .searchable-select-options[b-20yxm80bpy] {
        max-height: 200px;
    }

    .searchable-select-backdrop[b-20yxm80bpy] {
        background: rgba(0, 0, 0, 0.3);
    }
}
/* /Components/Shared/SortableCriteriaList.razor.rz.scp.css */
.sortable-criteria-list[b-7qn5ahk1nw] {
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    background: var(--bg-secondary, #f9fafb);
    padding: 12px;
}

.sortable-criteria-header[b-7qn5ahk1nw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.sortable-criteria-add-wrapper[b-7qn5ahk1nw] {
    position: relative;
}

.sortable-criteria-title[b-7qn5ahk1nw] {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--text-primary, #111827);
}

.sortable-criteria-add-btn[b-7qn5ahk1nw] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px dashed var(--primary-color, #3b82f6);
    border-radius: 6px;
    background: transparent;
    color: var(--primary-color, #3b82f6);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.sortable-criteria-add-btn:hover[b-7qn5ahk1nw] {
    background: var(--primary-color, #3b82f6);
    color: white;
}

.sortable-criteria-empty[b-7qn5ahk1nw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    color: var(--text-muted, #9ca3af);
    font-size: 0.875rem;
}

.sortable-criteria-items[b-7qn5ahk1nw] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sortable-criteria-item[b-7qn5ahk1nw] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-primary, white);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    cursor: grab;
    transition: all 0.15s ease;
}

.sortable-criteria-item:hover[b-7qn5ahk1nw] {
    border-color: var(--primary-color, #3b82f6);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.sortable-criteria-item.dragging[b-7qn5ahk1nw] {
    opacity: 0.5;
    cursor: grabbing;
}

.sortable-criteria-item.drag-over[b-7qn5ahk1nw] {
    border-color: var(--primary-color, #3b82f6);
    border-style: dashed;
    background: rgba(59, 130, 246, 0.05);
}

.sortable-criteria-drag-handle[b-7qn5ahk1nw] {
    display: flex;
    align-items: center;
    color: var(--text-muted, #9ca3af);
    cursor: grab;
}

.sortable-criteria-drag-handle:active[b-7qn5ahk1nw] {
    cursor: grabbing;
}

.sortable-criteria-index[b-7qn5ahk1nw] {
    min-width: 24px;
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text-secondary, #6b7280);
}

.sortable-criteria-field-name[b-7qn5ahk1nw] {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary, #111827);
}

.sortable-criteria-direction-btn[b-7qn5ahk1nw] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 4px;
    background: var(--bg-secondary, #f9fafb);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    transition: all 0.15s ease;
}

.sortable-criteria-direction-btn:hover[b-7qn5ahk1nw] {
    border-color: var(--primary-color, #3b82f6);
    color: var(--primary-color, #3b82f6);
}

.sortable-criteria-direction-btn.asc[b-7qn5ahk1nw] {
    color: var(--success-color, #10b981);
    border-color: rgba(16, 185, 129, 0.3);
    background: rgba(16, 185, 129, 0.05);
}

.sortable-criteria-direction-btn.desc[b-7qn5ahk1nw] {
    color: var(--warning-color, #f59e0b);
    border-color: rgba(245, 158, 11, 0.3);
    background: rgba(245, 158, 11, 0.05);
}

.sortable-criteria-remove-btn[b-7qn5ahk1nw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted, #9ca3af);
    cursor: pointer;
    transition: all 0.15s ease;
}

.sortable-criteria-remove-btn:hover[b-7qn5ahk1nw] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color, #ef4444);
}

/* Dropdown */
.sortable-criteria-dropdown-backdrop[b-7qn5ahk1nw] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 998;
}

.sortable-criteria-dropdown[b-7qn5ahk1nw] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 220px;
    background: var(--bg-primary, white);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    z-index: 999;
    animation: dropdownFadeIn-b-7qn5ahk1nw 0.15s ease;
}

@keyframes dropdownFadeIn-b-7qn5ahk1nw {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sortable-criteria-dropdown-header[b-7qn5ahk1nw] {
    padding: 10px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #9ca3af);
    background: var(--bg-secondary, #f9fafb);
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.sortable-criteria-dropdown-item[b-7qn5ahk1nw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    font-size: 0.875rem;
    color: var(--text-primary, #111827);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.sortable-criteria-dropdown-item:hover[b-7qn5ahk1nw] {
    background: var(--primary-color, #3b82f6);
    color: white;
}

.sortable-criteria-dropdown-item svg[b-7qn5ahk1nw] {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.sortable-criteria-dropdown-item:hover svg[b-7qn5ahk1nw] {
    opacity: 1;
}
/* /Components/Shared/Spotlight.razor.rz.scp.css */
/* Spotlight - macOS Style Command Palette */

/* Overlay */
.spotlight-overlay[b-c42f5k8cxd] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 10vh;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.spotlight-overlay.active[b-c42f5k8cxd] {
    opacity: 1;
    visibility: visible;
}

/* Container */
.spotlight-container[b-c42f5k8cxd] {
    width: 680px;
    max-width: 90vw;
    max-height: 70vh;
    background: #fff;
    border-radius: 16px;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.1),
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        0 0 80px rgba(99, 102, 241, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.95) translateY(-20px);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.spotlight-overlay.active .spotlight-container[b-c42f5k8cxd] {
    transform: scale(1) translateY(0);
}

/* Header */
.spotlight-header[b-c42f5k8cxd] {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, var(--surface-hover) 0%, var(--surface) 100%);
}

.spotlight-search[b-c42f5k8cxd] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 16px;
    transition: all 0.2s ease;
}

.spotlight-search:focus-within[b-c42f5k8cxd] {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.spotlight-search-icon[b-c42f5k8cxd] {
    width: 20px;
    height: 20px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.spotlight-search input[b-c42f5k8cxd] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 16px;
    color: var(--text);
    outline: none;
}

.spotlight-search input[b-c42f5k8cxd]::placeholder {
    color: var(--text-muted);
}

.spotlight-clear[b-c42f5k8cxd] {
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: var(--surface-hover);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: all 0.15s ease;
}

.spotlight-clear:hover[b-c42f5k8cxd] {
    background: var(--border);
    color: var(--text);
}

.spotlight-clear svg[b-c42f5k8cxd] {
    width: 14px;
    height: 14px;
}

/* Body */
.spotlight-body[b-c42f5k8cxd] {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.spotlight-body[b-c42f5k8cxd]::-webkit-scrollbar {
    width: 6px;
}

.spotlight-body[b-c42f5k8cxd]::-webkit-scrollbar-track {
    background: transparent;
}

.spotlight-body[b-c42f5k8cxd]::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

/* Section */
.spotlight-section[b-c42f5k8cxd] {
    margin-bottom: 8px;
}

.spotlight-section:last-child[b-c42f5k8cxd] {
    margin-bottom: 0;
}

.spotlight-section-header[b-c42f5k8cxd] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.spotlight-section-icon[b-c42f5k8cxd] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.spotlight-section-icon svg[b-c42f5k8cxd] {
    width: 12px;
    height: 12px;
}

.spotlight-section-count[b-c42f5k8cxd] {
    margin-left: auto;
    background: var(--surface-hover);
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 10px;
}

/* Items */
.spotlight-items[b-c42f5k8cxd] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.spotlight-item[b-c42f5k8cxd] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.spotlight-item:hover[b-c42f5k8cxd] {
    background: var(--surface-hover);
}

.spotlight-item.selected[b-c42f5k8cxd] {
    background: var(--primary);
    color: white;
}

.spotlight-item.selected .spotlight-item-subtitle[b-c42f5k8cxd] {
    color: rgba(255, 255, 255, 0.7);
}

.spotlight-item.selected .spotlight-item-icon[b-c42f5k8cxd] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.spotlight-item.selected .spotlight-arrow[b-c42f5k8cxd] {
    color: rgba(255, 255, 255, 0.5);
}

.spotlight-item.selected kbd[b-c42f5k8cxd] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border-color: rgba(255, 255, 255, 0.1);
}

/* Item Icon */
.spotlight-item-icon[b-c42f5k8cxd] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.spotlight-item-icon svg[b-c42f5k8cxd] {
    width: 18px;
    height: 18px;
}

/* Icon Colors */
.spotlight-item-icon.color-blue[b-c42f5k8cxd] { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.spotlight-item-icon.color-orange[b-c42f5k8cxd] { background: rgba(249, 115, 22, 0.15); color: #f97316; }
.spotlight-item-icon.color-purple[b-c42f5k8cxd] { background: rgba(168, 85, 247, 0.15); color: #a855f7; }
.spotlight-item-icon.color-green[b-c42f5k8cxd] { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.spotlight-item-icon.color-teal[b-c42f5k8cxd] { background: rgba(20, 184, 166, 0.15); color: #14b8a6; }
.spotlight-item-icon.color-indigo[b-c42f5k8cxd] { background: rgba(99, 102, 241, 0.15); color: #6366f1; }
.spotlight-item-icon.color-amber[b-c42f5k8cxd] { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.spotlight-item-icon.color-cyan[b-c42f5k8cxd] { background: rgba(6, 182, 212, 0.15); color: #06b6d4; }
.spotlight-item-icon.color-lime[b-c42f5k8cxd] { background: rgba(132, 204, 22, 0.15); color: #84cc16; }
.spotlight-item-icon.color-pink[b-c42f5k8cxd] { background: rgba(236, 72, 153, 0.15); color: #ec4899; }
.spotlight-item-icon.color-violet[b-c42f5k8cxd] { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }
.spotlight-item-icon.color-emerald[b-c42f5k8cxd] { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.spotlight-item-icon.color-sky[b-c42f5k8cxd] { background: rgba(14, 165, 233, 0.15); color: #0ea5e9; }
.spotlight-item-icon.color-rose[b-c42f5k8cxd] { background: rgba(244, 63, 94, 0.15); color: #f43f5e; }
.spotlight-item-icon.color-fuchsia[b-c42f5k8cxd] { background: rgba(217, 70, 239, 0.15); color: #d946ef; }
.spotlight-item-icon.color-yellow[b-c42f5k8cxd] { background: rgba(234, 179, 8, 0.15); color: #eab308; }
.spotlight-item-icon.color-red[b-c42f5k8cxd] { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.spotlight-item-icon.color-stone[b-c42f5k8cxd] { background: rgba(120, 113, 108, 0.15); color: #78716c; }
.spotlight-item-icon.color-slate[b-c42f5k8cxd] { background: rgba(100, 116, 139, 0.15); color: #64748b; }
.spotlight-item-icon.color-gray[b-c42f5k8cxd] { background: rgba(107, 114, 128, 0.15); color: #6b7280; }

/* Quick Action Colors */
.spotlight-item-icon.action-sync[b-c42f5k8cxd] { background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%); color: white; }
.spotlight-item-icon.action-add[b-c42f5k8cxd] { background: linear-gradient(135deg, #22c55e 0%, #10b981 100%); color: white; }
.spotlight-item-icon.action-export[b-c42f5k8cxd] { background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%); color: white; }

/* Item Content */
.spotlight-item-content[b-c42f5k8cxd] {
    flex: 1;
    min-width: 0;
}

.spotlight-item-title[b-c42f5k8cxd] {
    font-size: 14px;
    font-weight: 500;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spotlight-item-title mark[b-c42f5k8cxd] {
    background: rgba(250, 204, 21, 0.4);
    color: inherit;
    border-radius: 2px;
    padding: 0 2px;
}

.spotlight-item.selected .spotlight-item-title mark[b-c42f5k8cxd] {
    background: rgba(255, 255, 255, 0.3);
}

.spotlight-item-subtitle[b-c42f5k8cxd] {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

/* Item Meta */
.spotlight-item-meta[b-c42f5k8cxd] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.spotlight-item-meta kbd[b-c42f5k8cxd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 6px;
    font-size: 11px;
    font-family: inherit;
    font-weight: 500;
    background: var(--surface-hover);
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--text-muted);
}

.spotlight-arrow[b-c42f5k8cxd] {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    opacity: 0;
    transform: translateX(-4px);
    transition: all 0.15s ease;
}

.spotlight-item:hover .spotlight-arrow[b-c42f5k8cxd],
.spotlight-item.selected .spotlight-arrow[b-c42f5k8cxd] {
    opacity: 1;
    transform: translateX(0);
}

/* Empty State */
.spotlight-empty[b-c42f5k8cxd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}

.spotlight-empty svg[b-c42f5k8cxd] {
    width: 48px;
    height: 48px;
    color: var(--text-muted);
    opacity: 0.5;
    margin-bottom: 16px;
}

.spotlight-empty h3[b-c42f5k8cxd] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 8px;
}

.spotlight-empty p[b-c42f5k8cxd] {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
}

/* Footer */
.spotlight-footer[b-c42f5k8cxd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background: var(--surface-hover);
}

.spotlight-hints[b-c42f5k8cxd] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.spotlight-hint[b-c42f5k8cxd] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
}

.spotlight-hint kbd[b-c42f5k8cxd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 5px;
    font-size: 10px;
    font-family: inherit;
    font-weight: 500;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-muted);
}

.spotlight-brand[b-c42f5k8cxd] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    opacity: 0.5;
}

/* Dark theme adjustments */
[data-theme="dark"] .spotlight-container[b-c42f5k8cxd] {
    background: #1e1e23;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.05),
        0 25px 50px -12px rgba(0, 0, 0, 0.7),
        0 0 100px rgba(99, 102, 241, 0.08);
}

[data-theme="dark"] .spotlight-search[b-c42f5k8cxd] {
    background: rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .spotlight-item.selected[b-c42f5k8cxd] {
    background: linear-gradient(135deg, var(--primary) 0%, #4f46e5 100%);
}

/* Responsive */
@media (max-width: 640px) {
    .spotlight-overlay[b-c42f5k8cxd] {
        padding-top: 5vh;
    }

    .spotlight-container[b-c42f5k8cxd] {
        max-height: 80vh;
        border-radius: 12px;
    }

    .spotlight-hints[b-c42f5k8cxd] {
        display: none;
    }

    .spotlight-footer[b-c42f5k8cxd] {
        justify-content: center;
    }
}
/* /Components/Shared/TenantSwitchModal.razor.rz.scp.css */
.tenant-switch-body[b-pr99wbxyqi] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 200px;
}

.tenant-switch-loading[b-pr99wbxyqi] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px 16px;
    color: var(--text-secondary);
    font-size: 13px;
}

.tenant-switch-error[b-pr99wbxyqi] {
    padding: 10px 12px;
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: var(--radius-sm);
    font-size: 13px;
}

.tenant-switch-empty[b-pr99wbxyqi] {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

/* Search */
.tenant-switch-search[b-pr99wbxyqi] {
    position: relative;
    display: flex;
    align-items: center;
}

    .tenant-switch-search > svg[b-pr99wbxyqi] {
        position: absolute;
        left: 12px;
        color: var(--text-muted);
        pointer-events: none;
    }

.tenant-switch-search-input[b-pr99wbxyqi] {
    width: 100%;
    padding: 10px 36px 10px 36px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    transition: var(--transition);
}

    .tenant-switch-search-input:focus[b-pr99wbxyqi] {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px var(--primary-alpha);
    }

.tenant-switch-search-clear[b-pr99wbxyqi] {
    position: absolute;
    right: 8px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    display: flex;
    border-radius: 4px;
}

    .tenant-switch-search-clear:hover[b-pr99wbxyqi] {
        color: var(--text-primary);
        background: var(--bg-card-hover);
    }

/* List */
.tenant-switch-list[b-pr99wbxyqi] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 360px;
    overflow-y: auto;
    padding-right: 4px;
}

.tenant-switch-card[b-pr99wbxyqi] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: var(--transition);
    color: var(--text-primary);
    font-family: inherit;
}

    .tenant-switch-card:hover:not(:disabled)[b-pr99wbxyqi] {
        border-color: var(--border-hover);
        background: var(--bg-card-hover);
    }

    .tenant-switch-card:disabled[b-pr99wbxyqi] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .tenant-switch-card.is-selected[b-pr99wbxyqi] {
        border-color: var(--primary);
        background: var(--primary-alpha);
    }

.tenant-switch-icon[b-pr99wbxyqi] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-alpha);
    color: var(--primary);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.tenant-switch-info[b-pr99wbxyqi] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

    .tenant-switch-info strong[b-pr99wbxyqi] {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
    }

    .tenant-switch-info small[b-pr99wbxyqi] {
        font-size: 11px;
        color: var(--text-muted);
        font-family: var(--font-mono, monospace);
    }

.tenant-switch-badge[b-pr99wbxyqi] {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

    .tenant-switch-badge.owner[b-pr99wbxyqi] {
        background: var(--primary-alpha);
        color: var(--primary);
    }

    .tenant-switch-badge.member[b-pr99wbxyqi] {
        background: var(--bg-card-hover);
        color: var(--text-muted);
    }

.tenant-switch-check[b-pr99wbxyqi] {
    color: var(--primary);
    flex-shrink: 0;
}
/* /Components/Shared/ToastContainer.razor.rz.scp.css */
.toast-container[b-9spqvxmcjf] {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    max-width: 400px;
    pointer-events: none;
}

.toast[b-9spqvxmcjf] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
    pointer-events: auto;
    animation: toast-enter-b-9spqvxmcjf 0.3s ease-out;
    position: relative;
    overflow: hidden;
}

.toast-removing[b-9spqvxmcjf] {
    animation: toast-exit-b-9spqvxmcjf 0.3s ease-in forwards;
}

@keyframes toast-enter-b-9spqvxmcjf {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toast-exit-b-9spqvxmcjf {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

.toast-icon[b-9spqvxmcjf] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.toast-success .toast-icon[b-9spqvxmcjf] {
    color: #22c55e;
}

.toast-error .toast-icon[b-9spqvxmcjf] {
    color: #ef4444;
}

.toast-warning .toast-icon[b-9spqvxmcjf] {
    color: #f59e0b;
}

.toast-info .toast-icon[b-9spqvxmcjf] {
    color: #3b82f6;
}

.toast-content[b-9spqvxmcjf] {
    flex: 1;
    min-width: 0;
}

.toast-title[b-9spqvxmcjf] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}

.toast-message[b-9spqvxmcjf] {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.4;
}

.toast-close[b-9spqvxmcjf] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.toast-close:hover[b-9spqvxmcjf] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.toast-progress[b-9spqvxmcjf] {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    animation: toast-progress-b-9spqvxmcjf linear forwards;
}

.toast-success .toast-progress[b-9spqvxmcjf] {
    background: #22c55e;
}

.toast-error .toast-progress[b-9spqvxmcjf] {
    background: #ef4444;
}

.toast-warning .toast-progress[b-9spqvxmcjf] {
    background: #f59e0b;
}

.toast-info .toast-progress[b-9spqvxmcjf] {
    background: #3b82f6;
}

@keyframes toast-progress-b-9spqvxmcjf {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}

/* Responsive */
@media (max-width: 480px) {
    .toast-container[b-9spqvxmcjf] {
        left: 16px;
        right: 16px;
        max-width: none;
    }
}
/* /Components/Shared/TranslationsEditor.razor.rz.scp.css */
.trans-editor[b-th0e1ivxau] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 2px;
}

.trans-editor-hint[b-th0e1ivxau] {
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: 8px;
    padding: 8px 12px;
    line-height: 1.5;
}

.trans-editor-hint strong[b-th0e1ivxau] {
    color: var(--text-primary);
    font-weight: 600;
}

.trans-editor-empty[b-th0e1ivxau] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px dashed var(--border);
    border-radius: 10px;
    color: var(--text-muted);
}

.trans-editor-empty-icon[b-th0e1ivxau] {
    color: var(--text-muted);
    flex-shrink: 0;
}

.trans-editor-empty-text[b-th0e1ivxau] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.trans-editor-empty-text strong[b-th0e1ivxau] {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
}

.trans-editor-empty-text span[b-th0e1ivxau] {
    font-size: 12px;
}

.trans-editor-loading[b-th0e1ivxau] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    color: var(--text-muted);
    font-size: 13px;
}

/* Rows */
.trans-editor-rows[b-th0e1ivxau] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Toolbar */
.trans-editor-toolbar[b-th0e1ivxau] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
    flex-wrap: wrap;
}

.trans-ai-all-btn[b-th0e1ivxau] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    box-shadow: 0 1px 3px rgba(99, 102, 241, 0.3);
}

.trans-ai-all-btn:hover:not(:disabled)[b-th0e1ivxau] {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(99, 102, 241, 0.4);
}

.trans-ai-all-btn:disabled[b-th0e1ivxau] {
    opacity: 0.6;
    cursor: not-allowed;
}

.trans-ai-all-btn.is-loading[b-th0e1ivxau] {
    background: linear-gradient(135deg, #818cf8, #c084fc);
}

.trans-toolbar-hint[b-th0e1ivxau] {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.4;
}

.spinner-mini[b-th0e1ivxau] {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-mini-b-th0e1ivxau 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes spin-mini-b-th0e1ivxau {
    to { transform: rotate(360deg); }
}

.trans-row[b-th0e1ivxau] {
    display: grid;
    grid-template-columns: 130px 1fr auto;
    align-items: start;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: border-color 0.15s ease;
}

.trans-row:focus-within[b-th0e1ivxau] {
    border-color: var(--primary);
}

.trans-row-lang[b-th0e1ivxau] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 8px;
}

.trans-row-lang-code[b-th0e1ivxau] {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 0.5px;
}

.trans-row-lang-name[b-th0e1ivxau] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.trans-row-badge[b-th0e1ivxau] {
    font-size: 9px;
    font-weight: 700;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff;
    padding: 2px 6px;
    border-radius: 999px;
    letter-spacing: 0.5px;
}

.trans-row-input[b-th0e1ivxau] {
    width: 100%;
}

.trans-row-text[b-th0e1ivxau],
.trans-row-textarea[b-th0e1ivxau] {
    width: 100%;
    padding: 8px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.trans-row-text:focus[b-th0e1ivxau],
.trans-row-textarea:focus[b-th0e1ivxau] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.trans-row-textarea[b-th0e1ivxau] {
    resize: vertical;
    min-height: 64px;
    line-height: 1.5;
}

/* Row action button (per-language AI) */
.trans-row-actions[b-th0e1ivxau] {
    display: flex;
    align-items: center;
    padding-top: 6px;
}

.trans-ai-row-btn[b-th0e1ivxau] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    background: transparent;
    color: #6366f1;
    border: 1px solid rgba(99, 102, 241, 0.35);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    flex-shrink: 0;
}

.trans-ai-row-btn:hover:not(:disabled)[b-th0e1ivxau] {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.6);
}

.trans-ai-row-btn:disabled[b-th0e1ivxau] {
    opacity: 0.5;
    cursor: not-allowed;
}

.trans-ai-row-btn .spinner-mini[b-th0e1ivxau] {
    border-top-color: #6366f1;
    border-color: rgba(99, 102, 241, 0.25);
}

/* Footer */
.trans-editor-footer[b-th0e1ivxau] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 4px;
}

.trans-editor-savedat[b-th0e1ivxau] {
    font-size: 11px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
    .trans-row[b-th0e1ivxau] {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .trans-row-lang[b-th0e1ivxau] {
        padding-top: 0;
    }
    .trans-row-actions[b-th0e1ivxau] {
        padding-top: 0;
    }
}