/* /Components/Island/FeedIsland.razor.rz.scp.css */
/* ===================================================
   📱 ЖИВАЯ ЛЕНТА (ПОСТЫ)
   =================================================== */
.feed-section[b-mvs9391z1s] {
    padding: 0 30px 40px 30px;
}

    .feed-section .section-header[b-mvs9391z1s] {
        margin-bottom: 20px;
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

.subtitle[b-mvs9391z1s] {
    font-size: 14px;
    color: #666;
}

.feed-grid[b-mvs9391z1s] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 15px;
}

.feed-item[b-mvs9391z1s] {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    background: #f0f0f0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

    .feed-item img[b-mvs9391z1s] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .feed-item:hover img[b-mvs9391z1s] {
        transform: scale(1.08);
    }

.video-indicator[b-mvs9391z1s] {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.85);
    color: #1a3c34;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.feed-overlay[b-mvs9391z1s] {
    position: absolute;
    inset: 0;
    background: rgba(26, 60, 52, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(3px);
}

.feed-text[b-mvs9391z1s] {
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
    transform: translateY(15px);
    transition: transform 0.3s ease;
}

.feed-item:hover .feed-overlay[b-mvs9391z1s] {
    opacity: 1;
}

.feed-item:hover .feed-text[b-mvs9391z1s] {
    transform: translateY(0);
}

@media (max-width: 768px) {
    .feed-section[b-mvs9391z1s] {
        padding: 30px 30px 10px 30px;
    }

    .feed-grid[b-mvs9391z1s] {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .feed-overlay[b-mvs9391z1s] {
        display: none;
    }
}

/* ===================================================
   🪟 ВСПЛЫВАЮЩЕЕ ОКНО (МОДАЛКА)
   =================================================== */
.modal-backdrop[b-mvs9391z1s] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    /*height: 100vh;*/
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
    animation: fadeIn-b-mvs9391z1s 0.3s ease;
}

.modal-content[b-mvs9391z1s] {
    background: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: 850px;
    max-height: 90vh;
    display: flex;
    overflow: hidden;
    position: relative;
    box-shadow: 0 25px 50px rgba(0,0,0,0.25);
    animation: slideUp-b-mvs9391z1s 0.3s ease;
}

.modal-close[b-mvs9391z1s] {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #f0f0f0;
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
}

    .modal-close:hover[b-mvs9391z1s] {
        background: #e0e0e0;
    }

.modal-media[b-mvs9391z1s] {
    flex: 1.5;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

    .modal-media img[b-mvs9391z1s] {
        width: 100%;
        height: 100%;
        max-height: 700px;
        object-fit: contain;
    }

.video-placeholder[b-mvs9391z1s] {
    width: 100%;
    height: 100%;
    position: relative;
}

.play-badge[b-mvs9391z1s] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: bold;
    z-index: 2;
}

.modal-info[b-mvs9391z1s] {
    flex: 1;
    padding: 30px;
    display: flex;
    flex-direction: column;
    background: #fff;
    min-width: 300px;
}

.modal-author[b-mvs9391z1s] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.author-avatar[b-mvs9391z1s] {
    width: 40px;
    height: 40px;
    background: #1a3c34;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.author-name[b-mvs9391z1s] {
    font-weight: 700;
    color: #333;
}

.modal-description[b-mvs9391z1s] {
    font-size: 15px;
    line-height: 1.6;
    color: #444;
}

@keyframes fadeIn-b-mvs9391z1s {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp-b-mvs9391z1s {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .modal-content[b-mvs9391z1s] {
        flex-direction: column;
        max-height: 85vh;
        overflow-y: auto;
    }

    .modal-media[b-mvs9391z1s] {
        max-height: 400px;
    }

    .modal-info[b-mvs9391z1s] {
        min-width: 100%;
    }
}
/* /Components/Island/HomeCategoriesIsland.razor.rz.scp.css */
.section-header[b-nndkll72ah] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

    .section-header h2[b-nndkll72ah] {
        margin: 0;
        font-size: 1.5rem;
        color: #1a3c34;
        font-weight: 800;
    }

.btn-link[b-nndkll72ah] {
    color: #1a3c34;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    transition: opacity 0.2s, transform 0.2s;
}

    .btn-link:hover[b-nndkll72ah] {
        opacity: 0.7;
        transform: translateX(3px);
    }

/* Десктопна сітка */
.category-grid[b-nndkll72ah] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}

.cat-card[b-nndkll72ah] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 20px;
    padding: 20px 10px;
    text-decoration: none;
    color: #1e293b;
    border: 1px solid #f1f5f9;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

    .cat-card:hover[b-nndkll72ah] {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 25px rgba(26, 60, 52, 0.08);
        border-color: #e2e8f0;
    }

.cat-icon-wrapper[b-nndkll72ah] {
    width: 60px;
    height: 60px;
    background: #f8fafc;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    color: #1a3c34;
    transition: all 0.3s ease;
}

/* 💥 ЕФЕКТ ПРИ НАВЕДЕННІ НА КАРТКУ 💥 */
.cat-card:hover .cat-icon-wrapper[b-nndkll72ah] {
    background: #1a3c34;
    color: #ffffff;
    transform: rotate(-5deg); /* Трішки пустощів для дизайну */
}

.cat-icon-wrapper svg[b-nndkll72ah] {
    width: 28px;
    height: 28px;
}

.cat-name[b-nndkll72ah] {
    font-weight: 700;
    font-size: 0.9rem;
    text-align: center;
    transition: color 0.3s;
}

.cat-card:hover .cat-name[b-nndkll72ah] {
    color: #1a3c34;
}

/* 📱 МОБІЛЬНА АДАПТАЦІЯ (Горизонтальний скрол як у мобільних додатках) 📱 */
@media (max-width: 600px) {
    .section-header h2[b-nndkll72ah] {
        font-size: 1.25rem;
    }

    .category-grid[b-nndkll72ah] {
        display: flex;
        overflow-x: auto;
        padding-bottom: 15px; /* Місце для тіні при скролі */
        margin-right: -20px; /* Щоб скрол йшов до краю екрану (якщо контейнер має паддінги) */
        padding-right: 20px;
        scroll-snap-type: x mandatory; /* Прив'язка до карток при зупинці свайпу */
        scrollbar-width: none; /* Ховаємо повзунок у Firefox */
        -ms-overflow-style: none; /* Ховаємо повзунок у IE/Edge */
    }

    .category-grid[b-nndkll72ah]::-webkit-scrollbar {
        display: none; /* Ховаємо повзунок у Chrome/Safari */
    }

    .cat-card[b-nndkll72ah] {
        flex: 0 0 115px; /* Жорстка ширина карток на мобілці, щоб не стискались */
        scroll-snap-align: start; /* Магнітимо скрол до початку картки */
        padding: 15px 10px;
    }

    .cat-icon-wrapper[b-nndkll72ah] {
        width: 50px;
        height: 50px;
    }

        .cat-icon-wrapper svg[b-nndkll72ah] {
            width: 24px;
            height: 24px;
        }

    .cat-name[b-nndkll72ah] {
        font-size: 0.85rem;
    }
}
/* /Components/Island/ProductActionIsland.razor.rz.scp.css */
/* --- БАЗОВИЙ ЛЕЙАУТ --- */
.product-page[b-zjr38vpvs5] {
    max-width: 100%; /* Убрали 1200px, теперь на весь экран */
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
}

.btn-back[b-zjr38vpvs5] {
    background: transparent;
    border: none;
    font-weight: 600;
    cursor: pointer;
    margin: 20px; /* Оставили немного воздуха для кнопки */
    color: #94a3b8;
    transition: color 0.2s;
}

    .btn-back:hover[b-zjr38vpvs5] {
        color: #1a3c34;
    }

.product-layout[b-zjr38vpvs5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    background: #fff;
    padding: 40px;
    border-radius: 0; /* Убрали скругления главного окна */
    box-shadow: none; /* Убрали тень, раз уж мы прижаты к краям */
    /*min-height: 100vh;*/
}

/* --- ГАЛЕРЕЯ --- */
.product-gallery[b-zjr38vpvs5] {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.main-image-wrapper[b-zjr38vpvs5] {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 24px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
}

.main-img[b-zjr38vpvs5] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

.thumb-card[b-zjr38vpvs5] {
    aspect-ratio: 1;
    border-radius: 12px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background: #f1f5f9;
    padding: 2px;
}

    .thumb-card img[b-zjr38vpvs5] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
    }

    /* Теперь выделяем только цвет (варианты), главное фото не имеет класса active */
    .thumb-card.active-variant[b-zjr38vpvs5] {
        border-color: #1a3c34;
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(26, 60, 52, 0.15);
    }

.color-preview-sq[b-zjr38vpvs5] {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

/* --- ІНФОРМАЦІЯ --- */
.product-header h1[b-zjr38vpvs5] {
    font-size: 32px;
    margin: 0 0 10px;
    color: #0f172a;
}

.price-container[b-zjr38vpvs5] {
    margin-bottom: 30px;
}

.price-main[b-zjr38vpvs5] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

    .price-main .value[b-zjr38vpvs5] {
        font-size: 38px;
        font-weight: 800;
        color: #1a3c34;
    }

    .price-main .label[b-zjr38vpvs5] {
        color: #64748b;
        font-size: 14px;
    }

.wholesale-hint[b-zjr38vpvs5] {
    margin-top: 8px;
    background: #f0fdf4;
    color: #166534;
    padding: 6px 12px;
    border-radius: 8px;
    display: inline-block;
    font-size: 13px;
}

/* --- КЕРУВАННЯ ТА GLIDER --- */
.selection-box[b-zjr38vpvs5] {
    background: #f8fafc;
    padding: 25px;
    border-radius: 24px;
    margin-bottom: 30px;
}

.variant-status[b-zjr38vpvs5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.color-info[b-zjr38vpvs5] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stock-badge[b-zjr38vpvs5] {
    font-weight: 700;
    font-size: 13px;
}

.in-stock[b-zjr38vpvs5] {
    color: #16a34a;
}

.low-stock[b-zjr38vpvs5] {
    color: #d97706;
}

.mode-toggle[b-zjr38vpvs5] {
    margin-bottom: 25px;
}

.toggle-track[b-zjr38vpvs5] {
    position: relative;
    display: flex;
    background: #e2e8f0;
    padding: 4px;
    border-radius: 14px;
}

.mode-btn[b-zjr38vpvs5] {
    flex: 1;
    z-index: 2;
    border: none;
    background: none;
    padding: 12px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: color 0.3s;
}

    .mode-btn.active[b-zjr38vpvs5] {
        color: #1a3c34;
    }

.glider[b-zjr38vpvs5] {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    background: #fff;
    border-radius: 11px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(calc(var(--active-index) * 100%));
}

/* --- ІНТЕРФЕЙСИ --- */
.cut-interface[b-zjr38vpvs5] {
    display: flex;
    gap: 15px;
}

.qty-picker[b-zjr38vpvs5] {
    display: flex;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.qty-btn[b-zjr38vpvs5] {
    width: 45px;
    border: none;
    background: #f1f5f9;
    font-size: 20px;
    cursor: pointer;
}

.qty-input[b-zjr38vpvs5] {
    width: 60px;
    border: none;
    text-align: center;
    font-weight: 800;
    outline: none;
}

.draft-buttons[b-zjr38vpvs5] {
    display: flex;
    flex: 1;
    gap: 8px;
}

.btn-secondary[b-zjr38vpvs5] {
    flex: 1;
    background: #1a3c34;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    padding: 10px;
}

    .btn-secondary.editing[b-zjr38vpvs5] {
        background: #059669;
    }

.btn-cancel-edit[b-zjr38vpvs5] {
    width: 45px;
    background: #fee2e2;
    color: #ef4444;
    border: none;
    border-radius: 12px;
    cursor: pointer;
}

/* --- РУЛОНИ --- */
.rolls-grid[b-zjr38vpvs5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
    margin-bottom: 15px;
}

.roll-card[b-zjr38vpvs5] {
    background: #fff;
    border: 2px solid #e2e8f0;
    padding: 12px;
    border-radius: 15px;
    text-align: center;
    cursor: pointer;
    transition: 0.2s;
}

    .roll-card.selected[b-zjr38vpvs5] {
        border-color: #1a3c34;
        background: #f0fdf4;
    }

.roll-num[b-zjr38vpvs5] {
    display: block;
    font-size: 10px;
    color: #94a3b8;
}

.roll-val b[b-zjr38vpvs5] {
    font-size: 18px;
    color: #1e293b;
}

.roll-cost[b-zjr38vpvs5] {
    display: block;
    font-size: 12px;
    color: #16a34a;
    font-weight: 700;
}

.btn-add-roll[b-zjr38vpvs5] {
    width: 100%;
    padding: 12px;
    background: #1a3c34;
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
}

/* --- РОБОЧИЙ СТІЛ (WORKBENCH) --- */
.workbench[b-zjr38vpvs5] {
    margin-top: 40px;
    border: 2px solid #1a3c34;
    border-radius: 24px;
    padding: 25px;
    background: #fff;
}

.workbench-header h3[b-zjr38vpvs5] {
    margin: 0 0 20px;
    font-size: 18px;
}

.workbench-list[b-zjr38vpvs5] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 25px;
}

.workbench-item[b-zjr38vpvs5] {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #f8fafc;
    padding: 12px 18px;
    border-radius: 16px;
    border: 1px solid transparent;
    cursor: pointer;
}

    .workbench-item.active-edit[b-zjr38vpvs5] {
        border-color: #059669;
        background: #f0fdf4;
    }

.item-color-circle[b-zjr38vpvs5] {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.1);
    flex-shrink: 0;
}

.item-details[b-zjr38vpvs5] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

    .item-details .name[b-zjr38vpvs5] {
        font-weight: 700;
        color: #1e293b;
    }

    .item-details .meta[b-zjr38vpvs5] {
        font-size: 12px;
        color: #64748b;
    }

.item-price[b-zjr38vpvs5] {
    font-weight: 800;
    color: #1a3c34;
}

.btn-remove[b-zjr38vpvs5] {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 18px;
}

.workbench-footer[b-zjr38vpvs5] {
    border-top: 1px dashed #cbd5e1;
    padding-top: 20px;
}

.total-line[b-zjr38vpvs5] {
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    margin-bottom: 20px;
}

.btn-buy-all[b-zjr38vpvs5] {
    width: 100%;
    padding: 18px;
    background: #1a3c34;
    color: white;
    border: none;
    border-radius: 16px;
    font-weight: 800;
    font-size: 16px;
    cursor: pointer;
}

/* --- ХАРАКТЕРИСТИКИ (ВНУТРІШНЯ СІТКА) --- */
.info-section[b-zjr38vpvs5] {
    margin-top: 40px;
}

    .info-section h3[b-zjr38vpvs5] {
        font-size: 20px;
        color: #1e293b;
        margin-bottom: 20px;
    }

.char-table[b-zjr38vpvs5] {
    width: 100%;
    border-collapse: collapse;
    border: none; /* Снаружи пусто */
}

    .char-table tr[b-zjr38vpvs5] {
        border-bottom: 1px solid #e2e8f0; /* Горизонтальные линии внутри */
    }

        .char-table tr:last-child[b-zjr38vpvs5] {
            border-bottom: none; /* Последняя линия не нужна, она будет "снаружи" */
        }

    .char-table td[b-zjr38vpvs5] {
        padding: 15px 20px;
        font-size: 15px;
    }

.c-name[b-zjr38vpvs5] {
    color: #64748b;
    width: 40%;
    border-right: 1px solid #e2e8f0; /* Вертикальная линия только между ячейками */
}

.c-val[b-zjr38vpvs5] {
    font-weight: 600;
    color: #1e293b;
}

/* --- АДАПТИВНІСТЬ --- */
@media (max-width: 900px) {
    .product-layout[b-zjr38vpvs5] {
        grid-template-columns: 1fr;
        padding: 25px;
    }
}

.roll-card[b-zjr38vpvs5] {
    display: flex;
    flex-direction: column;
    padding: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    background: white;
    transition: all 0.2s;
    text-align: center;
    gap: 8px;
}

    .roll-card.selected[b-zjr38vpvs5] {
        border-color: #1a3c34;
        background: #f4fbf8;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(26, 60, 52, 0.1);
    }

.roll-card-header[b-zjr38vpvs5] {
    border-bottom: 1px dashed #e2e8f0;
    padding-bottom: 4px;
}

.roll-num[b-zjr38vpvs5] {
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
}

.roll-card-body[b-zjr38vpvs5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.roll-val[b-zjr38vpvs5] {
    font-size: 20px;
    color: #0f172a;
}

.roll-meter-price[b-zjr38vpvs5] {
    font-size: 13px;
    color: #16a34a; /* Зелений колір для "вигідної" ціни */
}

.roll-card-footer[b-zjr38vpvs5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid #f1f5f9;
}

.roll-cost-label[b-zjr38vpvs5] {
    font-size: 12px;
    color: #64748b;
}

.roll-cost[b-zjr38vpvs5] {
    font-size: 18px;
    font-weight: 800;
    color: #1a3c34;
}

.roll-action-panel[b-zjr38vpvs5] {
    display: flex;
    gap: 15px;
    margin-top: 15px;
    background: #f8fafc;
    padding: 15px;
    border-radius: 12px;
    border: 1px dashed #cbd5e1;
}

/* Якщо на малих екранах буде тісно */
@media (max-width: 600px) {
    .roll-action-panel[b-zjr38vpvs5] {
        flex-direction: column;
    }
}

/* --- НОВІ ЧИСТІ РУЛОНИ --- */
.rolls-grid[b-zjr38vpvs5] {
    display: grid;
    /* Тепер вони маленькі і влазять хоч по 4-5 в ряд! */
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.roll-card-clean[b-zjr38vpvs5] {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 10px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

    .roll-card-clean:hover[b-zjr38vpvs5] {
        border-color: #cbd5e1;
        background: #f8fafc;
        transform: translateY(-2px);
    }

    .roll-card-clean.selected[b-zjr38vpvs5] {
        border-color: #1a3c34;
        background: #1a3c34;
        color: white;
        box-shadow: 0 6px 15px rgba(26, 60, 52, 0.2);
        transform: translateY(-2px);
    }

.roll-meters-val[b-zjr38vpvs5] {
    font-size: 16px;
    font-weight: 800;
    color: inherit; /* Колір наслідується, щоб ставати білим при виділенні */
}

.roll-card-clean:not(.selected) .roll-meters-val[b-zjr38vpvs5] {
    color: #0f172a;
}

/* --- ПАНЕЛЬ ДОДАВАННЯ РУЛОНУ --- */
.roll-action-panel[b-zjr38vpvs5] {
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: #f8fafc;
    padding: 18px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    margin-top: 10px;
}

.roll-summary-info[b-zjr38vpvs5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px dashed #cbd5e1;
}

.rsi-label[b-zjr38vpvs5] {
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
}

.rsi-value[b-zjr38vpvs5] {
    font-size: 20px;
    font-weight: 800;
    color: #1a3c34;
}

.roll-action-controls[b-zjr38vpvs5] {
    display: flex;
    gap: 15px;
}

/* Адаптивність панелі рулонів */
@media (max-width: 500px) {
    .roll-action-controls[b-zjr38vpvs5] {
        flex-direction: column;
    }

    .rolls-grid[b-zjr38vpvs5] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- СТИЛІ ДЛЯ ЗНИЖОК --- */

.price-old[b-zjr38vpvs5] {
    text-decoration: line-through;
    color: #94a3b8;
    font-size: 1.4rem;
    margin-right: 12px;
    font-weight: 400;
}

.text-sale[b-zjr38vpvs5] {
    color: #ef4444 !important;
}

.discount-badge-inline[b-zjr38vpvs5] {
    background: #ef4444;
    color: white;
    font-size: 0.85rem;
    font-weight: 900;
    padding: 4px 10px;
    border-radius: 8px;
    margin-left: 15px;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
    animation: pulseMiniSale-b-zjr38vpvs5 2s infinite;
}

@keyframes pulseMiniSale-b-zjr38vpvs5 {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

/* Оновлюємо колір у воркбенчі для знижкових позицій */
.workbench-item .meta .text-sale-mini[b-zjr38vpvs5] {
    color: #ef4444;
    font-weight: 700;
}
/* /Components/Island/StoriesIsland.razor.rz.scp.css */
/* --- СТОРІЗ --- */
.stories-bar[b-3o518knlbx] {
    display: flex;
    gap: 25px;
    padding: 30px 20px 15px 20px;
    background: #ffffff;
    border-bottom: 1px solid #f9f9f9;
    justify-content: center;
    flex-wrap: wrap;
}

.story-item-link[b-3o518knlbx] {
    text-decoration: none; /* Убираем подчеркивание ссылок */
    color: inherit;
    display: block;
}

.story-item[b-3o518knlbx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 70px;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* При наведении на ссылку анимируем сам айтем */
.story-item-link:hover .story-item[b-3o518knlbx] {
    transform: scale(1.1) rotate(5deg);
}

.story-item:nth-child(even)[b-3o518knlbx] {
    margin-top: 20px;
}

.story-circle[b-3o518knlbx] {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    position: relative;
    padding: 3px;
    background: #fff;
}

    .story-circle[b-3o518knlbx]::before {
        content: '';
        position: absolute;
        top: -3px;
        left: -3px;
        right: -3px;
        bottom: -3px;
        border-radius: 50%;
        padding: 3px;
        background: linear-gradient(45deg, #1a3c34, #2ecc71, #2980b9, #f1c40f, #1a3c34);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        animation: rotateLoading-b-3o518knlbx 7s linear infinite;
    }

@keyframes rotateLoading-b-3o518knlbx {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.story-circle img[b-3o518knlbx] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
}

.story-title[b-3o518knlbx] {
    font-size: 11px;
    font-weight: 700;
    color: #1a3c34;
    text-align: center;
}

@media (max-width: 768px) {
    .story-item:nth-child(even)[b-3o518knlbx] {
        margin-top: 0;
    }

    .stories-bar[b-3o518knlbx] {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        gap: 15px;
    }
}
/* /Components/UI/CartBadge.razor.rz.scp.css */
.cart-badge-pulse[b-glj3cawxac] {
    position: absolute;
    top: -5px;
    right: -10px;
    background: #e74c3c; /* Яркий красный */
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff; /* Чтобы отделялся от иконки */
    box-shadow: 0 2px 10px rgba(231, 76, 60, 0.3);
    animation: badge-pop-b-glj3cawxac 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes badge-pop-b-glj3cawxac {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

/* Если в твоем меню у ссылок нет position: relative, добавь его */
.cart-link[b-glj3cawxac] {
    position: relative;
}
/* /Components/UI/CheckoutIsland.razor.rz.scp.css */
.checkout-island[b-p07nbs5bum] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px dashed rgba(26, 60, 52, 0.1);
    animation: slideDown-b-p07nbs5bum 0.3s ease-out;
}

@keyframes slideDown-b-p07nbs5bum {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.checkout-title[b-p07nbs5bum] {
    font-size: 1.2rem;
    color: #1a3c34;
    margin-bottom: 15px;
    font-weight: 700;
}

.form-group[b-p07nbs5bum] {
    margin-bottom: 15px;
}

.form-control[b-p07nbs5bum] {
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    border: 2px solid #f4f6f5;
    background-color: #f9fbfa;
    font-size: 0.95rem;
    color: #29362c;
    transition: all 0.2s ease;
    outline: none;
}

    .form-control:focus[b-p07nbs5bum] {
        border-color: #1a3c34;
        background-color: #ffffff;
    }

/* Автокомпліт */
.autocomplete-wrapper[b-p07nbs5bum] {
    position: relative;
}

.autocomplete-list[b-p07nbs5bum] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid rgba(26, 60, 52, 0.1);
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    margin: 5px 0 0;
    padding: 0;
    list-style: none;
}

    .autocomplete-list li[b-p07nbs5bum] {
        padding: 10px 15px;
        cursor: pointer;
        font-size: 0.9rem;
        border-bottom: 1px solid rgba(0,0,0,0.03);
    }

        .autocomplete-list li:hover[b-p07nbs5bum] {
            background-color: #f0f4f2;
            color: #1a3c34;
        }

/* Картка міста */
.selected-item-card[b-p07nbs5bum] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #eaf1ed;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #1a3c34;
}

.truncate-text[b-p07nbs5bum] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 85%;
}

.btn-change-city[b-p07nbs5bum] {
    background: none;
    border: none;
    color: #d9534f;
    cursor: pointer;
    font-weight: bold;
}

select.form-control[b-p07nbs5bum] {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a3c34' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
}

/* Кнопка */
.btn-submit[b-p07nbs5bum] {
    width: 100%;
    padding: 16px;
    border-radius: 100px;
    background: linear-gradient(105deg, #3B4D40 0%, #1a3c34 100%);
    color: white;
    border: none;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-submit:disabled[b-p07nbs5bum] {
        background: #ccc;
        cursor: not-allowed;
    }

    .btn-submit:hover:not(:disabled)[b-p07nbs5bum] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(26, 60, 52, 0.3);
    }

.processing-state[b-p07nbs5bum] {
    text-align: center;
    padding: 30px 0;
}

.loader[b-p07nbs5bum] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #1a3c34;
    border-radius: 50%;
    animation: spin-b-p07nbs5bum 1s linear infinite;
    margin: 0 auto 15px;
}

@keyframes spin-b-p07nbs5bum {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/* --- НОВІ СТИЛІ --- */

/* Відступи між секціями */
.mt-3[b-p07nbs5bum] {
    margin-top: 15px;
}

.mt-4[b-p07nbs5bum] {
    margin-top: 25px;
}

/* Два поля в один ряд (для Імені та Прізвища) */
.form-row[b-p07nbs5bum] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

    .form-row .form-group[b-p07nbs5bum] {
        margin-bottom: 0; /* Прибираємо нижній відступ, бо є gap */
    }

/* Перемикач способу доставки */
.delivery-toggle[b-p07nbs5bum] {
    display: flex;
    background: #f4f6f5;
    border-radius: 12px;
    padding: 6px;
    margin-bottom: 15px;
}

.delivery-btn[b-p07nbs5bum] {
    flex: 1;
    background: transparent;
    border: none;
    padding: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #888;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .delivery-btn.active[b-p07nbs5bum] {
        background: #ffffff;
        color: #1a3c34;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }

/* Анімація появи полів Укрпошти */
.ukrposhta-fields[b-p07nbs5bum] {
    animation: fadeIn-b-p07nbs5bum 0.3s ease-in-out;
}

@keyframes fadeIn-b-p07nbs5bum {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Адаптивність: на дуже вузьких екранах колонки стають одна під одною */
@media (max-width: 400px) {
    .form-row[b-p07nbs5bum] {
        grid-template-columns: 1fr;
    }
}
/* /Components/UI/ProductCard.razor.rz.scp.css */
.product-card[b-wft0kuo21l] {
    background: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    cursor: pointer; /* 💥 ДОДАНО: Курсор-рука для клікабельного DIV 💥 */
}

    .product-card:hover[b-wft0kuo21l] {
        transform: translateY(-6px);
        box-shadow: 0 12px 25px rgba(26, 60, 52, 0.08);
        border-color: #1a3c34;
    }

/* Зображення */
.product-image-wrapper[b-wft0kuo21l] {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1.1;
    background: #f8fafc;
    overflow: hidden;
}

    .product-image-wrapper img[b-wft0kuo21l] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

.product-card:hover img[b-wft0kuo21l] {
    transform: scale(1.06);
}

/* Бейджики ТОП / НОВИНКА */
.card-badge-container[b-wft0kuo21l] {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 2;
}

.badge-top[b-wft0kuo21l], .badge-new[b-wft0kuo21l] {
    font-size: 10px;
    font-weight: 800;
    padding: 5px 10px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.badge-top[b-wft0kuo21l] {
    background: #1a3c34;
    color: white;
}

.badge-new[b-wft0kuo21l] {
    background: #3b82f6;
    color: white;
}

/* ТЕГИ ОПТ/РОЗДРІБ */
.sale-types-badges[b-wft0kuo21l] {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    gap: 4px;
    z-index: 2;
}

.type-badge[b-wft0kuo21l] {
    font-size: 10px;
    font-weight: 700;
    padding: 5px 8px;
    border-radius: 8px;
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.retail-badge[b-wft0kuo21l] {
    background: rgba(255, 255, 255, 0.95);
    color: #0f172a;
    border: 1px solid rgba(0,0,0,0.05);
}

.wholesale-badge[b-wft0kuo21l] {
    background: rgba(30, 58, 138, 0.95);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.1);
}

/* Інфо */
.product-info[b-wft0kuo21l] {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 10px;
}

.product-name[b-wft0kuo21l] {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.4;
    height: 2.8em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.product-price[b-wft0kuo21l] {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-top: auto;
}

.price-label[b-wft0kuo21l] {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}

.price-value[b-wft0kuo21l] {
    font-size: 20px;
    font-weight: 800;
    color: #1a3c34;
    letter-spacing: -0.5px;
}

.price-currency[b-wft0kuo21l] {
    font-size: 13px;
    color: #64748b;
    font-weight: 600;
}

/* Футер картки (Тепер з кольорами!) */
.product-footer[b-wft0kuo21l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}

/* 💥 КРУЖОЧКИ ЦВЕТОВ 💥 */
.product-colors-preview[b-wft0kuo21l] {
    display: flex;
    align-items: center;
}

.color-dot-real[b-wft0kuo21l] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #ffffff; /* Біла рамка, щоб не зливалися */
    margin-left: -6px; /* Нашаровуються один на одного, це виглядає преміально */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

    .color-dot-real:first-child[b-wft0kuo21l] {
        margin-left: 0;
    }

.product-card:hover .color-dot-real[b-wft0kuo21l] {
    transform: translateX(3px); /* Трохи роз'їжджаються при наведенні */
}

.color-dot-extra[b-wft0kuo21l] {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 6px;
}

.colors-empty[b-wft0kuo21l] {
    font-size: 12px;
    color: #94a3b8;
}

.btn-fake-view[b-wft0kuo21l] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #1a3c34;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.product-card:hover .btn-fake-view[b-wft0kuo21l] {
    background: #1a3c34;
    color: white;
    transform: translateX(3px);
}

/* Мобілки */
@media (max-width: 480px) {
    .product-info[b-wft0kuo21l] {
        padding: 10px 12px;
        gap: 8px;
    }

    .product-name[b-wft0kuo21l] {
        font-size: 14px;
    }

    .price-value[b-wft0kuo21l] {
        font-size: 18px;
    }

    .btn-fake-view[b-wft0kuo21l] {
        display: none;
    }

    .sale-types-badges[b-wft0kuo21l] {
        bottom: 8px;
        right: 8px;
        flex-direction: column;
        gap: 4px;
    }
}

/* --- ДОДАЙ ЦЕ ДО ІСНУЮЧИХ СТИЛІВ КАРТКИ --- */

/* 💥 СТИЛІ СЕРДЕЧКА 💥 */
.favorite-btn[b-wft0kuo21l] {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    color: #94a3b8;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(4px);
}

    .favorite-btn svg[b-wft0kuo21l] {
        width: 20px;
        height: 20px;
        transition: transform 0.2s;
    }

    .favorite-btn:hover[b-wft0kuo21l] {
        transform: scale(1.1);
        color: #ef4444; /* При наведенні стає червоним */
    }

    .favorite-btn.active[b-wft0kuo21l] {
        color: #ef4444; /* Увімкнене серце - червоне */
    }

        .favorite-btn.active svg[b-wft0kuo21l] {
            animation: heartPulse-b-wft0kuo21l 0.4s ease-in-out;
        }

@keyframes heartPulse-b-wft0kuo21l {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

/* Додай це у свій CSS для ProductCard */

.badge-sale[b-wft0kuo21l] {
    background: #ef4444;
    color: #fff;
    font-weight: 900;
    padding: 4px 10px;
    border-radius: 10px;
    font-size: 12px;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3);
}

.price-old[b-wft0kuo21l] {
    text-decoration: line-through;
    color: #94a3b8;
    font-size: 0.9rem;
    margin-right: 5px;
    font-weight: 400;
}

.text-sale[b-wft0kuo21l] {
    color: #ef4444 !important;
}

/* Анімація для бейджа, щоб юзер точно помітив халяву */
.badge-sale[b-wft0kuo21l] {
    animation: pulseSale-b-wft0kuo21l 2s infinite;
}

@keyframes pulseSale-b-wft0kuo21l {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}
/* /Components/UI/ProfileNavButton.razor.rz.scp.css */
/* ПОЛНАЯ КОПИЯ СТИЛЕЙ КНОПКИ ДЛЯ ОСТРОВА */
.btn-item[b-xjedlu7r4m] {
    display: block;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

    .btn-item div[b-xjedlu7r4m] {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 56px;
        position: relative;
        cursor: pointer;
        transition: all 0.2s ease;
        background-color: #ffffff;
        border-radius: 20px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        box-sizing: border-box;
        overflow: hidden;
    }

    .btn-item span[b-xjedlu7r4m] {
        font-size: 9px;
        color: #1a3c34;
        transition: opacity 0.2s ease;
        margin-top: 4px;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 90%;
    }

    .btn-item.active div[b-xjedlu7r4m] {
        background-color: #1a3c34;
        box-shadow: 0 10px 20px rgba(26, 60, 52, 0.2);
        border-color: #1a3c34;
    }

    .btn-item.active span[b-xjedlu7r4m] {
        opacity: 0;
        position: absolute;
        pointer-events: none;
    }

.nav-icon[b-xjedlu7r4m] {
    width: 24px;
    stroke: #1a3c34;
    height: 24px;
    flex-shrink: 0;
    transform: scale(1);
}

.btn-item.active .nav-icon[b-xjedlu7r4m] {
    stroke: #ffffff;
    animation: icon-bounce-b-xjedlu7r4m 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes icon-bounce-b-xjedlu7r4m {
    from {
        transform: scale(1);
        stroke: #1a3c34;
    }

    to {
        transform: scale(1.45) translateY(2px);
        stroke: #ffffff;
    }
}
/* /Pages/Admin/AdminOrderDetails.razor.rz.scp.css */
.order-details-page[b-y05yxlld1l] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.header-actions[b-y05yxlld1l] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.btn-back[b-y05yxlld1l] {
    background: none;
    border: none;
    color: #4278b8;
    font-weight: 600;
    cursor: pointer;
}

.btn-print[b-y05yxlld1l] {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
}

.order-header[b-y05yxlld1l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: 20px 30px;
    border-radius: 16px;
    margin-bottom: 25px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

    .order-header h1[b-y05yxlld1l] {
        margin: 0;
        color: #111827;
    }

.date[b-y05yxlld1l] {
    color: #6b7280;
    font-size: 14px;
}

.status-select[b-y05yxlld1l] {
    padding: 10px 20px;
    border-radius: 12px;
    border: 2px solid #eee;
    font-weight: bold;
    cursor: pointer;
}

.order-grid[b-y05yxlld1l] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 25px;
}

.items-card[b-y05yxlld1l], .info-card[b-y05yxlld1l] {
    background: #fff;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.info-sidebar[b-y05yxlld1l] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-card h3[b-y05yxlld1l] {
    margin-top: 0;
    border-bottom: 2px solid #f3f4f6;
    padding-bottom: 10px;
    color: #374151;
}

.phone-link[b-y05yxlld1l] {
    color: #059669;
    font-weight: bold;
    text-decoration: none;
}

/* ЧЕК-ЛИСТ ЗАКРІЙНИКА */
.items-list[b-y05yxlld1l] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 25px;
}

.item-row[b-y05yxlld1l] {
    display: flex;
    align-items: center;
    padding: 15px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fafafa;
    transition: all 0.2s;
    min-width: 0;
}

    .item-row.is-cut[b-y05yxlld1l] {
        background: #f0fdf4;
        border-color: #bbf7d0;
        opacity: 0.8;
    }

    /* Трішки затемняємо видалені товари */
    .item-row.is-deleted-item[b-y05yxlld1l] {
        background: #f9fafb;
        border-color: #f3f4f6;
    }

.item-color-indicator[b-y05yxlld1l] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 15px;
    border: 1px solid rgba(0,0,0,0.1);
    flex-shrink: 0;
}

.item-info[b-y05yxlld1l] {
    flex-grow: 1;
    min-width: 0;
}

.fabric-name[b-y05yxlld1l] {
    font-weight: bold;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.color-name[b-y05yxlld1l] {
    font-size: 13px;
    color: #6b7280;
}

.item-qty[b-y05yxlld1l] {
    font-size: 18px;
    width: 80px;
    text-align: center;
    background: #fff;
    padding: 5px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    margin-right: 15px;
}

.item-price[b-y05yxlld1l] {
    font-weight: bold;
    width: 90px;
    text-align: right;
    margin-right: 20px;
}

.btn-cut[b-y05yxlld1l] {
    background: #111827;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
}

.badge-cut[b-y05yxlld1l] {
    color: #166534;
    font-weight: bold;
    margin-right: 10px;
}

.btn-undo[b-y05yxlld1l] {
    background: #fee2e2;
    color: #991b1b;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.order-total[b-y05yxlld1l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 2px dashed #e5e7eb;
    padding-top: 20px;
}

    .order-total h2[b-y05yxlld1l] {
        margin: 0;
        color: #059669;
    }

/* МАГІЯ ДРУКУ */
@media print {
    .no-print[b-y05yxlld1l] {
        display: none !important;
    }

    body[b-y05yxlld1l] {
        background: white;
    }

    .order-grid[b-y05yxlld1l] {
        grid-template-columns: 1fr;
    }

    .items-card[b-y05yxlld1l], .info-card[b-y05yxlld1l] {
        box-shadow: none;
        border: 1px solid #000;
        break-inside: avoid;
    }

    .item-row[b-y05yxlld1l] {
        border: 1px solid #000;
    }
}

.btn-set-source[b-y05yxlld1l] {
    background: none;
    border: 1px dashed #d1d5db;
    color: #4b5563;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    margin-top: 5px;
}

    .btn-set-source:hover[b-y05yxlld1l] {
        background: #f3f4f6;
        color: #111827;
    }

.badge-supplier[b-y05yxlld1l] {
    display: inline-flex;
    align-items: center;
    background: #e0f2fe;
    color: #0369a1;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.btn-clear-source[b-y05yxlld1l] {
    background: none;
    border: none;
    color: #0369a1;
    margin-left: 5px;
    cursor: pointer;
    opacity: 0.7;
}

    .btn-clear-source:hover[b-y05yxlld1l] {
        opacity: 1;
        color: #991b1b;
    }

.alert-warning[b-y05yxlld1l] {
    background: #fffbeb;
    color: #b45309;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #fef3c7;
}

.offer-card[b-y05yxlld1l] {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.offer-info[b-y05yxlld1l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .offer-info strong[b-y05yxlld1l] {
        color: #111827;
    }

.offer-price[b-y05yxlld1l] {
    font-size: 13px;
    color: #6b7280;
}

.offer-margin[b-y05yxlld1l] {
    font-size: 13px;
    font-weight: 600;
}

.btn-select-source[b-y05yxlld1l] {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    transition: 0.2s;
}

    .btn-select-source:hover[b-y05yxlld1l] {
        background: #1a3c34;
        color: white;
        border-color: #1a3c34;
    }

.badge-own-stock[b-y05yxlld1l] {
    display: inline-flex;
    align-items: center;
    background: #f3f4f6;
    color: #4b5563;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

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

.ms-3[b-y05yxlld1l] {
    margin-left: 1rem;
}

.order-finance-summary[b-y05yxlld1l] {
    border-top: 2px dashed #e5e7eb;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.finance-row[b-y05yxlld1l] {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 400px;
    margin-bottom: 5px;
    font-size: 16px;
}

    .finance-row.profit-row[b-y05yxlld1l] {
        font-weight: 800;
        font-size: 20px;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid #f3f4f6;
    }

    .finance-row .val[b-y05yxlld1l] {
        color: #111827;
    }

        .finance-row .val.green[b-y05yxlld1l] {
            color: #059669;
        }

.finance-hint[b-y05yxlld1l] {
    color: #9ca3af;
    font-size: 11px;
    margin-top: 5px;
}

.badge-own-stock[b-y05yxlld1l] {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

@media (max-width: 1110px) {
    .order-details-page[b-y05yxlld1l] {
        padding: 10px;
    }

    .order-header[b-y05yxlld1l] {
        flex-direction: column;
        align-items: flex-start;
        padding: 15px;
        gap: 15px;
    }

    .order-grid[b-y05yxlld1l] {
        grid-template-columns: 1fr;
    }

    .item-row[b-y05yxlld1l] {
        flex-direction: column;
        align-items: stretch;
        padding: 15px;
        gap: 12px;
        position: relative;
    }

    .item-color-indicator[b-y05yxlld1l] {
        position: static;
        margin-bottom: 5px;
    }

    .item-info[b-y05yxlld1l] {
        width: 100%;
        padding-right: 0;
    }

    .item-qty[b-y05yxlld1l], .item-price[b-y05yxlld1l] {
        width: 100%;
        text-align: left;
        margin: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fdfdfd;
        padding: 8px 0;
        border-bottom: 1px solid #eee;
    }

        .item-qty[b-y05yxlld1l]::before {
            content: "Кількість:";
            font-size: 14px;
            color: #6b7280;
        }

        .item-price[b-y05yxlld1l]::before {
            content: "Сума:";
            font-size: 14px;
            color: #6b7280;
        }

    .item-action[b-y05yxlld1l] {
        width: 100%;
        margin: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 5px;
    }

    .btn-cut[b-y05yxlld1l], .badge-cut[b-y05yxlld1l] {
        flex-grow: 1;
        text-align: center;
        padding: 12px;
        font-size: 16px;
    }

    .btn-undo[b-y05yxlld1l] {
        position: static;
        margin-left: 15px;
        width: 44px;
        height: 44px;
        flex-shrink: 0;
    }

    .info-sidebar[b-y05yxlld1l] {
        order: -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    .finance-row[b-y05yxlld1l] {
        max-width: 100%;
    }
}

@media (max-width: 650px) {
    .info-sidebar[b-y05yxlld1l] {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   БЕЙДЖИ І ПЛАШКИ
   ========================================= */

.badge-type[b-y05yxlld1l] {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-left: 8px;
    vertical-align: middle;
}

.roll-badge[b-y05yxlld1l] {
    background: #1e3a8a;
    color: #fff;
    border: 1px solid #1e40af;
}

.cut-badge[b-y05yxlld1l] {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

/* 💥 НОВИЙ БЕЙДЖ ДЛЯ ВИДАЛЕНИХ ТОВАРІВ 💥 */
.badge-deleted[b-y05yxlld1l] {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
    margin-left: 5px;
}

.item-row.is-roll-row[b-y05yxlld1l] {
    border-left: 4px solid #1e3a8a;
}

    .item-row.is-roll-row.is-cut[b-y05yxlld1l] {
        border-left: 4px solid #166534;
    }
/* /Pages/Admin/AdminPanel.razor.rz.scp.css */
.admin-layout[b-4tpf8v2pd0] {
    display: flex;
    flex-direction: column;
    /*min-height: 100vh;*/
    padding: 20px;
    max-width: 1400px; /* Трохи розширив для таблиць */
    margin: 0 auto;
}

.admin-header[b-4tpf8v2pd0] {
    margin-bottom: 30px;
    background: #fff;
    position: sticky; /* Щоб таби не упливали при скролі таблиці */
    top: 0;
    z-index: 10;
    padding-top: 10px;
}

.header-top[b-4tpf8v2pd0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    /* Задаем фиксированную высоту, чтобы при появлении кнопки ничего не дергалось */
    min-height: 54px;
}
.admin-actions[b-4tpf8v2pd0] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* Резервируем место под кнопку по высоте */
    min-height: 54px;
    /* Если кнопок нет, блок всё равно будет занимать это место */
}
h1[b-4tpf8v2pd0] {
    font-size: 28px;
    font-weight: 850;
    color: #1a3c34;
    margin: 0;
    letter-spacing: -0.5px;
}

/* КНОПКА ДІЇ */
.btn-primary-action[b-4tpf8v2pd0] {
    margin: 0;
    background: #1a3c34;
    color: white;
    border: none;
    padding: 14px 24px;
    border-radius: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 15px rgba(26, 60, 52, 0.2);
}

    .btn-primary-action:hover[b-4tpf8v2pd0] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(26, 60, 52, 0.3);
    }

.plus-sign[b-4tpf8v2pd0] {
    font-size: 22px;
}

/* ЛОАДЕР ТА ЗАГЛУШКИ */
.admin-loader-container[b-4tpf8v2pd0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 0;
    color: #7a8a83;
}

.loader-spinner[b-4tpf8v2pd0] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #1a3c34;
    border-radius: 50%;
    animation: spin-b-4tpf8v2pd0 1s linear infinite;
    margin-bottom: 15px;
}

@keyframes spin-b-4tpf8v2pd0 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.tab-placeholder[b-4tpf8v2pd0] {
    padding: 60px;
    background: #f9fafb;
    border: 2px dashed #e5e7eb;
    border-radius: 24px;
    text-align: center;
    color: #9ca3af;
    font-size: 18px;
    font-weight: 500;
}

@media (max-width: 768px) {
    .header-top[b-4tpf8v2pd0] {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        min-height: auto;
    }

    .btn-primary-action[b-4tpf8v2pd0] {
        width: 100%;
        justify-content: center;
    }

    .admin-actions[b-4tpf8v2pd0] {
        width: 100%;
        min-height: auto;
    }
}
/* /Pages/Admin/FabricForm.razor.rz.scp.css */
/* Сюди просто скопіюй свій попередній CSS, він ідеально підходить для обох станів. 
   Нічого міняти не треба, я залишив ті ж самі класи. */

.page-container[b-p2m7zfoja0] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

.page-header[b-p2m7zfoja0] {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

    .page-header h2[b-p2m7zfoja0] {
        margin: 0;
        color: #1a3c34;
        font-size: 24px;
    }

.btn-back[b-p2m7zfoja0] {
    background: #f4f6f5;
    border: none;
    padding: 8px 15px;
    border-radius: 8px;
    color: #555;
    cursor: pointer;
    font-weight: 600;
    transition: 0.2s;
}

    .btn-back:hover[b-p2m7zfoja0] {
        background: #e0e5e3;
        color: #111;
    }

.form-card[b-p2m7zfoja0] {
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}

.form-grid[b-p2m7zfoja0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.form-column[b-p2m7zfoja0] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row[b-p2m7zfoja0] {
    display: flex;
    gap: 15px;
}

.half[b-p2m7zfoja0] {
    flex: 1;
}

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

.flex-grow[b-p2m7zfoja0] {
    flex-grow: 1;
}

label[b-p2m7zfoja0] {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.required[b-p2m7zfoja0] {
    color: #dc2626;
}

.form-control[b-p2m7zfoja0] {
    padding: 12px 15px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: #f9fafb;
}

    .form-control:focus[b-p2m7zfoja0] {
        border-color: #1a3c34;
        box-shadow: 0 0 0 3px rgba(26, 60, 52, 0.1);
        background: #fff;
    }

.textarea[b-p2m7zfoja0] {
    resize: vertical;
    min-height: 120px;
    flex-grow: 1;
}

.error-text[b-p2m7zfoja0] {
    color: #dc2626;
    font-size: 12px;
    font-weight: 500;
}

[b-p2m7zfoja0] .invalid {
    border-color: #fca5a5;
    background: #fef2f2;
}

[b-p2m7zfoja0] .modified.valid {
    border-color: #86efac;
}

.image-preview[b-p2m7zfoja0] {
    margin-top: 10px;
    width: 100%;
    height: 200px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #eee;
    background: #f4f6f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .image-preview img[b-p2m7zfoja0] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.form-actions[b-p2m7zfoja0] {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 15px;
}

.btn-cancel[b-p2m7zfoja0] {
    background: #fff;
    border: 1.5px solid #e5e7eb;
    color: #4b5563;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

    .btn-cancel:hover[b-p2m7zfoja0] {
        background: #f3f4f6;
    }

.btn-submit[b-p2m7zfoja0] {
    background: #1a3c34;
    color: #fff;
    border: none;
    padding: 12px 30px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

    .btn-submit:hover:not(:disabled)[b-p2m7zfoja0] {
        background: #122b25;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(26, 60, 52, 0.2);
    }

    .btn-submit:disabled[b-p2m7zfoja0] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.alert-success[b-p2m7zfoja0] {
    background: #dcfce7;
    color: #166534;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 25px;
    font-weight: 600;
    text-align: center;
}

/* Блок атрибутів (з твого Edit) */
.attributes-section[b-p2m7zfoja0] {
    margin-top: 30px;
    border-top: 1px solid #eee;
    padding-top: 20px;
}

.attributes-header[b-p2m7zfoja0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

    .attributes-header h3[b-p2m7zfoja0] {
        margin: 0;
        font-size: 18px;
        color: #1a3c34;
    }

.btn-secondary-action[b-p2m7zfoja0] {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
    padding: 8px 15px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

    .btn-secondary-action:hover[b-p2m7zfoja0] {
        background: #dcfce7;
    }

.attribute-row[b-p2m7zfoja0] {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    margin-bottom: 10px;
}

.attr-name[b-p2m7zfoja0] {
    flex: 1;
}

.attr-value[b-p2m7zfoja0] {
    flex: 2;
}

.action-btn.delete[b-p2m7zfoja0] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
    margin-top: 2px;
}

    .action-btn.delete:hover[b-p2m7zfoja0] {
        background: #fee2e2;
        transform: scale(1.05);
    }

@media (max-width: 768px) {
    .form-grid[b-p2m7zfoja0] {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .form-row[b-p2m7zfoja0], .attribute-row[b-p2m7zfoja0] {
        flex-direction: column;
    }

    .action-btn.delete[b-p2m7zfoja0] {
        width: 100%;
        margin-top: 0;
    }

    .form-actions[b-p2m7zfoja0] {
        flex-direction: column-reverse;
    }

    .btn-cancel[b-p2m7zfoja0], .btn-submit[b-p2m7zfoja0] {
        width: 100%;
        text-align: center;
    }
}

[b-p2m7zfoja0] .form-control {
    width: 100%;
    display: block;
    box-sizing: border-box;
    padding: 14px 16px;
    border: 1.5px solid #e0e0e0;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background-color: #fafafa;
}

    [b-p2m7zfoja0] .form-control:focus {
        outline: none;
        border-color: #1a3c34;
        background-color: #ffffff;
        box-shadow: 0 0 0 4px rgba(26, 60, 52, 0.1);
    }

/* --- СЕКЦІЯ ГАЛЕРЕЇ --- */
.gallery-section[b-p2m7zfoja0] {
    background: #fff;
    border-radius: 16px;
    padding: 25px;
    border: 1px solid #eef2f6;
}

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

    .section-header h3[b-p2m7zfoja0] {
        margin: 0;
        font-size: 1.1rem;
        color: #1a3c34;
    }

.gallery-grid[b-p2m7zfoja0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 15px;
    min-height: 100px;
}

.gallery-item[b-p2m7zfoja0] {
    position: relative;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    transition: transform 0.2s;
}

    .gallery-item:hover[b-p2m7zfoja0] {
        transform: scale(1.02);
    }

    .gallery-item img[b-p2m7zfoja0] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.btn-remove-photo[b-p2m7zfoja0] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.9);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: 0.2s;
}

    .btn-remove-photo:hover[b-p2m7zfoja0] {
        background: #ef4444;
        transform: scale(1.1);
    }

.empty-gallery[b-p2m7zfoja0] {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    border: 2px dashed #e2e8f0;
    border-radius: 12px;
    color: #94a3b8;
    font-size: 0.9rem;
}

/* Кнопка завантаження */
.btn-upload-label[b-p2m7zfoja0] {
    background: #f1f5f9;
    padding: 10px 15px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    color: #475569;
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid #e2e8f0;
}

.upload-wrapper[b-p2m7zfoja0] {
    display: flex;
    gap: 10px;
}

.form-actions[b-p2m7zfoja0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.main-actions[b-p2m7zfoja0] {
    display: flex;
    gap: 10px;
}

.alert-danger[b-p2m7zfoja0] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    padding: 12px 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.close-error[b-p2m7zfoja0] {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 18px;
}
/* /Pages/Admin/FabricVariantsManage.razor.rz.scp.css */
.page-container[b-3rawdhfbct] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.page-header[b-3rawdhfbct] {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.btn-back[b-3rawdhfbct] {
    background: #f4f6f5;
    border: none;
    padding: 10px 15px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}

    .btn-back:hover[b-3rawdhfbct] {
        background: #e0e5e3;
    }

.variants-layout[b-3rawdhfbct] {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.side-form[b-3rawdhfbct] {
    flex: 0 0 350px;
    background: #fff;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.variants-list[b-3rawdhfbct] {
    flex-grow: 1;
    background: #fff;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.form-group[b-3rawdhfbct] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 15px;
}

.form-row[b-3rawdhfbct] {
    display: flex;
    gap: 10px;
}

.half[b-3rawdhfbct] {
    flex: 1;
}

[b-3rawdhfbct] .form-control {
    width: 100%;
    display: block;
    box-sizing: border-box;
    padding: 14px 16px;
    border: 1.5px solid #e0e0e0;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background-color: #fafafa;
}

    [b-3rawdhfbct] .form-control:focus {
        outline: none;
        border-color: #1a3c34;
        background-color: #ffffff;
        box-shadow: 0 0 0 4px rgba(26, 60, 52, 0.1);
    }

[b-3rawdhfbct] .password-input-wrapper .form-control {
    padding-right: 45px;
}

.btn-submit.full-width[b-3rawdhfbct] {
    width: 100%;
    padding: 12px;
    background: #1a3c34;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
}

.variant-cards[b-3rawdhfbct] {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.variant-card[b-3rawdhfbct] {
    display: flex;
    align-items: center;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 10px;
    gap: 15px;
    transition: all 0.2s ease;
}

    /* 💥 СТИЛІ ДЛЯ ПРИХОВАНОГО ТОВАРУ 💥 */
    .variant-card.is-hidden-variant[b-3rawdhfbct] {
        opacity: 0.6;
        border-color: #fcd34d !important;
        background-color: #fffbeb !important;
    }

.badge-hidden[b-3rawdhfbct] {
    background: #fef3c7;
    color: #b45309;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    margin-left: 10px;
    border: 1px solid #fde68a;
    font-weight: bold;
}

.variant-color-preview[b-3rawdhfbct] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #ddd;
}

.variant-info[b-3rawdhfbct] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .variant-info h4[b-3rawdhfbct] {
        margin: 0;
        font-size: 16px;
    }

.variant-sku[b-3rawdhfbct] {
    font-family: monospace;
    color: #888;
    font-size: 13px;
}

.variant-stats[b-3rawdhfbct] {
    display: flex;
    gap: 15px;
    font-size: 13px;
    font-weight: bold;
}

.stock.low[b-3rawdhfbct] {
    color: #dc2626;
}

.action-btn[b-3rawdhfbct] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    opacity: 0.6;
    transition: 0.2s;
}

    .action-btn:hover[b-3rawdhfbct] {
        opacity: 1;
        transform: scale(1.1);
    }

    .action-btn.edit:hover[b-3rawdhfbct] {
        color: #4278b8;
    }

    .action-btn.delete:hover[b-3rawdhfbct] {
        color: red;
    }

.form-card.editing-mode[b-3rawdhfbct] {
    border: 2px solid #4278b8;
    background-color: #f0f7ff;
}

.form-group-checkbox[b-3rawdhfbct] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    cursor: pointer;
}

    .form-group-checkbox input[b-3rawdhfbct] {
        width: 20px;
        height: 20px;
        cursor: pointer;
    }

    .form-group-checkbox label[b-3rawdhfbct] {
        margin: 0;
        font-weight: 600;
        cursor: pointer;
    }

.form-actions-stack[b-3rawdhfbct] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-edit-save[b-3rawdhfbct] {
    background-color: #4278b8 !important;
}

.btn-cancel-edit[b-3rawdhfbct] {
    background: #eee;
    border: none;
    padding: 10px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    color: #555;
}

    .btn-cancel-edit:hover[b-3rawdhfbct] {
        background: #ddd;
    }

.variant-card.is-being-edited[b-3rawdhfbct] {
    border-color: #4278b8;
    background-color: #f0f7ff;
    box-shadow: 0 0 0 3px rgba(66, 120, 184, 0.1);
}

.card-actions-row[b-3rawdhfbct] {
    display: flex;
    gap: 10px;
}

.inf-icon[b-3rawdhfbct] {
    font-size: 18px;
    margin-left: 5px;
    vertical-align: middle;
}

.btn-secondary-action[b-3rawdhfbct] {
    background: #f0fdf4;
    color: #166534;
    border: 1.5px solid #bbf7d0;
    transition: 0.2s;
    font-size: 1.2rem;
}

    .btn-secondary-action:hover[b-3rawdhfbct] {
        background: #dcfce7;
        border-color: #86efac;
    }

.spinner-mini[b-3rawdhfbct] {
    width: 18px;
    height: 18px;
    border: 2px solid #166534;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin-b-3rawdhfbct 0.8s linear infinite;
}

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

.alert-danger[b-3rawdhfbct] {
    background: #fee2e2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.variant-img-box[b-3rawdhfbct] {
    flex-shrink: 0;
}

.purchase-hint[b-3rawdhfbct] {
    background: #f0fdf4;
    border-radius: 8px;
    border: 1px solid #bbf7d0;
}

@media (max-width: 768px) {
    .variants-layout[b-3rawdhfbct] {
        flex-direction: column;
    }

    .side-form[b-3rawdhfbct] {
        flex: 1;
        width: 100%;
    }
}
/* /Pages/Admin/RollsManagement.razor.rz.scp.css */
.rolls-container[b-qu6cpnu4ww] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

.page-header[b-qu6cpnu4ww] {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.back-btn[b-qu6cpnu4ww] {
    background: #f3f4f6;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
}

    .back-btn:hover[b-qu6cpnu4ww] {
        background: #e5e7eb;
    }

.header-titles h1[b-qu6cpnu4ww] {
    margin: 0;
    font-size: 24px;
    color: #111827;
}

.header-titles p[b-qu6cpnu4ww] {
    margin: 5px 0 0;
    color: #6b7280;
}

/* Секції варіантів */
.variant-section[b-qu6cpnu4ww] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 25px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.variant-header[b-qu6cpnu4ww] {
    background: #f9fafb;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e5e7eb;
}

.variant-info[b-qu6cpnu4ww] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.color-dot[b-qu6cpnu4ww] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.1);
}

.variant-header h3[b-qu6cpnu4ww] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.stock-summary[b-qu6cpnu4ww] {
    font-size: 14px;
    color: #374151;
}

/* Форма додавання */
.add-roll-form[b-qu6cpnu4ww] {
    padding: 15px 20px;
    display: flex;
    gap: 10px;
    background: #fff;
    border-bottom: 1px dashed #eee;
}

    .add-roll-form input[b-qu6cpnu4ww] {
        padding: 8px 12px;
        border: 1px solid #d1d5db;
        border-radius: 6px;
    }

        .add-roll-form input[type="text"][b-qu6cpnu4ww] {
            flex: 2;
        }

        .add-roll-form input[type="number"][b-qu6cpnu4ww] {
            flex: 1;
        }

.btn-add[b-qu6cpnu4ww] {
    background: #10b981;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
}

    .btn-add:hover[b-qu6cpnu4ww] {
        background: #059669;
    }

/* Таблиця рулонів */
.rolls-table-wrapper[b-qu6cpnu4ww] {
    padding: 0;
}

.empty-msg[b-qu6cpnu4ww] {
    padding: 20px;
    text-align: center;
    color: #9ca3af;
    font-style: italic;
}

.rolls-table[b-qu6cpnu4ww] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .rolls-table th[b-qu6cpnu4ww] {
        text-align: left;
        padding: 12px 20px;
        background: #fdfdfd;
        color: #6b7280;
        font-weight: 500;
        border-bottom: 1px solid #f3f4f6;
    }

    .rolls-table td[b-qu6cpnu4ww] {
        padding: 12px 20px;
        border-bottom: 1px solid #f3f4f6;
    }

.row-sold[b-qu6cpnu4ww] {
    background-color: #f9fafb;
    opacity: 0.7;
}

.status-badge[b-qu6cpnu4ww] {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

    .status-badge.active[b-qu6cpnu4ww] {
        background: #dcfce7;
        color: #166534;
    }

    .status-badge.sold[b-qu6cpnu4ww] {
        background: #f3f4f6;
        color: #4b5563;
    }

.table-actions[b-qu6cpnu4ww] {
    display: flex;
    gap: 8px;
}

.btn-toggle[b-qu6cpnu4ww], .btn-delete[b-qu6cpnu4ww] {
    background: none;
    border: 1px solid #e5e7eb;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-toggle:hover[b-qu6cpnu4ww] {
        background: #f3f4f6;
    }

    .btn-delete:hover[b-qu6cpnu4ww] {
        background: #fee2e2;
        color: #dc2626;
        border-color: #fca5a5;
    }

.loading-state[b-qu6cpnu4ww], .error-state[b-qu6cpnu4ww] {
    text-align: center;
    padding: 50px;
    color: #6b7280;
}
.wholesale-price-edit[b-qu6cpnu4ww] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    padding: 5px 12px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

    .wholesale-price-edit label[b-qu6cpnu4ww] {
        font-size: 12px;
        color: #64748b;
        font-weight: 600;
    }

.mini-input[b-qu6cpnu4ww] {
    width: 80px;
    padding: 4px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-weight: bold;
    color: #1a3c34;
}

.btn-save-price[b-qu6cpnu4ww] {
    background: #1a3c34;
    border: none;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.1s;
}

    .btn-save-price:active[b-qu6cpnu4ww] {
        transform: scale(0.9);
    }
/* /Pages/Admin/Tabs/AdminTabs.razor.rz.scp.css */
/* ТАБИ (КОМП'ЮТЕР) */
.admin-tabs-container[b-lulpi9nec2] {
    overflow-x: auto; /* Чтобы табы можно было скроллить на телефоне, если их много */
    padding-bottom: 5px; /* Место под скроллбар */
}

.admin-tabs[b-lulpi9nec2] {
    display: flex;
    gap: 10px;
    background: #f4f6f5;
    padding: 6px;
    border-radius: 12px;
    width: max-content; /* Чтобы фон тянулся за всеми табами */
}

.tab-btn[b-lulpi9nec2] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: none;
    background: transparent;
    border-radius: 10px;
    font-weight: 600;
    color: #7a8a83;
    cursor: pointer;
    transition: all 0.2s;
}

    .tab-btn.active[b-lulpi9nec2] {
        background: #ffffff;
        color: #1a3c34;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }

.icon-wrapper[b-lulpi9nec2] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tab-badge[b-lulpi9nec2] {
    position: absolute;
    top: -8px;
    right: -10px;
    background: #e74c3c;
    color: white;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 8px;
}

/* МОБІЛЬНА ВЕРСІЯ */
@media (max-width: 768px) {
    .tab-btn[b-lulpi9nec2] {
        flex-direction: column;
        padding: 10px 15px; /* Сделал чуть шире, чтобы не слипались */
        gap: 4px;
    }

    .tab-text[b-lulpi9nec2] {
        font-size: 10px;
        text-transform: uppercase;
    }

    .tab-icon[b-lulpi9nec2] {
        font-size: 20px;
    }
}
/* /Pages/Admin/Tabs/ContentTabs.razor.rz.scp.css */
.content-section[b-kuv69dcwy3] {
    background: white;
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.categories-admin-grid[b-kuv69dcwy3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.cat-admin-card[b-kuv69dcwy3] {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 15px;
    display: flex;
    gap: 15px;
    background: #f8fafc;
}

.cat-preview[b-kuv69dcwy3] {
    flex-shrink: 0;
}

.cat-icon-wrapper[b-kuv69dcwy3] {
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    color: #1a3c34;
}

    .cat-icon-wrapper svg[b-kuv69dcwy3] {
        width: 30px;
        height: 30px;
    }

.cat-details[b-kuv69dcwy3] {
    flex-grow: 1;
}

    .cat-details input[b-kuv69dcwy3], .cat-details textarea[b-kuv69dcwy3] {
        width: 100%;
        font-size: 0.9rem;
    }

.code-font[b-kuv69dcwy3] {
    font-family: monospace;
    font-size: 0.8rem !important;
    background: #1e293b;
    color: #a5b4fc;
}

.cat-actions[b-kuv69dcwy3] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sort-input[b-kuv69dcwy3] {
    width: 60px !important;
}

.btn-danger-icon[b-kuv69dcwy3] {
    background: #fee2e2;
    border: none;
    border-radius: 8px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}
/* /Pages/Admin/Tabs/OrdersTab.razor.rz.scp.css */
.orders-container[b-ibjr08rems] {
    background: #fff;
    border-radius: 24px;
    padding: 25px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
}

.tab-header[b-ibjr08rems] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 25px;
}

.header-info h2[b-ibjr08rems] {
    margin: 0 0 8px 0;
    color: #1a3c34;
}

.status-summary[b-ibjr08rems] {
    display: flex;
    gap: 15px;
    font-size: 14px;
    color: #7a8a83;
}

.status-select[b-ibjr08rems] {
    padding: 10px 15px;
    border-radius: 12px;
    border: 1.5px solid #eee;
    outline: none;
    background: #f9fafb;
}

/* СТИЛІ СТАТУСІВ (Badges всередині select) */
.status-badge[b-ibjr08rems] {
    padding: 6px 12px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 13px;
    border: none;
    cursor: pointer;
    appearance: none; /* Прибираємо дефолтну стрілочку */
    text-align: center;
}

    .status-badge.new[b-ibjr08rems] {
        background: #e0f2fe;
        color: #0369a1;
    }

    .status-badge.processing[b-ibjr08rems] {
        background: #fef3c7;
        color: #92400e;
    }

    .status-badge.shipped[b-ibjr08rems] {
        background: #f0fdf4;
        color: #166534;
    }

    .status-badge.completed[b-ibjr08rems] {
        background: #f3f4f6;
        color: #374151;
    }

    .status-badge.cancelled[b-ibjr08rems] {
        background: #fee2e2;
        color: #991b1b;
    }

/* ТАБЛИЦЯ */
.admin-table[b-ibjr08rems] {
    width: 100%;
    border-collapse: collapse;
}

    .admin-table th[b-ibjr08rems] {
        text-align: left;
        padding: 15px;
        color: #9ca3af;
        font-size: 12px;
        text-transform: uppercase;
        border-bottom: 1px solid #f3f4f6;
    }

.order-row:hover[b-ibjr08rems] {
    background: #fafafa;
}

.client-info[b-ibjr08rems] {
    display: flex;
    flex-direction: column;
}

.client-email[b-ibjr08rems] {
    font-weight: 600;
    color: #111827;
}

.client-phone[b-ibjr08rems] {
    font-size: 12px;
    color: #6b7280;
}

.order-total[b-ibjr08rems] {
    font-weight: 800;
    color: #1a3c34;
}

.order-id[b-ibjr08rems] {
    font-family: monospace;
    font-weight: bold;
    color: #4278b8;
}

.action-buttons[b-ibjr08rems] {
    display: flex;
    gap: 8px;
}

.btn-icon[b-ibjr08rems] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: none;
    background: #f3f4f6;
    cursor: pointer;
    transition: 0.2s;
}

    .btn-icon:hover[b-ibjr08rems] {
        background: #e5e7eb;
        transform: scale(1.05);
    }

    .btn-icon.copy:hover[b-ibjr08rems] {
        background: #e0f2fe;
        color: #0369a1;
    }

/* --- ЛЕНИВЫЙ СКРОЛЛ ДЛЯ ТАБЛИЦЫ ЗАКАЗОВ --- */
.table-responsive[b-ibjr08rems] {
    width: 100%;
    overflow-x: auto; /* Включаем горизонтальный скролл */
    -webkit-overflow-scrolling: touch; /* Плавный скролл для iOS */
    margin-bottom: 20px;
    /* Тень, чтобы показать, что там дальше есть контент */
    box-shadow: inset -10px 0 10px -10px rgba(0,0,0,0.1);
}

/* 💥 ВАЖНО: Чтобы таблица реально скроллилась, а не сжималась в кашу, 
   запрещаем перенос текста в ячейках на мобилках */
@media (max-width: 768px) {
    .admin-table th[b-ibjr08rems],
    .admin-table td[b-ibjr08rems] {
        white-space: nowrap;
    }

    /* Немного увеличим отступы между колонками, чтобы не слипалось при скролле */
    .admin-table td[b-ibjr08rems] {
        padding-right: 25px;
    }
}
/* /Pages/Admin/Tabs/ReferenceTab.razor.rz.scp.css */
.reference-layout[b-p28gl6b1lj] {
    display: flex;
    gap: 30px;
    background: #ffffff;
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    min-height: 500px;
}

/* --- САЙДБАР --- */
.reference-sidebar[b-p28gl6b1lj] {
    width: 250px;
    flex-shrink: 0;
    border-right: 1px solid #f0f0f0;
    padding-right: 20px;
}

    .reference-sidebar h3[b-p28gl6b1lj] {
        margin-top: 0;
        color: #1a3c34;
        font-size: 18px;
        margin-bottom: 20px;
    }

.ref-nav[b-p28gl6b1lj] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .ref-nav button[b-p28gl6b1lj] {
        text-align: left;
        padding: 12px 15px;
        border: none;
        background: transparent;
        border-radius: 10px;
        font-size: 15px;
        font-weight: 600;
        color: #555;
        cursor: pointer;
        transition: all 0.2s;
    }

        .ref-nav button:hover[b-p28gl6b1lj] {
            background: #f4f6f5;
            color: #1a3c34;
        }

        .ref-nav button.active[b-p28gl6b1lj] {
            background: #1a3c34;
            color: #ffffff;
        }

/* --- КОНТЕНТ --- */
.reference-content[b-p28gl6b1lj] {
    flex-grow: 1;
}

.ref-header[b-p28gl6b1lj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

    .ref-header h2[b-p28gl6b1lj] {
        margin: 0;
        font-size: 22px;
        color: #333;
    }

.btn-secondary-action[b-p28gl6b1lj] {
    background: #f4f6f5;
    color: #1a3c34;
    border: 1px solid #e0e5e3;
    padding: 10px 15px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-secondary-action:hover[b-p28gl6b1lj] {
        background: #e0e5e3;
    }

/* --- КАРТКИ КОЛЬОРІВ --- */
.color-cards-grid[b-p28gl6b1lj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.color-card[b-p28gl6b1lj] {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    display: flex;
    flex-direction: column;
}

    .color-card:hover[b-p28gl6b1lj] {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    }

.is-editing-card[b-p28gl6b1lj] {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.color-preview[b-p28gl6b1lj] {
    height: 100px;
    display: flex;
    align-items: flex-start;
    padding: 10px;
    position: relative;
    gap: 10px;
    display: flex;
    flex-direction: column;
}

.color-id[b-p28gl6b1lj] {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: bold;
    color: #333;
}

.color-info[b-p28gl6b1lj] {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.color-name[b-p28gl6b1lj] {
    font-weight: 700;
    font-size: 16px;
    color: #1a3c34;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.color-hex[b-p28gl6b1lj] {
    font-family: monospace;
    color: #888;
    background: #ffffff;
    padding: 3px;
    font-size: 11px;
    border-radius: 15px;
}

.color-actions[b-p28gl6b1lj] {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid #f9f9f9;
    padding-top: 10px;
}

.action-btn[b-p28gl6b1lj] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    opacity: 0.6;
    transition: 0.2s;
}

    .action-btn:hover[b-p28gl6b1lj] {
        opacity: 1;
        transform: scale(1.1);
    }

    .action-btn.edit:hover[b-p28gl6b1lj] {
        color: #3b82f6;
    }

    .action-btn.delete:hover[b-p28gl6b1lj] {
        color: #ef4444;
    }


/* --- ІНЛАЙН ФОРМА ДОДАВАННЯ/РЕДАГУВАННЯ --- */
.inline-add-form[b-p28gl6b1lj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: #f9fafb;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 25px;
    border: 1px solid #eee;
    animation: slideDown-b-p28gl6b1lj 0.3s ease-out;
}

.editing-mode[b-p28gl6b1lj] {
    border-color: #3b82f6;
    background: #f0f7ff;
}

@keyframes slideDown-b-p28gl6b1lj {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.inline-add-form .form-control[b-p28gl6b1lj] {
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    outline: none;
    font-size: 15px;
}

.color-picker-wrapper[b-p28gl6b1lj] {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.color-picker-input[b-p28gl6b1lj] {
    -webkit-appearance: none;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 5px;
    cursor: pointer;
    padding: 0;
    background: transparent;
}

    .color-picker-input[b-p28gl6b1lj]::-webkit-color-swatch-wrapper {
        padding: 0;
    }

    .color-picker-input[b-p28gl6b1lj]::-webkit-color-swatch {
        border: none;
        border-radius: 5px;
    }

.hex-manual-input[b-p28gl6b1lj] {
    border: none;
    outline: none;
    width: 80px;
    padding: 5px 10px;
    font-family: monospace;
    font-weight: 600;
    color: #555;
    background: transparent;
    text-transform: uppercase;
}

.inline-add-form .btn-submit[b-p28gl6b1lj] {
    background: #1a3c34;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
}

    .inline-add-form .btn-submit:disabled[b-p28gl6b1lj] {
        opacity: 0.5;
    }

/* Адаптив */
@media (max-width: 768px) {
    .reference-layout[b-p28gl6b1lj] {
        flex-direction: column;
    }

    .reference-sidebar[b-p28gl6b1lj] {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #f0f0f0;
        padding-right: 0;
        padding-bottom: 20px;
    }

    .ref-nav[b-p28gl6b1lj] {
        flex-direction: row;
        overflow-x: auto;
    }

    .inline-add-form > div[b-p28gl6b1lj] {
        flex-direction: column;
        align-items: stretch;
    }

    .color-picker-wrapper[b-p28gl6b1lj] {
        justify-content: flex-start;
    }
}
/* /Pages/Admin/Tabs/StockTab.razor.rz.scp.css */
.stock-container[b-si4yw8kzf2] {
    background: #fff;
    border-radius: 20px;
    padding: 25px;
}

.tab-header[b-si4yw8kzf2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.search-input[b-si4yw8kzf2] {
    padding: 10px 15px;
    border: 1px solid #eee;
    border-radius: 10px;
    width: 250px;
}

.stock-grid[b-si4yw8kzf2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.stock-card[b-si4yw8kzf2] {
    border: 1px solid #f0f0f0;
    border-radius: 15px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .stock-card:hover[b-si4yw8kzf2] {
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }

.card-image[b-si4yw8kzf2] {
    height: 150px;
    background: #f9f9f9;
}

    .card-image img[b-si4yw8kzf2] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.card-content[b-si4yw8kzf2] {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.fabric-title[b-si4yw8kzf2] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

    .fabric-title h3[b-si4yw8kzf2] {
        margin: 0;
        font-size: 18px;
        color: #333;
    }

.badge-featured[b-si4yw8kzf2] {
    background: #fef3c7;
    color: #92400e;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: bold;
}

.fabric-stats[b-si4yw8kzf2] {
    background: #f9fafb;
    padding: 10px;
    border-radius: 10px;
    font-size: 13px;
}

.stat-item[b-si4yw8kzf2] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

    .stat-item:last-child[b-si4yw8kzf2] {
        margin-bottom: 0;
    }

.stat-label[b-si4yw8kzf2] {
    color: #666;
}

.text-danger[b-si4yw8kzf2] {
    color: #dc2626;
}

.text-success[b-si4yw8kzf2] {
    color: #166534;
}

.card-actions[b-si4yw8kzf2] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    border-top: 1px solid #eee;
    padding-top: 12px;
}

.action-btn[b-si4yw8kzf2] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    opacity: 0.6;
    transition: opacity 0.2s, transform 0.1s;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .action-btn:hover[b-si4yw8kzf2] {
        opacity: 1;
        transform: scale(1.15);
    }

    .action-btn.variants[b-si4yw8kzf2] {
        margin-right: auto;
    }

    .action-btn.rolls:hover[b-si4yw8kzf2] {
        color: #3b82f6;
    }

    .action-btn.edit:hover[b-si4yw8kzf2] {
        color: #f59e0b;
    }

    .action-btn.delete:hover[b-si4yw8kzf2] {
        color: #dc2626;
    }
/* /Pages/Admin/Tabs/SuppliersTab.razor.rz.scp.css */
.suppliers-container[b-rqc3pcplde] {
    background: #fff;
    border-radius: 24px;
    padding: 25px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
    position: relative;
}

.tab-header[b-rqc3pcplde] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    gap: 15px;
}

.header-info h2[b-rqc3pcplde] {
    margin: 0 0 5px 0;
    color: #1a3c34;
}

.text-muted[b-rqc3pcplde] {
    color: #6b7280;
    font-size: 14px;
    margin: 0;
}

.btn-primary-action[b-rqc3pcplde] {
    background: #1a3c34;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

    .btn-primary-action:hover[b-rqc3pcplde] {
        background: #235247;
    }

/* Таблиця */
.table-responsive[b-rqc3pcplde] {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.admin-table[b-rqc3pcplde] {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px; /* Гарантуємо, що вона не стиснеться в кашу */
}

    .admin-table th[b-rqc3pcplde] {
        text-align: left;
        padding: 15px;
        color: #9ca3af;
        font-size: 12px;
        text-transform: uppercase;
        border-bottom: 1px solid #f3f4f6;
    }

    .admin-table td[b-rqc3pcplde] {
        padding: 15px;
        border-bottom: 1px solid #f9fafb;
        vertical-align: middle;
    }

.supplier-row:hover[b-rqc3pcplde] {
    background: #fafafa;
}

.fw-bold[b-rqc3pcplde] {
    font-weight: 600;
    color: #111827;
}

.phone-link[b-rqc3pcplde] {
    color: #059669;
    text-decoration: none;
    font-weight: 500;
}

    .phone-link:hover[b-rqc3pcplde] {
        text-decoration: underline;
    }

.truncate-text[b-rqc3pcplde] {
    display: inline-block;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Кнопки дій */
.action-buttons[b-rqc3pcplde] {
    display: flex;
    gap: 8px;
}

.btn-icon[b-rqc3pcplde] {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn-icon.price[b-rqc3pcplde] {
        background: #fffbeb;
        color: #d97706;
        border: 1px solid #fde68a;
    }

        .btn-icon.price:hover[b-rqc3pcplde] {
            background: #fde68a;
        }

    .btn-icon.edit[b-rqc3pcplde] {
        background: #f0f9ff;
        border: 1px solid #bae6fd;
    }

        .btn-icon.edit:hover[b-rqc3pcplde] {
            background: #e0f2fe;
        }

    .btn-icon.delete[b-rqc3pcplde] {
        background: #fef2f2;
        border: 1px solid #fecaca;
    }

        .btn-icon.delete:hover[b-rqc3pcplde] {
            background: #fee2e2;
        }

/* БОКОВА ПАНЕЛЬ ФОРМИ */
.modal-backdrop[b-rqc3pcplde] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    /*height: 100vh;*/
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(2px);
    z-index: 1000;
}

.supplier-form-panel[b-rqc3pcplde] {
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    /*height: 100vh;*/
    background: #fff;
    box-shadow: -5px 0 25px rgba(0,0,0,0.1);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    animation: slideIn-b-rqc3pcplde 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideIn-b-rqc3pcplde {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

.panel-header[b-rqc3pcplde] {
    padding: 20px 25px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
}

    .panel-header h3[b-rqc3pcplde] {
        margin: 0;
        color: #1a3c34;
        font-size: 18px;
    }

.btn-close[b-rqc3pcplde] {
    background: #e2e8f0;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 14px;
    font-weight: bold;
    color: #475569;
    cursor: pointer;
    transition: background 0.2s;
}

    .btn-close:hover[b-rqc3pcplde] {
        background: #cbd5e1;
        color: #1e293b;
    }

.panel-body[b-rqc3pcplde] {
    padding: 25px;
    overflow-y: auto;
    flex-grow: 1;
}

.form-group[b-rqc3pcplde] {
    margin-bottom: 20px;
}

    .form-group label[b-rqc3pcplde] {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
        font-size: 13px;
        color: #475569;
    }

        .form-group label .req[b-rqc3pcplde] {
            color: #ef4444;
        }

.form-control[b-rqc3pcplde] {
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    font-family: inherit;
    font-size: 14px;
    transition: all 0.2s;
    background: #f8fafc;
}

    .form-control:focus[b-rqc3pcplde] {
        outline: none;
        border-color: #1a3c34;
        background: #fff;
    }

.panel-footer[b-rqc3pcplde] {
    padding: 20px 25px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: #fff;
}

.btn-cancel[b-rqc3pcplde] {
    background: #f1f5f9;
    color: #475569;
    border: none;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

    .btn-cancel:hover[b-rqc3pcplde] {
        background: #e2e8f0;
    }

.btn-save[b-rqc3pcplde] {
    background: #1a3c34;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

    .btn-save:hover:not(:disabled)[b-rqc3pcplde] {
        background: #235247;
        transform: translateY(-1px);
    }

    .btn-save:disabled[b-rqc3pcplde] {
        background: #94a3b8;
        cursor: not-allowed;
    }

/* Модалка для прайсів */
.wide-panel[b-rqc3pcplde] {
    width: 850px !important;
}

/* 💥 РОЗУМНА МАТРИЦЯ ЦІН 💥 */
.matrix-box[b-rqc3pcplde] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.matrix-toolbar[b-rqc3pcplde] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
    padding: 15px;
    border-radius: 12px;
    border: 1px dashed #cbd5e1;
    gap: 15px;
}

.toolbar-inputs[b-rqc3pcplde] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

    .toolbar-inputs .form-control[b-rqc3pcplde] {
        width: 140px;
        background: #fff;
    }

.toolbar-actions[b-rqc3pcplde] {
    display: flex;
    gap: 10px;
}

.btn-secondary[b-rqc3pcplde] {
    background: #1a3c34;
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
}

    .btn-secondary.outline[b-rqc3pcplde] {
        background: white;
        color: #475569;
        border: 1px solid #cbd5e1;
    }

/* Сітка матриці */
.matrix-grid[b-rqc3pcplde] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 450px;
    overflow-y: auto;
    padding-right: 5px;
}

.matrix-header-row[b-rqc3pcplde] {
    display: flex;
    padding: 0 12px 10px 12px;
    border-bottom: 2px solid #f1f5f9;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.matrix-row[b-rqc3pcplde] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 12px;
    transition: all 0.2s;
    gap: 10px;
}

    .matrix-row:hover[b-rqc3pcplde] {
        border-color: #cbd5e1;
        background: #f8fafc;
    }

    .matrix-row.excluded[b-rqc3pcplde] {
        opacity: 0.6;
        background: #f8fafc;
        filter: grayscale(50%);
    }

    .matrix-row.out-of-stock[b-rqc3pcplde] {
        background: #fff1f2;
        border-color: #fecdd3;
    }

.col-check[b-rqc3pcplde] {
    width: 40px;
    display: flex;
    justify-content: center;
}

.col-color[b-rqc3pcplde] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 150px;
}

.col-status[b-rqc3pcplde] {
    width: 120px;
    display: flex;
    justify-content: center;
}

.col-price[b-rqc3pcplde] {
    width: 140px;
    display: flex;
    justify-content: center;
}

.big-checkbox[b-rqc3pcplde] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #1a3c34;
}

.color-dot[b-rqc3pcplde] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.15);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    flex-shrink: 0;
}

.color-name[b-rqc3pcplde] {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.wholesale-tiny-badge[b-rqc3pcplde] {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #fde68a;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 6px;
    font-weight: bold;
}

.locked-price-badge[b-rqc3pcplde] {
    background: #f1f5f9;
    color: #94a3b8;
    border: 1px dashed #cbd5e1;
    font-size: 12px;
    padding: 8px;
    border-radius: 8px;
    width: 100%;
    text-align: center;
    font-weight: 500;
}

.input-with-currency[b-rqc3pcplde] {
    position: relative;
    width: 100%;
}

    .input-with-currency input[b-rqc3pcplde] {
        width: 100%;
        padding: 8px 25px 8px 10px;
        text-align: right;
        border-radius: 8px;
        border: 1px solid #cbd5e1;
    }

    .input-with-currency span[b-rqc3pcplde] {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: #94a3b8;
        font-size: 13px;
        font-weight: bold;
    }

.status-toggle-btn[b-rqc3pcplde] {
    padding: 6px 12px;
    border-radius: 20px;
    border: none;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
}

    .status-toggle-btn.is-available[b-rqc3pcplde] {
        background: #ecfdf5;
        color: #059669;
    }

    .status-toggle-btn.not-available[b-rqc3pcplde] {
        background: #fef2f2;
        color: #dc2626;
    }

.btn-save-matrix[b-rqc3pcplde] {
    width: 100%;
    background: #1a3c34;
    color: white;
    border: none;
    padding: 16px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: 0 4px 12px rgba(26,60,52,0.15);
}

/* Огляд прайсів */
.offers-summary[b-rqc3pcplde] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 15px;
}

.summary-card[b-rqc3pcplde] {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.2s;
    background: white;
}

    .summary-card:hover[b-rqc3pcplde] {
        border-color: #1a3c34;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        transform: translateY(-2px);
    }

/* 📱 МОБІЛЬНА АДАПТАЦІЯ */
@media (max-width: 900px) {
    .wide-panel[b-rqc3pcplde] {
        width: 100% !important;
    }
}

@media (max-width: 600px) {
    .tab-header[b-rqc3pcplde] {
        flex-direction: column;
        align-items: flex-start;
    }

    .btn-primary-action[b-rqc3pcplde] {
        width: 100%;
    }

    .supplier-form-panel[b-rqc3pcplde] {
        width: 100% !important;
    }

    .matrix-toolbar[b-rqc3pcplde] {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar-inputs .form-control[b-rqc3pcplde] {
        width: calc(50% - 5px);
    }

    .toolbar-actions[b-rqc3pcplde] {
        flex-direction: column;
    }

    /* Матриця на мобілці: робимо її картками */
    .matrix-header-row[b-rqc3pcplde] {
        display: none; /* Ховаємо заголовки на малих екранах */
    }

    .matrix-row[b-rqc3pcplde] {
        flex-wrap: wrap;
        padding: 15px;
        gap: 15px;
    }

    .col-check[b-rqc3pcplde] {
        order: 1;
        width: auto;
    }

    .col-color[b-rqc3pcplde] {
        order: 2;
        flex: 1;
    }

    .col-status[b-rqc3pcplde] {
        order: 3;
        width: 100%;
    }

    .col-price[b-rqc3pcplde] {
        order: 4;
        width: calc(50% - 5px);
    }
}
/* /Pages/Admin/Tabs/UsersTab.razor.rz.scp.css */
.users-container[b-fk2rnfawh0] {
    background: #fff;
    border-radius: 24px;
    padding: 25px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
}

.tab-header[b-fk2rnfawh0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    gap: 20px;
}

.header-info h2[b-fk2rnfawh0] {
    margin: 0;
    font-size: 22px;
    color: #1a3c34;
}

.count-badge[b-fk2rnfawh0] {
    font-size: 13px;
    color: #7a8a83;
    font-weight: 500;
}

.search-input[b-fk2rnfawh0] {
    padding: 12px 20px;
    border: 1.5px solid #eee;
    border-radius: 14px;
    width: 300px;
    outline: none;
    transition: all 0.2s;
}

    .search-input:focus[b-fk2rnfawh0] {
        border-color: #1a3c34;
        box-shadow: 0 0 0 4px rgba(26, 60, 52, 0.05);
    }

/* ТАБЛИЦЯ */
.users-table-wrapper[b-fk2rnfawh0] {
    overflow-x: auto;
}

.admin-table[b-fk2rnfawh0] {
    width: 100%;
    border-collapse: collapse;
}

    .admin-table th[b-fk2rnfawh0] {
        text-align: left;
        padding: 15px;
        color: #9ca3af;
        font-size: 13px;
        text-transform: uppercase;
        font-weight: 700;
        border-bottom: 1px solid #f3f4f6;
    }

    .admin-table td[b-fk2rnfawh0] {
        padding: 18px 15px;
        border-bottom: 1px solid #f9fafb;
        vertical-align: middle;
    }

/* ІНФО КОРИСТУВАЧА */
.user-info[b-fk2rnfawh0] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar[b-fk2rnfawh0] {
    width: 38px;
    height: 38px;
    background: #f0fdf4;
    color: #166534;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
}

.user-details[b-fk2rnfawh0] {
    display: flex;
    flex-direction: column;
}

.user-email[b-fk2rnfawh0] {
    font-weight: 600;
    color: #111827;
}

.user-id[b-fk2rnfawh0] {
    font-size: 11px;
    color: #9ca3af;
}

/* БЕДЖІ РОЛЕЙ */
.role-badge[b-fk2rnfawh0] {
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
}

    .role-badge.admin[b-fk2rnfawh0] {
        background: #fef3c7;
        color: #92400e;
    }

    .role-badge.customer[b-fk2rnfawh0] {
        background: #f3f4f6;
        color: #4b5563;
    }

/* КНОПКИ ДІЙ */
.action-buttons[b-fk2rnfawh0] {
    display: flex;
    gap: 8px;
}

.btn-icon[b-fk2rnfawh0] {
    background: #f9fafb;
    border: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn-icon:hover[b-fk2rnfawh0] {
        background: #f3f4f6;
        transform: scale(1.1);
    }

    .btn-icon.delete:hover[b-fk2rnfawh0] {
        background: #fee2e2;
        color: #dc2626;
    }

@media (max-width: 768px) {
    .tab-header[b-fk2rnfawh0] {
        flex-direction: column;
        align-items: flex-start;
    }

    .search-input[b-fk2rnfawh0] {
        width: 100%;
    }
}


/* /Pages/Admin/VariantWorkbench.razor.rz.scp.css */
.workbench-container[b-hfd7whazw5] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Segoe UI', sans-serif;
    background: #fcfcfc;
    /*min-height: 100vh;*/
}

.workbench-header[b-hfd7whazw5] {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.btn-back[b-hfd7whazw5] {
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #fff;
    cursor: pointer;
    font-weight: 600;
    color: #475569;
    transition: 0.2s;
    white-space: nowrap;
}

    .btn-back:hover[b-hfd7whazw5] {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

.title-block h1[b-hfd7whazw5] {
    margin: 0;
    font-size: 1.8rem;
    color: #1a3c34;
}

.subtitle[b-hfd7whazw5] {
    margin: 5px 0 0;
    color: #94a3b8;
    font-size: 0.9rem;
}

.workbench-layout[b-hfd7whazw5] {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 30px;
    align-items: flex-start;
}

.card[b-hfd7whazw5] {
    background: #fff;
    border-radius: 20px;
    padding: 25px;
    border: 1px solid #eef2f6;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
}

.panel-header-row[b-hfd7whazw5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

    .panel-header-row h3[b-hfd7whazw5] {
        margin: 0;
    }

.text-danger[b-hfd7whazw5] {
    color: #d32f2f;
}

.add-variant-panel.editing-mode[b-hfd7whazw5] {
    border: 2px solid #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.btn-cancel-edit-sm[b-hfd7whazw5] {
    background: #f1f5f9;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: bold;
    color: #475569;
    cursor: pointer;
}

    .btn-cancel-edit-sm:hover[b-hfd7whazw5] {
        background: #e2e8f0;
        color: #0f172a;
    }

/* 💥 БРОНЕБІЙНІ КЛАСИ ДЛЯ ФОРМИ (захист від Bootstrap) 💥 */
.variant-form-grid[b-hfd7whazw5] {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    width: 100% !important;
}

.form-row[b-hfd7whazw5] {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    align-items: flex-end !important;
    width: 100% !important;
    margin: 0 !important;
}

.form-group[b-hfd7whazw5] {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

    .form-group label[b-hfd7whazw5] {
        display: block !important;
        margin-bottom: 6px !important;
        font-weight: 700 !important;
        font-size: 0.75rem !important;
        color: #64748b !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

.form-control[b-hfd7whazw5] {
    width: 100% !important;
    max-width: 100% !important;
    height: 42px !important; /* Жорстка висота, щоб Select і Input були однакові */
    padding: 8px 12px !important;
    border-radius: 10px !important;
    border: 1.5px solid #e2e8f0 !important;
    box-sizing: border-box !important;
    font-size: 0.95rem !important;
    transition: 0.2s !important;
    min-width: 0 !important;
    display: block !important;
    background-color: #fff !important;
}

    .form-control:focus[b-hfd7whazw5] {
        border-color: #1a3c34 !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(26, 60, 52, 0.05) !important;
    }

    .form-control:disabled[b-hfd7whazw5] {
        background: #f8fafc !important;
        cursor: not-allowed !important;
        opacity: 0.7 !important;
    }

/* Відновлюємо пропорції колонок */
.flex-1[b-hfd7whazw5] {
    flex: 1 1 0% !important;
}

.flex-2[b-hfd7whazw5] {
    flex: 1.5 1 0% !important;
}

.image-upload-zone[b-hfd7whazw5] {
    border: 1.5px dashed #cbd5e1;
    padding: 15px;
    border-radius: 15px;
    background: #f8fafc;
    width: 100%;
    box-sizing: border-box;
}

    .image-upload-zone label[b-hfd7whazw5] {
        display: block;
        margin-bottom: 6px;
        font-weight: bold;
        font-size: 0.8rem;
        color: #64748b;
    }

.upload-controls[b-hfd7whazw5] {
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
    align-items: center !important;
}

.btn-upload[b-hfd7whazw5] {
    background: #fff !important;
    border: 1.5px solid #e2e8f0 !important;
    width: 42px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    font-size: 1.2rem !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

.mini-preview[b-hfd7whazw5] {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 12px;
    margin-top: 12px;
    border: 1px solid #eee;
}

/* 💥 СТЕК ЧЕКБОКСІВ 💥 */
.checkboxes-stack[b-hfd7whazw5] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 5px;
}

.form-check[b-hfd7whazw5] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 15px;
    border-radius: 10px;
}

    .form-check label[b-hfd7whazw5] {
        margin: 0;
        cursor: pointer;
        font-weight: 700;
        font-size: 0.9rem;
        text-transform: none;
        line-height: 1.2;
    }

.big-chk[b-hfd7whazw5] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}

.visibility-check-box[b-hfd7whazw5] {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

    .visibility-check-box label[b-hfd7whazw5] {
        color: #166534;
    }

.wholesale-check-box[b-hfd7whazw5] {
    background: #fff8e1;
    border: 1px solid #ffe082;
}

    .wholesale-check-box label[b-hfd7whazw5] {
        color: #795548;
    }

.always-avail-check-box[b-hfd7whazw5] {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

    .always-avail-check-box label[b-hfd7whazw5] {
        color: #1e3a8a;
    }

.btn-primary-full[b-hfd7whazw5] {
    width: 100%;
    padding: 15px;
    background: #1a3c34;
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 800;
    cursor: pointer;
    font-size: 1rem;
    transition: 0.2s;
    box-shadow: 0 4px 12px rgba(26, 60, 52, 0.2);
    margin-top: 15px;
}

    .btn-primary-full:hover[b-hfd7whazw5] {
        transform: translateY(-2px);
        background: #234d43;
    }

.btn-save-edit[b-hfd7whazw5] {
    background: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

    .btn-save-edit:hover[b-hfd7whazw5] {
        background: #2563eb;
    }

/* Картки списку */
.variants-grid[b-hfd7whazw5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 20px;
}

.variant-card[b-hfd7whazw5] {
    border-left: 6px solid #e2e8f0;
    transition: 0.2s;
}

    .variant-card.is-hidden-variant[b-hfd7whazw5] {
        opacity: 0.6;
        border-color: #fcd34d !important;
        background-color: #fffbeb !important;
        border-left-color: #fbbf24 !important;
    }

.badge-hidden[b-hfd7whazw5] {
    background: #fef3c7;
    color: #b45309;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    margin-left: 10px;
    border: 1px solid #fde68a;
    font-weight: bold;
    vertical-align: middle;
}

.badge-always[b-hfd7whazw5] {
    background: #dbeafe;
    color: #1e40af;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    margin-left: 5px;
    border: 1px solid #bfdbfe;
    font-weight: bold;
    vertical-align: middle;
}

.wholesale-border[b-hfd7whazw5] {
    border-left-color: #f59e0b;
}

.retail-border[b-hfd7whazw5] {
    border-left-color: #10b981;
}

.variant-card.is-being-edited[b-hfd7whazw5] {
    border-color: #3b82f6;
    background: #f8fafc;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.variant-main-info[b-hfd7whazw5] {
    display: flex;
    gap: 15px;
    align-items: center;
    position: relative;
    margin-bottom: 15px;
}

.v-img[b-hfd7whazw5], .v-color[b-hfd7whazw5] {
    width: 70px;
    height: 70px;
    border-radius: 15px;
    object-fit: cover;
    background: #f1f5f9;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.v-details[b-hfd7whazw5] {
    flex: 1;
    min-width: 0;
}

    .v-details h4[b-hfd7whazw5] {
        margin: 0;
        font-size: 1.15rem;
        color: #1e293b;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 5px;
    }

.sku-text[b-hfd7whazw5] {
    font-size: 0.8rem;
    color: #888;
    font-family: monospace;
}

.v-prices[b-hfd7whazw5] {
    font-size: 0.85rem;
    color: #64748b;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.v-actions[b-hfd7whazw5] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-self: flex-start;
    flex-shrink: 0;
}

.btn-icon[b-hfd7whazw5] {
    border: none;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
    font-size: 1.1rem;
}

.btn-toggle-vis[b-hfd7whazw5] {
    background: #fef3c7;
    color: #d97706;
}

    .btn-toggle-vis:hover[b-hfd7whazw5] {
        background: #fde68a;
        transform: scale(1.05);
    }

.btn-edit[b-hfd7whazw5] {
    background: #f1f5f9;
    color: #3b82f6;
}

    .btn-edit:hover[b-hfd7whazw5] {
        background: #e0f2fe;
        transform: scale(1.05);
    }

.btn-del[b-hfd7whazw5] {
    background: #fff1f2;
    color: #e11d48;
}

    .btn-del:hover[b-hfd7whazw5] {
        background: #ffe4e6;
        transform: scale(1.05);
    }

/* Рулони */
.quick-rolls-manager[b-hfd7whazw5] {
    background: #f8fafc;
    padding: 15px;
    border-radius: 15px;
    border: 1px solid #f1f5f9;
}

.rolls-header[b-hfd7whazw5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

    .rolls-header h5[b-hfd7whazw5] {
        margin: 0;
        font-size: 0.85rem;
        color: #475569;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

.total-stock[b-hfd7whazw5] {
    font-size: 0.85rem;
    color: #64748b;
}

.roll-inputs[b-hfd7whazw5] {
    display: flex;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}

.roll-input-meters[b-hfd7whazw5] {
    flex: 1;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1.5px solid #e2e8f0;
    font-size: 1rem;
    min-width: 0;
}

.btn-add-roll[b-hfd7whazw5] {
    background: #1a3c34;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0 20px;
    cursor: pointer;
    transition: 0.2s;
    font-weight: bold;
    flex-shrink: 0;
}

    .btn-add-roll:hover[b-hfd7whazw5] {
        background: #234d43;
    }

.rolls-tags-list[b-hfd7whazw5] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.roll-tag[b-hfd7whazw5] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #e2e8f0;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.r-num[b-hfd7whazw5] {
    color: #94a3b8;
    font-size: 0.75rem;
}

.r-meters[b-hfd7whazw5] {
    font-weight: 800;
    color: #1a3c34;
}

.r-del[b-hfd7whazw5] {
    border: none;
    background: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 1rem;
    padding: 0;
    display: flex;
    align-items: center;
}

    .r-del:hover[b-hfd7whazw5] {
        color: #ef4444;
    }

.sold[b-hfd7whazw5] {
    opacity: 0.4;
    background: #f1f5f9;
    text-decoration: line-through;
}

.no-rolls[b-hfd7whazw5] {
    font-size: 0.85rem;
    color: #94a3b8;
    font-style: italic;
    display: block;
    padding: 10px 0;
}

.empty-workbench[b-hfd7whazw5] {
    text-align: center;
    padding: 80px 20px;
    color: #94a3b8;
    grid-column: 1 / -1;
}

.empty-icon[b-hfd7whazw5] {
    font-size: 4rem;
    margin-bottom: 15px;
    opacity: 0.3;
}

.loading-overlay[b-hfd7whazw5] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.spinner[b-hfd7whazw5] {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #1a3c34;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-b-hfd7whazw5 1s linear infinite;
    margin-bottom: 15px;
}

@keyframes spin-b-hfd7whazw5 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* --- МОБІЛЬНА АДАПТАЦІЯ --- */
@media (max-width: 900px) {
    .workbench-layout[b-hfd7whazw5] {
        grid-template-columns: 1fr;
    }

    .variants-grid[b-hfd7whazw5] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .workbench-header[b-hfd7whazw5] {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    /* На мобілці відміняємо гнучкість і робимо колонку */
    .form-row[b-hfd7whazw5] {
        flex-direction: column !important;
        gap: 15px !important;
        align-items: stretch !important;
    }

    .roll-inputs[b-hfd7whazw5] {
        flex-direction: column;
    }

    .btn-add-roll[b-hfd7whazw5] {
        padding: 12px;
        width: 100%;
    }

    .v-details h4[b-hfd7whazw5] {
        flex-direction: column;
        gap: 2px;
        align-items: flex-start;
    }
}

/* Додай це, щоб шпаргалка не виглядала як сміття */
.price-helper-box[b-hfd7whazw5] {
    display: flex;
    gap: 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 12px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    font-size: 0.9rem;
}

.helper-item[b-hfd7whazw5] {
    display: flex;
    flex-direction: column;
}

    .helper-item .label[b-hfd7whazw5] {
        color: #64748b;
        font-size: 0.75rem;
        text-transform: uppercase;
        font-weight: 700;
    }

    .helper-item .value[b-hfd7whazw5] {
        color: #1e293b;
        font-weight: 800;
        font-size: 1rem;
    }

    .helper-item.purchase-price .value[b-hfd7whazw5] {
        color: #475569;
    }

.editing-mode .price-helper-box[b-hfd7whazw5] {
    background: #f0f9ff;
    border-color: #bae6fd;
}
/* /Pages/Cart.razor.rz.scp.css */
/* --- КОНТЕЙНЕР --- */
.cart-container[b-fc9ygli3sm] {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    min-height: 70vh;
}

/* --- ШАПКА --- */
.cart-header[b-fc9ygli3sm] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 30px;
    border-bottom: 2px solid rgba(41, 54, 44, 0.1);
    padding-bottom: 15px;
}

    .cart-header h1[b-fc9ygli3sm] {
        margin: 0;
        font-size: 2.5rem;
        color: #29362C;
        font-weight: 700;
    }

.btn-clear[b-fc9ygli3sm] {
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    text-decoration: underline;
    font-size: 0.95rem;
    transition: color 0.2s;
}

    .btn-clear:hover[b-fc9ygli3sm] {
        color: #d9534f;
    }

/* --- ПУСТОЕ СОСТОЯНИЕ --- */
.empty-cart-wrapper[b-fc9ygli3sm] {
    display: flex;
    justify-content: center;
    padding: 60px 0;
}

.empty-cart-card[b-fc9ygli3sm] {
    background: #ffffff;
    border-radius: 30px;
    padding: 80px 40px;
    text-align: center;
    max-width: 600px;
    width: 100%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(41, 54, 44, 0.05);
}

.big-icon[b-fc9ygli3sm] {
    font-size: 5rem;
    display: block;
    margin-bottom: 20px;
    opacity: 0.2;
    filter: grayscale(1);
}

.empty-cart-card h2[b-fc9ygli3sm] {
    font-size: 2.2rem;
    color: #29362C;
    margin-bottom: 15px;
}

.empty-cart-card p[b-fc9ygli3sm] {
    color: #888;
    margin-bottom: 35px;
    font-size: 1.1rem;
}

.btn-primary-action[b-fc9ygli3sm] {
    display: inline-block;
    padding: 18px 45px;
    background: #29362C;
    color: white;
    text-decoration: none;
    border-radius: 100px;
    font-weight: 600;
    transition: all 0.3s;
    box-shadow: 0 10px 25px rgba(41, 54, 44, 0.2);
}

    .btn-primary-action:hover[b-fc9ygli3sm] {
        transform: translateY(-3px);
        box-shadow: 0 15px 30px rgba(41, 54, 44, 0.3);
    }

/* --- СЕТКА КОРЗИНЫ --- */
.cart-layout[b-fc9ygli3sm] {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 40px;
    align-items: start;
}

.cart-items[b-fc9ygli3sm] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --- КАРТОЧКА ТОВАРА (ОБЪЕДИНЕННАЯ) --- */
.cart-item[b-fc9ygli3sm] {
    display: grid;
    /* Сетка: Картинка (80px), Инфо (1fr), Кол-во (120px), Цена (auto), Крестик (40px) */
    grid-template-columns: 80px 1fr 120px auto 40px;
    align-items: center;
    gap: 20px;
    background: #ffffff;
    padding: 15px 20px;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.04);
}

/* --- КАРТИНКА --- */
.item-image-wrapper[b-fc9ygli3sm] {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    background-color: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-item-image[b-fc9ygli3sm] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- ИНФО О ТОВАРЕ --- */
.item-info[b-fc9ygli3sm] {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.item-name[b-fc9ygli3sm] {
    font-weight: 600;
    font-size: 1.1rem;
    color: #29362C;
}

.item-price[b-fc9ygli3sm] {
    color: #777;
    font-size: 0.95rem;
    margin-top: 4px;
}

/* Тег цвета */
.item-color-tag[b-fc9ygli3sm] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.color-circle[b-fc9ygli3sm] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.1);
}

.color-name[b-fc9ygli3sm] {
    font-size: 0.85rem;
    color: #888;
}

/* --- КНОПКИ ПЛЮС/МИНУС --- */
.item-qty[b-fc9ygli3sm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f4f6f5;
    padding: 6px;
    border-radius: 100px;
    width: 120px;
}

.btn-qty[b-fc9ygli3sm] {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.05);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

    .btn-qty:hover[b-fc9ygli3sm] {
        background: #eaeaea;
    }

.qty-value[b-fc9ygli3sm] {
    font-weight: 600;
    color: #29362C;
}

/* --- СУММА И УДАЛЕНИЕ --- */
.item-total[b-fc9ygli3sm] {
    font-weight: 700;
    font-size: 1.2rem;
    color: #29362C;
    text-align: right;
}

.btn-remove[b-fc9ygli3sm] {
    background: transparent;
    border: none;
    color: #ccc;
    font-size: 1.5rem;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn-remove:hover[b-fc9ygli3sm] {
        color: #d9534f;
    }

/* --- БЛОК ИТОГО (SUMMARY) --- */
.cart-summary[b-fc9ygli3sm] {
    background: #ffffff;
    padding: 30px;
    border-radius: 24px;
    box-shadow: 0 15px 40px rgba(41, 54, 44, 0.06);
    position: sticky;
    top: 40px;
}

    .cart-summary h3[b-fc9ygli3sm] {
        margin-top: 0;
        margin-bottom: 20px;
        color: #29362C;
    }

.summary-row[b-fc9ygli3sm] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    color: #555;
}

.summary-total[b-fc9ygli3sm] {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 1.5rem;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid #f4f6f5;
    color: #29362C;
}

.btn-checkout[b-fc9ygli3sm] {
    width: 100%;
    padding: 18px;
    border-radius: 100px;
    background: linear-gradient(105deg, #3B4D40 0%, #29362C 100%);
    color: white;
    border: none;
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 25px;
    cursor: pointer;
    transition: opacity 0.2s;
}

    .btn-checkout:hover[b-fc9ygli3sm] {
        opacity: 0.9;
    }


/* --- АДАПТИВНОСТЬ ДЛЯ МОБИЛОК --- */
@media (max-width: 992px) {
    .cart-layout[b-fc9ygli3sm] {
        grid-template-columns: 1fr; /* Одна колонка: товары сверху, чек снизу */
    }

    .cart-summary[b-fc9ygli3sm] {
        position: static; /* Отключаем залипание */
    }
}

@media (max-width: 600px) {
    .cart-item[b-fc9ygli3sm] {
        /* Перестраиваем карточку товара для узких экранов */
        grid-template-columns: 80px 1fr auto;
        grid-template-areas:
            "img info delete"
            "img qty price";
        gap: 15px;
        padding: 15px;
    }

    .item-image-wrapper[b-fc9ygli3sm] {
        grid-area: img;
    }

    .item-info[b-fc9ygli3sm] {
        grid-area: info;
    }

    .item-qty[b-fc9ygli3sm] {
        grid-area: qty;
        justify-self: start;
        margin-top: 10px;
    }

    .item-total[b-fc9ygli3sm] {
        grid-area: price;
        text-align: right;
        align-self: end;
        margin-top: 10px;
    }

    .btn-remove[b-fc9ygli3sm] {
        grid-area: delete;
        justify-self: end;
        align-self: start;
    }
}

/* Прибираємо стандартне синє підкреслення */
.item-name-link[b-fc9ygli3sm] {
    text-decoration: none;
    display: inline-block;
}

    .item-name-link .item-name[b-fc9ygli3sm] {
        transition: color 0.2s ease;
    }

    /* При наведенні на назву - змінюємо колір на трохи світліший або додаємо підкреслення */
    .item-name-link:hover .item-name[b-fc9ygli3sm] {
        color: #4a5c4e; /* Трохи світліший зелений для ефекту наведення */
        text-decoration: underline;
    }

/* Ефект при наведенні на картинку */
.item-image-wrapper.link-hover[b-fc9ygli3sm] {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .item-image-wrapper.link-hover:hover[b-fc9ygli3sm] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

.success-card[b-fc9ygli3sm] {
    padding: 60px 40px !important;
    border: 2px solid #eafaf1 !important;
}

.tracking-box[b-fc9ygli3sm] {
    background: #f8fbf9;
    border: 1px solid #dce2e0;
    border-radius: 16px;
    padding: 20px;
    margin: 25px 0;
    text-align: left;
}

.tracking-label[b-fc9ygli3sm] {
    font-weight: 600;
    color: #1a3c34 !important;
    margin-bottom: 12px !important;
    font-size: 0.95rem !important;
}

.tracking-link-field[b-fc9ygli3sm] {
    display: flex;
    background: white;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 10px;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.link-text[b-fc9ygli3sm] {
    flex: 1;
    font-family: monospace;
    font-size: 0.85rem;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-copy-tracking[b-fc9ygli3sm] {
    background: #1a3c34;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.2s;
}

    .btn-copy-tracking:hover[b-fc9ygli3sm] {
        opacity: 0.9;
        transform: scale(1.02);
    }

.tracking-hint[b-fc9ygli3sm] {
    color: #999;
    font-size: 0.8rem;
}

.success-actions[b-fc9ygli3sm] {
    margin-top: 30px;
}

.btn-qty:disabled[b-fc9ygli3sm] {
    opacity: 0.3;
    cursor: not-allowed;
    background: #eee;
}

.item-qty-container[b-fc9ygli3sm] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.qty-control-group[b-fc9ygli3sm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.qty-helper[b-fc9ygli3sm] {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 600;
}

/* Трохи розширимо поле кількості, бо там тепер текст "шт" або "м" */
.item-qty[b-fc9ygli3sm] {
    width: 140px;
}

.badge-type[b-fc9ygli3sm] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-left: 10px;
    vertical-align: middle;
}

.roll-badge[b-fc9ygli3sm] {
    background: #1a3c34;
    color: #fff;
}

.cut-badge[b-fc9ygli3sm] {
    background: #e2e8f0;
    color: #64748b;
}
/* /Pages/FabricsCatalog.razor.rz.scp.css */
/* --- 1. БАЗОВІ СТИЛІ (ДЛЯ ВСІХ) --- */
.catalog-page[b-q2o8wqrxuk] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

.catalog-header[b-q2o8wqrxuk] {
    text-align: center;
    margin-bottom: 25px;
}

    .catalog-header h1[b-q2o8wqrxuk] {
        font-size: 2.5rem;
        color: #0f172a;
        margin-bottom: 20px;
        font-weight: 800;
        letter-spacing: -1px;
    }

.header-search-wrapper[b-q2o8wqrxuk] {
    display: flex;
    align-items: center;
    gap: 15px;
    max-width: 750px;
    margin: 0 auto;
    padding: 0 10px;
}

.search-bar[b-q2o8wqrxuk] {
    position: relative;
    flex-grow: 1;
}

    .search-bar input[b-q2o8wqrxuk] {
        width: 100%;
        padding: 16px 24px;
        padding-right: 50px;
        border-radius: 20px;
        border: 2px solid #e2e8f0;
        background: #f8fafc;
        font-size: 16px;
        transition: all 0.3s;
        outline: none;
    }

        .search-bar input:focus[b-q2o8wqrxuk] {
            background: #ffffff;
            border-color: #1a3c34;
            box-shadow: 0 10px 25px rgba(26, 60, 52, 0.1);
        }

.search-icon[b-q2o8wqrxuk] {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #94a3b8;
}

/* Кнопка фільтрів (Мобільна) */
.btn-filter-toggle[b-q2o8wqrxuk] {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #ffffff;
    color: #1a3c34;
    border: 2px solid #e2e8f0;
    padding: 14px 20px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    transition: all 0.2s;
}

    .btn-filter-toggle:active[b-q2o8wqrxuk] {
        background: #f1f5f9;
        transform: scale(0.98);
    }

.filter-count-badge[b-q2o8wqrxuk] {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #ef4444;
    color: white;
    font-size: 11px;
    font-weight: bold;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(239, 68, 68, 0.4);
}

/* --- 2. СІТКА ТА САЙДБАР (ДЕСКТОП) --- */
.catalog-layout[b-q2o8wqrxuk] {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
    margin-top: 10px;
    align-items: start;
}

.filters-sidebar[b-q2o8wqrxuk] {
    position: sticky;
    top: 25px;
    max-height: calc(100vh - 50px);
    overflow-y: auto;
    background: #ffffff;
    border-radius: 24px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    border: 1px solid #f1f5f9;
}

    .filters-sidebar[b-q2o8wqrxuk]::-webkit-scrollbar {
        width: 6px;
    }

    .filters-sidebar[b-q2o8wqrxuk]::-webkit-scrollbar-track {
        background: transparent;
    }

    .filters-sidebar[b-q2o8wqrxuk]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 10px;
    }

        .filters-sidebar[b-q2o8wqrxuk]::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

.filters-header[b-q2o8wqrxuk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px dashed #f1f5f9;
}

    .filters-header h4[b-q2o8wqrxuk] {
        margin: 0;
        font-size: 18px;
        font-weight: 800;
        color: #0f172a;
    }

.btn-reset[b-q2o8wqrxuk] {
    background: none;
    border: none;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s;
}

    .btn-reset:hover[b-q2o8wqrxuk] {
        color: #ef4444;
    }

.filter-group[b-q2o8wqrxuk] {
    margin-bottom: 30px;
}

    .filter-group h5[b-q2o8wqrxuk] {
        font-size: 15px;
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 15px;
    }

/* 💥 СТИЛІ ДЛЯ ПЕРЕМИКАЧА ОПТ/РОЗДРІБ 💥 */
.segmented-control[b-q2o8wqrxuk] {
    display: flex;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 12px;
    gap: 4px;
}

    .segmented-control button[b-q2o8wqrxuk] {
        flex: 1;
        border: none;
        background: transparent;
        padding: 8px 5px;
        font-size: 13px;
        font-weight: 600;
        color: #64748b;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s;
    }

        .segmented-control button.active[b-q2o8wqrxuk] {
            background: #ffffff;
            color: #1a3c34;
            box-shadow: 0 2px 6px rgba(0,0,0,0.05);
        }

/* Кольори */
.color-options[b-q2o8wqrxuk] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.color-chip[b-q2o8wqrxuk] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

    .color-chip:hover[b-q2o8wqrxuk] {
        background: #f1f5f9;
        border-color: #cbd5e1;
    }

    .color-chip.active[b-q2o8wqrxuk] {
        border-color: #1a3c34;
        background: #1a3c34;
        color: white;
    }

    .color-chip .dot[b-q2o8wqrxuk] {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        border: 2px solid rgba(255,255,255,0.8);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

/* Чекбокси */
.char-options[b-q2o8wqrxuk] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.filter-checkbox[b-q2o8wqrxuk] {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

    .filter-checkbox input[b-q2o8wqrxuk] {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

.char-name[b-q2o8wqrxuk] {
    position: relative;
    padding-left: 30px;
    font-size: 14px;
    color: #475569;
    font-weight: 500;
    transition: color 0.2s;
    line-height: 20px;
}

    .char-name[b-q2o8wqrxuk]:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 20px;
        height: 20px;
        border: 2px solid #cbd5e1;
        border-radius: 6px;
        background: white;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .char-name[b-q2o8wqrxuk]:after {
        content: '';
        position: absolute;
        left: 7px;
        top: 3px;
        width: 6px;
        height: 11px;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg) scale(0);
        transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

.filter-checkbox:hover input ~ .char-name[b-q2o8wqrxuk]:before {
    border-color: #94a3b8;
}

.filter-checkbox input:checked ~ .char-name[b-q2o8wqrxuk] {
    color: #1a3c34;
    font-weight: 700;
}

    .filter-checkbox input:checked ~ .char-name[b-q2o8wqrxuk]:before {
        background: #1a3c34;
        border-color: #1a3c34;
    }

    .filter-checkbox input:checked ~ .char-name[b-q2o8wqrxuk]:after {
        transform: rotate(45deg) scale(1);
    }

.fabrics-grid[b-q2o8wqrxuk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 20px;
}

/* --- 3. 📱 МОБІЛЬНИЙ DRAWER --- */
.mobile-filters-drawer[b-q2o8wqrxuk] {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 380px;
    height: 100%;
    background: #ffffff;
    z-index: 2001;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: -10px 0 40px rgba(0,0,0,0.15);
}

    .mobile-filters-drawer.open[b-q2o8wqrxuk] {
        transform: translateX(0);
    }

.drawer-header[b-q2o8wqrxuk] {
    padding: 25px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .drawer-header h4[b-q2o8wqrxuk] {
        margin: 0;
        font-size: 20px;
        font-weight: 800;
        color: #0f172a;
    }

.btn-close[b-q2o8wqrxuk] {
    background: #e2e8f0;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 16px;
    font-weight: bold;
    color: #475569;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.drawer-body[b-q2o8wqrxuk] {
    flex-grow: 1;
    overflow-y: auto;
    padding: 25px;
}

.drawer-footer[b-q2o8wqrxuk] {
    padding: 20px 25px;
    border-top: 1px solid #e2e8f0;
    background: white;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 15px;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.03);
}

.btn-apply[b-q2o8wqrxuk] {
    background: #1a3c34;
    color: white;
    border: none;
    border-radius: 16px;
    padding: 16px;
    font-size: 16px;
    font-weight: 700;
}

.btn-reset-alt[b-q2o8wqrxuk] {
    background: #f1f5f9;
    color: #475569;
    border: none;
    border-radius: 16px;
    font-size: 15px;
    font-weight: 700;
}

/* Порожній каталог */
.empty-catalog[b-q2o8wqrxuk] {
    text-align: center;
    padding: 60px 20px;
    background: #f8fafc;
    border-radius: 24px;
    border: 2px dashed #e2e8f0;
}

    .empty-catalog .big-icon[b-q2o8wqrxuk] {
        font-size: 60px;
        display: block;
        margin-bottom: 20px;
    }

    .empty-catalog h3[b-q2o8wqrxuk] {
        margin: 0 0 10px 0;
        color: #0f172a;
    }

/* Анімація завантаження */
@keyframes pulse-b-q2o8wqrxuk {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

/* --- 4. 💥 АДАПТИВНІСТЬ --- */
@media (max-width: 1200px) {
    .fabrics-grid[b-q2o8wqrxuk] {
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    }
}

@media (max-width: 990px) {
    .catalog-layout[b-q2o8wqrxuk] {
        grid-template-columns: 1fr;
    }

    .filters-sidebar[b-q2o8wqrxuk] {
        display: none !important;
    }

    .btn-filter-toggle[b-q2o8wqrxuk] {
        display: flex !important;
    }

    .fabrics-grid[b-q2o8wqrxuk] {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

@media (max-width: 768px) {
    .fabrics-grid[b-q2o8wqrxuk] {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
}

@media (max-width: 600px) {
    .catalog-page[b-q2o8wqrxuk] {
        padding: 15px;
    }

    .fabrics-grid[b-q2o8wqrxuk] {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .catalog-header h1[b-q2o8wqrxuk] {
        font-size: 2rem;
        margin-bottom: 15px;
    }

    .search-bar input[b-q2o8wqrxuk] {
        padding: 14px 20px;
        font-size: 15px;
    }
}

@media (max-width: 400px) {
    .btn-text[b-q2o8wqrxuk] {
        display: none;
    }

    .btn-filter-toggle[b-q2o8wqrxuk] {
        padding: 14px;
    }
}

/* Додай це в кінець файлу стилів FabricsCatalog.razor.css */

.filter-checkbox.disabled[b-q2o8wqrxuk] {
    opacity: 0.4;
    cursor: not-allowed;
    text-decoration: line-through; /* Можеш прибрати рядок, якщо закреслення не подобається */
}

    .filter-checkbox.disabled input[b-q2o8wqrxuk] {
        cursor: not-allowed;
    }

    .filter-checkbox.disabled .char-name[b-q2o8wqrxuk] {
        color: #94a3b8;
    }

/* /Pages/Favorites.razor.rz.scp.css */
.favorites-page[b-tvui44l8wc] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px;
}

.page-header[b-tvui44l8wc] {
    text-align: center;
    margin-bottom: 40px;
}

    .page-header h1[b-tvui44l8wc] {
        font-size: 2.5rem;
        color: #0f172a;
        margin-bottom: 10px;
        font-weight: 800;
    }

.subtitle[b-tvui44l8wc] {
    color: #64748b;
    font-size: 1.1rem;
}

/* СІТКА ТОВАРІВ */
.fabrics-grid[b-tvui44l8wc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 25px;
}

/* ПОРОЖНІЙ СТАН */
.empty-favorites[b-tvui44l8wc] {
    text-align: center;
    padding: 80px 20px;
    background: #f8fafc;
    border-radius: 24px;
    border: 2px dashed #cbd5e1;
    max-width: 600px;
    margin: 0 auto;
}

.empty-icon[b-tvui44l8wc] {
    font-size: 80px;
    margin-bottom: 20px;
    animation: float-b-tvui44l8wc 3s ease-in-out infinite;
}

@keyframes float-b-tvui44l8wc {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0px);
    }
}

.empty-favorites h2[b-tvui44l8wc] {
    color: #0f172a;
    margin-bottom: 15px;
    font-weight: 800;
}

.empty-favorites p[b-tvui44l8wc] {
    color: #64748b;
    margin-bottom: 30px;
    line-height: 1.6;
}

.btn-primary[b-tvui44l8wc] {
    display: inline-block;
    background: #1a3c34;
    color: white;
    padding: 15px 30px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(26, 60, 52, 0.2);
}

    .btn-primary:hover[b-tvui44l8wc] {
        background: #059669;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(26, 60, 52, 0.3);
    }

/* СКЕЛЕТИ */
.skeleton-card[b-tvui44l8wc] {
    height: 380px;
    background: #f1f5f9;
    border-radius: 24px;
    animation: pulse-b-tvui44l8wc 1.5s infinite;
}

@keyframes pulse-b-tvui44l8wc {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .fabrics-grid[b-tvui44l8wc] {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}
/* /Pages/Login.razor.rz.scp.css */
/* Контейнер на весь екран по висоті */
.login-container[b-nna5kri0sb] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 160px); /* Мінус шапка і підвал */
    padding: 20px;
}

/* Сама картка */
.login-card[b-nna5kri0sb] {
    background: #ffffff;
    width: 100%;
    max-width: 420px;
    padding: 40px 30px;
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(26, 60, 52, 0.08); /* Фірмова тінь */
    border: 1px solid rgba(0,0,0,0.03);
}

    .login-card h2[b-nna5kri0sb] {
        text-align: center;
        color: #1a3c34;
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 30px;
        margin-top: 0;
    }

/* Форми */
.form-group[b-nna5kri0sb] {
    margin-bottom: 20px;
}

    .form-group label[b-nna5kri0sb] {
        display: block;
        font-weight: 600;
        margin-bottom: 8px;
        color: #333;
        font-size: 0.95rem;
    }

.form-control[b-nna5kri0sb] {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid #e0e0e0;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background-color: #fafafa;
}

    .form-control:focus[b-nna5kri0sb] {
        outline: none;
        border-color: #1a3c34;
        background-color: #ffffff;
        box-shadow: 0 0 0 4px rgba(26, 60, 52, 0.1);
    }

/* Валідація (червоний текст помилок під інпутами) */
[b-nna5kri0sb] .validation-message {
    color: #e74c3c;
    font-size: 0.85rem;
    margin-top: 5px;
    display: block;
}

/* Помилка від сервера (плашка зверху) */
.error-alert[b-nna5kri0sb] {
    background: #ffeeee;
    color: #e74c3c;
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 25px;
    font-weight: 500;
    font-size: 0.95rem;
    text-align: center;
    border: 1px solid #ffdcdc;
}

/* Кнопка */
.btn-primary-action[b-nna5kri0sb] {
    width: 100%;
    padding: 16px;
    border-radius: 100px;
    background: #1a3c34;
    color: white;
    border: none;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
    transition: all 0.3s ease;
}

    .btn-primary-action:hover:not(:disabled)[b-nna5kri0sb] {
        background: #234f44;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(26, 60, 52, 0.25);
    }

    .btn-primary-action:disabled[b-nna5kri0sb] {
        background: #aab5b1;
        cursor: not-allowed;
    }

/* Посилання внизу (Увійти / Зареєструватися) */
.auth-links[b-nna5kri0sb] {
    margin-top: 25px;
    text-align: center;
    font-size: 0.95rem;
}

.text-muted[b-nna5kri0sb] {
    color: #888;
}

.auth-link[b-nna5kri0sb] {
    color: #1a3c34;
    font-weight: 700;
    text-decoration: none;
    margin-left: 5px;
    transition: color 0.2s;
}

    .auth-link:hover[b-nna5kri0sb] {
        color: #27ae60;
        text-decoration: underline;
    }

/* Адаптація для мобілок */
@media (max-width: 480px) {
    .login-card[b-nna5kri0sb] {
        padding: 30px 20px;
        border-radius: 20px;
    }

        .login-card h2[b-nna5kri0sb] {
            font-size: 1.75rem;
        }
}

/* 🚨 ДОДАЛИ ::deep ТА ПАРУ ВЛАСТИВОСТЕЙ 🚨 */
[b-nna5kri0sb] .form-control {
    width: 100%;
    display: block; /* Змушуємо інпут розтягнутися */
    box-sizing: border-box; /* Щоб padding не ламав ширину */
    padding: 14px 16px;
    border: 1.5px solid #e0e0e0;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background-color: #fafafa;
}

    [b-nna5kri0sb] .form-control:focus {
        outline: none;
        border-color: #1a3c34;
        background-color: #ffffff;
        box-shadow: 0 0 0 4px rgba(26, 60, 52, 0.1);
    }

/* ===================================================
   ГЛАЗИК (ПОКАЗАТЬ/СКРЫТЬ ПАРОЛЬ)
   =================================================== */
.password-input-wrapper[b-nna5kri0sb] {
    position: relative;
    display: flex;
    align-items: center;
}

/* Переопределяем padding для инпута с паролем, чтобы текст не залезал под кнопку */
[b-nna5kri0sb] .password-input-wrapper .form-control {
    padding-right: 45px; /* Оставляем место справа для иконки */
}

.password-toggle-btn[b-nna5kri0sb] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
    color: #888;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
    outline: none;
}

    .password-toggle-btn:hover[b-nna5kri0sb] {
        color: #1a3c34;
    }

.eye-icon[b-nna5kri0sb] {
    font-size: 1.2rem;
    /* Если используешь эмодзи, они могут рендериться по-разному. 
       Лучше потом замени эмодзи в разметке на SVG иконки из FontAwesome или Heroicons */
}

.password-toggle-btn[b-nna5kri0sb] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
    /* 💥 Задаем базовый серый цвет для SVG */
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    outline: none;
}

    .password-toggle-btn:hover[b-nna5kri0sb] {
        /* 💥 При наведении цвет меняется на твой фирменный темно-зеленый */
        color: #1a3c34;
    }
/* /Pages/Profile.razor.rz.scp.css */
/* =========================================
   1. БАЗОВА СТРУКТУРА (Грід, Острови, Шапка)
   ========================================= */
.profile-container[b-ag5geei13k] {
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 20px;
}

.profile-header[b-ag5geei13k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

    .profile-header h1[b-ag5geei13k] {
        color: #1a3c34;
        font-size: 2.2rem;
        font-weight: 700;
    }

.island[b-ag5geei13k] {
    background: #ffffff;
    border-radius: 24px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.02);
}

.profile-grid[b-ag5geei13k] {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 30px;
}

@media (max-width: 850px) {
    .profile-grid[b-ag5geei13k] {
        grid-template-columns: 1fr;
    }
}


/* =========================================
   2. ЛІВА КОЛОНКА: КАРТКА ЮЗЕРА ТА ІНФО
   ========================================= */
.user-card[b-ag5geei13k] {
    text-align: center;
    height: fit-content;
}

/* --- Оновлений блок Аватарки --- */
.user-avatar[b-ag5geei13k] {
    width: 100px;
    height: 100px;
    background: #f4f6f5;
    border-radius: 50%;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a3c34;
    position: relative; /* Важливо для накладання кнопки редагування */
    overflow: hidden; /* Щоб фото не вилізало за краї кола */
    border: 2px solid #eaf1ed;
}

    .user-avatar svg[b-ag5geei13k] {
        width: 50px;
    }

.avatar-img[b-ag5geei13k] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Кнопка зміни аватарки (оверлей) */
.avatar-edit-label[b-ag5geei13k] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(26, 60, 52, 0.7); /* Твій фірмовий колір, але прозорий */
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 6px 0;
    cursor: pointer;
    text-align: center;
    transition: background 0.2s;
}

    .avatar-edit-label:hover[b-ag5geei13k] {
        background: rgba(26, 60, 52, 0.9);
    }

.user-name[b-ag5geei13k] {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #1a3c34;
}

/* --- Список інформації --- */
.user-info-list[b-ag5geei13k] {
    text-align: left;
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.info-item[b-ag5geei13k] {
    display: flex;
    flex-direction: column;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
}

    .info-item:last-child[b-ag5geei13k] {
        border-bottom: none;
    }

.info-label[b-ag5geei13k] {
    font-size: 0.75rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.info-val[b-ag5geei13k] {
    font-size: 0.95rem;
    color: #1a3c34;
    font-weight: 500;
    word-break: break-all;
}

    .info-val.empty[b-ag5geei13k] {
        color: #ccc;
        font-style: italic;
    }

/* Бейдж для компанії */
.company-badge[b-ag5geei13k] {
    display: inline-block;
    background: #f0f4f8;
    color: #2c3e50;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid #dce2e0;
    width: fit-content;
    margin-top: 2px;
}

.fav-delivery[b-ag5geei13k] {
    background: #f9fdfa;
    padding: 10px;
    border-radius: 12px;
    border: 1px dashed #27ae60;
}

    .fav-delivery .info-val[b-ag5geei13k] {
        color: #27ae60;
    }

/* --- Інпути для редагування --- */
.edit-input[b-ag5geei13k] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #dce2e0;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #1a3c34;
    background: #fff;
    margin-top: 4px;
}

    .edit-input:focus[b-ag5geei13k] {
        outline: none;
        border-color: #27ae60;
        box-shadow: 0 0 0 2px rgba(39, 174, 96, 0.1);
    }

.mt-1[b-ag5geei13k] {
    margin-top: 5px;
}


/* =========================================
   3. КНОПКИ В ПРОФІЛІ (Зберегти, Вийти)
   ========================================= */
.user-actions[b-ag5geei13k] {
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-edit-toggle[b-ag5geei13k] {
    width: 100%;
    padding: 12px;
    background: #1a3c34;
    color: white;
    border: none;
    border-radius: 100px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

    .btn-edit-toggle:hover[b-ag5geei13k] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(26, 60, 52, 0.2);
    }

.edit-btns-group[b-ag5geei13k] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

.btn-save[b-ag5geei13k] {
    background: #27ae60;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 100px;
    cursor: pointer;
    font-weight: 600;
}

.btn-cancel[b-ag5geei13k] {
    background: #f4f6f5;
    color: #666;
    border: none;
    padding: 10px;
    border-radius: 100px;
    cursor: pointer;
}

.btn-logout[b-ag5geei13k] {
    background: transparent;
    border: none;
    color: #a0a0a0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    border-radius: 12px;
}

    .btn-logout:hover[b-ag5geei13k] {
        color: #e74c3c;
        background: rgba(231, 76, 60, 0.05);
    }

    .btn-logout svg[b-ag5geei13k] {
        transition: transform 0.3s ease;
    }

    .btn-logout:hover svg[b-ag5geei13k] {
        transform: translateX(3px);
    }


/* =========================================
   4. ВИПАДАЮЧИЙ СПИСОК НОВОЇ ПОШТИ
   ========================================= */
.np-autocomplete[b-ag5geei13k] {
    position: relative;
    width: 100%;
}

.np-dropdown[b-ag5geei13k] {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #dce2e0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    list-style: none;
    padding: 0;
    margin: 4px 0 0 0;
    z-index: 100;
}

    .np-dropdown li[b-ag5geei13k] {
        padding: 10px 12px;
        cursor: pointer;
        font-size: 0.9rem;
        color: #1a3c34;
        border-bottom: 1px solid #f4f6f5;
    }

        .np-dropdown li:last-child[b-ag5geei13k] {
            border-bottom: none;
        }

        .np-dropdown li:hover[b-ag5geei13k] {
            background: #f9fdfa;
            color: #27ae60;
        }

.np-dropdown-msg[b-ag5geei13k] {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    padding: 10px;
    font-size: 0.85rem;
    color: #888;
    background: #fff;
    border: 1px solid #dce2e0;
    border-radius: 8px;
    margin-top: 4px;
    z-index: 100;
}


/* =========================================
   5. ПРАВА КОЛОНКА: ІСТОРІЯ ЗАМОВЛЕНЬ
   ========================================= */
.orders-section h3[b-ag5geei13k] {
    margin-bottom: 20px;
    color: #1a3c34;
}

.empty-msg a[b-ag5geei13k] {
    color: #1a3c34;
    text-decoration: underline;
    font-weight: 600;
}

.order-card-wrapper[b-ag5geei13k] {
    border-bottom: 1px solid #f0f0f0;
}

/* Картка-заголовок (клікабельна) */
.order-card[b-ag5geei13k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    cursor: pointer;
    transition: background 0.2s;
}

    .order-card:hover[b-ag5geei13k] {
        background: #f9fdfa;
    }

.order-id[b-ag5geei13k] {
    font-weight: 600;
    display: block;
    color: #1a3c34;
}

.order-date[b-ag5geei13k] {
    font-size: 0.85rem;
    color: #aaa;
}

.order-preview[b-ag5geei13k] {
    display: block;
    font-size: 0.85rem;
    color: #666;
    margin-top: 4px;
}

.order-meta[b-ag5geei13k] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.order-total[b-ag5geei13k] {
    font-weight: 700;
    color: #1a3c34;
}

/* --- Бейджі статусів --- */
.order-status[b-ag5geei13k] {
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 700;
    display: inline-block;
    text-align: center;
    min-width: 100px;
}

    .order-status.new[b-ag5geei13k] {
        background: #eaf1ed;
        color: #1a3c34;
    }

    .order-status.processing[b-ag5geei13k] {
        background: #e8f4f8;
        color: #2980b9;
    }

    .order-status.shipped[b-ag5geei13k] {
        background: #fff9e6;
        color: #f39c12;
    }

    .order-status.completed[b-ag5geei13k] {
        background: #eafaf1;
        color: #27ae60;
    }

    .order-status.cancelled[b-ag5geei13k] {
        background: #ffeeee;
        color: #e74c3c;
    }


/* =========================================
   6. РОЗКРИТІ ДЕТАЛІ ЗАМОВЛЕННЯ
   ========================================= */
.order-details[b-ag5geei13k] {
    background: #f4f7f5;
    padding: 15px;
    border-radius: 12px;
    margin: 0 10px 15px 10px;
    font-size: 0.9rem;
}

.delivery-details[b-ag5geei13k] {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #ccc;
    color: #333;
}

/* --- Товари у списку --- */
.item-row[b-ag5geei13k] {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.item-thumb[b-ag5geei13k] {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
}

.item-text[b-ag5geei13k] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.item-price-calc[b-ag5geei13k] {
    font-size: 0.85rem;
    color: #555;
}

.order-fabric-link[b-ag5geei13k] {
    color: #1a3c34;
    text-decoration: none;
    transition: color 0.2s;
}

    .order-fabric-link:hover[b-ag5geei13k] {
        color: #27ae60;
        text-decoration: underline;
    }

/* Бейджі для Рулон/Відріз */
.badge-type[b-ag5geei13k] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-left: 10px;
    vertical-align: middle;
}

.roll-badge[b-ag5geei13k] {
    background: #1a3c34;
    color: #fff;
}

.cut-badge[b-ag5geei13k] {
    background: #e2e8f0;
    color: #64748b;
}


/* =========================================
   7. ІНФО-БЛОКИ (Очікування / Оплата)
   ========================================= */
.info-alert[b-ag5geei13k] {
    background: #e8f4f8;
    border: 1px solid #bce8f1;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

    .info-alert h4[b-ag5geei13k] {
        margin: 0 0 10px 0;
        color: #2980b9;
        font-size: 1.1rem;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .info-alert p[b-ag5geei13k] {
        margin: 0;
        font-size: 0.9rem;
        color: #444;
        line-height: 1.5;
    }

    .info-alert strong[b-ag5geei13k] {
        color: #1a3c34;
    }

.payment-alert[b-ag5geei13k] {
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

    .payment-alert h4[b-ag5geei13k] {
        margin: 0 0 10px 0;
        color: #b97700;
        font-size: 1.1rem;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .payment-alert p[b-ag5geei13k] {
        margin: 0 0 15px 0;
        font-size: 0.9rem;
        color: #555;
        line-height: 1.4;
    }

/* Картка для копіювання рахунку */
.payment-card-box[b-ag5geei13k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    padding: 15px;
    border-radius: 8px;
    border: 1px dashed #ccc;
    margin-bottom: 10px;
}

.card-info[b-ag5geei13k] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.card-label[b-ag5geei13k] {
    font-size: 0.8rem;
    color: #888;
}

.card-number[b-ag5geei13k] {
    font-size: 1.2rem;
    letter-spacing: 2px;
    color: #111;
    font-family: monospace;
}

.card-bank[b-ag5geei13k] {
    font-size: 0.8rem;
    color: #000;
    font-weight: 600;
}

.payment-amount[b-ag5geei13k] {
    text-align: right;
    display: flex;
    flex-direction: column;
}

    .payment-amount small[b-ag5geei13k] {
        font-size: 0.8rem;
        color: #888;
    }

    .payment-amount strong[b-ag5geei13k] {
        font-size: 1.4rem;
        color: #27ae60;
    }

.payment-note[b-ag5geei13k] {
    font-size: 0.8rem !important;
    color: #888 !important;
    margin-bottom: 0 !important;
    font-style: italic;
}

.card-number-wrapper[b-ag5geei13k] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-copy[b-ag5geei13k] {
    background: #f4f7f5;
    border: 1px solid #dce2e0;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a3c34;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
}

    .btn-copy:hover[b-ag5geei13k] {
        background: #eaf1ed;
        border-color: #1a3c34;
        transform: translateY(-1px);
    }

    .btn-copy:active[b-ag5geei13k] {
        transform: translateY(1px);
    }

.text-success[b-ag5geei13k] {
    color: #27ae60 !important;
}

@media (max-width: 600px) {
    .payment-card-box[b-ag5geei13k] {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .payment-amount[b-ag5geei13k] {
        text-align: left;
    }
}

@media (max-width: 480px) {
    .card-number-wrapper[b-ag5geei13k] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}
/* /Pages/Register.razor.rz.scp.css */
/* Контейнер на весь екран по висоті */
.login-container[b-tgyfla0ddk] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 160px); /* Мінус шапка і підвал */
    padding: 20px;
}

/* Сама картка */
.login-card[b-tgyfla0ddk] {
    background: #ffffff;
    width: 100%;
    max-width: 420px;
    padding: 40px 30px;
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(26, 60, 52, 0.08); /* Фірмова тінь */
    border: 1px solid rgba(0,0,0,0.03);
}

    .login-card h2[b-tgyfla0ddk] {
        text-align: center;
        color: #1a3c34;
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 30px;
        margin-top: 0;
    }

/* Форми */
.form-group[b-tgyfla0ddk] {
    margin-bottom: 20px;
}

    .form-group label[b-tgyfla0ddk] {
        display: block;
        font-weight: 600;
        margin-bottom: 8px;
        color: #333;
        font-size: 0.95rem;
    }

.form-control[b-tgyfla0ddk] {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid #e0e0e0;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background-color: #fafafa;
}

    .form-control:focus[b-tgyfla0ddk] {
        outline: none;
        border-color: #1a3c34;
        background-color: #ffffff;
        box-shadow: 0 0 0 4px rgba(26, 60, 52, 0.1);
    }

/* Валідація (червоний текст помилок під інпутами) */
[b-tgyfla0ddk] .validation-message {
    color: #e74c3c;
    font-size: 0.85rem;
    margin-top: 5px;
    display: block;
}

/* Помилка від сервера (плашка зверху) */
.error-alert[b-tgyfla0ddk] {
    background: #ffeeee;
    color: #e74c3c;
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 25px;
    font-weight: 500;
    font-size: 0.95rem;
    text-align: center;
    border: 1px solid #ffdcdc;
}

/* Кнопка */
.btn-primary-action[b-tgyfla0ddk] {
    width: 100%;
    padding: 16px;
    border-radius: 100px;
    background: #1a3c34;
    color: white;
    border: none;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
    transition: all 0.3s ease;
}

    .btn-primary-action:hover:not(:disabled)[b-tgyfla0ddk] {
        background: #234f44;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(26, 60, 52, 0.25);
    }

    .btn-primary-action:disabled[b-tgyfla0ddk] {
        background: #aab5b1;
        cursor: not-allowed;
    }

/* Посилання внизу (Увійти / Зареєструватися) */
.auth-links[b-tgyfla0ddk] {
    margin-top: 25px;
    text-align: center;
    font-size: 0.95rem;
}

.text-muted[b-tgyfla0ddk] {
    color: #888;
}

.auth-link[b-tgyfla0ddk] {
    color: #1a3c34;
    font-weight: 700;
    text-decoration: none;
    margin-left: 5px;
    transition: color 0.2s;
}

    .auth-link:hover[b-tgyfla0ddk] {
        color: #27ae60;
        text-decoration: underline;
    }

/* Адаптація для мобілок */
@media (max-width: 480px) {
    .login-card[b-tgyfla0ddk] {
        padding: 30px 20px;
        border-radius: 20px;
    }

        .login-card h2[b-tgyfla0ddk] {
            font-size: 1.75rem;
        }
}
/* 🚨 ДОДАЛИ ::deep ТА ПАРУ ВЛАСТИВОСТЕЙ 🚨 */
[b-tgyfla0ddk] .form-control {
    width: 100%;
    display: block; /* Змушуємо інпут розтягнутися */
    box-sizing: border-box; /* Щоб padding не ламав ширину */
    padding: 14px 16px;
    border: 1.5px solid #e0e0e0;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background-color: #fafafa;
}

    [b-tgyfla0ddk] .form-control:focus {
        outline: none;
        border-color: #1a3c34;
        background-color: #ffffff;
        box-shadow: 0 0 0 4px rgba(26, 60, 52, 0.1);
    }


/* ===================================================
   ГЛАЗИК (ПОКАЗАТЬ/СКРЫТЬ ПАРОЛЬ)
   =================================================== */
.password-input-wrapper[b-tgyfla0ddk] {
    position: relative;
    display: flex;
    align-items: center;
}

/* Переопределяем padding для инпута с паролем, чтобы текст не залезал под кнопку */
[b-tgyfla0ddk] .password-input-wrapper .form-control {
    padding-right: 45px; /* Оставляем место справа для иконки */
}

.password-toggle-btn[b-tgyfla0ddk] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
    color: #888;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
    outline: none;
}

    .password-toggle-btn:hover[b-tgyfla0ddk] {
        color: #1a3c34;
    }

.eye-icon[b-tgyfla0ddk] {
    font-size: 1.2rem;
    /* Если используешь эмодзи, они могут рендериться по-разному. 
       Лучше потом замени эмодзи в разметке на SVG иконки из FontAwesome или Heroicons */
}

.password-toggle-btn[b-tgyfla0ddk] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
    /* 💥 Задаем базовый серый цвет для SVG */
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    outline: none;
}

    .password-toggle-btn:hover[b-tgyfla0ddk] {
        /* 💥 При наведении цвет меняется на твой фирменный темно-зеленый */
        color: #1a3c34;
    }
/* /Pages/TrackOrder.razor.rz.scp.css */
/* =========================================
   1. КОНТЕЙНЕР ТА ТЛО
   ========================================= */
.track-container[b-qrnym354u0] {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: 'Inter', -apple-system, sans-serif;
}

.invoice-card[b-qrnym354u0] {
    background: #ffffff;
    border-radius: 32px;
    padding: 40px;
    box-shadow: 0 20px 50px rgba(26, 60, 52, 0.05);
    border: 1px solid rgba(0,0,0,0.03);
    position: relative;
    overflow: hidden;
}

    /* Декоративний елемент "квитанції" зверху */
    .invoice-card[b-qrnym354u0]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 6px;
        background: linear-gradient(90deg, #1a3c34 0%, #059669 100%);
    }

/* =========================================
   2. ШАПКА КВИТАНЦІЇ
   ========================================= */
.invoice-header[b-qrnym354u0] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
    padding-bottom: 25px;
    border-bottom: 1px dashed #e2e8f0;
}

.invoice-brand[b-qrnym354u0] {
    font-size: 1.5rem;
    font-weight: 900;
    color: #1a3c34;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}

.invoice-meta[b-qrnym354u0] {
    text-align: right;
}

    .invoice-meta h2[b-qrnym354u0] {
        margin: 0;
        font-size: 1.25rem;
        color: #0f172a;
        font-weight: 800;
    }

.invoice-date[b-qrnym354u0] {
    font-size: 0.85rem;
    color: #94a3b8;
}

.customer-greeting[b-qrnym354u0] {
    font-size: 1.1rem;
    color: #475569;
    margin-bottom: 30px;
}

/* =========================================
   3. БЛОКИ СТАТУСІВ (Pending, Payment, Success)
   ========================================= */
.status-box[b-qrnym354u0] {
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 35px;
    position: relative;
}

    .status-box h4[b-qrnym354u0] {
        margin: 0 0 8px 0;
        font-size: 1.1rem;
        font-weight: 800;
    }

    .status-box p[b-qrnym354u0] {
        margin: 0;
        font-size: 0.95rem;
        line-height: 1.5;
    }

    /* Очікування */
    .status-box.pending[b-qrnym354u0] {
        background: #f0f9ff;
        border: 1px solid #bae6fd;
        color: #0369a1;
    }

    /* Оплата */
    .status-box.payment[b-qrnym354u0] {
        background: #fffbeb;
        border: 1px solid #fde68a;
        color: #92400e;
    }

    /* Відправлено */
    .status-box.success[b-qrnym354u0] {
        background: #f0fdf4;
        border: 1px solid #bbf7d0;
        color: #166534;
    }

/* =========================================
   4. ДЕТАЛІ ОПЛАТИ (Реквізити)
   ========================================= */
.payment-details[b-qrnym354u0] {
    margin-top: 20px;
    background: #ffffff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(146, 64, 14, 0.05);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: center;
}

.card-info[b-qrnym354u0] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .card-info .label[b-qrnym354u0] {
        /* 💥 Прибираємо надписи за замовленням 💥 */
        display: none;
    }

    .card-info .value[b-qrnym354u0] {
        font-weight: 600;
        color: #1a3c34;
    }

.copy-field[b-qrnym354u0] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fefce8;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid #fef08a;
    width: fit-content;
}

    .copy-field strong[b-qrnym354u0] {
        font-family: 'JetBrains Mono', monospace;
        font-size: 1.2rem;
        letter-spacing: 1px;
    }

.btn-copy-mini[b-qrnym354u0] {
    background: #ffffff;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 4px 10px;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-copy-mini:hover[b-qrnym354u0] {
        transform: scale(1.1);
        border-color: #92400e;
    }

.payment-total[b-qrnym354u0] {
    text-align: right;
    padding-left: 20px;
    border-left: 2px dashed #fde68a;
}

.total-val[b-qrnym354u0] {
    font-size: 1.8rem;
    font-weight: 900;
    color: #1a3c34;
}

/* =========================================
   5. ГРІД ТОВАРІВ ТА ДОСТАВКИ
   ========================================= */
.invoice-grid[b-qrnym354u0] {
    display: grid;
    gap: 40px;
}

.invoice-section h3[b-qrnym354u0] {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #94a3b8;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.delivery-info[b-qrnym354u0] {
    background: #f8fafc;
    padding: 20px;
    border-radius: 16px;
    border: 1px solid #f1f5f9;
}

    .delivery-info strong[b-qrnym354u0] {
        display: block;
        font-size: 1.1rem;
        color: #1a3c34;
        margin-bottom: 5px;
    }

    .delivery-info p[b-qrnym354u0] {
        margin: 0;
        color: #64748b;
    }

/* Товари */
.items-list[b-qrnym354u0] {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.item-row[b-qrnym354u0] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px;
    border-radius: 16px;
    transition: background 0.2s;
}

    .item-row:hover[b-qrnym354u0] {
        background: #f8fafc;
    }

.item-thumb[b-qrnym354u0] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.item-main[b-qrnym354u0] {
    flex-grow: 1;
}

.item-name[b-qrnym354u0] {
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 10px;
}

.item-sub[b-qrnym354u0] {
    color: #94a3b8;
}

.item-calc[b-qrnym354u0] {
    text-align: right;
    font-size: 0.9rem;
    color: #64748b;
}

.item-sum[b-qrnym354u0] {
    font-weight: 800;
    color: #1a3c34;
    font-size: 1.1rem;
}

/* Бейдж Опт */
.badge-type.roll[b-qrnym354u0] {
    background: #1a3c34;
    color: white;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
}

/* =========================================
   6. ФУТЕР КВИТАНЦІЇ
   ========================================= */
.invoice-footer[b-qrnym354u0] {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 2px solid #f1f5f9;
}

.final-row[b-qrnym354u0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

    .final-row span[b-qrnym354u0] {
        font-size: 1.2rem;
        font-weight: 700;
        color: #64748b;
    }

.final-sum[b-qrnym354u0] {
    font-size: 2.2rem;
    font-weight: 900;
    color: #1a3c34;
}

.print-note[b-qrnym354u0] {
    text-align: center;
}

.btn-print[b-qrnym354u0] {
    background: #f1f5f9;
    color: #475569;
    border: none;
    padding: 12px 25px;
    border-radius: 100px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
}

    .btn-print:hover[b-qrnym354u0] {
        background: #e2e8f0;
        color: #1a3c34;
        transform: translateY(-2px);
    }

/* Лоадер */
.loader-container[b-qrnym354u0] {
    text-align: center;
    padding: 100px 0;
}

.loader[b-qrnym354u0] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #1a3c34;
    border-radius: 50%;
    margin: 0 auto 20px;
    animation: spin-b-qrnym354u0 1s linear infinite;
}

@keyframes spin-b-qrnym354u0 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* =========================================
   7. АДАПТИВНІСТЬ
   ========================================= */
@media (max-width: 650px) {
    .invoice-card[b-qrnym354u0] {
        padding: 25px;
        border-radius: 0;
    }

    .payment-details[b-qrnym354u0] {
        grid-template-columns: 1fr;
    }

    .payment-total[b-qrnym354u0] {
        border-left: none;
        border-top: 2px dashed #fde68a;
        padding: 15px 0 0 0;
        text-align: left;
    }

    .final-sum[b-qrnym354u0] {
        font-size: 1.8rem;
    }
}

/* Прибираємо зайве при друку */
@media print {
    .no-print[b-qrnym354u0] {
        display: none !important;
    }

    .invoice-card[b-qrnym354u0] {
        box-shadow: none;
        border: none;
        padding: 0;
    }

    body[b-qrnym354u0] {
        background: white;
    }
}