@import '_content/TrackerShared/TrackerShared.df2dvjdx0i.bundle.scp.css';

/* /Components/DiscountBadge.razor.rz.scp.css */
.discount-badge-container[b-ol0zojm1vz] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.discount-badge[b-ol0zojm1vz] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    background: linear-gradient(135deg, #059669, #047857);
    color: white;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.discount-badge .bi-tag-fill[b-ol0zojm1vz] {
    font-size: 0.7rem;
}

.discount-badge .percent[b-ol0zojm1vz] {
    background: rgba(255,255,255,0.2);
    padding: 0 0.25rem;
    border-radius: 0.125rem;
}

.more-discounts[b-ol0zojm1vz] {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

/* Tablet */
@media (max-width: 768px) {
    .discount-badge[b-ol0zojm1vz] {
        font-size: 0.7rem;
        padding: 0.1rem 0.4rem;
    }

    .discount-badge .bi-tag-fill[b-ol0zojm1vz] {
        font-size: 0.65rem;
    }
}

/* Mobile - Touch Friendly */
@media (max-width: 576px) {
    .discount-badge-container[b-ol0zojm1vz] {
        flex-wrap: wrap;
    }

    .discount-badge[b-ol0zojm1vz] {
        font-size: 0.65rem;
        padding: 0.2rem 0.4rem;
        min-height: 24px;
    }

    .more-discounts[b-ol0zojm1vz] {
        font-size: 0.65rem;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-olbz6yaio7] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-olbz6yaio7] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* Mobile - Touch Friendly */
@media (max-width: 576px) {
    #blazor-error-ui[b-olbz6yaio7] {
        padding: 0.75rem 1rem;
    }

    #blazor-error-ui .dismiss[b-olbz6yaio7] {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        right: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
    }
}
/* /Components/Modals/ConfirmPantryScanModal.razor.rz.scp.css */
/* ConfirmPantryScanModal - Results confirmation */

.modal-backdrop[b-cg3j3qiu51] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1200;
    padding: 1rem;
    overscroll-behavior: contain;
    animation: fadeIn-b-cg3j3qiu51 0.2s ease;
}

@keyframes fadeIn-b-cg3j3qiu51 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.confirm-pantry-modal[b-cg3j3qiu51] {
    background: var(--card-bg);
    border-radius: 16px;
    max-width: 500px;
    width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    animation: slideUp-b-cg3j3qiu51 0.25s ease;
}

@keyframes slideUp-b-cg3j3qiu51 {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Header */
.modal-header[b-cg3j3qiu51] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.header-content[b-cg3j3qiu51] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.header-icon[b-cg3j3qiu51] {
    font-size: 1.5rem;
    color: #14b8a6;
    margin-top: 2px;
}

.header-text h3[b-cg3j3qiu51] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
}

.header-text p[b-cg3j3qiu51] {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.btn-close[b-cg3j3qiu51] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    line-height: 1;
    transition: color 0.2s;
}

@media (hover: hover) {
    .btn-close:hover[b-cg3j3qiu51] {
        color: var(--text-primary);
    }
}

/* Body */
.modal-body[b-cg3j3qiu51] {
    padding: 1rem 1.5rem;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}

/* Section Labels */
.section-label[b-cg3j3qiu51] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.mt-section[b-cg3j3qiu51] {
    margin-top: 1.25rem;
}

.badge[b-cg3j3qiu51] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.badge.restock[b-cg3j3qiu51] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.badge.have[b-cg3j3qiu51] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.badge.discovered[b-cg3j3qiu51] {
    background: rgba(20, 184, 166, 0.15);
    color: #14b8a6;
}

/* Item Rows */
.item-row[b-cg3j3qiu51] {
    display: flex;
    align-items: flex-start;
    padding: 0.65rem 0.75rem;
    border-radius: 8px;
    margin-bottom: 0.35rem;
    border-left: 3px solid transparent;
    transition: background 0.15s;
}

.item-row.restock[b-cg3j3qiu51] {
    border-left-color: #f59e0b;
}

.item-row.restock.selected[b-cg3j3qiu51] {
    background: rgba(245, 158, 11, 0.06);
}

.item-row.discovered[b-cg3j3qiu51] {
    border-left-color: #14b8a6;
}

.item-row.discovered.selected[b-cg3j3qiu51] {
    background: rgba(20, 184, 166, 0.06);
}

.item-row.discovered .item-checkbox-label input[type="checkbox"][b-cg3j3qiu51] {
    accent-color: #14b8a6;
}

.item-row.have[b-cg3j3qiu51] {
    border-left-color: #10b981;
    padding-left: calc(0.75rem + 24px);
}

.item-checkbox-label[b-cg3j3qiu51] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    cursor: pointer;
    width: 100%;
}

.item-checkbox-label input[type="checkbox"][b-cg3j3qiu51] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: #f59e0b;
}

.item-info[b-cg3j3qiu51] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    flex: 1;
}

.item-name[b-cg3j3qiu51] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.item-details[b-cg3j3qiu51] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.not-found-hint[b-cg3j3qiu51] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-style: italic;
}

.location-tag[b-cg3j3qiu51] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: var(--body-bg);
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
}

.quantity-tag[b-cg3j3qiu51] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: var(--body-bg);
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
}

.confidence-hint[b-cg3j3qiu51] {
    font-size: 0.7rem;
    color: #f59e0b;
    font-style: italic;
}

/* Filter info subtitle */
.filter-info[b-cg3j3qiu51] {
    margin: 0.15rem 0 0;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    font-style: italic;
}

/* Exclude button */
.btn-exclude[b-cg3j3qiu51] {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 0.4rem;
    font-size: 1rem;
    line-height: 1;
    border-radius: 6px;
    transition: all 0.15s;
    flex-shrink: 0;
    min-width: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (hover: hover) {
    .btn-exclude:hover[b-cg3j3qiu51] {
        color: #ef4444;
        background: rgba(239, 68, 68, 0.1);
    }
}

/* Empty State */
.empty-state[b-cg3j3qiu51] {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
}

.empty-state .bi[b-cg3j3qiu51] {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.75rem;
}

/* Footer */
.modal-footer[b-cg3j3qiu51] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
}

.btn-cancel[b-cg3j3qiu51] {
    padding: 0.65rem 1.25rem;
    border-radius: 8px;
    border: none;
    background: var(--border-color);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.2s;
    min-height: 44px;
}

@media (hover: hover) {
    .btn-cancel:hover[b-cg3j3qiu51] {
        background: var(--text-tertiary);
    }
}

.btn-confirm[b-cg3j3qiu51] {
    padding: 0.65rem 1.25rem;
    border-radius: 8px;
    border: none;
    background: #f59e0b;
    color: white;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
    min-height: 44px;
}

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

@media (hover: hover) {
    .btn-confirm:hover:not(:disabled)[b-cg3j3qiu51] {
        background: #d97706;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
    }
}

/* Mobile */
@media (max-width: 576px) {
    .modal-backdrop[b-cg3j3qiu51] {
        padding: 0;
        align-items: stretch;
        touch-action: none;
    }

    .confirm-pantry-modal[b-cg3j3qiu51] {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
        box-shadow: none;
    }

    .modal-header[b-cg3j3qiu51] {
        padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1rem 1rem;
        flex-shrink: 0;
    }

    .btn-close[b-cg3j3qiu51] {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .modal-body[b-cg3j3qiu51] {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1rem;
    }

    .modal-footer[b-cg3j3qiu51] {
        flex-direction: column;
        padding: 1rem;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
    }

    .btn-cancel[b-cg3j3qiu51],
    .btn-confirm[b-cg3j3qiu51] {
        width: 100%;
        justify-content: center;
        min-height: 48px;
    }

    .item-checkbox-label input[type="checkbox"][b-cg3j3qiu51] {
        width: 24px;
        height: 24px;
        min-width: 24px;
    }

    .btn-exclude[b-cg3j3qiu51] {
        min-width: 48px;
        min-height: 48px;
    }
}
/* /Components/Modals/ConfirmReceiptItemsModal.razor.rz.scp.css */
.modal-backdrop[b-79uqrlqs1d] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050;
    backdrop-filter: blur(4px);
    animation: fadeIn-b-79uqrlqs1d 0.2s ease-out;
    overscroll-behavior: contain;
}

.confirm-modal[b-79uqrlqs1d] {
    background-color: var(--card-bg, #ffffff);
    color: var(--text-primary, #333333);
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    animation: slideUp-b-79uqrlqs1d 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.modal-header[b-79uqrlqs1d] {
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
    background-color: var(--bg-secondary, #f8f9fa);
    flex-shrink: 0;
}

.header-content[b-79uqrlqs1d] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-icon[b-79uqrlqs1d] {
    font-size: 1.5rem;
    color: var(--primary-color, #0d6efd);
    background-color: rgba(13, 110, 253, 0.1);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.header-text h3[b-79uqrlqs1d] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.header-text p[b-79uqrlqs1d] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary, #6c757d);
}

.btn-close[b-79uqrlqs1d] {
    background: none;
    border: none;
    color: var(--text-secondary, #6c757d);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 50%;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
}

.modal-body[b-79uqrlqs1d] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.empty-state[b-79uqrlqs1d] {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary, #6c757d);
}

.empty-state .bi[b-79uqrlqs1d] {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.section-label[b-79uqrlqs1d] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.section-label.mt-3[b-79uqrlqs1d] {
    margin-top: 1rem;
}

.badge[b-79uqrlqs1d] {
    padding: 0.25em 0.6em;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
}

.badge.new[b-79uqrlqs1d] {
    background-color: rgba(13, 110, 253, 0.1);
    color: var(--primary-color, #0d6efd);
}

.badge.existing[b-79uqrlqs1d] {
    background-color: rgba(25, 135, 84, 0.1);
    color: var(--success-color, #198754);
}

.badge.completed[b-79uqrlqs1d] {
    background-color: rgba(108, 117, 125, 0.1);
    color: var(--text-secondary, #6c757d);
}

.items-list[b-79uqrlqs1d] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.item-row[b-79uqrlqs1d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background-color: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 10px;
    transition: all 0.2s;
}

.item-row.new[b-79uqrlqs1d] {
    border-left: 4px solid var(--primary-color, #0d6efd);
}

.item-row.existing[b-79uqrlqs1d] {
    border-left: 4px solid var(--success-color, #198754);
}

.item-row.completed[b-79uqrlqs1d] {
    border-left: 4px solid var(--text-secondary, #6c757d);
    opacity: 0.7;
    background-color: var(--bg-secondary, #f8f9fa);
}

.item-info[b-79uqrlqs1d] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.item-name[b-79uqrlqs1d] {
    font-weight: 500;
    color: var(--text-primary, #333333);
}

.item-details[b-79uqrlqs1d] {
    font-size: 0.8rem;
    color: var(--text-secondary, #6c757d);
}

.item-match[b-79uqrlqs1d] {
    font-size: 0.75rem;
    color: var(--text-muted, #9ca3af);
    font-style: italic;
}

.btn-remove[b-79uqrlqs1d] {
    background: none;
    border: none;
    color: var(--text-secondary, #6c757d);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.modal-footer[b-79uqrlqs1d] {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--border-color, #e0e0e0);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    background-color: var(--bg-secondary, #f8f9fa);
    flex-shrink: 0;
}

.btn-cancel[b-79uqrlqs1d] {
    padding: 0.6rem 1.2rem;
    border-radius: 10px;
    border: 1px solid var(--border-color, #e0e0e0);
    background-color: transparent;
    color: var(--text-secondary, #6c757d);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-confirm[b-79uqrlqs1d] {
    padding: 0.6rem 1.5rem;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, var(--primary-color, #0d6efd), var(--primary-color-dark, #0a58ca));
    color: white;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(13, 110, 253, 0.3);
    transition: all 0.2s;
}

.btn-confirm:disabled[b-79uqrlqs1d] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Hover guard — only apply on devices that support hover */
@media (hover: hover) {
    .btn-close:hover[b-79uqrlqs1d] {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--text-primary, #333333);
    }

    .item-row:hover[b-79uqrlqs1d] {
        border-color: var(--primary-color-light, #80b3ff);
        transform: translateY(-1px);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    }

    .btn-remove:hover[b-79uqrlqs1d] {
        background-color: rgba(220, 53, 69, 0.1);
        color: var(--danger-color, #dc3545);
    }

    .btn-cancel:hover[b-79uqrlqs1d] {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--text-primary, #333333);
    }

    .btn-confirm:hover:not(:disabled)[b-79uqrlqs1d] {
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(13, 110, 253, 0.4);
    }
}

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

    to {
        opacity: 1;
    }
}

@keyframes slideUp-b-79uqrlqs1d {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

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

@media (max-width: 576px) {
    .modal-backdrop[b-79uqrlqs1d] {
        padding: 0;
        touch-action: none;
    }

    .confirm-modal[b-79uqrlqs1d] {
        width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
        animation: slideUp-b-79uqrlqs1d 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .modal-header[b-79uqrlqs1d] {
        flex-shrink: 0;
        border-radius: 0;
        padding-top: calc(env(safe-area-inset-top) + 1.25rem);
        padding-left: calc(env(safe-area-inset-left) + 1.5rem);
        padding-right: calc(env(safe-area-inset-right) + 1.5rem);
    }

    .modal-body[b-79uqrlqs1d] {
        padding: 1rem;
        -webkit-overflow-scrolling: touch;
    }

    .modal-footer[b-79uqrlqs1d] {
        flex-direction: column;
        gap: 0.75rem;
        padding-bottom: calc(env(safe-area-inset-bottom) + 1.25rem);
        padding-left: calc(env(safe-area-inset-left) + 1.5rem);
        padding-right: calc(env(safe-area-inset-right) + 1.5rem);
    }

    .modal-footer .btn-cancel[b-79uqrlqs1d],
    .modal-footer .btn-confirm[b-79uqrlqs1d] {
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }

    .btn-close[b-79uqrlqs1d] {
        font-size: 1.5rem;
    }

    .btn-remove[b-79uqrlqs1d] {
        min-width: 48px;
        min-height: 48px;
    }
}
/* /Components/Modals/EditItemModal.razor.rz.scp.css */
/* Modal Overlay */
.modal-overlay[b-mf6eyhjcdh] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 1rem;
    backdrop-filter: blur(4px);
    overscroll-behavior: contain;
}

.modal-content[b-mf6eyhjcdh] {
    background: var(--card-bg, #ffffff);
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: modalSlideIn-b-mf6eyhjcdh 0.3s ease;
}

@keyframes modalSlideIn-b-mf6eyhjcdh {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header[b-mf6eyhjcdh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 2rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    background: var(--header-bg, var(--card-bg, #ffffff));
    border-radius: 16px 16px 0 0;
    position: sticky;
    top: 0;
    z-index: 10;
    min-width: 0;
}

.modal-header h3[b-mf6eyhjcdh] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary, #111827);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.modal-header h3 span:not(.bi)[b-mf6eyhjcdh] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modal-header h3 .bi[b-mf6eyhjcdh] {
    color: var(--accent-primary, #6366f1);
    font-size: 1.1rem;
}

.close-button[b-mf6eyhjcdh] {
    background: transparent;
    border: none;
    color: var(--text-secondary, #6b7280);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (hover: hover) {
    .close-button:hover[b-mf6eyhjcdh] {
        background: var(--bg-secondary, #f3f4f6);
        color: var(--text-primary, #111827);
    }
}

.modal-body[b-mf6eyhjcdh] {
    padding: 1.5rem 2rem;
}

.modal-footer[b-mf6eyhjcdh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 2rem;
    border-top: 1px solid var(--border-color, #e5e7eb);
    background: var(--header-bg, var(--card-bg, #ffffff));
    gap: 0.75rem;
}

.modal-footer-right[b-mf6eyhjcdh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Form Sections */
.form-section[b-mf6eyhjcdh] {
    margin-bottom: 1.5rem;
}

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

.section-header[b-mf6eyhjcdh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
    color: var(--text-primary, #111827);
    font-size: 0.95rem;
}

.section-header .bi[b-mf6eyhjcdh] {
    color: var(--accent-primary, #6366f1);
}

.form-group[b-mf6eyhjcdh] {
    margin-bottom: 1rem;
}

.form-group:last-child[b-mf6eyhjcdh] {
    margin-bottom: 0;
}

.form-group label[b-mf6eyhjcdh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
}

.form-group label .bi[b-mf6eyhjcdh] {
    color: var(--accent-primary, #6366f1);
}

.form-control[b-mf6eyhjcdh] {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    background: var(--input-bg, #ffffff);
    color: var(--text-primary, #111827);
    transition: all 0.2s ease;
}

.form-control:focus[b-mf6eyhjcdh] {
    outline: none;
    border-color: var(--accent-primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.form-control[b-mf6eyhjcdh]::placeholder {
    color: var(--text-muted, #9ca3af);
}

/* Form Row */
.form-row[b-mf6eyhjcdh] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

/* Checkbox Label */
.checkbox-label[b-mf6eyhjcdh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-primary, #111827);
}

.checkbox-label input[type="checkbox"][b-mf6eyhjcdh] {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
}

/* Image Toggle Buttons */
.image-toggle[b-mf6eyhjcdh] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.toggle-btn[b-mf6eyhjcdh] {
    flex: 1;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color, #e5e7eb);
    background: var(--card-bg, #ffffff);
    color: var(--text-primary, #111827);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    font-size: 0.9rem;
}

@media (hover: hover) {
    .toggle-btn:hover:not(:disabled)[b-mf6eyhjcdh] {
        background: var(--bg-secondary, #f3f4f6);
        border-color: #0d6efd;
    }
}

.toggle-btn.active[b-mf6eyhjcdh] {
    background: #0d6efd;
    color: white;
    border-color: #0d6efd;
}

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

/* Image Preview */
.image-preview[b-mf6eyhjcdh] {
    position: relative;
    display: inline-block;
    max-width: 200px;
}

.image-preview img[b-mf6eyhjcdh] {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--border-color, #e5e7eb);
}

.btn-remove-image[b-mf6eyhjcdh] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(220, 53, 69, 0.9);
    color: white;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

@media (hover: hover) {
    .btn-remove-image:hover[b-mf6eyhjcdh] {
        background: #dc3545;
        transform: scale(1.1);
    }
}

/* Toggle Switches */
.toggle-group[b-mf6eyhjcdh] {
    margin-bottom: 1.25rem;
}

.toggle-label[b-mf6eyhjcdh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
}

.toggle-input[b-mf6eyhjcdh] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-mf6eyhjcdh] {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--border-color, #e5e7eb);
    border-radius: 24px;
    transition: all 0.3s;
    flex-shrink: 0;
}

.toggle-slider[b-mf6eyhjcdh]::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: white;
    border-radius: 50%;
    transition: all 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-input:checked+.toggle-slider[b-mf6eyhjcdh] {
    background: var(--accent-primary, #6366f1);
}

.toggle-input:checked+.toggle-slider[b-mf6eyhjcdh]::before {
    transform: translateX(20px);
}

.toggle-input:focus+.toggle-slider[b-mf6eyhjcdh] {
    box-shadow: 0 0 0 3px var(--hover-bg, rgba(99, 102, 241, 0.1));
}

.toggle-text[b-mf6eyhjcdh] {
    font-weight: 500;
    color: var(--text-primary, #111827);
    font-size: 0.95rem;
}

/* Recurrence Info Box */
.recurrence-info-box[b-mf6eyhjcdh] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid var(--accent-primary, #6366f1);
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: var(--text-primary, #111827);
}

.recurrence-info-box .bi[b-mf6eyhjcdh] {
    color: var(--accent-primary, #6366f1);
    flex-shrink: 0;
    margin-top: 2px;
}

/* Days of week selector */
.days-of-week-selector[b-mf6eyhjcdh] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.day-checkbox[b-mf6eyhjcdh] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 4px;
    cursor: pointer;
    background: var(--input-bg, #ffffff);
    transition: all 0.2s;
    font-size: 0.875rem;
}

@media (hover: hover) {
    .day-checkbox:hover[b-mf6eyhjcdh] {
        background: var(--hover-bg, #f3f4f6);
    }
}

.day-checkbox input[type="checkbox"][b-mf6eyhjcdh] {
    width: auto;
    margin: 0;
}

.day-checkbox input[type="checkbox"]:checked+span[b-mf6eyhjcdh],
.day-checkbox:has(input[type="checkbox"]:checked)[b-mf6eyhjcdh] {
    background: var(--hover-bg, #f3f4f6);
    font-weight: 600;
}

/* Monthly recurrence mode options */
.monthly-mode-options[b-mf6eyhjcdh] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.radio-label[b-mf6eyhjcdh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 4px;
    background: var(--input-bg, #ffffff);
    cursor: pointer;
    transition: all 0.2s;
    flex-wrap: wrap;
}

@media (hover: hover) {
    .radio-label:hover[b-mf6eyhjcdh] {
        background: var(--hover-bg, #f3f4f6);
    }
}

.radio-label input[type="radio"][b-mf6eyhjcdh] {
    width: auto;
    margin: 0;
    cursor: pointer;
}

.radio-label input[type="radio"]:checked[b-mf6eyhjcdh] {
    accent-color: var(--accent-primary, #6366f1);
}

.radio-label:has(input[type="radio"]:checked)[b-mf6eyhjcdh] {
    background: var(--hover-bg, #f3f4f6);
    border-color: var(--accent-primary, #6366f1);
}

.radio-label span[b-mf6eyhjcdh] {
    color: var(--text-primary, #111827);
    font-size: 0.875rem;
}

.hint-text[b-mf6eyhjcdh] {
    color: var(--text-secondary, #6c757d);
}

.day-input[b-mf6eyhjcdh] {
    width: 70px;
    padding: 0.3rem 0.5rem;
    font-size: 0.875rem;
}

.ordinal-select[b-mf6eyhjcdh],
.weekday-select[b-mf6eyhjcdh] {
    padding: 0.3rem 0.5rem;
    font-size: 0.875rem;
    width: auto;
}

.ordinal-select[b-mf6eyhjcdh] {
    min-width: 85px;
}

.weekday-select[b-mf6eyhjcdh] {
    min-width: 110px;
}

.warning-text[b-mf6eyhjcdh] {
    color: #f59e0b;
    font-size: 0.8rem;
    margin-top: 0.25rem;
    display: block;
}

/* Recurrence end options */
.recurrence-end-options[b-mf6eyhjcdh] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.occurrence-input[b-mf6eyhjcdh] {
    width: 80px;
    padding: 0.3rem 0.5rem;
    font-size: 0.875rem;
}

/* Interval selector */
.interval-selector[b-mf6eyhjcdh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.interval-input[b-mf6eyhjcdh] {
    width: 80px;
    padding: 0.3rem 0.5rem;
    font-size: 0.875rem;
}

.interval-label[b-mf6eyhjcdh] {
    color: var(--text-secondary, #6c757d);
    font-size: 0.875rem;
}

/* Yearly date selector */
.yearly-date-selector[b-mf6eyhjcdh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.month-select[b-mf6eyhjcdh] {
    padding: 0.3rem 0.5rem;
    font-size: 0.875rem;
    width: auto;
    min-width: 120px;
}

/* Location Picker Grid */
.location-picker-grid[b-mf6eyhjcdh] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.location-picker-item[b-mf6eyhjcdh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.6rem 0.25rem;
    background: var(--input-bg, #ffffff);
    border: 1.5px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
    min-height: 48px;
}

@media (hover: hover) {
    .location-picker-item:hover[b-mf6eyhjcdh] {
        background: var(--bg-secondary, #f3f4f6);
        border-color: var(--loc-color, var(--accent-primary, #6366f1));
    }
}

.location-picker-item.selected[b-mf6eyhjcdh] {
    border-color: var(--loc-color, var(--accent-primary, #6366f1));
    background: color-mix(in srgb, var(--loc-color, var(--accent-primary, #6366f1)) 10%, var(--input-bg, #ffffff));
    color: var(--text-primary, #111827);
    font-weight: 600;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--loc-color, var(--accent-primary, #6366f1)) 20%, transparent);
}

/* Upload spinner */
.upload-spinner[b-mf6eyhjcdh] {
    display: flex;
    align-items: center;
    color: #0d6efd;
    font-size: 0.9rem;
}

/* Buttons */
.btn[b-mf6eyhjcdh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn-primary[b-mf6eyhjcdh] {
    background: var(--accent-primary, #6366f1);
    color: white;
}

@media (hover: hover) {
    .btn-primary:hover[b-mf6eyhjcdh] {
        background: var(--accent-secondary, #4f46e5);
        transform: translateY(-1px);
    }
}

.btn-secondary[b-mf6eyhjcdh] {
    background: var(--bg-secondary, #f3f4f6);
    color: var(--text-primary, #111827);
    border: 1px solid var(--border-color, #e5e7eb);
}

@media (hover: hover) {
    .btn-secondary:hover[b-mf6eyhjcdh] {
        background: var(--bg-tertiary, #e5e7eb);
    }
}

.btn-danger[b-mf6eyhjcdh] {
    background: #dc3545;
    color: white;
}

@media (hover: hover) {
    .btn-danger:hover[b-mf6eyhjcdh] {
        background: #c82333;
        transform: translateY(-1px);
    }
}

/* Quantity Input Group */
.quantity-input-group[b-mf6eyhjcdh] {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    overflow: hidden;
}

.quantity-input-group .qty-btn[b-mf6eyhjcdh] {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--bg-secondary, #f3f4f6);
    color: var(--text-primary, #111827);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1.25rem;
    padding: 0;
}

@media (hover: hover) {
    .quantity-input-group .qty-btn:hover[b-mf6eyhjcdh] {
        background: var(--hover-bg, #e5e7eb);
        color: var(--accent-primary, #6366f1);
    }
}

.quantity-input-group .qty-btn:active[b-mf6eyhjcdh] {
    transform: scale(0.95);
}

.quantity-input-group .qty-input[b-mf6eyhjcdh] {
    flex: 1;
    min-width: 60px;
    text-align: center;
    border: none;
    border-left: 1px solid var(--border-color, #e5e7eb);
    border-right: 1px solid var(--border-color, #e5e7eb);
    border-radius: 0;
    font-weight: 600;
}

.quantity-input-group .qty-input:focus[b-mf6eyhjcdh] {
    box-shadow: none;
    outline: none;
}

/* Responsive - Tablet */
@media (max-width: 768px) {
    .modal-content[b-mf6eyhjcdh] {
        max-width: 95%;
    }

    .modal-body[b-mf6eyhjcdh] {
        padding: 1.25rem 1.5rem;
    }

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

    .radio-label[b-mf6eyhjcdh] {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .ordinal-select[b-mf6eyhjcdh],
    .weekday-select[b-mf6eyhjcdh] {
        flex: 1;
        min-width: 0;
    }
}

/* Mobile Fullscreen Modal */
@media (max-width: 576px) {
    .modal-overlay[b-mf6eyhjcdh] {
        padding: 0;
        touch-action: none;
    }

    .modal-content[b-mf6eyhjcdh] {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .modal-header[b-mf6eyhjcdh] {
        padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1rem 1rem;
        border-radius: 0;
        flex-shrink: 0;
    }

    .close-button[b-mf6eyhjcdh] {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
        font-size: 1.5rem;
    }

    .modal-body[b-mf6eyhjcdh] {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1rem;
    }

    .modal-footer[b-mf6eyhjcdh] {
        padding: 1rem;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
        flex-shrink: 0;
        flex-direction: column;
        gap: 0.75rem;
    }

    .modal-footer .btn[b-mf6eyhjcdh] {
        width: 100%;
        min-height: 48px;
    }

    .modal-footer-right[b-mf6eyhjcdh] {
        width: 100%;
        flex-direction: column;
        gap: 0.5rem;
    }

    .modal-footer-right .btn[b-mf6eyhjcdh] {
        width: 100%;
    }

    .image-toggle[b-mf6eyhjcdh] {
        flex-direction: column;
    }

    .toggle-btn[b-mf6eyhjcdh] {
        min-height: 48px;
    }

    .form-control[b-mf6eyhjcdh] {
        min-height: 48px;
        font-size: 16px;
    }

    .location-picker-grid[b-mf6eyhjcdh] {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.375rem;
    }

    .location-picker-item[b-mf6eyhjcdh] {
        padding: 0.5rem 0.2rem;
        font-size: 0.75rem;
        min-height: 48px;
    }

    .days-of-week-selector[b-mf6eyhjcdh] {
        gap: 0.375rem;
    }

    .day-checkbox[b-mf6eyhjcdh] {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
        min-height: 48px;
    }
}

/* Server error banner */
.server-error[b-mf6eyhjcdh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid #dc3545;
    border-radius: 8px;
    color: #dc3545;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.server-error .bi[b-mf6eyhjcdh] {
    flex-shrink: 0;
}

/* Validation error */
.validation-error[b-mf6eyhjcdh] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: #dc3545;
    font-size: 0.8125rem;
}

.validation-error .bi[b-mf6eyhjcdh] {
    flex-shrink: 0;
}

.form-control.is-invalid[b-mf6eyhjcdh] {
    border-color: #dc3545;
}

.form-control.is-invalid:focus[b-mf6eyhjcdh] {
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

/* Form hint */
.form-hint[b-mf6eyhjcdh] {
    display: block;
    color: var(--text-muted, #9ca3af);
    font-size: 0.75rem;
}

/* Dark theme */
body.dark-theme .toggle-btn[b-mf6eyhjcdh] {
    background: var(--bg-secondary);
}

body.dark-theme .toggle-btn.active[b-mf6eyhjcdh] {
    background: #0d6efd;
}

body.dark-theme .validation-error[b-mf6eyhjcdh] {
    color: #f87171;
}

body.dark-theme .form-control.is-invalid[b-mf6eyhjcdh] {
    border-color: #f87171;
}

body.dark-theme .form-control.is-invalid:focus[b-mf6eyhjcdh] {
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15);
}
/* /Components/Modals/EditListModal.razor.rz.scp.css */
/* Modal Overlay */
.modal-overlay[b-efdt1r16oj] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 1rem;
    backdrop-filter: blur(4px);
    overscroll-behavior: contain;
}

.modal-content[b-efdt1r16oj] {
    background: var(--card-bg, #ffffff);
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: modalSlideIn-b-efdt1r16oj 0.3s ease;
}

@keyframes modalSlideIn-b-efdt1r16oj {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header[b-efdt1r16oj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 2rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    background: var(--header-bg, var(--card-bg, #ffffff));
    border-radius: 16px 16px 0 0;
    position: sticky;
    top: 0;
    z-index: 10;
    min-width: 0;
}

.modal-header h3[b-efdt1r16oj] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary, #111827);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.modal-header h3 span:not(.bi)[b-efdt1r16oj] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modal-header h3 .bi[b-efdt1r16oj] {
    color: var(--accent-primary, #6366f1);
    font-size: 1.1rem;
}

.close-button[b-efdt1r16oj] {
    background: transparent;
    border: none;
    color: var(--text-secondary, #6b7280);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (hover: hover) {
    .close-button:hover[b-efdt1r16oj] {
        background: var(--bg-secondary, #f3f4f6);
        color: var(--text-primary, #111827);
    }
}

.modal-body[b-efdt1r16oj] {
    padding: 1.5rem 2rem;
}

.modal-footer[b-efdt1r16oj] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 1.25rem 2rem;
    border-top: 1px solid var(--border-color, #e5e7eb);
    background: var(--header-bg, var(--card-bg, #ffffff));
    gap: 0.75rem;
}

/* Form Sections */
.form-section[b-efdt1r16oj] {
    margin-bottom: 1.5rem;
}

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

.section-header[b-efdt1r16oj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
    color: var(--text-primary, #111827);
    font-size: 0.95rem;
}

.section-header .bi[b-efdt1r16oj] {
    color: var(--accent-primary, #6366f1);
}

.form-group[b-efdt1r16oj] {
    margin-bottom: 1rem;
}

.form-group:last-child[b-efdt1r16oj] {
    margin-bottom: 0;
}

.form-group label[b-efdt1r16oj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
}

.form-group label .bi[b-efdt1r16oj] {
    color: var(--accent-primary, #6366f1);
}

.form-control[b-efdt1r16oj] {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    background: var(--input-bg, #ffffff);
    color: var(--text-primary, #111827);
    transition: all 0.2s ease;
}

.form-control:focus[b-efdt1r16oj] {
    outline: none;
    border-color: var(--accent-primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.form-control[b-efdt1r16oj]::placeholder {
    color: var(--text-muted, #9ca3af);
}

textarea.form-control[b-efdt1r16oj] {
    resize: vertical;
    min-height: 80px;
}

/* Checkbox Label */
.checkbox-label[b-efdt1r16oj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-primary, #111827);
}

.checkbox-label input[type="checkbox"][b-efdt1r16oj] {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
}

/* Image Toggle Buttons */
.image-toggle[b-efdt1r16oj] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.toggle-btn[b-efdt1r16oj] {
    flex: 1;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color, #e5e7eb);
    background: var(--card-bg, #ffffff);
    color: var(--text-primary, #111827);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    font-size: 0.9rem;
}

@media (hover: hover) {
    .toggle-btn:hover:not(:disabled)[b-efdt1r16oj] {
        background: var(--bg-secondary, #f3f4f6);
        border-color: #0d6efd;
    }
}

.toggle-btn.active[b-efdt1r16oj] {
    background: #0d6efd;
    color: white;
    border-color: #0d6efd;
}

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

/* Image Preview */
.image-preview[b-efdt1r16oj] {
    position: relative;
    display: inline-block;
    max-width: 200px;
}

.image-preview img[b-efdt1r16oj] {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--border-color, #e5e7eb);
}

.btn-remove-image[b-efdt1r16oj] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(220, 53, 69, 0.9);
    color: white;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

@media (hover: hover) {
    .btn-remove-image:hover[b-efdt1r16oj] {
        background: #dc3545;
        transform: scale(1.1);
    }
}

/* Upload spinner */
.upload-spinner[b-efdt1r16oj] {
    display: flex;
    align-items: center;
    color: #0d6efd;
    font-size: 0.9rem;
}

/* Buttons */
.btn[b-efdt1r16oj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn-primary[b-efdt1r16oj] {
    background: var(--accent-primary, #6366f1);
    color: white;
}

@media (hover: hover) {
    .btn-primary:hover[b-efdt1r16oj] {
        background: var(--accent-secondary, #4f46e5);
        transform: translateY(-1px);
    }
}

.btn-secondary[b-efdt1r16oj] {
    background: var(--bg-secondary, #f3f4f6);
    color: var(--text-primary, #111827);
    border: 1px solid var(--border-color, #e5e7eb);
}

@media (hover: hover) {
    .btn-secondary:hover[b-efdt1r16oj] {
        background: var(--bg-tertiary, #e5e7eb);
    }
}

/* Responsive - Tablet */
@media (max-width: 768px) {
    .modal-content[b-efdt1r16oj] {
        max-width: 95%;
    }

    .modal-body[b-efdt1r16oj] {
        padding: 1.25rem 1.5rem;
    }
}

/* Mobile Fullscreen Modal */
@media (max-width: 576px) {
    .modal-overlay[b-efdt1r16oj] {
        padding: 0;
        touch-action: none;
    }

    .modal-content[b-efdt1r16oj] {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .modal-header[b-efdt1r16oj] {
        padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1rem 1rem;
        border-radius: 0;
        flex-shrink: 0;
    }

    .close-button[b-efdt1r16oj] {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
        font-size: 1.5rem;
    }

    .modal-body[b-efdt1r16oj] {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1rem;
    }

    .modal-footer[b-efdt1r16oj] {
        padding: 1rem;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
        flex-shrink: 0;
        flex-direction: column;
        gap: 0.5rem;
    }

    .modal-footer .btn[b-efdt1r16oj] {
        width: 100%;
        min-height: 48px;
    }

    .image-toggle[b-efdt1r16oj] {
        flex-direction: column;
    }

    .toggle-btn[b-efdt1r16oj] {
        min-height: 48px;
    }

    .form-control[b-efdt1r16oj] {
        min-height: 48px;
        font-size: 16px;
    }
}

/* Dark theme */
body.dark-theme .toggle-btn[b-efdt1r16oj] {
    background: var(--bg-secondary);
}

body.dark-theme .toggle-btn.active[b-efdt1r16oj] {
    background: #0d6efd;
}
/* /Components/Modals/ExpiringItemsModal.razor.rz.scp.css */
/* Modal Overlay */
.modal-overlay[b-ujihcmf1q1] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 1rem;
    backdrop-filter: blur(4px);
    overscroll-behavior: contain;
}

.modal-content[b-ujihcmf1q1] {
    background: var(--card-bg, #ffffff);
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: modalSlideIn-b-ujihcmf1q1 0.3s ease;
}

@keyframes modalSlideIn-b-ujihcmf1q1 {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header[b-ujihcmf1q1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 2rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    background: var(--header-bg, var(--card-bg, #ffffff));
    border-radius: 16px 16px 0 0;
    position: sticky;
    top: 0;
    z-index: 10;
    min-width: 0;
}

.modal-header h3[b-ujihcmf1q1] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary, #111827);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.modal-header h3 span:not(.bi)[b-ujihcmf1q1] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modal-header h3 .bi[b-ujihcmf1q1] {
    color: var(--accent-primary, #6366f1);
    font-size: 1.1rem;
}

.close-button[b-ujihcmf1q1] {
    background: transparent;
    border: none;
    color: var(--text-secondary, #6b7280);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (hover: hover) {
    .close-button:hover[b-ujihcmf1q1] {
        background: var(--bg-secondary, #f3f4f6);
        color: var(--text-primary, #111827);
    }
}

.modal-body[b-ujihcmf1q1] {
    padding: 1.5rem 2rem;
}

.modal-footer[b-ujihcmf1q1] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 1.25rem 2rem;
    border-top: 1px solid var(--border-color, #e5e7eb);
    background: var(--header-bg, var(--card-bg, #ffffff));
    gap: 0.75rem;
}

/* Notification Modal */
.notification-modal[b-ujihcmf1q1] {
    max-width: 500px;
}

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

.notification-item[b-ujihcmf1q1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    gap: 1rem;
}

.notification-item.expired[b-ujihcmf1q1] {
    border-left: 3px solid #ef4444;
    background: rgba(239, 68, 68, 0.05);
}

.notification-item.expiring-soon[b-ujihcmf1q1],
.notification-item.warning[b-ujihcmf1q1] {
    border-left: 3px solid #f59e0b;
    background: rgba(245, 158, 11, 0.05);
}

.notification-item.urgent[b-ujihcmf1q1] {
    border-left: 3px solid #ef4444;
    background: rgba(239, 68, 68, 0.05);
}

.notification-item.fresh[b-ujihcmf1q1] {
    border-left: 3px solid #22c55e;
}

.notification-item-info[b-ujihcmf1q1] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

.notification-item-name[b-ujihcmf1q1] {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notification-item-status[b-ujihcmf1q1] {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.notification-item.expired .notification-item-status[b-ujihcmf1q1] {
    color: #ef4444;
}

.notification-item.expiring-soon .notification-item-status[b-ujihcmf1q1],
.notification-item.warning .notification-item-status[b-ujihcmf1q1],
.notification-item.urgent .notification-item-status[b-ujihcmf1q1] {
    color: #f59e0b;
}

.empty-notification[b-ujihcmf1q1] {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
}

.empty-notification .bi[b-ujihcmf1q1] {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.5;
    display: block;
}

.empty-notification p[b-ujihcmf1q1] {
    margin: 0;
}

/* Text color utilities */
.text-warning[b-ujihcmf1q1] {
    color: #f59e0b !important;
}

/* Buttons */
.btn[b-ujihcmf1q1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn-sm[b-ujihcmf1q1] {
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
}

.btn-primary[b-ujihcmf1q1] {
    background: var(--accent-primary, #6366f1);
    color: white;
}

@media (hover: hover) {
    .btn-primary:hover[b-ujihcmf1q1] {
        background: var(--accent-secondary, #4f46e5);
        transform: translateY(-1px);
    }
}

.btn-secondary[b-ujihcmf1q1] {
    background: var(--bg-secondary, #f3f4f6);
    color: var(--text-primary, #111827);
    border: 1px solid var(--border-color, #e5e7eb);
}

@media (hover: hover) {
    .btn-secondary:hover[b-ujihcmf1q1] {
        background: var(--bg-tertiary, #e5e7eb);
    }
}

.btn-outline-primary[b-ujihcmf1q1] {
    background: transparent;
    color: var(--accent-primary, #6366f1);
    border: 1px solid var(--accent-primary, #6366f1);
}

@media (hover: hover) {
    .btn-outline-primary:hover[b-ujihcmf1q1] {
        background: var(--accent-primary, #6366f1);
        color: white;
    }
}

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

/* Responsive - Tablet */
@media (max-width: 768px) {
    .modal-content[b-ujihcmf1q1] {
        max-width: 95%;
    }

    .modal-body[b-ujihcmf1q1] {
        padding: 1.25rem 1.5rem;
    }
}

/* Mobile Fullscreen Modal */
@media (max-width: 576px) {
    .modal-overlay[b-ujihcmf1q1] {
        padding: 0;
        touch-action: none;
    }

    .modal-content[b-ujihcmf1q1] {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .modal-header[b-ujihcmf1q1] {
        padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1rem 1rem;
        border-radius: 0;
        flex-shrink: 0;
    }

    .close-button[b-ujihcmf1q1] {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
        font-size: 1.5rem;
    }

    .modal-body[b-ujihcmf1q1] {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1rem;
    }

    .modal-footer[b-ujihcmf1q1] {
        padding: 1rem;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
        flex-shrink: 0;
        flex-direction: column;
        gap: 0.5rem;
    }

    .modal-footer .btn[b-ujihcmf1q1] {
        width: 100%;
        min-height: 44px;
    }

    .notification-modal[b-ujihcmf1q1] {
        max-width: 100%;
        margin: 0.5rem;
    }

    .notification-items-list[b-ujihcmf1q1] {
        max-height: 300px;
    }
}

/* Dark theme */
body.dark-theme .modal-content[b-ujihcmf1q1] {
    background: var(--card-bg);
}

body.dark-theme .modal-header[b-ujihcmf1q1],
body.dark-theme .modal-footer[b-ujihcmf1q1] {
    background: var(--header-bg, var(--card-bg));
}
/* /Components/Modals/PantryScanModal.razor.rz.scp.css */
/* PantryScanModal - Multi-photo capture wizard */

.modal-backdrop[b-tp5nhju680] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1200;
    padding: 1rem;
    overscroll-behavior: contain;
    animation: fadeIn-b-tp5nhju680 0.2s ease;
}

@keyframes fadeIn-b-tp5nhju680 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.pantry-scan-modal[b-tp5nhju680] {
    background: var(--card-bg);
    border-radius: 16px;
    max-width: 560px;
    width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    animation: slideUp-b-tp5nhju680 0.25s ease;
}

@keyframes slideUp-b-tp5nhju680 {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Header */
.modal-header[b-tp5nhju680] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h2[b-tp5nhju680] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-close[b-tp5nhju680] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    line-height: 1;
    transition: color 0.2s;
}

@media (hover: hover) {
    .btn-close:hover[b-tp5nhju680] {
        color: var(--text-primary);
    }
}

/* Body */
.modal-body[b-tp5nhju680] {
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}

.instruction-text[b-tp5nhju680] {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0 0 1rem;
    line-height: 1.4;
}

/* Photo Grid */
.photo-grid[b-tp5nhju680] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
}

.photo-card[b-tp5nhju680] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.photo-preview[b-tp5nhju680] {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 1;
    background: var(--body-bg);
    border: 1px solid var(--border-color);
}

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

.photo-remove-btn[b-tp5nhju680] {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

@media (hover: hover) {
    .photo-remove-btn:hover[b-tp5nhju680] {
        background: rgba(239, 68, 68, 0.9);
    }
}

.photo-label-select[b-tp5nhju680] {
    width: 100%;
    padding: 0.4rem 0.5rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
    min-height: 36px;
    /* Prevent iOS zoom on focus */
    font-size: 16px;
}

/* Add Photo Button */
.add-photo-card[b-tp5nhju680] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    aspect-ratio: 1;
    border-radius: 10px;
    border: 2px dashed var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s;
    min-height: 100px;
}

.add-photo-card .bi[b-tp5nhju680] {
    font-size: 1.5rem;
}

@media (hover: hover) {
    .add-photo-card:hover[b-tp5nhju680] {
        border-color: var(--accent-primary);
        color: var(--accent-primary);
        background: rgba(37, 99, 235, 0.05);
    }
}

/* Footer */
.modal-footer[b-tp5nhju680] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
}

.btn-cancel[b-tp5nhju680] {
    padding: 0.65rem 1.25rem;
    border-radius: 8px;
    border: none;
    background: var(--border-color);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.2s;
    min-height: 44px;
}

@media (hover: hover) {
    .btn-cancel:hover[b-tp5nhju680] {
        background: var(--text-tertiary);
    }
}

.btn-analyze[b-tp5nhju680] {
    padding: 0.65rem 1.25rem;
    border-radius: 8px;
    border: none;
    background: linear-gradient(135deg, #0d9488, #14b8a6);
    color: white;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
    min-height: 44px;
    box-shadow: 0 2px 8px rgba(13, 148, 136, 0.3);
}

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

@media (hover: hover) {
    .btn-analyze:hover:not(:disabled)[b-tp5nhju680] {
        transform: translateY(-1px);
        box-shadow: 0 4px 16px rgba(13, 148, 136, 0.4);
    }
}

/* Processing State (reuses scan-modal-base patterns) */
.processing-section[b-tp5nhju680] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
    text-align: center;
}

.processing-section h3[b-tp5nhju680] {
    margin: 1.5rem 0 0.5rem;
    color: var(--text-primary);
    font-size: 1.2rem;
}

.processing-hint[b-tp5nhju680] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0;
}

.spinner[b-tp5nhju680] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border-color);
    border-top-color: #14b8a6;
    border-radius: 50%;
    animation: spin-b-tp5nhju680 1s linear infinite;
}

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

/* Error State */
.error-section[b-tp5nhju680] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 0;
}

.error-icon[b-tp5nhju680] {
    font-size: 3rem;
    color: var(--danger, #ef4444);
    margin-bottom: 1rem;
}

.error-section h3[b-tp5nhju680] {
    margin: 0 0 0.5rem;
    color: var(--text-primary);
    font-size: 1.25rem;
}

.error-message[b-tp5nhju680] {
    color: var(--text-secondary);
    margin: 0 0 1.5rem;
    font-size: 1rem;
    line-height: 1.5;
}

.modal-actions[b-tp5nhju680] {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.modal-actions .btn[b-tp5nhju680] {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    min-height: 48px;
}

.modal-actions .btn-secondary[b-tp5nhju680] {
    background: var(--border-color);
    color: var(--text-primary);
}

.modal-actions .btn-primary[b-tp5nhju680] {
    background: var(--accent-primary);
    color: white;
}

@media (hover: hover) {
    .modal-actions .btn-primary:hover[b-tp5nhju680] {
        background: var(--accent-secondary);
    }
}

/* Filters Section */
.filters-section[b-tp5nhju680] {
    margin-bottom: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
}

.filters-toggle[b-tp5nhju680] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.65rem 1rem;
    background: var(--bg-secondary, var(--body-bg));
    border: none;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s;
}

@media (hover: hover) {
    .filters-toggle:hover[b-tp5nhju680] {
        color: var(--text-primary);
    }
}

.filter-count-badge[b-tp5nhju680] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #0d9488;
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
}

.filters-content[b-tp5nhju680] {
    padding: 0.75rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.filter-group[b-tp5nhju680] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.filter-label[b-tp5nhju680] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.filter-badges[b-tp5nhju680] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.filter-badge[b-tp5nhju680] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.75rem;
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: 500;
    background: var(--bg-secondary, var(--body-bg));
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filter-badge .bi[b-tp5nhju680] {
    font-size: 0.7rem;
}

@media (hover: hover) {
    .filter-badge:hover[b-tp5nhju680] {
        background: var(--bg-tertiary, var(--border-color));
        transform: translateY(-1px);
    }
}

.filter-badge.active[b-tp5nhju680] {
    background: #0d9488;
    color: white;
    border-color: #0d9488;
}

@media (hover: hover) {
    .filter-badge.active:hover[b-tp5nhju680] {
        background: #0f766e;
        border-color: #0f766e;
    }
}

.filter-preview[b-tp5nhju680] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    background: rgba(13, 148, 136, 0.1);
    color: #0d9488;
    font-size: 0.85rem;
    font-weight: 500;
}

.filter-preview.warning[b-tp5nhju680] {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.filter-preview .bi[b-tp5nhju680] {
    font-size: 0.9rem;
    flex-shrink: 0;
}

/* Mobile: 2-column grid */
@media (max-width: 576px) {
    .modal-backdrop[b-tp5nhju680] {
        padding: 0;
        align-items: stretch;
        touch-action: none;
    }

    .pantry-scan-modal[b-tp5nhju680] {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
        box-shadow: none;
    }

    .modal-header[b-tp5nhju680] {
        padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1rem 1rem;
        flex-shrink: 0;
    }

    .btn-close[b-tp5nhju680] {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .modal-body[b-tp5nhju680] {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1rem;
    }

    .photo-grid[b-tp5nhju680] {
        grid-template-columns: repeat(2, 1fr);
    }

    .modal-footer[b-tp5nhju680] {
        flex-direction: column;
        padding: 1rem;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
    }

    .btn-cancel[b-tp5nhju680],
    .btn-analyze[b-tp5nhju680] {
        width: 100%;
        justify-content: center;
        min-height: 48px;
    }

    .filters-toggle[b-tp5nhju680] {
        min-height: 48px;
        font-size: 16px;
    }

    .filter-badge[b-tp5nhju680] {
        min-height: 40px;
        padding: 0.4rem 0.75rem;
        font-size: 16px;
    }

    .filter-badges[b-tp5nhju680] {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    .filter-preview[b-tp5nhju680] {
        font-size: 16px;
    }

    .modal-actions[b-tp5nhju680] {
        flex-direction: column;
    }

    .modal-actions .btn[b-tp5nhju680] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Modals/PasteItemsModal.razor.rz.scp.css */
/* Modal Overlay */
.modal-overlay[b-arf1ml3w8k] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 1rem;
    overscroll-behavior: contain;
}

.modal-content[b-arf1ml3w8k] {
    background: var(--card-bg, #ffffff);
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.05);
    animation: modalSlideIn-b-arf1ml3w8k 0.3s ease;
    display: flex;
    flex-direction: column;
}

@keyframes modalSlideIn-b-arf1ml3w8k {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header[b-arf1ml3w8k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 2rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    background: var(--header-bg, var(--card-bg, #ffffff));
    border-radius: 16px 16px 0 0;
    position: sticky;
    top: 0;
    z-index: 10;
    flex-shrink: 0;
}

.modal-header h3[b-arf1ml3w8k] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary, #111827);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.modal-header h3 .bi[b-arf1ml3w8k] {
    color: var(--accent-primary, #6366f1);
    font-size: 1.1rem;
}

.close-button[b-arf1ml3w8k] {
    background: transparent;
    border: none;
    color: var(--text-secondary, #6b7280);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (hover: hover) {
    .close-button:hover[b-arf1ml3w8k] {
        background: var(--bg-secondary, #f3f4f6);
        color: var(--text-primary, #111827);
    }
}

.modal-body[b-arf1ml3w8k] {
    padding: 1.5rem 2rem;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.modal-footer[b-arf1ml3w8k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 2rem;
    border-top: 1px solid var(--border-color, #e5e7eb);
    background: var(--header-bg, var(--card-bg, #ffffff));
    gap: 0.75rem;
    flex-shrink: 0;
}

/* Form */
.form-group[b-arf1ml3w8k] {
    margin-bottom: 1rem;
}

.form-group label[b-arf1ml3w8k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
}

.form-group label .bi[b-arf1ml3w8k] {
    color: var(--accent-primary, #6366f1);
}

.form-control[b-arf1ml3w8k] {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    background: var(--input-bg, #ffffff);
    color: var(--text-primary, #111827);
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.form-control:focus[b-arf1ml3w8k] {
    outline: none;
    border-color: var(--accent-primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.form-control[b-arf1ml3w8k]::placeholder {
    color: var(--text-muted, #9ca3af);
}

.paste-textarea[b-arf1ml3w8k] {
    resize: vertical;
    min-height: 120px;
    font-family: inherit;
}

.form-hint[b-arf1ml3w8k] {
    display: block;
    color: var(--text-muted, #9ca3af);
    font-size: 0.75rem;
    margin-top: 0.375rem;
}

.paste-clipboard-btn[b-arf1ml3w8k] {
    width: 100%;
    margin-bottom: 0.5rem;
}

/* Buttons */
.btn[b-arf1ml3w8k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

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

.btn-primary[b-arf1ml3w8k] {
    background: var(--accent-primary, #6366f1);
    color: white;
}

@media (hover: hover) {
    .btn-primary:hover:not(:disabled)[b-arf1ml3w8k] {
        background: var(--accent-secondary, #4f46e5);
        transform: translateY(-1px);
    }
}

.btn-secondary[b-arf1ml3w8k] {
    background: var(--bg-secondary, #f3f4f6);
    color: var(--text-primary, #111827);
    border: 1px solid var(--border-color, #e5e7eb);
}

@media (hover: hover) {
    .btn-secondary:hover:not(:disabled)[b-arf1ml3w8k] {
        background: var(--bg-tertiary, #e5e7eb);
    }
}

.btn-outline[b-arf1ml3w8k] {
    background: transparent;
    color: var(--text-primary, #111827);
    border: 1px solid var(--border-color, #e5e7eb);
}

@media (hover: hover) {
    .btn-outline:hover:not(:disabled)[b-arf1ml3w8k] {
        background: var(--bg-secondary, #f3f4f6);
    }
}

/* Spinner */
.spinner-sm[b-arf1ml3w8k] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin-b-arf1ml3w8k 0.6s linear infinite;
}

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

/* Error Banner */
.error-banner[b-arf1ml3w8k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid #dc3545;
    border-radius: 8px;
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.75rem;
}

.error-banner .bi[b-arf1ml3w8k] {
    flex-shrink: 0;
}

/* Preview Sections */
.preview-section[b-arf1ml3w8k] {
    margin-bottom: 1.25rem;
}

.preview-section:last-child[b-arf1ml3w8k] {
    margin-bottom: 0;
}

.section-label[b-arf1ml3w8k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.new-label[b-arf1ml3w8k] {
    color: #16a34a;
}

.new-label .bi[b-arf1ml3w8k] {
    color: #16a34a;
}

.reactivate-label[b-arf1ml3w8k] {
    color: #2563eb;
}

.reactivate-label .bi[b-arf1ml3w8k] {
    color: #2563eb;
}

.active-label[b-arf1ml3w8k] {
    color: var(--text-secondary, #6b7280);
}

.active-label .bi[b-arf1ml3w8k] {
    color: var(--text-secondary, #6b7280);
}

.preview-item[b-arf1ml3w8k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    margin-bottom: 0.25rem;
    gap: 0.5rem;
}

@media (hover: hover) {
    .preview-item:hover[b-arf1ml3w8k] {
        background: var(--bg-secondary, #f3f4f6);
    }
}

.preview-item.dimmed[b-arf1ml3w8k] {
    opacity: 0.6;
}

.preview-item-info[b-arf1ml3w8k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1;
    flex-wrap: wrap;
}

.preview-item-name[b-arf1ml3w8k] {
    font-weight: 500;
    color: var(--text-primary, #111827);
    font-size: 0.95rem;
}

.preview-item-qty[b-arf1ml3w8k] {
    font-size: 0.8rem;
    color: var(--text-secondary, #6b7280);
    background: var(--bg-secondary, #f3f4f6);
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
}

.preview-item-match[b-arf1ml3w8k] {
    font-size: 0.75rem;
    color: var(--text-muted, #9ca3af);
    font-style: italic;
}

.btn-remove[b-arf1ml3w8k] {
    background: transparent;
    border: none;
    color: var(--text-muted, #9ca3af);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    transition: all 0.2s ease;
}

@media (hover: hover) {
    .btn-remove:hover[b-arf1ml3w8k] {
        background: rgba(220, 53, 69, 0.1);
        color: #dc3545;
    }
}

/* Empty Result */
.empty-result[b-arf1ml3w8k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem 1rem;
    color: var(--text-secondary, #6b7280);
    text-align: center;
}

.empty-result .bi[b-arf1ml3w8k] {
    font-size: 2rem;
    opacity: 0.5;
}

.empty-result p[b-arf1ml3w8k] {
    margin: 0;
    font-size: 0.95rem;
}

/* Mobile Fullscreen */
@media (max-width: 576px) {
    .modal-overlay[b-arf1ml3w8k] {
        padding: 0;
        touch-action: none;
    }

    .modal-content[b-arf1ml3w8k] {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
    }

    .modal-header[b-arf1ml3w8k] {
        padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1rem 1rem;
        border-radius: 0;
    }

    .close-button[b-arf1ml3w8k] {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
        font-size: 1.5rem;
    }

    .modal-body[b-arf1ml3w8k] {
        padding: 1rem;
    }

    .modal-footer[b-arf1ml3w8k] {
        padding: 1rem;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
        flex-direction: column;
        gap: 0.75rem;
    }

    .modal-footer .btn[b-arf1ml3w8k] {
        width: 100%;
        min-height: 48px;
    }

    .form-control[b-arf1ml3w8k] {
        min-height: 48px;
        font-size: 16px;
    }

    .btn-remove[b-arf1ml3w8k] {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
    }
}
/* /Components/Modals/RecurringItemsModal.razor.rz.scp.css */
/* Modal Overlay */
.modal-overlay[b-7ud18npkz4] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 1rem;
    backdrop-filter: blur(4px);
    overscroll-behavior: contain;
}

.modal-content[b-7ud18npkz4] {
    background: var(--card-bg, #ffffff);
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: modalSlideIn-b-7ud18npkz4 0.3s ease;
}

@keyframes modalSlideIn-b-7ud18npkz4 {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header[b-7ud18npkz4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 2rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    background: var(--header-bg, var(--card-bg, #ffffff));
    border-radius: 16px 16px 0 0;
    position: sticky;
    top: 0;
    z-index: 10;
    min-width: 0;
}

.modal-header h3[b-7ud18npkz4] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary, #111827);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.modal-header h3 span:not(.bi)[b-7ud18npkz4] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modal-header h3 .bi[b-7ud18npkz4] {
    color: var(--accent-primary, #6366f1);
    font-size: 1.1rem;
}

.close-button[b-7ud18npkz4] {
    background: transparent;
    border: none;
    color: var(--text-secondary, #6b7280);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (hover: hover) {
    .close-button:hover[b-7ud18npkz4] {
        background: var(--bg-secondary, #f3f4f6);
        color: var(--text-primary, #111827);
    }
}

.modal-body[b-7ud18npkz4] {
    padding: 1.5rem 2rem;
}

.modal-footer[b-7ud18npkz4] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 1.25rem 2rem;
    border-top: 1px solid var(--border-color, #e5e7eb);
    background: var(--header-bg, var(--card-bg, #ffffff));
    gap: 0.75rem;
}

/* Notification Modal */
.notification-modal[b-7ud18npkz4] {
    max-width: 500px;
}

.notification-items-list[b-7ud18npkz4] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 400px;
    overflow-y: auto;
}

.notification-item[b-7ud18npkz4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    gap: 1rem;
}

.notification-item.recurring[b-7ud18npkz4] {
    border-left: 3px solid #3b82f6;
    background: rgba(59, 130, 246, 0.05);
}

.notification-item-info[b-7ud18npkz4] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

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

.notification-item-status[b-7ud18npkz4] {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.notification-item.recurring .notification-item-status[b-7ud18npkz4] {
    color: #3b82f6;
}

.empty-notification[b-7ud18npkz4] {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
}

.empty-notification .bi[b-7ud18npkz4] {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.5;
    display: block;
}

.empty-notification p[b-7ud18npkz4] {
    margin: 0;
}

/* Text color utilities */
.text-info[b-7ud18npkz4] {
    color: #3b82f6 !important;
}

/* Buttons */
.btn[b-7ud18npkz4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn-sm[b-7ud18npkz4] {
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
}

.btn-primary[b-7ud18npkz4] {
    background: var(--accent-primary, #6366f1);
    color: white;
}

@media (hover: hover) {
    .btn-primary:hover[b-7ud18npkz4] {
        background: var(--accent-secondary, #4f46e5);
        transform: translateY(-1px);
    }
}

.btn-secondary[b-7ud18npkz4] {
    background: var(--bg-secondary, #f3f4f6);
    color: var(--text-primary, #111827);
    border: 1px solid var(--border-color, #e5e7eb);
}

@media (hover: hover) {
    .btn-secondary:hover[b-7ud18npkz4] {
        background: var(--bg-tertiary, #e5e7eb);
    }
}

.btn-outline-primary[b-7ud18npkz4] {
    background: transparent;
    color: var(--accent-primary, #6366f1);
    border: 1px solid var(--accent-primary, #6366f1);
}

@media (hover: hover) {
    .btn-outline-primary:hover[b-7ud18npkz4] {
        background: var(--accent-primary, #6366f1);
        color: white;
    }
}

.btn-outline-primary:disabled[b-7ud18npkz4] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsive - Tablet */
@media (max-width: 768px) {
    .modal-content[b-7ud18npkz4] {
        max-width: 95%;
    }

    .modal-body[b-7ud18npkz4] {
        padding: 1.25rem 1.5rem;
    }
}

/* Mobile Fullscreen Modal */
@media (max-width: 576px) {
    .modal-overlay[b-7ud18npkz4] {
        padding: 0;
        touch-action: none;
    }

    .modal-content[b-7ud18npkz4] {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .modal-header[b-7ud18npkz4] {
        padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1rem 1rem;
        border-radius: 0;
        flex-shrink: 0;
    }

    .close-button[b-7ud18npkz4] {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
        font-size: 1.5rem;
    }

    .modal-body[b-7ud18npkz4] {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1rem;
    }

    .modal-footer[b-7ud18npkz4] {
        padding: 1rem;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
        flex-shrink: 0;
        flex-direction: column;
        gap: 0.5rem;
    }

    .modal-footer .btn[b-7ud18npkz4] {
        width: 100%;
        min-height: 44px;
    }

    .notification-modal[b-7ud18npkz4] {
        max-width: 100%;
        margin: 0.5rem;
    }

    .notification-items-list[b-7ud18npkz4] {
        max-height: 300px;
    }
}

/* Dark theme */
body.dark-theme .modal-content[b-7ud18npkz4] {
    background: var(--card-bg);
}

body.dark-theme .modal-header[b-7ud18npkz4],
body.dark-theme .modal-footer[b-7ud18npkz4] {
    background: var(--header-bg, var(--card-bg));
}
/* /Components/Modals/ScanReceiptModal.razor.rz.scp.css */
/* ScanReceiptModal.razor.css
   Base modal styles are provided by TrackerShared/wwwroot/css/scan-modal-base.css
   Component-specific styles below */

/* Items Count */
.items-count[b-7vyjead0rc] {
    margin: 0 0 1.5rem 0;
    color: var(--text-secondary);
    font-size: 1rem;
}

/* Empty Section */
.empty-section[b-7vyjead0rc] {
    text-align: center;
    padding: 2rem 1rem;
}

.empty-icon[b-7vyjead0rc] {
    font-size: 4rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.empty-section h3[b-7vyjead0rc] {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    color: var(--text-primary);
}

.empty-message[b-7vyjead0rc] {
    margin: 0 0 1.5rem 0;
    color: var(--text-secondary);
    font-size: 1rem;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
}
/* /Components/Pages/About.razor.rz.scp.css */
.about-container[b-y5n0rcq169] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.about-header[b-y5n0rcq169] {
    text-align: center;
    margin-bottom: 3rem;
}

.page-title[b-y5n0rcq169] {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.page-subtitle[b-y5n0rcq169] {
    font-size: 1.125rem;
    color: var(--text-secondary);
}

.about-content[b-y5n0rcq169] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.about-section[b-y5n0rcq169] {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
}

.hero-section[b-y5n0rcq169] {
    text-align: center;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: white;
    padding: 3rem 2rem;
}

.hero-icon[b-y5n0rcq169] {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.9;
}

.mission-statement[b-y5n0rcq169] {
    font-size: 1.125rem;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;
    opacity: 0.95;
    color: white;
}

.about-section h2[b-y5n0rcq169] {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

.hero-section h2[b-y5n0rcq169] {
    color: white !important;
    font-size: 2rem !important;
    margin-bottom: 1rem !important;
}

.about-section p[b-y5n0rcq169] {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.features-grid[b-y5n0rcq169] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.feature-item[b-y5n0rcq169] {
    background: var(--bg-tertiary);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

@media (hover: hover) {
    .feature-item:hover[b-y5n0rcq169] {
        transform: translateY(-4px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
}

.feature-icon[b-y5n0rcq169] {
    font-size: 2.5rem;
    color: var(--accent-primary);
    margin-bottom: 1rem;
}

.feature-item h3[b-y5n0rcq169] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.feature-item p[b-y5n0rcq169] {
    font-size: 0.938rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.benefits-list[b-y5n0rcq169] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.benefit-item[b-y5n0rcq169] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.benefit-icon[b-y5n0rcq169] {
    font-size: 1.5rem;
    color: var(--accent-primary);
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.benefit-content h3[b-y5n0rcq169] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.benefit-content p[b-y5n0rcq169] {
    font-size: 0.938rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.audience-list[b-y5n0rcq169] {
    margin: 1rem 0 0 1.5rem;
    padding: 0;
}

.audience-list li[b-y5n0rcq169] {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.commitment-section[b-y5n0rcq169] {
    background: var(--bg-tertiary);
}

.cta-section[b-y5n0rcq169] {
    text-align: center;
    border: 2px solid var(--accent-primary);
}

.cta-buttons[b-y5n0rcq169] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.btn[b-y5n0rcq169] {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all 0.2s;
}

.btn-primary[b-y5n0rcq169] {
    background: var(--accent-gradient);
    color: white;
    border: none;
}

@media (hover: hover) {
    .btn-primary:hover[b-y5n0rcq169] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
}

.btn-secondary[b-y5n0rcq169] {
    background: var(--card-bg);
    color: var(--accent-primary);
    border: 2px solid var(--accent-primary);
}

@media (hover: hover) {
    .btn-secondary:hover[b-y5n0rcq169] {
        background: var(--accent-primary);
        color: white;
    }
}

.contact-section[b-y5n0rcq169] {
    text-align: center;
}

.contact-link[b-y5n0rcq169] {
    display: inline-flex;
    align-items: center;
    color: var(--accent-primary);
    font-size: 1.125rem;
    font-weight: 600;
    text-decoration: none;
    margin-top: 1rem;
    transition: color 0.2s;
}

@media (hover: hover) {
    .contact-link:hover[b-y5n0rcq169] {
        color: var(--accent-secondary);
    }
}

@media (max-width: 768px) {
    .about-container[b-y5n0rcq169] {
        padding: 1rem;
    }

    .page-title[b-y5n0rcq169] {
        font-size: 2rem;
    }

    .about-section[b-y5n0rcq169] {
        padding: 1.5rem;
    }

    .hero-section[b-y5n0rcq169] {
        padding: 2rem 1.5rem;
    }

    .hero-icon[b-y5n0rcq169] {
        font-size: 3rem;
    }

    .hero-section h2[b-y5n0rcq169] {
        font-size: 1.5rem;
    }

    .mission-statement[b-y5n0rcq169] {
        font-size: 1rem;
    }

    .features-grid[b-y5n0rcq169] {
        grid-template-columns: 1fr;
    }

    .cta-buttons[b-y5n0rcq169] {
        flex-direction: column;
    }

    .btn[b-y5n0rcq169] {
        width: 100%;
        justify-content: center;
    }
}

/* Mobile - Touch Friendly */
@media (max-width: 576px) {
    .about-container[b-y5n0rcq169] {
        padding: 0.75rem;
    }

    .page-title[b-y5n0rcq169] {
        font-size: 1.5rem;
    }

    .about-section[b-y5n0rcq169] {
        padding: 1rem;
    }

    .hero-section[b-y5n0rcq169] {
        padding: 1.5rem 1rem;
    }

    .btn[b-y5n0rcq169] {
        min-height: 44px;
    }

    .feature-item[b-y5n0rcq169] {
        padding: 1rem;
    }

    .contact-link[b-y5n0rcq169] {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}
/* /Components/Pages/AuthError.razor.rz.scp.css */
.auth-error-container[b-9cg6w0niwy] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.auth-error-card[b-9cg6w0niwy] {
    background: var(--card-bg, white);
    border-radius: 16px;
    padding: 3rem;
    max-width: 600px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.error-icon[b-9cg6w0niwy] {
    font-size: 4rem;
    color: #ffc107;
    margin-bottom: 1.5rem;
}

.auth-error-card h1[b-9cg6w0niwy] {
    color: var(--text-primary);
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.error-message[b-9cg6w0niwy] {
    text-align: left;
    margin-bottom: 2rem;
}

.error-message p[b-9cg6w0niwy] {
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.error-message ul[b-9cg6w0niwy] {
    color: var(--text-secondary);
    padding-left: 1.5rem;
    margin: 0;
}

.error-message li[b-9cg6w0niwy] {
    margin-bottom: 0.5rem;
}

.error-actions[b-9cg6w0niwy] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.error-actions .btn[b-9cg6w0niwy] {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.error-actions .btn-primary[b-9cg6w0niwy] {
    background: #4CAF50;
    color: white;
}

@media (hover: hover) {
    .error-actions .btn-primary:hover[b-9cg6w0niwy] {
        background: #45a049;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
    }
}

.error-actions .btn-secondary[b-9cg6w0niwy] {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

@media (hover: hover) {
    .error-actions .btn-secondary:hover[b-9cg6w0niwy] {
        background: var(--hover-bg);
        transform: translateY(-2px);
    }
}

.error-help[b-9cg6w0niwy] {
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.error-help p[b-9cg6w0niwy] {
    margin: 0;
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .auth-error-card[b-9cg6w0niwy] {
        padding: 2rem 1.5rem;
    }

    .auth-error-card h1[b-9cg6w0niwy] {
        font-size: 1.5rem;
    }

    .error-icon[b-9cg6w0niwy] {
        font-size: 3rem;
    }

    .error-actions[b-9cg6w0niwy] {
        flex-direction: column;
    }

    .error-actions .btn[b-9cg6w0niwy] {
        width: 100%;
        justify-content: center;
    }
}

/* Mobile - Touch Friendly */
@media (max-width: 576px) {
    .auth-error-container[b-9cg6w0niwy] {
        padding: 1rem;
    }

    .auth-error-card[b-9cg6w0niwy] {
        padding: 1.5rem 1rem;
    }

    .auth-error-card h1[b-9cg6w0niwy] {
        font-size: 1.25rem;
    }

    .error-actions .btn[b-9cg6w0niwy] {
        min-height: 44px;
    }
}
/* /Components/Pages/CatalogueDetail.razor.rz.scp.css */
.catalogue-detail-page[b-tecryt2aak] {
    padding: 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

.detail-header[b-tecryt2aak] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.btn-back[b-tecryt2aak] {
    padding: 0.5rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.header-info[b-tecryt2aak] {
    min-width: 0;
    flex: 1;
}

.header-info h1[b-tecryt2aak] {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.extraction-meta[b-tecryt2aak] {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.matches-section[b-tecryt2aak], .products-section[b-tecryt2aak] {
    background: var(--bg-secondary);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.section-header[b-tecryt2aak] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.section-header h2[b-tecryt2aak] {
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-apply-all[b-tecryt2aak] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 0.5rem;
}

.btn-apply-all:disabled[b-tecryt2aak] {
    opacity: 0.7;
    cursor: not-allowed;
}

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

.apply-message[b-tecryt2aak] {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.apply-message.success[b-tecryt2aak] {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.apply-message.error[b-tecryt2aak] {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.matches-list[b-tecryt2aak] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.match-card[b-tecryt2aak] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-primary);
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
}

.match-grocery[b-tecryt2aak] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    min-width: 150px;
}

.match-arrow[b-tecryt2aak] {
    color: var(--text-secondary);
}

.match-product[b-tecryt2aak] {
    flex: 1;
}

.match-product .product-name[b-tecryt2aak] {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

.match-product .product-price[b-tecryt2aak] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.match-confidence[b-tecryt2aak] {
    padding: 0.25rem 0.5rem;
    background: var(--primary-color);
    color: white;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.filter-controls[b-tecryt2aak] {
    display: flex;
    gap: 0.75rem;
}

.search-input[b-tecryt2aak] {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    width: 200px;
}

.category-select[b-tecryt2aak] {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
}

.products-table-container[b-tecryt2aak] {
    overflow-x: auto;
}

.products-table[b-tecryt2aak] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.products-table th[b-tecryt2aak],
.products-table td[b-tecryt2aak] {
    padding: 0.75rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.products-table th[b-tecryt2aak] {
    background: var(--bg-primary);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    white-space: nowrap;
}

@media (hover: hover) {
    .products-table tbody tr:hover[b-tecryt2aak] {
        background: var(--bg-hover, rgba(0,0,0,0.02));
    }
}

.cell-page[b-tecryt2aak] {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.cell-name[b-tecryt2aak] {
    font-weight: 500;
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cell-brand[b-tecryt2aak] {
    color: var(--text-secondary);
    font-size: 0.85rem;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cell-category .category-tag[b-tecryt2aak] {
    padding: 0.125rem 0.5rem;
    background: var(--bg-primary);
    border-radius: 0.25rem;
    font-size: 0.8rem;
    display: inline-block;
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cell-quantity[b-tecryt2aak],
.cell-unit[b-tecryt2aak] {
    font-size: 0.85rem;
}

.cell-price[b-tecryt2aak] {
    white-space: nowrap;
}

.cell-currency[b-tecryt2aak] {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.original-price[b-tecryt2aak] {
    text-decoration: line-through;
    color: var(--text-secondary);
}

.discount-price[b-tecryt2aak] {
    font-weight: 600;
    color: #059669;
}

.discount-badge[b-tecryt2aak] {
    padding: 0.125rem 0.375rem;
    background: #dc2626;
    color: white;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.empty-state[b-tecryt2aak] {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
}

.empty-state .bi[b-tecryt2aak] {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.5rem;
}

.loading[b-tecryt2aak], .not-found[b-tecryt2aak] {
    text-align: center;
    padding: 3rem;
}

.spinner[b-tecryt2aak] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin-b-tecryt2aak 1s linear infinite;
    margin: 0 auto 1rem;
}

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

/* Tablet */
@media (max-width: 768px) {
    .catalogue-detail-page[b-tecryt2aak] {
        padding: 0.75rem;
    }

    .detail-header[b-tecryt2aak] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .header-info h1[b-tecryt2aak] {
        font-size: 1.25rem;
    }

    .matches-section[b-tecryt2aak], .products-section[b-tecryt2aak] {
        padding: 1rem;
    }

    .section-header[b-tecryt2aak] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .btn-apply-all[b-tecryt2aak] {
        width: 100%;
        justify-content: center;
    }

    .filter-controls[b-tecryt2aak] {
        flex-direction: column;
        width: 100%;
    }

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

    .category-select[b-tecryt2aak] {
        width: 100%;
    }

    .match-card[b-tecryt2aak] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .match-grocery[b-tecryt2aak] {
        min-width: auto;
    }

    .match-arrow[b-tecryt2aak] {
        display: none;
    }

    .products-table th[b-tecryt2aak],
    .products-table td[b-tecryt2aak] {
        padding: 0.5rem 0.25rem;
        font-size: 0.8rem;
    }

    .cell-name[b-tecryt2aak] {
        max-width: 150px;
    }
}

/* Mobile - Touch Friendly */
@media (max-width: 576px) {
    .catalogue-detail-page[b-tecryt2aak] {
        padding: 0.5rem;
    }

    .detail-header[b-tecryt2aak] {
        margin-bottom: 1rem;
    }

    .btn-back[b-tecryt2aak] {
        min-height: 44px;
        padding: 0.5rem 1rem;
    }

    .header-info h1[b-tecryt2aak] {
        font-size: 1.125rem;
    }

    .extraction-meta[b-tecryt2aak] {
        font-size: 0.8rem;
    }

    .matches-section[b-tecryt2aak], .products-section[b-tecryt2aak] {
        padding: 0.75rem;
        margin-bottom: 1rem;
        border-radius: 0.5rem;
    }

    .section-header h2[b-tecryt2aak] {
        font-size: 1rem;
    }

    .btn-apply-all[b-tecryt2aak] {
        min-height: 44px;
        padding: 0.75rem 1rem;
    }

    .search-input[b-tecryt2aak],
    .category-select[b-tecryt2aak] {
        min-height: 44px;
        font-size: 16px;
        padding: 0.75rem;
    }

    .match-card[b-tecryt2aak] {
        padding: 0.75rem;
        min-height: 44px;
    }

    .match-grocery[b-tecryt2aak] {
        font-size: 0.85rem;
    }

    .match-product .product-name[b-tecryt2aak] {
        font-size: 0.9rem;
    }

    .match-confidence[b-tecryt2aak] {
        padding: 0.375rem 0.625rem;
        font-size: 0.7rem;
    }

    /* Hide less important table columns on mobile */
    .products-table .cell-brand[b-tecryt2aak],
    .products-table .cell-unit[b-tecryt2aak],
    .products-table .cell-currency[b-tecryt2aak] {
        display: none;
    }

    .products-table th[b-tecryt2aak],
    .products-table td[b-tecryt2aak] {
        padding: 0.5rem 0.25rem;
        font-size: 0.75rem;
    }

    .cell-name[b-tecryt2aak] {
        max-width: 100px;
        word-break: break-word;
    }

    .products-table-container[b-tecryt2aak] {
        margin: 0 -0.75rem;
        padding: 0 0.75rem;
    }

    .empty-state[b-tecryt2aak] {
        padding: 1.5rem 1rem;
    }

    .empty-state .bi[b-tecryt2aak] {
        font-size: 1.5rem;
    }
}
/* /Components/Pages/Catalogues.razor.rz.scp.css */
.catalogues-page[b-9w3e3ljohw] {
    padding: 1rem;
    max-width: 1400px;
    margin: 0 auto;
}

.catalogues-header[b-9w3e3ljohw] {
    text-align: center;
    margin-bottom: 1.5rem;
}

.catalogues-title[b-9w3e3ljohw] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.catalogues-subtitle[b-9w3e3ljohw] {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.tab-navigation[b-9w3e3ljohw] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.tab-btn[b-9w3e3ljohw] {
    padding: 0.75rem 1.25rem;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.5rem;
    transition: all 0.2s;
    font-weight: 500;
}

@media (hover: hover) {
    .tab-btn:hover[b-9w3e3ljohw] {
        background: var(--bg-hover);
        color: var(--text-primary);
    }
}

.tab-btn.active[b-9w3e3ljohw] {
    background: var(--accent-primary, #4CAF50);
    color: #ffffff;
    font-weight: 600;
}

/* Ensure white text on green background in all modes */
:root .tab-btn.active[b-9w3e3ljohw],
[data-theme="light"] .tab-btn.active[b-9w3e3ljohw],
[data-theme="dark"] .tab-btn.active[b-9w3e3ljohw] {
    color: #ffffff !important;
}

.tab-content[b-9w3e3ljohw] {
    animation: fadeIn-b-9w3e3ljohw 0.2s ease;
}

@keyframes fadeIn-b-9w3e3ljohw {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.section-title[b-9w3e3ljohw] {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.section-description[b-9w3e3ljohw] {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.import-form[b-9w3e3ljohw] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.input-group[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
}

.input-group input[b-9w3e3ljohw] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 1rem;
    outline: none;
    color: var(--text-primary);
}

.input-group input[b-9w3e3ljohw]::placeholder {
    color: var(--text-muted);
}

.btn-import[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--accent-primary);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

@media (hover: hover) {
    .btn-import:hover:not(:disabled)[b-9w3e3ljohw] {
        background: var(--accent-secondary);
    }
}

.btn-import:disabled[b-9w3e3ljohw] {
    opacity: 0.6;
    cursor: not-allowed;
}

.error-message[b-9w3e3ljohw], .success-message[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-top: 1rem;
}

.error-message[b-9w3e3ljohw] {
    background: rgba(220, 38, 38, 0.15);
    color: var(--danger, #dc2626);
    border: 1px solid rgba(220, 38, 38, 0.3);
}

.success-message[b-9w3e3ljohw] {
    background: rgba(5, 150, 105, 0.15);
    color: var(--success, #059669);
    border: 1px solid rgba(5, 150, 105, 0.3);
}

.processing-status[b-9w3e3ljohw] {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: 0.5rem;
}

.status-header[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.spinning[b-9w3e3ljohw] {
    animation: spin-b-9w3e3ljohw 1s linear infinite;
}

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

.divider[b-9w3e3ljohw] {
    height: 1px;
    background: var(--border-color);
    margin: 2rem 0;
}

.upload-zone[b-9w3e3ljohw] {
    border: 2px dashed var(--border-color);
    border-radius: 0.5rem;
    padding: 2rem;
    text-align: center;
    color: var(--text-secondary);
}

.upload-zone .bi-file-earmark-pdf[b-9w3e3ljohw] {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
}

.sources-header[b-9w3e3ljohw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.sources-header-left[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.sources-header-left .section-title[b-9w3e3ljohw] {
    margin: 0;
}

.sources-search-wrapper[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    min-width: 180px;
}

.sources-search-wrapper:focus-within[b-9w3e3ljohw] {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.15);
}

.sources-search-wrapper .bi-search[b-9w3e3ljohw] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    flex-shrink: 0;
}

.sources-search[b-9w3e3ljohw] {
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 0.9rem;
    padding: 0;
    width: 100%;
    min-width: 0;
}

.sources-search[b-9w3e3ljohw]::placeholder {
    color: var(--text-muted);
}

.sources-search:focus[b-9w3e3ljohw] {
    outline: none;
}

.search-clear[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    font-size: 1rem;
    flex-shrink: 0;
}

@media (hover: hover) {
    .search-clear:hover[b-9w3e3ljohw] {
        color: var(--text-primary);
    }
}

.country-filter-wrapper[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

@media (hover: hover) {
    .country-filter-wrapper:hover[b-9w3e3ljohw] {
        border-color: var(--accent-primary);
        background: var(--bg-tertiary, var(--bg-secondary));
    }
}

.country-filter-wrapper .bi[b-9w3e3ljohw] {
    color: var(--accent-primary);
    font-size: 1rem;
    flex-shrink: 0;
}

.country-filter[b-9w3e3ljohw] {
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    padding-right: 1.25rem;
    min-width: 120px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%236c757d' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 12px;
}

[data-theme="dark"] .country-filter[b-9w3e3ljohw] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%23adb5bd' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    color-scheme: dark;
}

.country-filter:focus[b-9w3e3ljohw] {
    outline: none;
}

.country-filter option[b-9w3e3ljohw] {
    background: var(--bg-primary);
    color: var(--text-primary);
}

.btn-add-source[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--accent-primary);
    color: white;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}

@media (hover: hover) {
    .btn-add-source:hover[b-9w3e3ljohw] {
        background: var(--accent-secondary);
        transform: translateY(-1px);
    }
}

/* Extractions list */
.extractions-list[b-9w3e3ljohw] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.extraction-card[b-9w3e3ljohw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
}

/* ========================================
   COMPACT SOURCE CARDS GRID
   ======================================== */

.sources-grid[b-9w3e3ljohw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.source-card-compact[b-9w3e3ljohw] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media (hover: hover) {
    .source-card-compact:hover[b-9w3e3ljohw] {
        border-color: var(--accent-primary);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }
}

.source-card-compact.disabled[b-9w3e3ljohw] {
    opacity: 0.5;
}

@media (hover: hover) {
    .source-card-compact.disabled:hover[b-9w3e3ljohw] {
        opacity: 0.7;
    }
}

.source-card-header[b-9w3e3ljohw] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.source-logo-wrapper[b-9w3e3ljohw] {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    border: 2px solid var(--border-color);
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    flex-shrink: 0;
}

.catalog-count-badge[b-9w3e3ljohw] {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--accent-color, #4CAF50);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 24px;
    height: 24px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    border: 2px solid var(--bg-secondary);
    z-index: 1;
}

.source-logo-wrapper img[b-9w3e3ljohw] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}

.source-logo-wrapper .logo-placeholder[b-9w3e3ljohw] {
    font-size: 1rem;
    font-weight: 700;
}

.source-card-toggle .toggle-btn[b-9w3e3ljohw] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: all 0.2s;
    background: rgba(220, 38, 38, 0.15);
    color: #dc2626;
}

.source-card-toggle .toggle-btn.active[b-9w3e3ljohw] {
    background: rgba(5, 150, 105, 0.15);
    color: #059669;
}

@media (hover: hover) {
    .source-card-toggle .toggle-btn:hover[b-9w3e3ljohw] {
        transform: scale(1.1);
    }
}

.source-card-body[b-9w3e3ljohw] {
    flex: 1;
    min-width: 0;
}

.source-card-name[b-9w3e3ljohw] {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 0.35rem 0;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.source-card-badges[b-9w3e3ljohw] {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}

.source-card-badges .badge-country[b-9w3e3ljohw] {
    padding: 0.15rem 0.4rem;
    background: var(--bg-tertiary, var(--bg-primary));
    border: 1px solid var(--border-color);
    border-radius: 0.2rem;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.source-card-badges .badge-category[b-9w3e3ljohw] {
    padding: 0.15rem 0.4rem;
    border-radius: 0.2rem;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
}

.source-card-meta[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.source-card-meta.muted[b-9w3e3ljohw] {
    color: var(--text-muted);
}

.source-card-footer[b-9w3e3ljohw] {
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
    margin-top: auto;
}

.source-card-footer .extractor-tag[b-9w3e3ljohw] {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background: var(--bg-tertiary, var(--bg-primary));
    border-radius: 0.25rem;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.source-card-footer .extractor-tag.static_html[b-9w3e3ljohw] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.source-card-footer .extractor-tag.js_render[b-9w3e3ljohw] {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.source-card-footer .extractor-tag.issuu[b-9w3e3ljohw] {
    background: rgba(236, 72, 153, 0.15);
    color: #ec4899;
}

/* Mobile - Compact Shopping Mode */
@media (max-width: 576px) {
    /* === PAGE & HEADER === */
    .catalogues-page[b-9w3e3ljohw] {
        padding: 0.75rem 0.5rem;
    }

    .catalogues-header[b-9w3e3ljohw] {
        margin-bottom: 0.75rem;
    }

    .catalogues-title[b-9w3e3ljohw] {
        font-size: 1.1rem;
    }

    .catalogues-subtitle[b-9w3e3ljohw] {
        font-size: 0.8rem;
    }

    /* === TAB NAVIGATION === */
    .tab-navigation[b-9w3e3ljohw] {
        gap: 0.25rem;
        margin-bottom: 0.75rem;
        padding-bottom: 0.35rem;
    }

    .tab-btn[b-9w3e3ljohw] {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
        gap: 0.35rem;
        min-height: 40px;
    }

    .tab-btn .bi[b-9w3e3ljohw] {
        font-size: 0.9rem;
    }

    /* === FILTER SECTIONS === */
    .filter-section[b-9w3e3ljohw] {
        padding: 0.5rem 0.75rem;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .filter-label[b-9w3e3ljohw] {
        font-size: 0.75rem;
        min-width: 70px;
    }

    .category-tabs[b-9w3e3ljohw] {
        gap: 0.35rem;
    }

    .cat-tab[b-9w3e3ljohw] {
        padding: 0.35rem 0.6rem;
        font-size: 0.75rem;
        border-radius: 4px;
    }

    .sort-controls[b-9w3e3ljohw] {
        gap: 0.35rem;
    }

    .sort-btn[b-9w3e3ljohw] {
        padding: 0.3rem 0.5rem;
        font-size: 0.7rem;
    }

    .reset-btn[b-9w3e3ljohw] {
        padding: 0.35rem 0.6rem;
        font-size: 0.7rem;
    }

    /* === STORE ICONS === */
    .stores-section[b-9w3e3ljohw] {
        padding: 0.35rem 0.5rem;
    }

    .store-icons-row[b-9w3e3ljohw] {
        gap: 0.5rem;
        padding: 0.35rem 0;
    }

    .store-icon[b-9w3e3ljohw] {
        width: 55px;
        height: 55px;
        border-radius: 6px;
        padding: 4px 3px 3px;
    }

    .store-icon img[b-9w3e3ljohw] {
        max-height: 28px;
    }

    .store-icon .store-name[b-9w3e3ljohw] {
        font-size: 0.55rem;
    }

    .store-icon .store-initial[b-9w3e3ljohw] {
        font-size: 1rem;
    }

    /* === SOURCES GRID === */
    .sources-grid[b-9w3e3ljohw] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .source-card-compact[b-9w3e3ljohw] {
        padding: 0.5rem;
        gap: 0.35rem;
        border-radius: 6px;
    }

    .source-logo-wrapper[b-9w3e3ljohw] {
        width: 36px;
        height: 36px;
        border-radius: 6px;
    }

    .catalog-count-badge[b-9w3e3ljohw] {
        min-width: 18px;
        height: 18px;
        font-size: 0.65rem;
        top: -6px;
        right: -6px;
    }

    .source-card-name[b-9w3e3ljohw] {
        font-size: 0.8rem;
    }

    .source-card-meta[b-9w3e3ljohw] {
        font-size: 0.65rem;
    }

    .source-card-toggle .toggle-btn[b-9w3e3ljohw] {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
        padding: 10px;
        box-sizing: content-box;
        margin: -10px;
    }

    /* === CATALOGUE BROWSER === */
    .catalogue-browser[b-9w3e3ljohw] {
        border-radius: 8px;
        min-height: 400px;
    }

    /* === SOURCES HEADER === */
    .sources-header[b-9w3e3ljohw] {
        margin-bottom: 0.75rem;
        gap: 0.5rem;
    }

    .sources-header-left[b-9w3e3ljohw] {
        gap: 0.75rem;
    }

    .sources-header-left .section-title[b-9w3e3ljohw] {
        font-size: 0.95rem;
    }

    .sources-search-wrapper[b-9w3e3ljohw] {
        padding: 0.35rem 0.5rem;
        min-width: 140px;
    }

    .sources-search[b-9w3e3ljohw] {
        font-size: 16px;
    }

    .country-filter-wrapper[b-9w3e3ljohw] {
        padding: 0.35rem 0.5rem;
    }

    .country-filter[b-9w3e3ljohw] {
        font-size: 16px;
        min-width: 90px;
    }

    .btn-add-source[b-9w3e3ljohw] {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
        gap: 0.35rem;
    }

    /* === SECTION TITLES === */
    .section-title[b-9w3e3ljohw] {
        font-size: 0.95rem;
        margin-bottom: 0.35rem;
    }

    .section-description[b-9w3e3ljohw] {
        font-size: 0.8rem;
        margin-bottom: 0.5rem;
    }

    /* === EMPTY STATE === */
    .empty-state[b-9w3e3ljohw] {
        padding: 2rem 1rem;
    }

    .empty-state .bi[b-9w3e3ljohw] {
        font-size: 2.5rem;
    }

    .empty-state h3[b-9w3e3ljohw] {
        font-size: 1rem;
    }

    .empty-state p[b-9w3e3ljohw] {
        font-size: 0.85rem;
    }

    /* === FORM INPUTS === */
    .form-control[b-9w3e3ljohw] {
        min-height: 44px;
        font-size: 16px;  /* Prevent iOS zoom */
    }

    .btn-import[b-9w3e3ljohw],
    .btn-submit[b-9w3e3ljohw] {
        min-height: 44px;
        width: 100%;
    }

    /* === UPLOAD ZONE === */
    .upload-zone[b-9w3e3ljohw] {
        padding: 1.25rem 0.75rem;
    }

    .upload-zone .bi-file-earmark-pdf[b-9w3e3ljohw] {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }

    /* === DIVIDER === */
    .divider[b-9w3e3ljohw] {
        margin: 1rem 0;
    }

    /* === EXTRACTION CARDS === */
    .extraction-card[b-9w3e3ljohw] {
        padding: 0.75rem;
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
}

/* Legacy source-card styles (keep for backwards compat) */
.source-card[b-9w3e3ljohw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
}

.source-card.inactive[b-9w3e3ljohw] {
    opacity: 0.6;
}

.source-header-with-logo[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.source-logo[b-9w3e3ljohw] {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 6px;
    background: var(--bg-secondary);
}

/* Logo upload in modal */
.logo-preview[b-9w3e3ljohw] {
    position: relative;
    display: inline-block;
    margin-top: 0.5rem;
}

.logo-thumbnail[b-9w3e3ljohw] {
    width: 100px;
    height: 100px;
    object-fit: contain;
    border-radius: 8px;
    border: 2px solid var(--border-color);
    background: var(--bg-secondary);
}

.btn-remove-logo[b-9w3e3ljohw] {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--danger-color, #dc3545);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

@media (hover: hover) {
    .btn-remove-logo:hover[b-9w3e3ljohw] {
        background: #b91c1c;
        filter: brightness(1.1);
    }
}

.logo-upload-area[b-9w3e3ljohw] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.logo-upload-area small[b-9w3e3ljohw] {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.upload-progress[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    color: var(--text-secondary);
}

/* Logo Upload Section */
.logo-upload-section[b-9w3e3ljohw] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.current-logo-preview[b-9w3e3ljohw] {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 100px;
}

.current-logo-preview img[b-9w3e3ljohw] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    padding: 4px;
}

.logo-upload-input[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.logo-file-input[b-9w3e3ljohw] {
    flex: 1;
    padding: 0.5rem;
    border: 1px dashed var(--border-color);
    border-radius: 0.5rem;
    background: var(--bg-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

@media (hover: hover) {
    .logo-file-input:hover[b-9w3e3ljohw] {
        border-color: var(--accent-primary);
        background: var(--bg-hover);
    }
}

.logo-file-input[b-9w3e3ljohw]::file-selector-button {
    padding: 0.4rem 0.75rem;
    border: none;
    border-radius: 0.25rem;
    background: var(--accent-primary);
    color: white;
    cursor: pointer;
    font-size: 0.85rem;
    margin-right: 0.5rem;
    transition: background 0.2s;
}

@media (hover: hover) {
    .logo-file-input[b-9w3e3ljohw]::file-selector-button:hover {
        background: var(--accent-secondary, #388E3C);
    }
}

.logo-error[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--danger-color, #dc3545);
    font-size: 0.85rem;
    padding: 0.5rem;
    background: rgba(220, 53, 69, 0.1);
    border-radius: 0.25rem;
}

/* Extractor Detection */
.url-with-detect[b-9w3e3ljohw] {
    display: flex;
    gap: 0.5rem;
}

.url-with-detect input[b-9w3e3ljohw] {
    flex: 1;
}

.btn-detect[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.85rem;
    white-space: nowrap;
    transition: all 0.2s;
}

@media (hover: hover) {
    .btn-detect:hover:not(:disabled)[b-9w3e3ljohw] {
        background: var(--bg-hover);
        border-color: var(--accent-primary);
        color: var(--accent-primary);
    }
}

.btn-detect:disabled[b-9w3e3ljohw] {
    opacity: 0.6;
    cursor: not-allowed;
}

.detection-badge[b-9w3e3ljohw] {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
    margin-left: 0.5rem;
    font-weight: 500;
    text-transform: capitalize;
}

.detection-badge.badge-high[b-9w3e3ljohw] {
    background: rgba(76, 175, 80, 0.15);
    color: #2e7d32;
}

.detection-badge.badge-medium[b-9w3e3ljohw] {
    background: rgba(255, 152, 0, 0.15);
    color: #f57c00;
}

.detection-badge.badge-low[b-9w3e3ljohw] {
    background: rgba(244, 67, 54, 0.15);
    color: #d32f2f;
}

.detection-reason[b-9w3e3ljohw] {
    color: var(--text-secondary);
    font-style: italic;
}

/* Detection Modal */
.modal-content.detection-modal[b-9w3e3ljohw] {
    max-width: 550px;
}

.detection-url[b-9w3e3ljohw] {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: 0.375rem;
    font-size: 0.9rem;
}

.detection-url code[b-9w3e3ljohw] {
    word-break: break-all;
    color: var(--accent-primary);
}

.detection-loading[b-9w3e3ljohw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
    gap: 1rem;
}

.detection-loading .spinner[b-9w3e3ljohw] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin-b-9w3e3ljohw 1s linear infinite;
}

.detection-loading p[b-9w3e3ljohw] {
    font-weight: 500;
    margin: 0;
}

.detection-loading small[b-9w3e3ljohw] {
    color: var(--text-secondary);
}

.detection-error[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: rgba(220, 53, 69, 0.1);
    border-radius: 0.375rem;
    color: var(--danger, #dc3545);
}

.detection-results[b-9w3e3ljohw] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.detection-option[b-9w3e3ljohw] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
}

@media (hover: hover) {
    .detection-option:hover:not(.failed)[b-9w3e3ljohw] {
        border-color: var(--accent-primary);
        background: var(--hover-bg);
    }
}

.detection-option.selected[b-9w3e3ljohw] {
    border-color: var(--accent-primary);
    background: rgba(76, 175, 80, 0.08);
}

.detection-option.failed[b-9w3e3ljohw] {
    opacity: 0.6;
    cursor: not-allowed;
}

.detection-option.has-pdfs[b-9w3e3ljohw] {
    border-color: rgba(76, 175, 80, 0.4);
}

.detection-option input[type="radio"][b-9w3e3ljohw] {
    margin-top: 0.25rem;
    accent-color: var(--accent-primary);
}

.option-content[b-9w3e3ljohw] {
    flex: 1;
    min-width: 0;
}

.option-header[b-9w3e3ljohw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.option-name[b-9w3e3ljohw] {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.recommended-badge[b-9w3e3ljohw] {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    background: var(--accent-primary);
    color: white;
    border-radius: 0.25rem;
    font-weight: 600;
    text-transform: uppercase;
}

.option-duration[b-9w3e3ljohw] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.option-stats[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.85rem;
}

.pdf-count[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--text-secondary);
}

.pdf-count.has-pdfs[b-9w3e3ljohw] {
    color: var(--accent-primary);
    font-weight: 500;
}

.pdf-preview[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    cursor: help;
}

.error-msg[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--danger, #dc3545);
    font-size: 0.8rem;
}

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

.source-name[b-9w3e3ljohw], .extraction-store[b-9w3e3ljohw] {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.source-url[b-9w3e3ljohw] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.source-meta[b-9w3e3ljohw], .extraction-stats[b-9w3e3ljohw] {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.meta-item[b-9w3e3ljohw], .stat[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.source-actions[b-9w3e3ljohw], .extraction-actions[b-9w3e3ljohw] {
    display: flex;
    gap: 0.5rem;
}

.btn-icon[b-9w3e3ljohw] {
    padding: 0.5rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 0.25rem;
}

@media (hover: hover) {
    .btn-icon:hover[b-9w3e3ljohw] {
        background: var(--bg-hover);
    }
}

@media (hover: hover) {
    .btn-icon.danger:hover[b-9w3e3ljohw] {
        color: var(--danger, #dc2626);
    }
}

.btn-icon.disabled[b-9w3e3ljohw],
.btn-icon:disabled[b-9w3e3ljohw] {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (hover: hover) {
    .btn-icon.disabled:hover[b-9w3e3ljohw],
    .btn-icon:disabled:hover[b-9w3e3ljohw] {
        background: transparent;
    }
}

.extraction-header[b-9w3e3ljohw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.extraction-status[b-9w3e3ljohw] {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-weight: 500;
}

.extraction-status.completed[b-9w3e3ljohw] {
    background: rgba(5, 150, 105, 0.15);
    color: var(--success, #059669);
}

.extraction-status.processing[b-9w3e3ljohw] {
    background: rgba(217, 119, 6, 0.15);
    color: #d97706;
}

.extraction-status.failed[b-9w3e3ljohw] {
    background: rgba(220, 38, 38, 0.15);
    color: var(--danger, #dc2626);
}

.extraction-date[b-9w3e3ljohw] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.btn-view[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    background: var(--accent-primary);
    color: white;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 0.85rem;
}

.empty-state[b-9w3e3ljohw] {
    text-align: center;
    padding: 3rem;
    color: var(--text-secondary);
}

.empty-state .bi[b-9w3e3ljohw] {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
}

.loading[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3rem;
}

.spinner[b-9w3e3ljohw] {
    width: 24px;
    height: 24px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin-b-9w3e3ljohw 1s linear infinite;
}

.spinner-small[b-9w3e3ljohw] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-9w3e3ljohw 1s linear infinite;
}

/* Modal styles */
.modal-overlay[b-9w3e3ljohw] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    overscroll-behavior: contain;
}

.modal-content[b-9w3e3ljohw] {
    background: var(--bg-primary);
    border-radius: 0.75rem;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow: auto;
}

.modal-header[b-9w3e3ljohw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h2[b-9w3e3ljohw] {
    font-size: 1.25rem;
    font-weight: 600;
}

.btn-close[b-9w3e3ljohw] {
    background: transparent;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: var(--text-secondary);
    min-width: 48px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-body[b-9w3e3ljohw] {
    padding: 1.5rem;
}

/* Form Sections */
.form-section[b-9w3e3ljohw] {
    margin-bottom: 1.75rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.form-section:last-child[b-9w3e3ljohw] {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.section-header[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--accent-primary);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.section-header .bi[b-9w3e3ljohw] {
    color: var(--accent-primary);
    font-size: 1.1rem;
}

.form-group[b-9w3e3ljohw] {
    margin-bottom: 1rem;
}

.form-group label[b-9w3e3ljohw] {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.form-group input[b-9w3e3ljohw], .form-group select[b-9w3e3ljohw] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    font-size: 1rem;
    background: var(--input-bg, var(--bg-secondary));
    color: var(--text-primary);
}

.form-group input[b-9w3e3ljohw]::placeholder {
    color: var(--text-muted);
}

.modal-footer[b-9w3e3ljohw] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
}

.btn-secondary[b-9w3e3ljohw] {
    padding: 0.75rem 1.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    cursor: pointer;
    color: var(--text-primary);
}

@media (hover: hover) {
    .btn-secondary:hover[b-9w3e3ljohw] {
        background: var(--bg-tertiary);
    }
}

.btn-primary[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--accent-primary);
    color: white;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
}

.btn-primary:disabled[b-9w3e3ljohw] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Mobile fullscreen modals */
@media (max-width: 576px) {
    .modal-overlay[b-9w3e3ljohw] {
        padding: 0;
        touch-action: none;
    }

    .modal-content[b-9w3e3ljohw] {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .modal-header[b-9w3e3ljohw] {
        flex-shrink: 0;
        padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1rem 1rem;
    }

    .modal-header h2[b-9w3e3ljohw] {
        font-size: 1.1rem;
    }

    .modal-body[b-9w3e3ljohw] {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1rem;
    }

    .modal-footer[b-9w3e3ljohw] {
        flex-shrink: 0;
        padding: 1rem;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
        flex-direction: column;
        gap: 0.75rem;
    }

    .modal-footer .btn-secondary[b-9w3e3ljohw],
    .modal-footer .btn-primary[b-9w3e3ljohw],
    .modal-footer .btn-danger[b-9w3e3ljohw] {
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }

    .form-group input[b-9w3e3ljohw],
    .form-group select[b-9w3e3ljohw],
    .form-group textarea[b-9w3e3ljohw] {
        font-size: 16px;
        min-height: 44px;
    }

    .form-section[b-9w3e3ljohw] {
        margin-bottom: 1.25rem;
        padding-bottom: 1rem;
    }

    .section-header[b-9w3e3ljohw] {
        font-size: 0.9rem;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
    }
}

/* Catalogues Tab Styles */
.catalogue-filters[b-9w3e3ljohw] {
    margin-bottom: 1.5rem;
}

.filter-row[b-9w3e3ljohw] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.search-box[b-9w3e3ljohw] {
    flex: 1;
    min-width: 200px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
}

.search-box input[b-9w3e3ljohw] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.95rem;
    outline: none;
    color: var(--text-primary);
}

.search-box input[b-9w3e3ljohw]::placeholder {
    color: var(--text-muted);
}

.filter-select[b-9w3e3ljohw] {
    min-width: 150px;
}

.filter-select select[b-9w3e3ljohw] {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    font-size: 0.95rem;
    cursor: pointer;
    color: var(--text-primary);
}

.catalogues-list[b-9w3e3ljohw] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.catalogue-card[b-9w3e3ljohw] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    overflow: hidden;
}

.catalogue-header[b-9w3e3ljohw] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem 1.25rem;
    cursor: pointer;
    transition: background 0.2s;
}

@media (hover: hover) {
    .catalogue-header:hover[b-9w3e3ljohw] {
        background: var(--bg-hover);
    }
}

.catalogue-info[b-9w3e3ljohw] {
    flex: 1;
}

.catalogue-name[b-9w3e3ljohw] {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.product-count-inline[b-9w3e3ljohw] {
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-left: 0.5rem;
}

.catalogue-meta[b-9w3e3ljohw] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.validity-badge[b-9w3e3ljohw] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.5rem;
    background: var(--bg-primary);
    border-radius: 0.25rem;
}

.product-count[b-9w3e3ljohw] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.catalogue-notes[b-9w3e3ljohw] {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-style: italic;
}

.catalogue-actions[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.expand-icon[b-9w3e3ljohw] {
    transition: transform 0.2s;
}

.expand-icon.expanded[b-9w3e3ljohw] {
    transform: rotate(180deg);
}

.catalogue-body[b-9w3e3ljohw] {
    padding: 0 1.25rem 1.25rem;
    border-top: 1px solid var(--border-color);
    animation: fadeIn-b-9w3e3ljohw 0.2s ease;
}

.no-products[b-9w3e3ljohw] {
    text-align: center;
    color: var(--text-secondary);
    padding: 1.5rem;
}

.products-table-wrapper[b-9w3e3ljohw] {
    overflow-x: auto;
    margin-top: 1rem;
    -webkit-overflow-scrolling: touch;
}

.products-table[b-9w3e3ljohw] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.products-table th[b-9w3e3ljohw],
.products-table td[b-9w3e3ljohw] {
    padding: 0.75rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.products-table th[b-9w3e3ljohw] {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
}

.products-table .product-name[b-9w3e3ljohw] {
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.products-table .price[b-9w3e3ljohw] {
    white-space: nowrap;
}

.products-table .price.original[b-9w3e3ljohw] {
    text-decoration: line-through;
    color: var(--text-secondary);
}

.products-table .price.discount[b-9w3e3ljohw] {
    color: var(--success, #059669);
    font-weight: 600;
}

.category-tag[b-9w3e3ljohw] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    background: var(--bg-primary);
    border-radius: 0.25rem;
    font-size: 0.8rem;
}

.discount-badge[b-9w3e3ljohw] {
    display: inline-block;
    padding: 0.15rem 0.4rem;
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: white;
    border-radius: 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
}

.more-products[b-9w3e3ljohw] {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
    padding: 0.75rem;
    border-top: 1px solid var(--border-color);
    margin-top: 0.5rem;
}

.form-group textarea[b-9w3e3ljohw] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    font-size: 1rem;
    font-family: inherit;
    resize: vertical;
    background: var(--input-bg, var(--bg-secondary));
    color: var(--text-primary);
}

.form-group textarea[b-9w3e3ljohw]::placeholder {
    color: var(--text-muted);
}

/* Mobile catalogues tab */
@media (max-width: 576px) {
    .filter-row[b-9w3e3ljohw] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .search-box[b-9w3e3ljohw] {
        min-width: 0;
        width: 100%;
        padding: 0.625rem 0.75rem;
    }

    .search-box input[b-9w3e3ljohw] {
        font-size: 16px;
    }

    .filter-select[b-9w3e3ljohw] {
        min-width: 0;
        width: 100%;
    }

    .filter-select select[b-9w3e3ljohw] {
        font-size: 16px;
        min-height: 44px;
    }

    .catalogue-header[b-9w3e3ljohw] {
        padding: 0.75rem;
    }

    .catalogue-name[b-9w3e3ljohw] {
        font-size: 1rem;
    }

    .product-count-inline[b-9w3e3ljohw] {
        font-size: 0.8rem;
    }

    .catalogue-meta[b-9w3e3ljohw] {
        gap: 0.5rem;
        font-size: 0.8rem;
    }

    .catalogue-body[b-9w3e3ljohw] {
        padding: 0 0.75rem 0.75rem;
    }

    .products-table[b-9w3e3ljohw] {
        font-size: 0.8rem;
    }

    .products-table th[b-9w3e3ljohw],
    .products-table td[b-9w3e3ljohw] {
        padding: 0.5rem 0.35rem;
    }

    .products-table th[b-9w3e3ljohw] {
        font-size: 0.7rem;
    }

    .catalogue-filters[b-9w3e3ljohw] {
        margin-bottom: 1rem;
    }
}

/* New catalogue metadata styles */
.country-badge[b-9w3e3ljohw] {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0.2rem;
    font-size: 0.7rem;
    font-weight: 500;
    margin-left: 0.4rem;
    vertical-align: middle;
}

.catalogue-title[b-9w3e3ljohw] {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 0.25rem 0 0.5rem 0;
}

.week-badge[b-9w3e3ljohw] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    background: var(--bg-primary);
    border-radius: 0.25rem;
    font-size: 0.8rem;
}

/* Enhanced product table styles */
.product-name-cell[b-9w3e3ljohw] {
    max-width: 280px;
}

.product-name-cell .product-name[b-9w3e3ljohw] {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-name-cell .product-brand[b-9w3e3ljohw] {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.product-tags[b-9w3e3ljohw] {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.tag[b-9w3e3ljohw] {
    display: inline-block;
    padding: 0.1rem 0.35rem;
    border-radius: 0.2rem;
    font-size: 0.7rem;
    font-weight: 500;
}

.tag-bio[b-9w3e3ljohw] { background: rgba(5, 150, 105, 0.2); color: #10b981; }
.tag-msc[b-9w3e3ljohw] { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }
.tag-local[b-9w3e3ljohw] { background: rgba(217, 119, 6, 0.2); color: #f59e0b; }
.tag-limited[b-9w3e3ljohw] { background: rgba(220, 38, 38, 0.2); color: #ef4444; }
.tag-holiday[b-9w3e3ljohw] { background: rgba(236, 72, 153, 0.2); color: #ec4899; }
.tag-weekend[b-9w3e3ljohw] { background: rgba(139, 92, 246, 0.2); color: #8b5cf6; }
.tag-multi[b-9w3e3ljohw] { background: rgba(6, 182, 212, 0.2); color: #06b6d4; }
.tag-default[b-9w3e3ljohw] { background: var(--bg-primary); color: var(--text-secondary); }

.subcategory[b-9w3e3ljohw] {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
}

.unit[b-9w3e3ljohw] {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.price-cell[b-9w3e3ljohw] {
    white-space: nowrap;
}

.price-cell .price.discount[b-9w3e3ljohw] {
    color: var(--success, #059669);
    font-weight: 600;
}

.price-cell .price.original[b-9w3e3ljohw] {
    text-decoration: line-through;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.unit-price-cell[b-9w3e3ljohw] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Offer type badges */
.offer-type-badge[b-9w3e3ljohw] {
    display: inline-block;
    padding: 0.15rem 0.4rem;
    border-radius: 0.2rem;
    font-size: 0.7rem;
    font-weight: 600;
}

.offer-type-badge.standard[b-9w3e3ljohw] { display: none; }
.offer-type-badge.special-offer[b-9w3e3ljohw] { background: rgba(245, 158, 11, 0.2); color: #f59e0b; }
.offer-type-badge.price-drop[b-9w3e3ljohw] { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
.offer-type-badge.weekend-only[b-9w3e3ljohw] { background: rgba(139, 92, 246, 0.2); color: #8b5cf6; }
.offer-type-badge.seasonal[b-9w3e3ljohw] { background: rgba(236, 72, 153, 0.2); color: #ec4899; }
.offer-type-badge.limited-time[b-9w3e3ljohw] { background: rgba(239, 68, 68, 0.2); color: #ef4444; }

.alcohol-badge[b-9w3e3ljohw] {
    display: inline-block;
    padding: 0.1rem 0.3rem;
    background: #7f1d1d;
    color: white;
    border-radius: 0.2rem;
    font-size: 0.65rem;
    font-weight: 600;
    margin-left: 0.25rem;
}

.storage-badge[b-9w3e3ljohw] {
    display: inline-block;
    padding: 0.1rem 0.3rem;
    border-radius: 0.2rem;
    font-size: 0.75rem;
    margin-left: 0.25rem;
}

.storage-badge.frozen[b-9w3e3ljohw] {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

/* Row highlighting by offer type */
.products-table tr.row-special[b-9w3e3ljohw] { background: rgba(245, 158, 11, 0.1); }
.products-table tr.row-price-drop[b-9w3e3ljohw] { background: rgba(34, 197, 94, 0.1); }
.products-table tr.row-weekend[b-9w3e3ljohw] { background: rgba(139, 92, 246, 0.1); }
.products-table tr.row-seasonal[b-9w3e3ljohw] { background: rgba(236, 72, 153, 0.1); }

/* ========================================
   NEW CATALOGUE BROWSER STYLES
   Uses project CSS variables for theming
   ======================================== */

.catalogue-browser[b-9w3e3ljohw] {
    background: var(--bg-secondary);
    border-radius: 0.75rem;
    overflow: hidden;
    min-height: 600px;
    border: 1px solid var(--border-color);
}

.sort-controls[b-9w3e3ljohw] {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.sort-btn[b-9w3e3ljohw] {
    padding: 0.4rem 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s;
}

@media (hover: hover) {
    .sort-btn:hover[b-9w3e3ljohw] {
        background: var(--hover-bg);
        border-color: var(--accent-primary);
    }
}

.sort-btn.active[b-9w3e3ljohw] {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--accent-contrast);
}

/* Filter Sections */
.filter-section[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}

.filter-label[b-9w3e3ljohw] {
    color: var(--text-secondary);
    font-size: 0.85rem;
    min-width: 100px;
    flex-shrink: 0;
}

.category-tabs[b-9w3e3ljohw] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cat-tab[b-9w3e3ljohw] {
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.85rem;
}

@media (hover: hover) {
    .cat-tab:hover[b-9w3e3ljohw] {
        background: var(--hover-bg);
        border-color: var(--accent-primary);
    }
}

.cat-tab.active[b-9w3e3ljohw] {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--accent-contrast);
}

.reset-btn[b-9w3e3ljohw] {
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.8rem;
    flex-shrink: 0;
}

@media (hover: hover) {
    .reset-btn:hover[b-9w3e3ljohw] {
        background: var(--hover-bg);
        color: var(--text-primary);
        border-color: var(--accent-primary);
    }
}

/* Store Icons Row */
.stores-section[b-9w3e3ljohw] {
    padding: 0.5rem 1rem;
}

.store-icons-row[b-9w3e3ljohw] {
    display: flex;
    gap: 0.75rem;
    flex: 1;
    overflow-x: auto;
    padding: 0.5rem 0;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) var(--bg-secondary);
    -webkit-overflow-scrolling: touch;
}

.store-icons-row[b-9w3e3ljohw]::-webkit-scrollbar {
    height: 6px;
}

.store-icons-row[b-9w3e3ljohw]::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

.store-icons-row[b-9w3e3ljohw]::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.store-icon[b-9w3e3ljohw] {
    width: 70px;
    height: 70px;
    background: var(--card-bg);
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s;
    border: 2px solid var(--border-color);
    padding: 6px 4px 4px;
    gap: 0;
}

@media (hover: hover) {
    .store-icon:hover[b-9w3e3ljohw] {
        transform: translateY(-2px);
        box-shadow: var(--shadow);
        border-color: var(--accent-primary);
    }
}

.store-icon.selected[b-9w3e3ljohw] {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.3);
}

.store-icon .store-initial[b-9w3e3ljohw] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent-secondary);
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.store-icon .store-logo[b-9w3e3ljohw] {
    width: 50px;
    max-height: 36px;
    object-fit: contain;
    border-radius: 3px;
    flex: 1;
    min-height: 0;
}

.store-icon .store-name-label[b-9w3e3ljohw] {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    max-width: 64px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: auto;
    line-height: 1.2;
}

/* Catalogue Grid */
.catalogue-grid[b-9w3e3ljohw] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem;
    padding: 1.25rem;
    background: var(--bg-primary);
}

.catalogue-card-new[b-9w3e3ljohw] {
    position: relative;
    background: var(--card-bg);
    border-radius: 0.75rem;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    aspect-ratio: 3/4;
    border: 1px solid var(--border-color);
}

@media (hover: hover) {
    .catalogue-card-new:hover[b-9w3e3ljohw] {
        transform: translateY(-6px);
        box-shadow: var(--shadow);
        border-color: var(--accent-primary);
    }
}

.card-cover[b-9w3e3ljohw] {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.card-cover-image[b-9w3e3ljohw] {
    background: var(--bg-tertiary);
}

.card-cover-image img[b-9w3e3ljohw] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.cover-placeholder[b-9w3e3ljohw] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: var(--text-muted);
}

.card-badges[b-9w3e3ljohw] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: flex;
    gap: 0.35rem;
    z-index: 2;
}

.category-badge[b-9w3e3ljohw] {
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.category-badge.cat-food[b-9w3e3ljohw] { background: var(--accent-primary); color: white; }
.category-badge.cat-drugstore[b-9w3e3ljohw] { background: #E91E63; color: white; }
.category-badge.cat-diy[b-9w3e3ljohw] { background: #2196F3; color: white; }
.category-badge.cat-furniture[b-9w3e3ljohw] { background: #FF9800; color: white; }
.category-badge.cat-electronics[b-9w3e3ljohw] { background: #9C27B0; color: white; }
.category-badge.cat-fashion[b-9w3e3ljohw] { background: #00BCD4; color: white; }
.category-badge.cat-sports[b-9w3e3ljohw] { background: #4CAF50; color: white; }
.category-badge.cat-default[b-9w3e3ljohw] { background: var(--text-muted); color: white; }

.new-badge[b-9w3e3ljohw] {
    padding: 0.2rem 0.5rem;
    background: #FFD700;
    color: #000;
    border-radius: 0.25rem;
    font-size: 0.65rem;
    font-weight: 700;
}

.flipbook-badge[b-9w3e3ljohw] {
    padding: 0.2rem 0.5rem;
    background: #2196F3;
    color: #fff;
    border-radius: 0.25rem;
    font-size: 0.65rem;
    font-weight: 700;
}

.card-footer[b-9w3e3ljohw] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.6rem 0.75rem;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(4px);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.card-footer .footer-logo[b-9w3e3ljohw] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-footer .footer-logo img[b-9w3e3ljohw] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 2px;
}

.card-footer .footer-logo .logo-text[b-9w3e3ljohw] {
    font-size: 0.7rem;
    font-weight: 700;
    color: white;
    padding: 0.25rem 0.4rem;
    border-radius: 4px;
}

.card-footer .footer-info[b-9w3e3ljohw] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.card-footer .store-name[b-9w3e3ljohw] {
    display: block;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-footer .validity[b-9w3e3ljohw] {
    display: block;
    color: rgba(255,255,255,0.7);
    font-size: 0.7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Empty State for Browser */
.empty-state-browser[b-9w3e3ljohw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    color: var(--text-secondary);
}

.empty-state-browser .bi[b-9w3e3ljohw] {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state-browser p[b-9w3e3ljohw] {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.btn-reset[b-9w3e3ljohw] {
    padding: 0.75rem 1.5rem;
    background: var(--accent-primary);
    border: none;
    border-radius: 0.5rem;
    color: var(--accent-contrast);
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

@media (hover: hover) {
    .btn-reset:hover[b-9w3e3ljohw] {
        background: var(--accent-secondary);
        transform: translateY(-1px);
    }
}

/* Empty State for Country-Based Filtering */
.empty-state-country[b-9w3e3ljohw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1.5rem;
    text-align: center;
    background: var(--surface-color, var(--bg-secondary));
    border-radius: 12px;
    margin: 2rem 0;
}

.empty-state-country .bi-globe2[b-9w3e3ljohw] {
    font-size: 4rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.empty-state-country h3[b-9w3e3ljohw] {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    color: var(--text-primary);
}

.empty-state-country p[b-9w3e3ljohw] {
    color: var(--text-muted);
    margin: 0.5rem 0;
    max-width: 400px;
}

.btn-suggest-stores[b-9w3e3ljohw] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--accent-primary, #4CAF50);
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

@media (hover: hover) {
    .btn-suggest-stores:hover[b-9w3e3ljohw] {
        background: var(--accent-secondary, #45a049);
        transform: translateY(-1px);
    }
}

/* Responsive adjustments for catalogue browser */
@media (max-width: 1200px) {
    .catalogue-grid[b-9w3e3ljohw] {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 992px) {
    .catalogue-grid[b-9w3e3ljohw] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .catalogue-grid[b-9w3e3ljohw] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        padding: 0.75rem;
    }

    .filter-section[b-9w3e3ljohw] {
        flex-wrap: wrap;
    }

    .filter-label[b-9w3e3ljohw] {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .category-tabs[b-9w3e3ljohw] {
        width: 100%;
    }

    .store-icon[b-9w3e3ljohw] {
        width: 55px;
        height: 55px;
    }
}

/* Mobile catalogue browser grid */
@media (max-width: 576px) {
    .catalogue-grid[b-9w3e3ljohw] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .card-badges[b-9w3e3ljohw] {
        top: 0.5rem;
        right: 0.5rem;
        gap: 0.25rem;
    }

    .category-badge[b-9w3e3ljohw],
    .new-badge[b-9w3e3ljohw],
    .flipbook-badge[b-9w3e3ljohw] {
        font-size: 0.55rem;
        padding: 0.15rem 0.35rem;
    }

    .card-footer[b-9w3e3ljohw] {
        padding: 0.5rem 0.6rem;
        gap: 0.4rem;
    }

    .card-footer .footer-logo[b-9w3e3ljohw] {
        width: 32px;
        height: 32px;
        border-radius: 4px;
    }

    .card-footer .store-name[b-9w3e3ljohw] {
        font-size: 0.8rem;
    }

    .card-footer .validity[b-9w3e3ljohw] {
        font-size: 0.6rem;
    }

    .cover-placeholder[b-9w3e3ljohw] {
        font-size: 2rem;
    }
}

/* ========================================
   FLIPBOOK MODAL STYLES
   ======================================== */

.flipbook-modal-overlay[b-9w3e3ljohw] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.flipbook-modal[b-9w3e3ljohw] {
    background: #1a1a2e;
    border-radius: 0.75rem;
    width: calc(100vw - 40px);
    max-width: 95vw;
    height: calc(100vh - 40px);
    max-height: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
}

.flipbook-modal-header[b-9w3e3ljohw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    background: rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
}

.flipbook-header-info[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex: 1;
}

.flipbook-header-logo[b-9w3e3ljohw] {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    object-fit: contain;
    background: white;
    padding: 3px;
    flex-shrink: 0;
}

.flipbook-header-text[b-9w3e3ljohw] {
    min-width: 0;
    flex: 1;
}

.flipbook-header-text h2[b-9w3e3ljohw] {
    color: white;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.flipbook-validity[b-9w3e3ljohw] {
    color: rgba(255,255,255,0.5);
    font-size: 0.75rem;
}

.flipbook-header-actions[b-9w3e3ljohw] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.flipbook-download-btn[b-9w3e3ljohw],
.flipbook-fullpage-btn[b-9w3e3ljohw],
.flipbook-close-btn[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    box-sizing: border-box;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    color: white;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
    text-decoration: none;
}

@media (hover: hover) {
    .flipbook-download-btn:hover[b-9w3e3ljohw],
    .flipbook-fullpage-btn:hover[b-9w3e3ljohw],
    .flipbook-close-btn:hover[b-9w3e3ljohw] {
        background: var(--accent-primary);
        border-color: var(--accent-primary);
    }
}

/* Fullscreen mode for the modal */
.flipbook-modal:fullscreen[b-9w3e3ljohw] {
    width: 100vw;
    height: 100vh;
    max-width: none;
    border-radius: 0;
}

.flipbook-modal:fullscreen .flipbook-modal-body[b-9w3e3ljohw] {
    height: calc(100vh - 50px);
}

.flipbook-modal-body[b-9w3e3ljohw] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: #1a1a2e;
    min-height: 0;
}

/* Zoom overlay - captures events when zoomed to disable page flipping */
.zoom-overlay[b-9w3e3ljohw] {
    user-select: none;
    -webkit-user-select: none;
}

/* Single-page mode styles */
.modal-flipbook-container.single-page-mode[b-9w3e3ljohw] {
    cursor: default;
}

.modal-flipbook-container.single-page-mode .single-page-container[b-9w3e3ljohw] {
    transition: transform 0.15s ease-out;
}

/* Click zone hints on hover */
.modal-flipbook-container.single-page-mode .single-page-container[b-9w3e3ljohw]::before,
.modal-flipbook-container.single-page-mode .single-page-container[b-9w3e3ljohw]::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
    z-index: 5;
}

.modal-flipbook-container.single-page-mode .single-page-container[b-9w3e3ljohw]::before {
    left: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, transparent 100%);
}

.modal-flipbook-container.single-page-mode .single-page-container[b-9w3e3ljohw]::after {
    right: 0;
    background: linear-gradient(-90deg, rgba(255,255,255,0.1) 0%, transparent 100%);
}

@media (hover: hover) {
    .modal-flipbook-container.single-page-mode .single-page-container:hover[b-9w3e3ljohw]::before,
    .modal-flipbook-container.single-page-mode .single-page-container:hover[b-9w3e3ljohw]::after {
        opacity: 1;
    }
}

/* Page transition animation */
.modal-flipbook-container.single-page-mode .single-page-image[b-9w3e3ljohw] {
    transition: opacity 0.15s ease-out;
}

.modal-flipbook-container[b-9w3e3ljohw] {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
}

/* StPageFlip styles for modal */
[b-9w3e3ljohw] .modal-flipbook-container .stf__wrapper {
    box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important;
}

/* The centering wrapper is created by flipbook.js */
[b-9w3e3ljohw] .modal-flipbook-container .flipbook-center-wrapper {
    z-index: 1;
}

[b-9w3e3ljohw] .modal-flipbook-container .flipbook-page {
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
}

[b-9w3e3ljohw] .modal-flipbook-container .flipbook-page img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    display: block;
}

[b-9w3e3ljohw] .modal-flipbook-container .stf__item {
    overflow: hidden !important;
}

/* Page placeholder styles for lazy loading */
[b-9w3e3ljohw] .modal-flipbook-container .page-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
    color: var(--text-muted);
    font-size: 1.5rem;
    font-weight: 600;
}

[b-9w3e3ljohw] .modal-flipbook-container .page-placeholder span {
    opacity: 0.5;
}

[b-9w3e3ljohw] .flipbook-modal-body .flipbook-controls {
    position: absolute !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(10px);
    border-radius: 2rem;
    z-index: 100;
}

/* Side navigation arrows for modal */
[b-9w3e3ljohw] .flipbook-modal-body .flip-nav-btn {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 100 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 80px;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    color: white;
    cursor: pointer;
    font-size: 1.5rem;
    transition: all 0.2s;
    opacity: 0.8;
}

@media (hover: hover) {
    [b-9w3e3ljohw] .flipbook-modal-body .flip-nav-btn:hover {
        background: rgba(76, 175, 80, 0.9);
        opacity: 1;
    }
}

[b-9w3e3ljohw] .flipbook-modal-body .flip-nav-left {
    left: 0 !important;
    right: auto !important;
    border-radius: 0 8px 8px 0;
}

[b-9w3e3ljohw] .flipbook-modal-body .flip-nav-right {
    right: 0 !important;
    left: auto !important;
    border-radius: 8px 0 0 8px;
}

[b-9w3e3ljohw] .modal-flipbook-container .flip-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    color: white;
    cursor: pointer;
    font-size: 1.1rem;
    transition: all 0.2s;
}

@media (hover: hover) {
    [b-9w3e3ljohw] .modal-flipbook-container .flip-btn:hover {
        background: var(--accent-primary);
        border-color: var(--accent-primary);
        transform: scale(1.1);
    }
}

[b-9w3e3ljohw] .modal-flipbook-container .page-indicator {
    color: white;
    font-size: 0.9rem;
    padding: 0 1rem;
    min-width: 80px;
    text-align: center;
}

.flipbook-iframe[b-9w3e3ljohw] {
    width: 100%;
    height: 100%;
    border: none;
    background: white;
}

.flipbook-external[b-9w3e3ljohw],
.flipbook-no-pdf[b-9w3e3ljohw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: rgba(255,255,255,0.6);
    text-align: center;
    padding: 2rem;
}

.flipbook-external .bi[b-9w3e3ljohw],
.flipbook-no-pdf .bi[b-9w3e3ljohw] {
    font-size: 4rem;
    opacity: 0.5;
}

.btn-open-external[b-9w3e3ljohw] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--accent-primary);
    color: var(--accent-contrast);
    border: none;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s;
}

@media (hover: hover) {
    .btn-open-external:hover[b-9w3e3ljohw] {
        background: var(--accent-secondary);
        color: var(--accent-contrast);
        transform: translateY(-1px);
    }
}

.flipbook-loading-overlay[b-9w3e3ljohw] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(26,26,46,0.95);
    z-index: 100;
    gap: 1rem;
    color: white;
}

.flipbook-spinner[b-9w3e3ljohw] {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255,255,255,0.2);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin-b-9w3e3ljohw 1s linear infinite;
}

.flipbook-progress-bar[b-9w3e3ljohw] {
    width: 200px;
    height: 6px;
    background: rgba(255,255,255,0.2);
    border-radius: 3px;
    overflow: hidden;
}

.flipbook-progress-fill[b-9w3e3ljohw] {
    height: 100%;
    background: var(--accent-primary);
    transition: width 0.3s ease;
}

/* Responsive flipbook modal */
@media (max-width: 768px) {
    .flipbook-modal-overlay[b-9w3e3ljohw] {
        padding: 0;
    }

    .flipbook-modal[b-9w3e3ljohw] {
        width: 100vw;
        height: 100vh;
        max-width: none;
        border-radius: 0;
    }

    .flipbook-modal-header[b-9w3e3ljohw] {
        padding: 0.75rem 1rem;
    }

    .flipbook-header-logo[b-9w3e3ljohw] {
        width: 36px;
        height: 36px;
    }

    .flipbook-header-text h2[b-9w3e3ljohw] {
        font-size: 1rem;
    }

    .flipbook-download-btn[b-9w3e3ljohw],
    .flipbook-fullpage-btn[b-9w3e3ljohw],
    .flipbook-close-btn[b-9w3e3ljohw] {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }

    .modal-flipbook-container[b-9w3e3ljohw] {
        padding: 0.5rem;
    }
}

@media (max-width: 576px) {
    .flipbook-modal-overlay[b-9w3e3ljohw] {
        touch-action: none;
        overscroll-behavior: contain;
    }

    .flipbook-modal[b-9w3e3ljohw] {
        height: 100dvh;
    }

    .flipbook-modal-header[b-9w3e3ljohw] {
        padding: calc(env(safe-area-inset-top, 0px) + 0.5rem) 0.75rem 0.5rem;
    }

    .flipbook-header-logo[b-9w3e3ljohw] {
        width: 28px;
        height: 28px;
    }

    .flipbook-header-text h2[b-9w3e3ljohw] {
        font-size: 0.875rem;
    }

    .flipbook-download-btn[b-9w3e3ljohw],
    .flipbook-fullpage-btn[b-9w3e3ljohw],
    .flipbook-close-btn[b-9w3e3ljohw] {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        font-size: 1.1rem;
    }

    /* Hide fullscreen button on mobile — already fullscreen */
    .flipbook-fullpage-btn[b-9w3e3ljohw] {
        display: none;
    }

    .modal-flipbook-container[b-9w3e3ljohw] {
        padding: 0;
    }

    .flipbook-modal-body[b-9w3e3ljohw] {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}

/* ========================================
   SCRAPER TAB AND COMMANDS (DEV ONLY)
   ======================================== */

/* Scraper tab button styling */
.tab-btn.scraper-tab[b-9w3e3ljohw] {
    position: relative;
}

.dev-badge-small[b-9w3e3ljohw] {
    display: inline-block;
    padding: 0.1rem 0.35rem;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    border-radius: 0.2rem;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-left: 0.25rem;
    vertical-align: middle;
}

.tab-btn.scraper-tab.active .dev-badge-small[b-9w3e3ljohw] {
    background: rgba(255, 255, 255, 0.25);
}

.scraper-commands-section[b-9w3e3ljohw] {
    margin-top: 0;
}

.scraper-commands-section .section-title[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dev-badge[b-9w3e3ljohw] {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    border-radius: 0.25rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-left: 0.5rem;
}

/* Simplified scraper controls row */
.scraper-controls-row[b-9w3e3ljohw] {
    display: flex;
    align-items: flex-end;
    gap: 1.5rem;
    padding: 1.25rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.scraper-control[b-9w3e3ljohw] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.scraper-control > label:not(.clean-toggle)[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.scraper-control select[b-9w3e3ljohw] {
    padding: 0.6rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.9rem;
    min-width: 200px;
    cursor: pointer;
}

.scraper-control select:disabled[b-9w3e3ljohw] {
    opacity: 0.6;
    cursor: not-allowed;
}

.scraper-control .clean-toggle[b-9w3e3ljohw] {
    padding: 0.6rem 0;
    margin-top: auto;
}

.scraper-actions[b-9w3e3ljohw] {
    margin-left: auto;
}

.scraper-run-btn[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #059669, #047857);
    border: none;
    border-radius: 0.5rem;
    color: white;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.3);
}

@media (hover: hover) {
    .scraper-run-btn:hover[b-9w3e3ljohw] {
        background: linear-gradient(135deg, #047857, #065f46);
        box-shadow: 0 4px 12px rgba(5, 150, 105, 0.4);
        transform: translateY(-1px);
    }
}

.scraper-run-btn .run-target[b-9w3e3ljohw] {
    font-size: 0.8rem;
    opacity: 0.85;
    font-weight: 400;
}

.scraper-run-btn.cancel[b-9w3e3ljohw] {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}

@media (hover: hover) {
    .scraper-run-btn.cancel:hover[b-9w3e3ljohw] {
        background: linear-gradient(135deg, #b91c1c, #991b1b);
        box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
    }
}

/* Output header right side with clear button */
.output-header-right[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.output-clear-btn[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.25rem;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

@media (hover: hover) {
    .output-clear-btn:hover:not(:disabled)[b-9w3e3ljohw] {
        background: rgba(220, 38, 38, 0.2);
        border-color: rgba(220, 38, 38, 0.5);
        color: #f87171;
    }
}

.output-clear-btn:disabled[b-9w3e3ljohw] {
    opacity: 0.4;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .scraper-controls-row[b-9w3e3ljohw] {
        flex-direction: column;
        align-items: stretch;
    }

    .scraper-control select[b-9w3e3ljohw] {
        width: 100%;
    }

    .scraper-actions[b-9w3e3ljohw] {
        margin-left: 0;
        margin-top: 0.5rem;
    }

    .scraper-run-btn[b-9w3e3ljohw] {
        width: 100%;
        justify-content: center;
    }
}

/* Legacy scraper options row (keeping for reference) */
.scraper-options-row[b-9w3e3ljohw] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* Retailer selector */
.scraper-retailer-selector[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    flex-wrap: wrap;
    flex: 1;
    min-width: 300px;
}

.scraper-retailer-selector label[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
}

.scraper-retailer-selector select[b-9w3e3ljohw] {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.9rem;
    min-width: 200px;
    cursor: pointer;
}

.scraper-retailer-selector select:disabled[b-9w3e3ljohw] {
    opacity: 0.6;
    cursor: not-allowed;
}

.retailer-selected-hint[b-9w3e3ljohw] {
    font-size: 0.8rem;
    color: var(--accent-primary);
    font-style: italic;
}

/* Clean before scraping toggle */
.scraper-clean-option[b-9w3e3ljohw] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    min-width: 250px;
}

.clean-toggle[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-primary);
}

.clean-toggle input[type="checkbox"][b-9w3e3ljohw] {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    accent-color: var(--danger, #dc2626);
}

.clean-toggle input[type="checkbox"]:checked + .bi[b-9w3e3ljohw] {
    color: var(--danger, #dc2626);
}

.clean-toggle input[type="checkbox"]:disabled[b-9w3e3ljohw] {
    opacity: 0.6;
    cursor: not-allowed;
}

.clean-toggle .bi[b-9w3e3ljohw] {
    color: var(--text-secondary);
}

.clean-hint[b-9w3e3ljohw] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    padding-left: 1.5rem;
}

/* Command groups */
.scraper-command-groups[b-9w3e3ljohw] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.command-group[b-9w3e3ljohw] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    overflow: hidden;
}

.command-group-header[b-9w3e3ljohw] {
    padding: 0.75rem 1rem;
    background: var(--bg-tertiary, rgba(0,0,0,0.05));
    border-bottom: 1px solid var(--border-color);
}

.command-group-header h4[b-9w3e3ljohw] {
    margin: 0 0 0.25rem 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.command-group-header .group-description[b-9w3e3ljohw] {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.command-group-buttons[b-9w3e3ljohw] {
    padding: 1rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 1rem;
    align-items: center;
}

.command-group-buttons .scraper-cmd-btn[b-9w3e3ljohw] {
    justify-self: start;
}

.command-group-buttons .cmd-description[b-9w3e3ljohw] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.cmd-name[b-9w3e3ljohw] {
    font-weight: 500;
}

.cmd-target[b-9w3e3ljohw] {
    font-size: 0.75rem;
    opacity: 0.8;
    margin-left: 0.25rem;
}

.scraper-cancel-bar[b-9w3e3ljohw] {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.2);
    border-radius: 0.5rem;
    display: flex;
    justify-content: center;
}

.scraper-cmd-btn.running[b-9w3e3ljohw] {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

.scraper-path[b-9w3e3ljohw] {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.8rem;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.scraper-buttons[b-9w3e3ljohw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.scraper-cmd-btn[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

@media (hover: hover) {
    .scraper-cmd-btn:hover:not(:disabled)[b-9w3e3ljohw] {
        background: var(--accent-primary);
        border-color: var(--accent-primary);
        color: white;
    }
}

.scraper-cmd-btn:disabled[b-9w3e3ljohw] {
    opacity: 0.6;
    cursor: not-allowed;
}

.scraper-cmd-btn.destructive[b-9w3e3ljohw] {
    border-color: rgba(220, 38, 38, 0.3);
}

@media (hover: hover) {
    .scraper-cmd-btn.destructive:hover:not(:disabled)[b-9w3e3ljohw] {
        background: #dc2626;
        border-color: #dc2626;
        color: white;
    }
}

.scraper-cmd-btn.cancel[b-9w3e3ljohw] {
    border-color: rgba(220, 38, 38, 0.5);
    color: #f87171;
}

@media (hover: hover) {
    .scraper-cmd-btn.cancel:hover:not(:disabled)[b-9w3e3ljohw] {
        background: #dc2626;
        border-color: #dc2626;
        color: white;
    }
}

/* Output container for streaming display */
.scraper-output-container[b-9w3e3ljohw] {
    background: #1a1a2e;
    border-radius: 0.5rem;
    overflow: hidden;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.output-header[b-9w3e3ljohw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-wrap: wrap;
}

.output-command[b-9w3e3ljohw] {
    color: #4ade80;
    font-weight: 500;
    font-size: 0.85rem;
}

.output-duration[b-9w3e3ljohw] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
}

.output-status[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

.output-status.running[b-9w3e3ljohw] {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.output-status.success[b-9w3e3ljohw] {
    background: rgba(5, 150, 105, 0.2);
    color: #34d399;
}

.output-status.error[b-9w3e3ljohw] {
    background: rgba(220, 38, 38, 0.2);
    color: #f87171;
}

.output-console[b-9w3e3ljohw] {
    min-height: 300px;
    max-height: 500px;
    overflow-y: auto;
    position: relative;
    color: #e2e8f0;
}

.output-placeholder[b-9w3e3ljohw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 300px;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.9rem;
}

.output-placeholder .bi[b-9w3e3ljohw] {
    font-size: 2rem;
}

.output-content[b-9w3e3ljohw] {
    padding: 1rem;
    margin: 0;
    color: #e2e8f0;
    white-space: pre-wrap;
    word-break: break-word;
    background: transparent;
    line-height: 1.5;
}

.output-error[b-9w3e3ljohw] {
    padding: 1rem;
    margin: 0;
    color: #f87171;
    white-space: pre-wrap;
    word-break: break-word;
    background: rgba(220, 38, 38, 0.1);
    border-top: 1px solid rgba(220, 38, 38, 0.2);
}

/* ========================================
   SYNTAX HIGHLIGHTING CLASSES
   Using ::deep because content is rendered via MarkupString
   ======================================== */

[b-9w3e3ljohw] .output-console .output-line {
    padding: 0.125rem 1rem;
    line-height: 1.5;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.85rem;
    white-space: pre-wrap;
    word-break: break-word;
    color: #e2e8f0;
}

@media (hover: hover) {
    [b-9w3e3ljohw] .output-console .output-line:hover {
        background: rgba(255, 255, 255, 0.08);
    }
}

[b-9w3e3ljohw] .output-console .output-line.output-normal {
    color: #e2e8f0;
}

[b-9w3e3ljohw] .output-console .output-line.output-error {
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.15);
}

[b-9w3e3ljohw] .output-console .output-line.output-warning {
    color: #ffd43b;
    background: rgba(255, 212, 59, 0.12);
}

[b-9w3e3ljohw] .output-console .output-line.output-success {
    color: #51cf66;
    background: rgba(81, 207, 102, 0.12);
}

[b-9w3e3ljohw] .output-console .output-line.output-info {
    color: #74c0fc;
}

[b-9w3e3ljohw] .output-console .output-url {
    color: #22d3ee;
    text-decoration: underline;
    cursor: pointer;
}

@media (hover: hover) {
    [b-9w3e3ljohw] .output-console .output-url:hover {
        color: #67e8f9;
    }
}

[b-9w3e3ljohw] .output-console .output-timestamp {
    color: #adb5bd;
    font-size: 0.9em;
}

[b-9w3e3ljohw] .output-console .output-filepath {
    color: #da77f2;
}


/* ========================================
   NEW OUTPUT INDICATOR
   ======================================== */

.new-output-indicator[b-9w3e3ljohw] {
    position: sticky;
    bottom: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(59, 130, 246, 0.9);
    color: white;
    border: none;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
    z-index: 10;
}

@media (hover: hover) {
    .new-output-indicator:hover[b-9w3e3ljohw] {
        background: rgba(59, 130, 246, 1);
        transform: translateX(-50%) scale(1.02);
    }
}

.new-output-indicator .bi[b-9w3e3ljohw] {
    font-size: 1rem;
    animation: bounceDown-b-9w3e3ljohw 1s infinite;
}

@keyframes bounceDown-b-9w3e3ljohw {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(3px); }
}

/* ========================================
   SCROLL INDICATOR
   ======================================== */

.scroll-indicator-wrapper[b-9w3e3ljohw] {
    position: relative;
}

.auto-scroll-paused[b-9w3e3ljohw] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 0.7rem;
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.2);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

/* Legacy scraper-output class (keeping for backwards compat) */
.scraper-output[b-9w3e3ljohw] {
    background: #1a1a2e;
    border-radius: 0.5rem;
    overflow: hidden;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.85rem;
}

.scraper-output.success[b-9w3e3ljohw] {
    border: 1px solid rgba(5, 150, 105, 0.3);
}

.scraper-output.error[b-9w3e3ljohw] {
    border: 1px solid rgba(220, 38, 38, 0.3);
}

/* Scrollbar styling for output */
.output-content[b-9w3e3ljohw]::-webkit-scrollbar,
.output-error[b-9w3e3ljohw]::-webkit-scrollbar {
    width: 8px;
}

.output-content[b-9w3e3ljohw]::-webkit-scrollbar-track,
.output-error[b-9w3e3ljohw]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.output-content[b-9w3e3ljohw]::-webkit-scrollbar-thumb,
.output-error[b-9w3e3ljohw]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.output-content[b-9w3e3ljohw]::-webkit-scrollbar-thumb:hover,
.output-error[b-9w3e3ljohw]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .scraper-buttons[b-9w3e3ljohw] {
        flex-direction: column;
    }

    .scraper-cmd-btn[b-9w3e3ljohw] {
        width: 100%;
        justify-content: center;
    }

    .output-header[b-9w3e3ljohw] {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
}

/* =============================================
   Scraped Catalog History List
   ============================================= */

.scraped-catalog-list[b-9w3e3ljohw] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.scraped-catalog-card[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    transition: all 0.2s;
}

@media (hover: hover) {
    .scraped-catalog-card:hover[b-9w3e3ljohw] {
        border-color: var(--accent-primary);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
}

.scraped-catalog-card.excluded[b-9w3e3ljohw] {
    opacity: 0.6;
    background: var(--bg-tertiary, #f5f5f5);
}

.scraped-catalog-card.pending[b-9w3e3ljohw] {
    border-left: 3px solid var(--warning, #f59e0b);
}

.scraped-catalog-card.downloaded[b-9w3e3ljohw] {
    border-left: 3px solid var(--success, #22c55e);
}

.scraped-catalog-card.failed[b-9w3e3ljohw] {
    border-left: 3px solid var(--danger, #ef4444);
}

.scraped-catalog-card.flipbook_only[b-9w3e3ljohw] {
    border-left: 3px solid var(--info, #3b82f6);
}

.catalog-thumb[b-9w3e3ljohw] {
    width: 60px;
    height: 80px;
    flex-shrink: 0;
    background: var(--bg-tertiary, #f0f0f0);
    border-radius: 0.25rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.catalog-thumb img[b-9w3e3ljohw] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.catalog-thumb img.logo-fallback[b-9w3e3ljohw] {
    width: 70%;
    height: auto;
    object-fit: contain;
}

.catalog-thumb .bi[b-9w3e3ljohw] {
    font-size: 1.5rem;
    color: var(--text-secondary);
}

.catalog-info[b-9w3e3ljohw] {
    flex: 1;
    min-width: 0;
}

.catalog-header[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}

.catalog-retailer[b-9w3e3ljohw] {
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.catalog-status[b-9w3e3ljohw] {
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.catalog-status.downloaded[b-9w3e3ljohw] {
    background: rgba(34, 197, 94, 0.15);
    color: var(--success, #22c55e);
}

.catalog-status.pending[b-9w3e3ljohw] {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning, #f59e0b);
}

.catalog-status.failed[b-9w3e3ljohw] {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger, #ef4444);
}

.catalog-status.flipbook_only[b-9w3e3ljohw] {
    background: rgba(59, 130, 246, 0.15);
    color: var(--info, #3b82f6);
}

.catalog-title[b-9w3e3ljohw] {
    font-size: 0.95rem;
    font-weight: 500;
    margin: 0 0 0.25rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.catalog-meta[b-9w3e3ljohw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.meta-item[b-9w3e3ljohw] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.meta-item.excluded-reason[b-9w3e3ljohw] {
    color: var(--danger, #ef4444);
}

.catalog-actions[b-9w3e3ljohw] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.catalog-actions .btn-icon[b-9w3e3ljohw] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    border-radius: 0.25rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

@media (hover: hover) {
    .catalog-actions .btn-icon:hover[b-9w3e3ljohw] {
        background: var(--accent-primary);
        border-color: var(--accent-primary);
        color: white;
    }
}

/* Responsive adjustments for scraped catalog list */
@media (max-width: 640px) {
    .scraped-catalog-card[b-9w3e3ljohw] {
        flex-wrap: wrap;
    }

    .catalog-thumb[b-9w3e3ljohw] {
        width: 50px;
        height: 65px;
    }

    .catalog-info[b-9w3e3ljohw] {
        flex: 1 1 calc(100% - 70px);
    }

    .catalog-actions[b-9w3e3ljohw] {
        width: 100%;
        justify-content: flex-end;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--border-color);
    }

    .catalog-actions .btn-icon[b-9w3e3ljohw] {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }
}

/* ========================================
   AUTO-FETCH LOGO STYLES
   ======================================== */

.logo-fetch-section[b-9w3e3ljohw] {
    margin-top: 0.75rem;
}

.btn-fetch-logos[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

@media (hover: hover) {
    .btn-fetch-logos:hover:not(:disabled)[b-9w3e3ljohw] {
        background: var(--accent-primary);
        border-color: var(--accent-primary);
        color: white;
    }
}

.btn-fetch-logos:disabled[b-9w3e3ljohw] {
    opacity: 0.6;
    cursor: not-allowed;
}

.logo-candidates-section[b-9w3e3ljohw] {
    margin-top: 0.75rem;
    padding: 0.875rem;
    background: var(--bg-tertiary, var(--bg-secondary));
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
}

.logo-candidates-header[b-9w3e3ljohw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.logo-candidates-header h5[b-9w3e3ljohw] {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.logo-candidates-grid[b-9w3e3ljohw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.logo-candidate[b-9w3e3ljohw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
}

@media (hover: hover) {
    .logo-candidate:hover[b-9w3e3ljohw] {
        border-color: var(--accent-primary);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }
}

.logo-candidate.selected[b-9w3e3ljohw] {
    border-color: var(--accent-primary);
    background: rgba(76, 175, 80, 0.1);
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}

.logo-candidate-image[b-9w3e3ljohw] {
    width: 48px;
    height: 48px;
    border-radius: 0.25rem;
    object-fit: contain;
    background: white;
    margin-bottom: 0.35rem;
}

.logo-candidate-source[b-9w3e3ljohw] {
    font-size: 0.65rem;
    color: var(--text-secondary);
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.logo-candidate-dimensions[b-9w3e3ljohw] {
    font-size: 0.6rem;
    color: var(--text-muted);
}

.btn-apply-logo[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem 1rem;
    background: var(--accent-primary);
    color: white;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.875rem;
    transition: all 0.2s;
}

@media (hover: hover) {
    .btn-apply-logo:hover:not(:disabled)[b-9w3e3ljohw] {
        background: var(--accent-secondary, #388E3C);
    }
}

.btn-apply-logo:disabled[b-9w3e3ljohw] {
    opacity: 0.6;
    cursor: not-allowed;
}

.logo-fetch-error[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.2);
    border-radius: 0.375rem;
    color: var(--danger, #dc2626);
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

.logo-upload-divider[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.logo-upload-divider[b-9w3e3ljohw]::before,
.logo-upload-divider[b-9w3e3ljohw]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.logo-fetching-spinner[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.logo-fetching-spinner .spinner[b-9w3e3ljohw] {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin-b-9w3e3ljohw 1s linear infinite;
}

.logo-no-candidates[b-9w3e3ljohw] {
    text-align: center;
    padding: 1rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.logo-no-candidates .bi[b-9w3e3ljohw] {
    display: block;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

/* ========================================
   DELETE RETAILER STYLES
   ======================================== */

.modal-footer-spacer[b-9w3e3ljohw] {
    flex: 1;
}

.btn-danger[b-9w3e3ljohw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--danger, #dc2626);
    color: white;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

@media (hover: hover) {
    .btn-danger:hover:not(:disabled)[b-9w3e3ljohw] {
        background: #b91c1c;
    }
}

.btn-danger:disabled[b-9w3e3ljohw] {
    opacity: 0.6;
    cursor: not-allowed;
}
/* /Components/Pages/CatalogueViewer.razor.rz.scp.css */
.catalogue-viewer[b-qpkpe1j5ek] {
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    overflow: hidden;
}

.loading[b-qpkpe1j5ek], .not-found[b-qpkpe1j5ek], .no-pdf[b-qpkpe1j5ek] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 1rem;
    color: var(--text-secondary);
    padding: 2rem;
    text-align: center;
}

.loading .spinner[b-qpkpe1j5ek], .flipbook-loading-overlay .spinner[b-qpkpe1j5ek] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin-b-qpkpe1j5ek 1s linear infinite;
}

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

.not-found .bi[b-qpkpe1j5ek], .no-pdf .bi[b-qpkpe1j5ek] {
    font-size: 4rem;
    opacity: 0.5;
}

.viewer-header[b-qpkpe1j5ek] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    height: 50px;
}

.header-info[b-qpkpe1j5ek] {
    flex: 1;
    min-width: 0;
}

.header-info h2[b-qpkpe1j5ek] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.header-info .validity[b-qpkpe1j5ek] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.header-actions[b-qpkpe1j5ek] {
    display: flex;
    gap: 0.5rem;
}

.btn-back[b-qpkpe1j5ek], .btn-toggle[b-qpkpe1j5ek] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

@media (hover: hover) {
    .btn-back:hover[b-qpkpe1j5ek], .btn-toggle:hover[b-qpkpe1j5ek] {
        background: var(--hover-bg);
        border-color: var(--accent-primary);
    }
}

.btn-toggle.active[b-qpkpe1j5ek] {
    background: var(--accent-primary);
    color: white;
    border-color: var(--accent-primary);
}

.btn-download[b-qpkpe1j5ek] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--accent-primary);
    border: none;
    border-radius: 0.5rem;
    color: var(--accent-contrast);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.2s;
}

@media (hover: hover) {
    .btn-download:hover[b-qpkpe1j5ek] {
        background: var(--accent-secondary);
    }
}

.pdf-container[b-qpkpe1j5ek] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.pdf-iframe[b-qpkpe1j5ek] {
    flex: 1;
    width: 100%;
    min-height: 80vh;
    border: none;
}

.external-link-container[b-qpkpe1j5ek] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 1rem;
    padding: 2rem;
    color: var(--text-secondary);
}

.btn-open-external[b-qpkpe1j5ek] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: var(--accent-primary);
    border: none;
    border-radius: 0.5rem;
    color: var(--accent-contrast);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.2s;
}

@media (hover: hover) {
    .btn-open-external:hover[b-qpkpe1j5ek] {
        background: var(--accent-secondary);
        transform: translateY(-2px);
    }
}

/* Flipbook Styles */
.flipbook-wrapper[b-qpkpe1j5ek] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #1a1a2e;
    position: relative;
    overflow: hidden;
    min-height: 0;
}

.flipbook-loading-overlay[b-qpkpe1j5ek] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(26, 26, 46, 0.95);
    z-index: 100;
    gap: 1rem;
    color: white;
}

.progress-bar[b-qpkpe1j5ek] {
    width: 200px;
    height: 6px;
    background: rgba(255,255,255,0.2);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill[b-qpkpe1j5ek] {
    height: 100%;
    background: var(--accent-primary);
    transition: width 0.3s ease;
}

.flipbook-container[b-qpkpe1j5ek] {
    flex: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
}

/* The centering wrapper is created by flipbook.js */
[b-qpkpe1j5ek] .flipbook-container .flipbook-center-wrapper {
    z-index: 1;
}

.flipbook-container:fullscreen[b-qpkpe1j5ek] {
    background: #1a1a2e;
    padding: 2rem;
}

/* Side navigation arrows */
[b-qpkpe1j5ek] .flipbook-wrapper .flip-nav-btn {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1000 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 80px;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    color: white;
    cursor: pointer;
    font-size: 1.5rem;
    transition: all 0.2s;
    opacity: 0.8;
}

@media (hover: hover) {
    [b-qpkpe1j5ek] .flipbook-wrapper .flip-nav-btn:hover {
        background: rgba(76, 175, 80, 0.9);
        opacity: 1;
    }
}

[b-qpkpe1j5ek] .flipbook-wrapper .flip-nav-left {
    left: 0 !important;
    right: auto !important;
    border-radius: 0 8px 8px 0;
}

[b-qpkpe1j5ek] .flipbook-wrapper .flip-nav-right {
    right: 0 !important;
    left: auto !important;
    border-radius: 8px 0 0 8px;
}

/* Page flip styles */
[b-qpkpe1j5ek] .flipbook-pages {
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

[b-qpkpe1j5ek] .flipbook-page {
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
}

[b-qpkpe1j5ek] .flipbook-page img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    display: block;
}

[b-qpkpe1j5ek] .stf__item {
    overflow: hidden !important;
}

[b-qpkpe1j5ek] .flipbook-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 1rem;
    color: white;
}

[b-qpkpe1j5ek] .flipbook-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 1rem;
    color: #ff6b6b;
    text-align: center;
    padding: 2rem;
}

[b-qpkpe1j5ek] .flipbook-error .bi {
    font-size: 3rem;
}

/* Page placeholder styles for lazy loading */
[b-qpkpe1j5ek] .page-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
    color: #999;
    font-size: 1.5rem;
    font-weight: 600;
}

[b-qpkpe1j5ek] .page-placeholder span {
    opacity: 0.5;
}

/* Flipbook controls - positioned at bottom */
[b-qpkpe1j5ek] .flipbook-wrapper .flipbook-controls {
    position: absolute !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(10px);
    border-radius: 2rem;
    z-index: 1000 !important;
}

[b-qpkpe1j5ek] .flip-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    color: white;
    cursor: pointer;
    font-size: 1.1rem;
    transition: all 0.2s;
}

@media (hover: hover) {
    [b-qpkpe1j5ek] .flip-btn:hover {
        background: var(--accent-primary);
        border-color: var(--accent-primary);
        transform: scale(1.1);
    }
}

[b-qpkpe1j5ek] .page-indicator {
    color: white;
    font-size: 0.9rem;
    padding: 0 1rem;
    min-width: 80px;
    text-align: center;
}

/* StPageFlip shadow override */
[b-qpkpe1j5ek] .stf__parent {
    margin: 0 auto;
}

[b-qpkpe1j5ek] .stf__wrapper {
    box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important;
}

@media (max-width: 768px) {
    .viewer-header[b-qpkpe1j5ek] {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
        height: auto;
        min-height: 40px;
    }

    .header-info h2[b-qpkpe1j5ek] {
        font-size: 1rem;
    }

    .btn-back[b-qpkpe1j5ek], .btn-download[b-qpkpe1j5ek], .btn-toggle[b-qpkpe1j5ek] {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }

    .flipbook-wrapper[b-qpkpe1j5ek] {
        height: calc(100vh - 60px);
        min-height: 400px;
    }

    [b-qpkpe1j5ek] .flipbook-controls {
        padding: 0.5rem 1rem;
        gap: 0.5rem;
        bottom: 10px;
    }

    [b-qpkpe1j5ek] .flip-btn {
        width: 38px;
        height: 38px;
    }

    [b-qpkpe1j5ek] .flip-nav-btn {
        width: 40px;
        height: 60px;
        font-size: 1.2rem;
    }
}

/* Mobile - Touch Friendly */
@media (max-width: 576px) {
    .viewer-header[b-qpkpe1j5ek] {
        padding: 0.5rem;
        gap: 0.5rem;
    }

    .header-info h2[b-qpkpe1j5ek] {
        font-size: 0.9rem;
    }

    .header-info .validity[b-qpkpe1j5ek] {
        font-size: 0.75rem;
    }

    .btn-back[b-qpkpe1j5ek], .btn-download[b-qpkpe1j5ek], .btn-toggle[b-qpkpe1j5ek] {
        min-height: 44px;
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }

    .header-actions[b-qpkpe1j5ek] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Hide button text, show only icons on very small screens */
    .btn-back span:not(.bi)[b-qpkpe1j5ek],
    .btn-toggle span:not(.bi)[b-qpkpe1j5ek] {
        display: none;
    }

    .btn-download[b-qpkpe1j5ek] {
        flex: 1;
        justify-content: center;
    }

    .flipbook-wrapper[b-qpkpe1j5ek] {
        height: calc(100vh - 70px);
        min-height: 350px;
    }

    [b-qpkpe1j5ek] .flipbook-controls {
        padding: 0.5rem 0.75rem;
        gap: 0.25rem;
        bottom: 8px;
        border-radius: 1.5rem;
    }

    [b-qpkpe1j5ek] .flip-btn {
        width: 44px;
        height: 44px;
        font-size: 1rem;
    }

    [b-qpkpe1j5ek] .page-indicator {
        font-size: 0.8rem;
        padding: 0 0.5rem;
        min-width: 60px;
    }

    [b-qpkpe1j5ek] .flip-nav-btn {
        width: 44px;
        height: 70px;
        font-size: 1.25rem;
    }

    .btn-open-external[b-qpkpe1j5ek] {
        min-height: 48px;
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
    }

    .external-link-container[b-qpkpe1j5ek] {
        padding: 1.5rem 1rem;
    }

    .loading[b-qpkpe1j5ek], .not-found[b-qpkpe1j5ek], .no-pdf[b-qpkpe1j5ek] {
        padding: 1.5rem 1rem;
    }

    .not-found .bi[b-qpkpe1j5ek], .no-pdf .bi[b-qpkpe1j5ek] {
        font-size: 3rem;
    }
}
/* /Components/Pages/Contact.razor.rz.scp.css */
.contact-container[b-9a334svio9] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.contact-header[b-9a334svio9] {
    text-align: center;
    margin-bottom: 3rem;
}

.page-title[b-9a334svio9] {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.page-subtitle[b-9a334svio9] {
    font-size: 1.125rem;
    color: var(--text-secondary);
}

.contact-intro[b-9a334svio9] {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3rem;
}

.contact-intro p[b-9a334svio9] {
    font-size: 1.063rem;
    line-height: 1.7;
    color: var(--text-primary);
}

.contact-layout[b-9a334svio9] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 2rem;
}

.contact-info-section[b-9a334svio9] {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-info-section h2[b-9a334svio9] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.info-card[b-9a334svio9] {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--bg-tertiary);
    border-radius: 12px;
    transition: transform 0.2s;
}

@media (hover: hover) {
    .info-card:hover[b-9a334svio9] {
        transform: translateX(4px);
    }
}

.info-icon[b-9a334svio9] {
    font-size: 2rem;
    color: var(--accent-primary);
    flex-shrink: 0;
}

.info-content[b-9a334svio9] {
    flex: 1;
}

.info-content h3[b-9a334svio9] {
    font-size: 1.063rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.info-content p[b-9a334svio9] {
    font-size: 0.938rem;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

.info-content small[b-9a334svio9] {
    font-size: 0.813rem;
    color: var(--text-secondary);
}

.info-content a[b-9a334svio9] {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color 0.2s;
}

@media (hover: hover) {
    .info-content a:hover[b-9a334svio9] {
        color: var(--accent-secondary);
        text-decoration: underline;
    }
}

@media (max-width: 992px) {
    .contact-layout[b-9a334svio9] {
        grid-template-columns: 1fr;
    }

    .contact-info-section[b-9a334svio9] {
        order: -1;
    }
}

@media (max-width: 768px) {
    .contact-container[b-9a334svio9] {
        padding: 1rem;
    }

    .page-title[b-9a334svio9] {
        font-size: 2rem;
    }

    .contact-info-section[b-9a334svio9] {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .contact-container[b-9a334svio9] {
        padding: 0.75rem;
    }

    .page-title[b-9a334svio9] {
        font-size: 1.5rem;
    }

    .page-subtitle[b-9a334svio9] {
        font-size: 0.875rem;
    }

    .contact-info-section[b-9a334svio9] {
        padding: 1rem;
        border-radius: 12px;
    }

    .info-icon[b-9a334svio9] {
        font-size: 1.25rem;
    }

    .info-content h3[b-9a334svio9] {
        font-size: 1rem;
    }

    .info-content p[b-9a334svio9] {
        font-size: 0.875rem;
    }
}
/* /Components/Pages/GroceryListDetail.razor.rz.scp.css */
/* Modal Backdrop */
.modal-backdrop[b-ss4zlbhk8j] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 1rem;
    overscroll-behavior: contain;
}

.list-detail-page[b-ss4zlbhk8j] {
    min-height: 100vh;
    width: 100%;
}

.list-detail-container[b-ss4zlbhk8j] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

/* Header */
.list-header[b-ss4zlbhk8j] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color);
}

.back-btn[b-ss4zlbhk8j] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    font-size: 1.2rem;
}

@media (hover: hover) {
    .back-btn:hover[b-ss4zlbhk8j] {
        background: var(--hover-bg);
        border-color: var(--accent-primary);
    }
}

.list-title[b-ss4zlbhk8j] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-actions[b-ss4zlbhk8j] {
    display: flex;
    gap: 0.5rem;
}

.action-btn[b-ss4zlbhk8j] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

@media (hover: hover) {
    .action-btn:hover[b-ss4zlbhk8j] {
        color: var(--accent-primary);
        border-color: var(--accent-primary);
    }
}

.share-btn[b-ss4zlbhk8j] {
    background: var(--accent-primary);
    color: white;
    border-color: var(--accent-primary);
    font-weight: 500;
}

@media (hover: hover) {
    .share-btn:hover[b-ss4zlbhk8j] {
        background: var(--accent-secondary);
        border-color: var(--accent-secondary);
        color: white;
    }
}

/* Settings Menu Dropdown */
.section-menu-container[b-ss4zlbhk8j] {
    position: relative;
    display: flex;
    align-items: center;
}

.section-menu-button[b-ss4zlbhk8j] {
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (hover: hover) {
    .section-menu-button:hover[b-ss4zlbhk8j] {
        color: var(--accent-primary);
        border-color: var(--accent-primary);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(76, 175, 80, 0.2);
    }
}

.section-dropdown-menu[b-ss4zlbhk8j] {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 200px;
    z-index: 1000;
    overflow: hidden;
}

.dropdown-item[b-ss4zlbhk8j] {
    width: 100%;
    padding: 0.75rem 1rem;
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-align: left;
    transition: background 0.2s;
    border-bottom: 1px solid var(--border-color);
}

.dropdown-item:last-child[b-ss4zlbhk8j] {
    border-bottom: none;
}

@media (hover: hover) {
    .dropdown-item:hover[b-ss4zlbhk8j] {
        background: var(--hover-bg);
    }
}

.dropdown-item .bi[b-ss4zlbhk8j] {
    font-size: 1rem;
    color: var(--accent-primary);
}

body.dark-theme .section-dropdown-menu[b-ss4zlbhk8j] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.share-btn-disabled[b-ss4zlbhk8j] {
    background: #6c757d;
    color: white;
    border-color: #6c757d;
    font-weight: 500;
    opacity: 0.6;
    cursor: not-allowed;
}

@media (hover: hover) {
    .share-btn-disabled:hover[b-ss4zlbhk8j] {
        background: #6c757d;
        border-color: #6c757d;
        color: white;
        opacity: 0.6;
    }
}

.shared-badge-header[b-ss4zlbhk8j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}


/* Compact Scan Modal */
.compact-modal-backdrop[b-ss4zlbhk8j] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.compact-scan-modal[b-ss4zlbhk8j] {
    background: var(--bg-primary);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.compact-modal-header[b-ss4zlbhk8j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.compact-modal-title[b-ss4zlbhk8j] {
    display: flex;
    align-items: center;
    color: var(--text-primary);
}

.compact-modal-title h4[b-ss4zlbhk8j] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.compact-close-btn[b-ss4zlbhk8j] {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

@media (hover: hover) {
    .compact-close-btn:hover[b-ss4zlbhk8j] {
        background: var(--hover-bg);
        color: var(--text-primary);
    }
}

.compact-modal-body[b-ss4zlbhk8j] {
    padding: 1.5rem;
}

.compact-instructions[b-ss4zlbhk8j] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: 8px;
    border-left: 4px solid var(--accent-primary);
}

.compact-instruction-icon[b-ss4zlbhk8j] {
    color: var(--accent-primary);
    font-size: 1.2rem;
    margin-top: 0.2rem;
}

.compact-instruction-content h5[b-ss4zlbhk8j] {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 600;
}

.compact-instruction-list[b-ss4zlbhk8j] {
    margin: 0;
    padding-left: 1.2rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.4;
}

.compact-instruction-list li[b-ss4zlbhk8j] {
    margin-bottom: 0.25rem;
}

.compact-disclaimer[b-ss4zlbhk8j] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding: 0.75rem;
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border-radius: 8px;
    border-left: 4px solid #ffc107;
}

.compact-disclaimer-icon[b-ss4zlbhk8j] {
    color: #856404;
    font-size: 1rem;
    margin-top: 0.1rem;
}

.compact-disclaimer-content h6[b-ss4zlbhk8j] {
    margin: 0 0 0.25rem 0;
    color: #856404;
    font-size: 0.85rem;
    font-weight: 600;
}

.compact-disclaimer-content p[b-ss4zlbhk8j] {
    margin: 0;
    color: #856404;
    font-size: 0.8rem;
    line-height: 1.3;
}

.compact-upload-area[b-ss4zlbhk8j] {
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
}

.compact-upload-area[b-ss4zlbhk8j]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

@media (hover: hover) {
    .compact-upload-area:hover[b-ss4zlbhk8j]::before {
        left: 100%;
    }
}

@media (hover: hover) {
    .compact-upload-area:hover[b-ss4zlbhk8j],
    .compact-upload-area.drag-over[b-ss4zlbhk8j] {
        border-color: var(--accent-primary);
        background: linear-gradient(135deg, var(--accent-primary-light) 0%, var(--bg-primary) 100%);
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
    }
}

.compact-upload-content[b-ss4zlbhk8j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

.compact-upload-icon[b-ss4zlbhk8j] {
    font-size: 3rem;
    color: var(--accent-primary);
    animation: float-b-ss4zlbhk8j 3s ease-in-out infinite;
}

@keyframes float-b-ss4zlbhk8j {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

.compact-upload-text h5[b-ss4zlbhk8j] {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
}

.compact-upload-text p[b-ss4zlbhk8j] {
    margin: 0.5rem 0 0 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.compact-upload-formats[b-ss4zlbhk8j] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.compact-format-badge[b-ss4zlbhk8j] {
    background: var(--accent-primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.compact-file-preview[b-ss4zlbhk8j] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
}

.compact-preview-header[b-ss4zlbhk8j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.compact-file-name[b-ss4zlbhk8j] {
    flex: 1;
    color: var(--text-primary);
    font-weight: 500;
    margin-left: 0.5rem;
}

.compact-remove-btn[b-ss4zlbhk8j] {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

@media (hover: hover) {
    .compact-remove-btn:hover[b-ss4zlbhk8j] {
        background: var(--hover-bg);
        color: var(--text-primary);
    }
}

.compact-preview-actions[b-ss4zlbhk8j] {
    display: flex;
    justify-content: center;
}

/* Enhanced Confirmation Modal Styles */
.items-section-header[b-ss4zlbhk8j] {
    margin: 1.5rem 0 1rem 0;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
}

.items-section-header:first-child[b-ss4zlbhk8j] {
    margin-top: 0;
}

.section-title[b-ss4zlbhk8j] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
    display: flex;
    align-items: center;
    color: var(--text-primary);
}

.section-description[b-ss4zlbhk8j] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
    font-style: italic;
}

.extracted-item.existing-item[b-ss4zlbhk8j] {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.05) 0%, rgba(25, 135, 84, 0.05) 100%);
    border-left: 3px solid #28a745;
}

.extracted-item.new-item[b-ss4zlbhk8j] {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.05) 0%, rgba(0, 86, 179, 0.05) 100%);
    border-left: 3px solid #0d6efd;
}

.item-status[b-ss4zlbhk8j] {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    display: inline-block;
    margin-top: 0.25rem;
}

.existing-item .item-status[b-ss4zlbhk8j] {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
}

.new-item .item-status[b-ss4zlbhk8j] {
    background: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
}

.extracted-item.already-completed-item[b-ss4zlbhk8j] {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.05) 0%, rgba(255, 152, 0, 0.05) 100%);
    border-left: 3px solid #ffc107;
}

.already-completed-item .item-status[b-ss4zlbhk8j] {
    background: rgba(255, 193, 7, 0.1);
    color: #ffc107;
}

/* Item row layout adjustments for delete button */
.item-row .item-content[b-ss4zlbhk8j] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    overflow: hidden;
}

.item-row .item-actions[b-ss4zlbhk8j] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    margin-left: auto;
}

.btn-favorite-item[b-ss4zlbhk8j] {
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    color: #ffc107;
    padding: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

@media (hover: hover) {
    .btn-favorite-item:hover[b-ss4zlbhk8j] {
        background: rgba(255, 193, 7, 0.1);
        transform: scale(1.1);
    }
}

.btn-favorite-item .bi[b-ss4zlbhk8j] {
    font-size: 0.9rem;
}

.btn-favorite-item.not-favorited[b-ss4zlbhk8j] {
    color: #ccc;
    opacity: 0.5;
}

@media (hover: hover) {
    .btn-favorite-item.not-favorited:hover[b-ss4zlbhk8j] {
        color: #ffc107;
        opacity: 1;
        background: rgba(255, 193, 7, 0.1);
    }
}

.btn-edit-item[b-ss4zlbhk8j] {
    background: transparent;
    border: none;
    color: #0d6efd;
    padding: 0.5rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
}

@media (hover: hover) {
    .btn-edit-item:hover[b-ss4zlbhk8j] {
        background: rgba(13, 110, 253, 0.1);
        opacity: 1;
        transform: scale(1.1);
    }
}

.btn-edit-item .bi[b-ss4zlbhk8j] {
    font-size: 1.1rem;
}

.btn-delete-item[b-ss4zlbhk8j] {
    background: transparent;
    border: none;
    color: #dc3545;
    padding: 0.5rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
}

@media (hover: hover) {
    .btn-delete-item:hover[b-ss4zlbhk8j] {
        background: rgba(220, 53, 69, 0.1);
        opacity: 1;
        transform: scale(1.1);
    }
}

.btn-delete-item .bi[b-ss4zlbhk8j] {
    font-size: 1.1rem;
}

/* Item Quantity Controls */
.item-qty-controls[b-ss4zlbhk8j] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.1rem;
}

.item-qty-controls .qty-btn[b-ss4zlbhk8j] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 1rem;
    padding: 0;
}

@media (hover: hover) {
    .item-qty-controls .qty-btn:hover[b-ss4zlbhk8j] {
        background: var(--hover-bg);
        color: var(--accent-primary);
    }
}

.item-qty-controls .qty-btn:active[b-ss4zlbhk8j] {
    transform: scale(0.95);
}

.item-qty-controls .qty-value[b-ss4zlbhk8j] {
    min-width: 36px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    padding: 0 0.25rem;
}

/* Item Menu (gear icon dropdown) */
.item-menu-wrapper[b-ss4zlbhk8j] {
    position: relative;
}

.item-menu-btn[b-ss4zlbhk8j] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.85rem;
    padding: 0;
}

@media (hover: hover) {
    .item-menu-btn:hover[b-ss4zlbhk8j],
    .item-menu-btn.active[b-ss4zlbhk8j] {
        background: var(--hover-bg);
        color: var(--accent-primary);
        border-color: var(--accent-primary);
    }
}

.item-dropdown[b-ss4zlbhk8j] {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    min-width: 160px;
    z-index: 1000;
    padding: 0.5rem;
    animation: itemDropdownSlide-b-ss4zlbhk8j 0.2s ease-out;
}

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

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

.item-dropdown .dropdown-action[b-ss4zlbhk8j] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s;
    text-decoration: none;
}

@media (hover: hover) {
    .item-dropdown .dropdown-action:hover[b-ss4zlbhk8j] {
        background: var(--hover-bg);
    }
}

.item-dropdown .dropdown-action .bi[b-ss4zlbhk8j] {
    font-size: 1rem;
    color: var(--text-secondary);
}

@media (hover: hover) {
    .item-dropdown .dropdown-action:hover .bi[b-ss4zlbhk8j] {
        color: var(--accent-primary);
    }
}

.item-dropdown .dropdown-action.text-danger[b-ss4zlbhk8j] {
    color: #dc3545;
}

.item-dropdown .dropdown-action.text-danger .bi[b-ss4zlbhk8j] {
    color: #dc3545;
}

@media (hover: hover) {
    .item-dropdown .dropdown-action.text-danger:hover[b-ss4zlbhk8j] {
        background: rgba(220, 53, 69, 0.1);
    }
}

.item-dropdown .dropdown-divider[b-ss4zlbhk8j] {
    height: 1px;
    background: var(--border-color);
    margin: 0.35rem 0;
}

/* Delete Confirmation Modal */
.delete-modal[b-ss4zlbhk8j] {
    background: white;
    border-radius: 16px;
    max-width: 400px;
    width: 90%;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    animation: modalSlideIn 0.3s ease;
}

.delete-modal-header[b-ss4zlbhk8j] {
    padding: 1.5rem;
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.delete-modal-header h4[b-ss4zlbhk8j] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.delete-modal-body[b-ss4zlbhk8j] {
    padding: 1.5rem;
}

.delete-modal-body p[b-ss4zlbhk8j] {
    margin: 0 0 0.75rem 0;
    color: var(--text-primary);
}

.delete-modal-body p:last-child[b-ss4zlbhk8j] {
    margin-bottom: 0;
}

.delete-modal-body strong[b-ss4zlbhk8j] {
    color: #dc3545;
    font-weight: 600;
}

.delete-modal-footer[b-ss4zlbhk8j] {
    padding: 1rem 1.5rem;
    background: var(--bg-secondary);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.btn-cancel-delete[b-ss4zlbhk8j] {
    padding: 0.5rem 1.25rem;
    border: 1px solid var(--border-color);
    background: white;
    color: var(--text-primary);
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

@media (hover: hover) {
    .btn-cancel-delete:hover[b-ss4zlbhk8j] {
        background: var(--bg-secondary);
        border-color: var(--text-secondary);
    }
}

.btn-confirm-delete[b-ss4zlbhk8j] {
    padding: 0.5rem 1.25rem;
    border: none;
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

@media (hover: hover) {
    .btn-confirm-delete:hover[b-ss4zlbhk8j] {
        background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
    }
}

/* Edit Item Modal - HabitTracker2 Style */
.modal-overlay[b-ss4zlbhk8j] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-ss4zlbhk8j 0.2s ease-out;
}

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

    to {
        opacity: 1;
    }
}

.modal-content[b-ss4zlbhk8j] {
    background: var(--card-bg);
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp-b-ss4zlbhk8j 0.3s ease-out;
}

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

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

.modal-header[b-ss4zlbhk8j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--header-bg, var(--card-bg));
}

.modal-header h3[b-ss4zlbhk8j] {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.modal-header h3 .bi[b-ss4zlbhk8j] {
    color: var(--accent-primary);
    font-size: 1.1rem;
}

.close-button[b-ss4zlbhk8j] {
    padding: 0.5rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 1.1rem;
}

@media (hover: hover) {
    .close-button:hover[b-ss4zlbhk8j] {
        background: rgba(0, 0, 0, 0.05);
        color: var(--text-primary);
    }
}

@media (hover: hover) {
    body.dark-theme .close-button:hover[b-ss4zlbhk8j] {
        background: rgba(255, 255, 255, 0.05);
    }
}

.modal-body[b-ss4zlbhk8j] {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
}

/* Form Sections */
.form-section[b-ss4zlbhk8j] {
    margin-bottom: 2rem;
}

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

.section-header[b-ss4zlbhk8j] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--border-color);
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
}

.section-header .bi[b-ss4zlbhk8j] {
    color: var(--accent-primary);
    font-size: 1.1rem;
}

.form-group[b-ss4zlbhk8j] {
    margin-bottom: 1.25rem;
}

.form-group:last-child[b-ss4zlbhk8j] {
    margin-bottom: 0;
}

.form-group label[b-ss4zlbhk8j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.form-group label .bi[b-ss4zlbhk8j] {
    color: var(--accent-primary);
    font-size: 0.95rem;
}

.form-control[b-ss4zlbhk8j] {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1.5px solid var(--border-color);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: all 0.2s;
}

.form-control:focus[b-ss4zlbhk8j] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

@media (hover: hover) {
    .form-control:hover:not(:focus)[b-ss4zlbhk8j] {
        border-color: var(--accent-primary);
    }
}

.form-row[b-ss4zlbhk8j] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

textarea.form-control[b-ss4zlbhk8j] {
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
}

.modal-footer[b-ss4zlbhk8j] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 1.25rem 2rem;
    border-top: 1px solid var(--border-color);
    background: var(--header-bg, var(--card-bg));
    gap: 0.75rem;
}

.checkbox-label[b-ss4zlbhk8j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-primary);
}

.checkbox-label input[type="checkbox"][b-ss4zlbhk8j] {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
}

/* Items Section */
.items-section[b-ss4zlbhk8j] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.item-row[b-ss4zlbhk8j] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.6rem 0.875rem 0.6rem 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    max-width: 100%;
}

@media (hover: hover) {
    .item-row:hover[b-ss4zlbhk8j] {
        border-color: var(--accent-primary);
        box-shadow: 0 2px 8px rgba(76, 175, 80, 0.1);
    }
}

.item-checkbox[b-ss4zlbhk8j] {
    flex-shrink: 0;
}

.item-checkbox input[type="checkbox"][b-ss4zlbhk8j] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--accent-primary);
}

.item-row .item-info[b-ss4zlbhk8j] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    overflow: hidden;
    width: 100%;
}

.item-row .item-name-row[b-ss4zlbhk8j] {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.item-name[b-ss4zlbhk8j] {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    max-width: 100%;
}

.item-name .item-qty[b-ss4zlbhk8j] {
    margin-left: 0.35rem;
    font-weight: 400;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.item-quantity[b-ss4zlbhk8j] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.item-category[b-ss4zlbhk8j] {
    font-size: 0.85rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
    flex-shrink: 1;
}

.discount-badge[b-ss4zlbhk8j] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.6rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #ef4444;
    cursor: help;
    transition: all 0.2s ease;
}

@media (hover: hover) {
    .discount-badge:hover[b-ss4zlbhk8j] {
        background: rgba(239, 68, 68, 0.15);
        transform: translateY(-1px);
    }
}

.store-abbrev[b-ss4zlbhk8j] {
    font-weight: 600;
    opacity: 0.8;
}

.badge-icon[b-ss4zlbhk8j] {
    font-size: 0.7rem;
}

.badge-percent[b-ss4zlbhk8j] {
    font-weight: 700;
}

.badge-prices[b-ss4zlbhk8j] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.current-price[b-ss4zlbhk8j] {
    font-weight: 700;
}

.original-price[b-ss4zlbhk8j] {
    text-decoration: line-through;
    opacity: 0.6;
    font-size: 0.7rem;
}

.sale-label[b-ss4zlbhk8j] {
    font-weight: 600;
}

.item-image[b-ss4zlbhk8j] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-tertiary);
    margin-left: auto;
}

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

/* Completed Items */
.item-row.completed[b-ss4zlbhk8j] {
    opacity: 0.6;
}

.item-row.completed .item-name[b-ss4zlbhk8j] {
    text-decoration: line-through;
    color: var(--text-muted);
}

.item-row.completed .item-image[b-ss4zlbhk8j] {
    opacity: 0.5;
}

/* Add Item Row */
.add-item-row[b-ss4zlbhk8j] {
    border: 2px dashed rgba(76, 175, 80, 0.4);
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.03) 0%, rgba(56, 142, 60, 0.03) 100%);
}

@media (hover: hover) {
    .add-item-row:hover[b-ss4zlbhk8j] {
        background: linear-gradient(135deg, rgba(76, 175, 80, 0.08) 0%, rgba(56, 142, 60, 0.08) 100%);
        border-color: rgba(76, 175, 80, 0.8);
        box-shadow: 0 2px 8px rgba(76, 175, 80, 0.15);
    }
}

.add-item-prompt[b-ss4zlbhk8j] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-muted);
    width: 100%;
}

.add-icon[b-ss4zlbhk8j] {
    font-size: 1.5rem;
    color: var(--accent-primary);
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

@media (hover: hover) {
    .add-item-row:hover .add-icon[b-ss4zlbhk8j] {
        opacity: 1;
    }
}

@media (hover: none) {
    .add-icon[b-ss4zlbhk8j] {
        opacity: 1;
    }
}

.add-text[b-ss4zlbhk8j] {
    font-size: 1rem;
    font-weight: 500;
}

.add-item-form[b-ss4zlbhk8j] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.new-item-input[b-ss4zlbhk8j] {
    flex: 1;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text-primary);
    font-size: 1rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
}

.new-item-input:focus[b-ss4zlbhk8j] {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25);
    outline: none;
}

.add-item-actions[b-ss4zlbhk8j] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.add-item-actions .btn[b-ss4zlbhk8j] {
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Completed Section */
.completed-section[b-ss4zlbhk8j] {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid var(--border-color);
}

.completed-header[b-ss4zlbhk8j] {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 600;
    padding: 0.5rem 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    transition: color 0.2s ease;
}

@media (hover: hover) {
    .completed-header:hover[b-ss4zlbhk8j] {
        color: var(--text-primary);
    }
}

.completed-header .bi[b-ss4zlbhk8j] {
    font-size: 1rem;
    transition: transform 0.2s ease;
}

.completed-items[b-ss4zlbhk8j] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Hide header scan buttons earlier - view toggle needs space */
@media (max-width: 900px) {
    /* Hide header scan buttons - replaced by FABs */
    .list-actions .action-btn[b-ss4zlbhk8j] {
        display: none;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .list-header[b-ss4zlbhk8j] {
        flex-wrap: nowrap;
    }

    .list-title[b-ss4zlbhk8j] {
        font-size: 1.25rem;
    }

    .item-row[b-ss4zlbhk8j] {
        padding: 0.6rem 0.75rem;
        gap: 0.75rem;
    }

    .item-image[b-ss4zlbhk8j] {
        width: 28px;
        height: 28px;
    }

    .item-name[b-ss4zlbhk8j] {
        font-size: 0.95rem;
    }

    .item-quantity[b-ss4zlbhk8j] {
        font-size: 0.85rem;
        padding: 0.25rem 0.5rem;
    }
}

/* === COMPACT MOBILE - SHOPPING MODE === */
@media (max-width: 576px) {
    /* Header compaction */
    .list-detail-container[b-ss4zlbhk8j] {
        padding: 0.75rem 0.5rem;
        padding-bottom: 6rem; /* Space for FABs */
    }

    .list-header[b-ss4zlbhk8j] {
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        gap: 0.5rem;
    }

    .back-btn[b-ss4zlbhk8j] {
        padding: 0.35rem 0.5rem;
        font-size: 1rem;
    }

    .list-title[b-ss4zlbhk8j] {
        font-size: 1.1rem;
    }

    .list-actions[b-ss4zlbhk8j] {
        gap: 0.25rem;
    }

    .action-btn[b-ss4zlbhk8j] {
        padding: 0.35rem 0.5rem;
        font-size: 0.9rem;
    }

    .section-menu-button[b-ss4zlbhk8j] {
        padding: 0.35rem 0.5rem;
        font-size: 0.9rem;
    }

    .shared-badge-header[b-ss4zlbhk8j] {
        padding: 0.35rem 0.6rem;
        font-size: 0.75rem;
        border-radius: 16px;
    }

    /* Items section - compact for scanning */
    .items-section[b-ss4zlbhk8j] {
        gap: 0.35rem;
        margin-bottom: 1rem;
    }

    /* Item row - critical for compact shopping */
    .item-row[b-ss4zlbhk8j] {
        padding: 0.4rem 0.5rem 0.4rem 0.75rem;
        gap: 0.5rem;
        border-radius: 6px;
    }

    .btn-favorite-item[b-ss4zlbhk8j] {
        width: 24px;
        height: 24px;
    }

    .btn-favorite-item .bi[b-ss4zlbhk8j] {
        font-size: 0.8rem;
    }

    .item-row .item-content[b-ss4zlbhk8j] {
        gap: 0.5rem;
    }

    .item-row .item-info[b-ss4zlbhk8j] {
        gap: 0.15rem;
    }

    .item-row .item-name-row[b-ss4zlbhk8j] {
        gap: 0.5rem;
    }

    .item-name[b-ss4zlbhk8j] {
        font-size: 0.9rem;
    }

    .item-quantity[b-ss4zlbhk8j] {
        font-size: 0.75rem;
    }

    .item-category[b-ss4zlbhk8j] {
        font-size: 0.75rem;
        max-width: 100px;
    }

    /* Discount badge - compact but visible */
    .discount-badge[b-ss4zlbhk8j] {
        padding: 0.15rem 0.4rem;
        font-size: 0.65rem;
        gap: 0.25rem;
        border-radius: 12px;
    }

    .badge-icon[b-ss4zlbhk8j] {
        font-size: 0.6rem;
    }

    .original-price[b-ss4zlbhk8j] {
        font-size: 0.6rem;
    }

    .item-thumbnail[b-ss4zlbhk8j] {
        width: 28px;
        height: 28px;
        min-width: 28px;
        min-height: 28px;
        max-width: 28px;
        max-height: 28px;
        border-radius: 4px;
    }

    /* Quantity controls - maintain touch targets */
    .item-row .item-actions[b-ss4zlbhk8j] {
        gap: 0.15rem;
    }

    .item-qty-controls[b-ss4zlbhk8j] {
        padding: 0.05rem;
        border-radius: 5px;
    }

    .item-qty-controls .qty-btn[b-ss4zlbhk8j] {
        width: 28px;
        height: 28px;
        font-size: 0.9rem;
        border-radius: 5px;
    }

    .item-qty-controls .qty-value[b-ss4zlbhk8j] {
        min-width: 28px;
        font-size: 0.8rem;
        padding: 0 0.15rem;
    }

    .item-menu-btn[b-ss4zlbhk8j] {
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
        border-radius: 5px;
    }

    /* Add item row - compact */
    .add-item-row[b-ss4zlbhk8j] {
        padding: 0.4rem 0.5rem;
        border-radius: 6px;
    }

    .add-item-prompt[b-ss4zlbhk8j] {
        gap: 0.5rem;
    }

    .add-icon[b-ss4zlbhk8j] {
        font-size: 1.25rem;
    }

    .add-text[b-ss4zlbhk8j] {
        font-size: 0.9rem;
    }

    .add-item-form[b-ss4zlbhk8j] {
        gap: 0.5rem;
    }

    .new-item-input[b-ss4zlbhk8j] {
        padding: 0.4rem 0.6rem;
        font-size: 16px;
        min-height: 44px;
    }

    .add-item-actions .btn[b-ss4zlbhk8j] {
        padding: 0.4rem 0.6rem;
        min-height: 44px;
    }

    /* Search/add row compact */
    .add-search-prompt[b-ss4zlbhk8j] {
        padding: 0.6rem 0.75rem;
        font-size: 0.9rem;
        border-radius: 8px;
    }

    .add-search-prompt .bi[b-ss4zlbhk8j] {
        font-size: 1rem;
    }

    .add-search-input-wrapper[b-ss4zlbhk8j] {
        padding: 0.6rem 0.75rem;
        border-radius: 8px;
        gap: 0.5rem;
    }

    .add-search-input-wrapper > .bi[b-ss4zlbhk8j] {
        font-size: 1rem;
    }

    /* Completed section - compact */
    .completed-section[b-ss4zlbhk8j] {
        margin-top: 1rem;
        padding-top: 1rem;
    }

    .completed-header[b-ss4zlbhk8j] {
        font-size: 0.9rem;
        padding: 0.35rem 0;
        margin-bottom: 0.5rem;
    }

    .completed-items[b-ss4zlbhk8j] {
        gap: 0.35rem;
    }

    .completed-items .item-row[b-ss4zlbhk8j] {
        padding: 0.4rem 0.5rem;
    }

    /* Dropdown menus - touch friendly */
    .item-dropdown .dropdown-action[b-ss4zlbhk8j] {
        min-height: 44px;
        padding: 0.5rem 0.6rem;
        font-size: 0.85rem;
    }

    .section-dropdown-menu .dropdown-item[b-ss4zlbhk8j] {
        min-height: 44px;
        padding: 0.6rem 0.75rem;
        font-size: 0.9rem;
    }
}

/* Dark theme adjustments */
body.dark-theme .add-item-row[b-ss4zlbhk8j] {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.05) 0%, rgba(56, 142, 60, 0.05) 100%);
}

@media (hover: hover) {
    body.dark-theme .add-item-row:hover[b-ss4zlbhk8j] {
        background: linear-gradient(135deg, rgba(76, 175, 80, 0.12) 0%, rgba(56, 142, 60, 0.12) 100%);
    }
}

/* Scan Receipt Modal Styles */
.scan-modal-content[b-ss4zlbhk8j] {
    background: var(--card-bg);
    border: none;
    border-radius: 24px;
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 0 32px 64px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1);
    animation: modalSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(20px);
    position: relative;
}

.scan-modal-content[b-ss4zlbhk8j]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 24px;
    pointer-events: none;
}

.scan-modal-header[b-ss4zlbhk8j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 2.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    position: relative;
    overflow: hidden;
}

.scan-modal-header[b-ss4zlbhk8j]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
}

.scan-modal-title[b-ss4zlbhk8j] {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

.scan-modal-title h3[b-ss4zlbhk8j] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.scan-modal-title .bi[b-ss4zlbhk8j] {
    font-size: 1.5rem;
    opacity: 0.9;
}

.btn-close-scan[b-ss4zlbhk8j] {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.75rem;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(10px);
}

@media (hover: hover) {
    .btn-close-scan:hover[b-ss4zlbhk8j] {
        background: rgba(255, 255, 255, 0.25);
        border-color: rgba(255, 255, 255, 0.3);
        transform: scale(1.05) translateY(-1px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }
}

.scan-modal-body[b-ss4zlbhk8j] {
    padding: 2.5rem;
    max-height: 65vh;
    overflow-y: auto;
    position: relative;
    z-index: 1;
}

/* Instructions */
.scan-instructions[b-ss4zlbhk8j] {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
    border-radius: 20px;
    border: 1px solid rgba(102, 126, 234, 0.15);
    position: relative;
    overflow: hidden;
}

.scan-instructions[b-ss4zlbhk8j]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.03) 0%, rgba(118, 75, 162, 0.03) 100%);
    pointer-events: none;
}

.instruction-icon[b-ss4zlbhk8j] {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.75rem;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
    position: relative;
    z-index: 1;
}

.instruction-content[b-ss4zlbhk8j] {
    flex: 1;
    position: relative;
    z-index: 1;
}

.instruction-content h4[b-ss4zlbhk8j] {
    margin: 0 0 1rem 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.25px;
}

.instruction-content ul[b-ss4zlbhk8j] {
    margin: 0;
    padding-left: 1.5rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.instruction-content li[b-ss4zlbhk8j] {
    margin-bottom: 0.75rem;
    position: relative;
    font-weight: 500;
}

.instruction-content li[b-ss4zlbhk8j]::marker {
    color: #667eea;
    font-weight: 700;
}

/* Upload Area */
.scan-upload-area[b-ss4zlbhk8j] {
    border: 3px dashed rgba(102, 126, 234, 0.3);
    border-radius: 24px;
    padding: 4rem 3rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.02) 0%, rgba(118, 75, 162, 0.02) 100%);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.scan-upload-area[b-ss4zlbhk8j]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 24px;
}

.scan-upload-area[b-ss4zlbhk8j]::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent, rgba(102, 126, 234, 0.1), transparent);
    opacity: 0;
    transition: all 0.6s ease;
    animation: rotate-b-ss4zlbhk8j 4s linear infinite;
}

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

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

@media (hover: hover) {
    .scan-upload-area:hover[b-ss4zlbhk8j]::before {
        opacity: 1;
    }
}

@media (hover: hover) {
    .scan-upload-area:hover[b-ss4zlbhk8j]::after {
        opacity: 1;
    }
}

@media (hover: hover) {
    .scan-upload-area:hover[b-ss4zlbhk8j] {
        border-color: #667eea;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
        transform: translateY(-4px) scale(1.01);
        box-shadow: 0 20px 40px rgba(102, 126, 234, 0.2), 0 0 0 1px rgba(102, 126, 234, 0.1);
    }
}

.scan-upload-area.drag-over[b-ss4zlbhk8j] {
    border-color: #667eea;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, rgba(118, 75, 162, 0.12) 100%);
    transform: scale(1.03) translateY(-2px);
    box-shadow: 0 25px 50px rgba(102, 126, 234, 0.25), 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.upload-content[b-ss4zlbhk8j] {
    position: relative;
    z-index: 2;
}

.upload-icon[b-ss4zlbhk8j] {
    font-size: 4rem;
    color: #667eea;
    margin-bottom: 1.5rem;
    animation: float-b-ss4zlbhk8j 4s ease-in-out infinite;
    filter: drop-shadow(0 4px 8px rgba(102, 126, 234, 0.3));
}

@keyframes float-b-ss4zlbhk8j {

    0%,
    100% {
        transform: translateY(0px) scale(1);
    }

    50% {
        transform: translateY(-12px) scale(1.05);
    }
}

.upload-text h4[b-ss4zlbhk8j] {
    margin: 0 0 0.75rem 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

.upload-text p[b-ss4zlbhk8j] {
    margin: 0 0 2rem 0;
    color: var(--text-secondary);
    font-size: 1.1rem;
    font-weight: 500;
}

.upload-formats[b-ss4zlbhk8j] {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.format-badge[b-ss4zlbhk8j] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.75px;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) {
    .format-badge:hover[b-ss4zlbhk8j] {
        transform: translateY(-2px) scale(1.05);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
    }
}

/* File Preview */
.file-preview[b-ss4zlbhk8j] {
    margin-top: 2rem;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 20px;
    border: 1px solid rgba(102, 126, 234, 0.15);
    position: relative;
    overflow: hidden;
}

.file-preview[b-ss4zlbhk8j]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.02) 0%, rgba(118, 75, 162, 0.02) 100%);
    pointer-events: none;
}

.preview-header[b-ss4zlbhk8j] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

.file-name[b-ss4zlbhk8j] {
    flex: 1;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1.1rem;
    letter-spacing: -0.25px;
}

.btn-remove-file[b-ss4zlbhk8j] {
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.2);
    color: #dc3545;
    cursor: pointer;
    padding: 0.75rem;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    backdrop-filter: blur(10px);
}

@media (hover: hover) {
    .btn-remove-file:hover[b-ss4zlbhk8j] {
        background: #dc3545;
        color: white;
        transform: scale(1.1) translateY(-1px);
        box-shadow: 0 8px 25px rgba(220, 53, 69, 0.3);
        border-color: #dc3545;
    }
}

.preview-actions[b-ss4zlbhk8j] {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.btn-scan[b-ss4zlbhk8j] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 1rem 2.5rem;
    border-radius: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.1rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
    letter-spacing: -0.25px;
    min-width: 200px;
    justify-content: center;
}

.btn-scan[b-ss4zlbhk8j]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

@media (hover: hover) {
    .btn-scan:hover[b-ss4zlbhk8j]::before {
        left: 100%;
    }
}

@media (hover: hover) {
    .btn-scan:hover[b-ss4zlbhk8j] {
        transform: translateY(-3px) scale(1.02);
        box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
    }
}

.btn-scan:active[b-ss4zlbhk8j] {
    transform: translateY(-1px) scale(1.01);
}

.btn-scan:disabled[b-ss4zlbhk8j] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
}

@media (hover: hover) {
    .btn-scan:disabled:hover[b-ss4zlbhk8j] {
        transform: none;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
    }
}

/* Spinner */
.spinner-border-sm[b-ss4zlbhk8j] {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

/* Confirm Items Modal */
.confirm-modal-content[b-ss4zlbhk8j] {
    background: var(--card-bg);
    border: none;
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1);
    animation: modalSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(20px);
    position: relative;
}

.confirm-modal-content[b-ss4zlbhk8j]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.1) 0%, rgba(25, 135, 84, 0.1) 100%);
    border-radius: 24px;
    pointer-events: none;
}

.confirm-modal-header[b-ss4zlbhk8j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #28a745 0%, #198754 100%);
    color: white;
    position: relative;
    overflow: hidden;
}

.confirm-modal-header[b-ss4zlbhk8j]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
}

.confirm-modal-title[b-ss4zlbhk8j] {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

.confirm-modal-title h3[b-ss4zlbhk8j] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.25px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.confirm-modal-title .bi[b-ss4zlbhk8j] {
    font-size: 1.25rem;
    opacity: 0.9;
}

.btn-close-confirm[b-ss4zlbhk8j] {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 1rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(10px);
}

@media (hover: hover) {
    .btn-close-confirm:hover[b-ss4zlbhk8j] {
        background: rgba(255, 255, 255, 0.25);
        border-color: rgba(255, 255, 255, 0.3);
        transform: scale(1.05) translateY(-1px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }
}

.confirm-modal-body[b-ss4zlbhk8j] {
    padding: 1.5rem;
    overflow-y: auto;
    position: relative;
    z-index: 1;
}

.extracted-items-info[b-ss4zlbhk8j] {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.05) 0%, rgba(25, 135, 84, 0.05) 100%);
    border: 1px solid rgba(40, 167, 69, 0.15);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.extracted-items-info p[b-ss4zlbhk8j] {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 500;
}

.extracted-items-list[b-ss4zlbhk8j] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.extracted-item[b-ss4zlbhk8j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) {
    .extracted-item:hover[b-ss4zlbhk8j] {
        background: var(--bg-tertiary);
        border-color: #28a745;
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(40, 167, 69, 0.15);
    }
}

.item-info[b-ss4zlbhk8j] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.item-name[b-ss4zlbhk8j] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    max-width: 100%;
}

.item-actions[b-ss4zlbhk8j] {
    display: flex;
    gap: 0.5rem;
}

.btn-remove-item[b-ss4zlbhk8j] {
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.2);
    color: #dc3545;
    cursor: pointer;
    padding: 0.375rem;
    border-radius: 6px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

@media (hover: hover) {
    .btn-remove-item:hover[b-ss4zlbhk8j] {
        background: #dc3545;
        color: white;
        transform: scale(1.1);
        box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
    }
}

.confirm-modal-footer[b-ss4zlbhk8j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    position: relative;
    z-index: 1;
}

.btn-cancel[b-ss4zlbhk8j] {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.75rem 1.25rem;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

@media (hover: hover) {
    .btn-cancel:hover[b-ss4zlbhk8j] {
        background: var(--border-color);
        color: var(--text-primary);
        transform: translateY(-1px);
    }
}

.btn-confirm[b-ss4zlbhk8j] {
    background: linear-gradient(135deg, #28a745 0%, #198754 100%);
    border: none;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
    font-size: 0.9rem;
}

@media (hover: hover) {
    .btn-confirm:hover:not(:disabled)[b-ss4zlbhk8j] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4);
    }
}

.btn-confirm:disabled[b-ss4zlbhk8j] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.2);
}

/* Confirm Modal - Mobile Fullscreen */
@media (max-width: 576px) {
    .confirm-modal-content[b-ss4zlbhk8j] {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .confirm-modal-content[b-ss4zlbhk8j]::before {
        border-radius: 0;
    }

    .confirm-modal-header[b-ss4zlbhk8j] {
        flex-shrink: 0;
        padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1rem 1rem;
        border-radius: 0;
    }

    .confirm-modal-body[b-ss4zlbhk8j] {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1rem;
        max-height: none;
    }

    .confirm-modal-footer[b-ss4zlbhk8j] {
        flex-shrink: 0;
        padding: 1rem;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
        flex-direction: column;
        gap: 0.75rem;
    }

    .btn-cancel[b-ss4zlbhk8j],
    .btn-confirm[b-ss4zlbhk8j] {
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }

    .btn-remove-item[b-ss4zlbhk8j] {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .scan-modal-content[b-ss4zlbhk8j] {
        width: 95%;
        margin: 1rem;
        max-height: 90vh;
    }

    .scan-modal-header[b-ss4zlbhk8j] {
        padding: 1.5rem 1.75rem;
    }

    .scan-modal-title h3[b-ss4zlbhk8j] {
        font-size: 1.5rem;
    }

    .scan-modal-body[b-ss4zlbhk8j] {
        padding: 2rem 1.5rem;
    }

    .scan-instructions[b-ss4zlbhk8j] {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
        padding: 1.5rem;
    }

    .instruction-icon[b-ss4zlbhk8j] {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
    }

    .instruction-content h4[b-ss4zlbhk8j] {
        font-size: 1.1rem;
    }

    .scan-upload-area[b-ss4zlbhk8j] {
        padding: 3rem 2rem;
    }

    .upload-icon[b-ss4zlbhk8j] {
        font-size: 3rem;
    }

    .upload-text h4[b-ss4zlbhk8j] {
        font-size: 1.3rem;
    }

    .upload-text p[b-ss4zlbhk8j] {
        font-size: 1rem;
    }

    .format-badge[b-ss4zlbhk8j] {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
    }

    .file-preview[b-ss4zlbhk8j] {
        padding: 1.5rem;
    }

    .btn-scan[b-ss4zlbhk8j] {
        padding: 0.875rem 2rem;
        font-size: 1rem;
        min-width: 180px;
    }
}

/* Mobile Fullscreen Modal */
@media (max-width: 576px) {
    .scan-modal-content[b-ss4zlbhk8j] {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        margin: 0;
        border-radius: 0;
    }

    .scan-modal-header[b-ss4zlbhk8j] {
        padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1rem 1rem;
    }

    .scan-modal-title h3[b-ss4zlbhk8j] {
        font-size: 1.25rem;
    }

    .scan-modal-close[b-ss4zlbhk8j] {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
    }

    .scan-modal-body[b-ss4zlbhk8j] {
        flex: 1;
        overflow-y: auto;
        padding: 1rem;
    }

    .scan-upload-area[b-ss4zlbhk8j] {
        padding: 2rem 1rem;
    }

    .upload-icon[b-ss4zlbhk8j] {
        font-size: 2.5rem;
    }

    .upload-text h4[b-ss4zlbhk8j] {
        font-size: 1.2rem;
    }

    .upload-text p[b-ss4zlbhk8j] {
        font-size: 0.95rem;
    }

    .format-badge[b-ss4zlbhk8j] {
        padding: 0.35rem 0.7rem;
        font-size: 0.75rem;
    }

    .btn-scan[b-ss4zlbhk8j] {
        width: 100%;
        min-height: 48px;
        padding: 0.75rem 1.5rem;
        font-size: 0.95rem;
        min-width: 160px;
    }
}

/* Image Toggle Buttons */
.image-toggle[b-ss4zlbhk8j] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.toggle-btn[b-ss4zlbhk8j] {
    flex: 1;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    background: white;
    color: var(--text-primary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    font-size: 0.9rem;
}

@media (hover: hover) {
    .toggle-btn:hover:not(:disabled)[b-ss4zlbhk8j] {
        background: var(--bg-secondary);
        border-color: #0d6efd;
    }
}

.toggle-btn.active[b-ss4zlbhk8j] {
    background: #0d6efd;
    color: white;
    border-color: #0d6efd;
}

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

body.dark-theme .toggle-btn[b-ss4zlbhk8j] {
    background: var(--bg-secondary);
}

body.dark-theme .toggle-btn.active[b-ss4zlbhk8j] {
    background: #0d6efd;
}

/* Image Preview in Modals */
.image-preview[b-ss4zlbhk8j] {
    position: relative;
    display: inline-block;
    max-width: 200px;
}

.image-preview img[b-ss4zlbhk8j] {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.btn-remove-image[b-ss4zlbhk8j] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(220, 53, 69, 0.9);
    color: white;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

@media (hover: hover) {
    .btn-remove-image:hover[b-ss4zlbhk8j] {
        background: #dc3545;
        transform: scale(1.1);
    }
}

/* Upload Spinner */
.upload-spinner[b-ss4zlbhk8j] {
    display: flex;
    align-items: center;
    color: #0d6efd;
    font-size: 0.9rem;
}

/* Item Thumbnail */
.item-thumbnail[b-ss4zlbhk8j] {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    max-width: 32px;
    max-height: 32px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: opacity 0.2s ease;
}

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

@media (hover: hover) {
    .item-thumbnail:hover[b-ss4zlbhk8j] {
        opacity: 0.8;
    }
}

/* Image Viewer Modal */
.image-viewer-backdrop[b-ss4zlbhk8j] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn-b-ss4zlbhk8j 0.2s ease;
}

.image-viewer-container[b-ss4zlbhk8j] {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.image-viewer-close[b-ss4zlbhk8j] {
    position: absolute;
    top: -50px;
    right: 0;
    background: transparent;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    padding: 0.5rem;
    transition: transform 0.2s ease;
    z-index: 10000;
}

@media (hover: hover) {
    .image-viewer-close:hover[b-ss4zlbhk8j] {
        transform: scale(1.1);
    }
}

.image-viewer-content[b-ss4zlbhk8j] {
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-viewer-content img[b-ss4zlbhk8j] {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.image-viewer-caption[b-ss4zlbhk8j] {
    margin-top: 1rem;
    color: white;
    font-size: 1.1rem;
    text-align: center;
    padding: 0.5rem 1rem;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
}

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

    to {
        opacity: 1;
    }
}

/* Barcode Scanner Modal */
.barcode-scanner-modal[b-ss4zlbhk8j] {
    background: var(--card-bg);
    border-radius: 16px;
    max-width: 600px;
    width: 90%;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideIn-b-ss4zlbhk8j 0.3s ease;
}

.scanner-modal-header[b-ss4zlbhk8j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.scanner-modal-title[b-ss4zlbhk8j] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.scanner-modal-title h4[b-ss4zlbhk8j] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.scanner-modal-body[b-ss4zlbhk8j] {
    padding: 1.5rem;
}

.scanner-instructions[b-ss4zlbhk8j] {
    text-align: center;
    margin-bottom: 1rem;
    color: var(--text-secondary);
}

.scanner-video-container[b-ss4zlbhk8j] {
    position: relative;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1rem;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#barcodeScannerVideo[b-ss4zlbhk8j] {
    width: 100%;
    height: auto;
    display: block;
}

#barcodeScannerCanvas[b-ss4zlbhk8j] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.scanner-loading-overlay[b-ss4zlbhk8j] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    z-index: 10;
}

.scanner-controls[b-ss4zlbhk8j] {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

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

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

/* Product Information Modal */
.product-info-modal[b-ss4zlbhk8j] {
    background: var(--card-bg);
    border-radius: 16px;
    max-width: 700px;
    width: 90%;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideIn-b-ss4zlbhk8j 0.3s ease;
    display: flex;
    flex-direction: column;
}

.product-modal-header[b-ss4zlbhk8j] {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.product-modal-header h3[b-ss4zlbhk8j] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.product-modal-body[b-ss4zlbhk8j] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.product-image-section[b-ss4zlbhk8j] {
    text-align: center;
    margin-bottom: 1.5rem;
}

.product-image[b-ss4zlbhk8j] {
    max-width: 300px;
    max-height: 300px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    object-fit: contain;
}

.product-details-section[b-ss4zlbhk8j] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.product-main-info[b-ss4zlbhk8j] {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.product-name[b-ss4zlbhk8j] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.product-main-info p[b-ss4zlbhk8j] {
    margin: 0.5rem 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.product-main-info strong[b-ss4zlbhk8j] {
    color: var(--text-primary);
}

.product-categories h5[b-ss4zlbhk8j],
.product-labels h5[b-ss4zlbhk8j],
.product-nutrition h5[b-ss4zlbhk8j],
.product-ingredients h5[b-ss4zlbhk8j],
.product-allergens h5[b-ss4zlbhk8j] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.category-tags[b-ss4zlbhk8j],
.label-tags[b-ss4zlbhk8j],
.allergen-tags[b-ss4zlbhk8j] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.category-tag[b-ss4zlbhk8j],
.label-tag[b-ss4zlbhk8j] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.allergen-tag[b-ss4zlbhk8j] {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.nutrition-table[b-ss4zlbhk8j] {
    width: 100%;
    border-collapse: collapse;
}

.nutrition-table td[b-ss4zlbhk8j] {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.nutrition-table td:first-child[b-ss4zlbhk8j] {
    font-weight: 500;
    color: var(--text-primary);
}

.nutrition-table td:last-child[b-ss4zlbhk8j] {
    text-align: right;
}

.nutrition-table .indent[b-ss4zlbhk8j] {
    padding-left: 1.5rem;
    font-size: 0.9rem;
}

.ingredients-text[b-ss4zlbhk8j] {
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 0.95rem;
}

.product-modal-footer[b-ss4zlbhk8j] {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    background: var(--bg-secondary);
}

/* Scanner Mode Toggle */
.scanner-mode-toggle[b-ss4zlbhk8j] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 0.5rem;
    background: var(--bg-secondary);
    border-radius: 12px;
}

.mode-toggle-btn[b-ss4zlbhk8j] {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 2px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

@media (hover: hover) {
    .mode-toggle-btn:hover[b-ss4zlbhk8j] {
        background: var(--bg-tertiary);
        color: var(--text-primary);
    }
}

.mode-toggle-btn.active[b-ss4zlbhk8j] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-color: #667eea;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

/* Barcode Upload Area */
.barcode-upload-area[b-ss4zlbhk8j] {
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    padding: 3rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--bg-secondary);
    margin-bottom: 1rem;
}

@media (hover: hover) {
    .barcode-upload-area:hover[b-ss4zlbhk8j],
    .barcode-upload-area.drag-over[b-ss4zlbhk8j] {
        border-color: #667eea;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
    }
}

.barcode-upload-area .upload-content[b-ss4zlbhk8j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.barcode-upload-area .upload-icon[b-ss4zlbhk8j] {
    font-size: 3rem;
    color: #667eea;
    animation: float-b-ss4zlbhk8j 3s ease-in-out infinite;
}

.barcode-upload-area .upload-text h5[b-ss4zlbhk8j] {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
}

.barcode-upload-area .upload-text p[b-ss4zlbhk8j] {
    margin: 0.5rem 0 0 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.barcode-upload-area .upload-formats[b-ss4zlbhk8j] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.barcode-upload-area .format-badge[b-ss4zlbhk8j] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* Uploaded Image Preview */
.uploaded-image-preview[b-ss4zlbhk8j] {
    margin-top: 1rem;
    text-align: center;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.uploaded-image-preview img[b-ss4zlbhk8j] {
    max-width: 100%;
    max-height: 300px;
    border-radius: 8px;
    object-fit: contain;
}

/* Responsive */
@media (max-width: 768px) {

    .barcode-scanner-modal[b-ss4zlbhk8j],
    .product-info-modal[b-ss4zlbhk8j] {
        width: 95%;
        max-height: 90vh;
    }

    .product-image[b-ss4zlbhk8j] {
        max-width: 200px;
        max-height: 200px;
    }

    .product-name[b-ss4zlbhk8j] {
        font-size: 1.25rem;
    }

    .scanner-video-container[b-ss4zlbhk8j] {
        min-height: 250px;
    }

    .barcode-upload-area[b-ss4zlbhk8j] {
        padding: 2rem 1.5rem;
    }

    .barcode-upload-area .upload-icon[b-ss4zlbhk8j] {
        font-size: 2.5rem;
    }

    .scanner-mode-toggle[b-ss4zlbhk8j] {
        flex-direction: column;
    }
}

/* Mobile fullscreen for product modals (576px breakpoint) */
@media (max-width: 576px) {
    .modal-backdrop[b-ss4zlbhk8j] {
        padding: 0;
        align-items: stretch;
        touch-action: none;
    }

    .product-info-modal[b-ss4zlbhk8j] {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
        animation: none;
    }

    .product-not-found-modal[b-ss4zlbhk8j] {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .product-modal-header[b-ss4zlbhk8j] {
        padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1rem 1rem;
        flex-shrink: 0;
    }

    .product-modal-header h3[b-ss4zlbhk8j] {
        font-size: 1.1rem;
    }

    .product-modal-header .close-btn[b-ss4zlbhk8j] {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
    }

    .product-modal-body[b-ss4zlbhk8j] {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 1rem;
    }

    .product-modal-footer[b-ss4zlbhk8j] {
        padding: 1rem;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
        flex-shrink: 0;
        flex-direction: column;
        gap: 0.75rem;
    }

    .product-modal-footer .btn[b-ss4zlbhk8j] {
        width: 100%;
        justify-content: center;
        min-height: 48px;
    }

    .completion-toggle-buttons[b-ss4zlbhk8j] {
        flex-direction: column;
    }

    .completion-toggle-buttons .btn[b-ss4zlbhk8j] {
        width: 100%;
        min-width: unset;
    }

    .product-image[b-ss4zlbhk8j] {
        max-width: 150px;
        max-height: 150px;
    }
}

/* Product Not Found Modal */
.product-not-found-modal[b-ss4zlbhk8j] {
    background: var(--bg-primary);
    border-radius: 16px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideUp 0.3s ease;
}

.not-found-message[b-ss4zlbhk8j] {
    text-align: center;
    padding: 1.5rem;
    background: var(--bg-secondary);
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

.not-found-icon[b-ss4zlbhk8j] {
    font-size: 3rem;
    color: #ffc107;
    margin-bottom: 1rem;
}

.barcode-display[b-ss4zlbhk8j] {
    font-family: 'Courier New', monospace;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--accent-primary);
    background: var(--bg-primary);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    display: inline-block;
    margin: 0.5rem 0;
}

.help-text[b-ss4zlbhk8j] {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-top: 1rem;
    margin-bottom: 0;
}

/* Existing Item Notice */
.existing-item-notice[b-ss4zlbhk8j] {
    width: 100%;
    padding: 0.75rem 1rem;
    background: #d1ecf1;
    border: 1px solid #bee5eb;
    border-radius: 8px;
    color: #0c5460;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.completion-toggle-buttons[b-ss4zlbhk8j] {
    display: flex;
    gap: 0.75rem;
    width: 100%;
    flex-wrap: wrap;
}

.completion-toggle-buttons .btn[b-ss4zlbhk8j] {
    flex: 1;
    min-width: 140px;
}

.completion-toggle-buttons .btn-success[b-ss4zlbhk8j] {
    background: #28a745;
    border-color: #28a745;
    color: white;
}

@media (hover: hover) {
    .completion-toggle-buttons .btn-success:hover[b-ss4zlbhk8j] {
        background: #218838;
        border-color: #1e7e34;
    }
}

.completion-toggle-buttons .btn-outline-secondary[b-ss4zlbhk8j] {
    background: transparent;
    border-color: var(--border-color);
    color: var(--text-secondary);
}

@media (hover: hover) {
    .completion-toggle-buttons .btn-outline-secondary:hover[b-ss4zlbhk8j] {
        background: var(--bg-secondary);
        border-color: var(--accent-primary);
        color: var(--accent-primary);
    }
}

/* QuickAddRow Component Styling */
.quick-add-row.add-item-row .add-icon[b-ss4zlbhk8j] {
    color: var(--accent-primary) !important;
}

.quick-add-row.add-item-row .add-prompt[b-ss4zlbhk8j] {
    color: var(--text-muted);
}

.quick-add-row.add-item-row .quick-add-input[b-ss4zlbhk8j] {
    flex: 1;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text-primary);
    font-size: 1rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
}

.quick-add-row.add-item-row .quick-add-input:focus[b-ss4zlbhk8j] {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25);
    outline: none;
}

.quick-add-row.add-item-row .add-form[b-ss4zlbhk8j] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.quick-add-row.add-item-row .add-actions[b-ss4zlbhk8j] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

body.dark-theme .quick-add-row.add-item-row .quick-add-input[b-ss4zlbhk8j] {
    background: var(--input-bg);
    color: var(--text-primary);
}

/* ============================
   Expiration & Recurrence Styles
   ============================ */

/* Toggle Switches */
.toggle-group[b-ss4zlbhk8j] {
    margin-bottom: 1.25rem;
}

.toggle-label[b-ss4zlbhk8j] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
}

.toggle-input[b-ss4zlbhk8j] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-ss4zlbhk8j] {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--border-color);
    border-radius: 24px;
    transition: all 0.3s;
    flex-shrink: 0;
}

.toggle-slider[b-ss4zlbhk8j]::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: white;
    border-radius: 50%;
    transition: all 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-input:checked+.toggle-slider[b-ss4zlbhk8j] {
    background: var(--accent-primary);
}

.toggle-input:checked+.toggle-slider[b-ss4zlbhk8j]::before {
    transform: translateX(20px);
}

.toggle-input:focus+.toggle-slider[b-ss4zlbhk8j] {
    box-shadow: 0 0 0 3px var(--hover-bg);
}

.toggle-text[b-ss4zlbhk8j] {
    font-weight: 500;
    color: var(--text-color);
    font-size: 0.95rem;
}

/* Recurrence Info Box */
.recurrence-info-box[b-ss4zlbhk8j] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(var(--accent-primary-rgb, 99, 102, 241), 0.1);
    border: 1px solid var(--accent-primary);
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: var(--text-color);
}

.recurrence-info-box .bi[b-ss4zlbhk8j] {
    color: var(--accent-primary);
    flex-shrink: 0;
    margin-top: 2px;
}

/* Days of week selector */
.days-of-week-selector[b-ss4zlbhk8j] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.day-checkbox[b-ss4zlbhk8j] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    background: var(--input-bg);
    transition: all 0.2s;
    font-size: 0.875rem;
}

@media (hover: hover) {
    .day-checkbox:hover[b-ss4zlbhk8j] {
        background: var(--hover-bg);
    }
}

.day-checkbox input[type="checkbox"][b-ss4zlbhk8j] {
    width: auto;
    margin: 0;
}

.day-checkbox input[type="checkbox"]:checked+span[b-ss4zlbhk8j],
.day-checkbox:has(input[type="checkbox"]:checked)[b-ss4zlbhk8j] {
    background: var(--hover-bg);
    font-weight: 600;
}

/* Monthly recurrence mode options */
.monthly-mode-options[b-ss4zlbhk8j] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.radio-label[b-ss4zlbhk8j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--input-bg);
    cursor: pointer;
    transition: all 0.2s;
    flex-wrap: wrap;
}

@media (hover: hover) {
    .radio-label:hover[b-ss4zlbhk8j] {
        background: var(--hover-bg);
    }
}

.radio-label input[type="radio"][b-ss4zlbhk8j] {
    width: auto;
    margin: 0;
    cursor: pointer;
}

.radio-label input[type="radio"]:checked[b-ss4zlbhk8j] {
    accent-color: var(--accent-primary);
}

.radio-label:has(input[type="radio"]:checked)[b-ss4zlbhk8j] {
    background: var(--hover-bg);
    border-color: var(--accent-primary);
}

.radio-label span[b-ss4zlbhk8j] {
    color: var(--text-color);
    font-size: 0.875rem;
}

.hint-text[b-ss4zlbhk8j] {
    color: var(--text-secondary, #6c757d);
}

.day-input[b-ss4zlbhk8j] {
    width: 70px;
    padding: 0.3rem 0.5rem;
    font-size: 0.875rem;
}

.ordinal-select[b-ss4zlbhk8j],
.weekday-select[b-ss4zlbhk8j] {
    padding: 0.3rem 0.5rem;
    font-size: 0.875rem;
    width: auto;
}

.ordinal-select[b-ss4zlbhk8j] {
    min-width: 85px;
}

.weekday-select[b-ss4zlbhk8j] {
    min-width: 110px;
}

.warning-text[b-ss4zlbhk8j] {
    color: #f59e0b;
    font-size: 0.8rem;
    margin-top: 0.25rem;
    display: block;
}

/* Recurrence end options */
.recurrence-end-options[b-ss4zlbhk8j] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.occurrence-input[b-ss4zlbhk8j] {
    width: 80px;
    padding: 0.3rem 0.5rem;
    font-size: 0.875rem;
}

/* Interval selector for daily recurrence */
.interval-selector[b-ss4zlbhk8j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.interval-input[b-ss4zlbhk8j] {
    width: 80px;
    padding: 0.3rem 0.5rem;
    font-size: 0.875rem;
}

.interval-label[b-ss4zlbhk8j] {
    color: var(--text-secondary, #6c757d);
    font-size: 0.875rem;
}

/* Yearly date selector */
.yearly-date-selector[b-ss4zlbhk8j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.month-select[b-ss4zlbhk8j] {
    padding: 0.3rem 0.5rem;
    font-size: 0.875rem;
    width: auto;
    min-width: 120px;
}

/* Responsive adjustments for recurrence section */
@media (max-width: 768px) {
    .days-of-week-selector[b-ss4zlbhk8j] {
        gap: 0.25rem;
    }

    .day-checkbox[b-ss4zlbhk8j] {
        padding: 0.3rem 0.6rem;
        font-size: 0.8rem;
    }

    .radio-label[b-ss4zlbhk8j] {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .ordinal-select[b-ss4zlbhk8j],
    .weekday-select[b-ss4zlbhk8j] {
        flex: 1;
        min-width: 0;
    }
}

/* Pantry Button */
.pantry-btn[b-ss4zlbhk8j] {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.2);
}

@media (hover: hover) {
    .pantry-btn:hover[b-ss4zlbhk8j] {
        background: rgba(34, 197, 94, 0.2);
        color: #16a34a;
        border-color: rgba(34, 197, 94, 0.4);
    }
}

/* Notification Pills Container */
.notification-pills[b-ss4zlbhk8j] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-shrink: 0;
}

/* Base notification pill styling */
.notification-pill[b-ss4zlbhk8j] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 0.25rem 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
}

@media (hover: hover) {
    .notification-pill:hover[b-ss4zlbhk8j] {
        transform: translateY(-1px);
        background: var(--bg-tertiary);
    }
}

.notification-pill .bi[b-ss4zlbhk8j] {
    font-size: 0.85rem;
}

/* Expiring items pill (orange/warning) */
.notification-pill.expiring[b-ss4zlbhk8j] {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.2);
}

@media (hover: hover) {
    .notification-pill.expiring:hover[b-ss4zlbhk8j] {
        background: rgba(245, 158, 11, 0.2);
    }
}

/* Recurring items pill (blue/info) */
.notification-pill.recurring[b-ss4zlbhk8j] {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.2);
}

@media (hover: hover) {
    .notification-pill.recurring:hover[b-ss4zlbhk8j] {
        background: rgba(59, 130, 246, 0.2);
    }
}

/* Notification Modal Styles */
.notification-modal[b-ss4zlbhk8j] {
    max-width: 500px;
}

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

.notification-item[b-ss4zlbhk8j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    gap: 1rem;
}

.notification-item.expired[b-ss4zlbhk8j] {
    border-left: 3px solid #ef4444;
    background: rgba(239, 68, 68, 0.05);
}

.notification-item.expiring-soon[b-ss4zlbhk8j] {
    border-left: 3px solid #f59e0b;
    background: rgba(245, 158, 11, 0.05);
}

.notification-item.fresh[b-ss4zlbhk8j] {
    border-left: 3px solid #22c55e;
}

.notification-item.recurring[b-ss4zlbhk8j] {
    border-left: 3px solid #3b82f6;
    background: rgba(59, 130, 246, 0.05);
}

.notification-item-info[b-ss4zlbhk8j] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

.notification-item-name[b-ss4zlbhk8j] {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notification-item-status[b-ss4zlbhk8j] {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.notification-item.expired .notification-item-status[b-ss4zlbhk8j] {
    color: #ef4444;
}

.notification-item.expiring-soon .notification-item-status[b-ss4zlbhk8j] {
    color: #f59e0b;
}

.notification-item.recurring .notification-item-status[b-ss4zlbhk8j] {
    color: #3b82f6;
}

.empty-notification[b-ss4zlbhk8j] {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
}

.empty-notification .bi[b-ss4zlbhk8j] {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.5;
    display: block;
}

.empty-notification p[b-ss4zlbhk8j] {
    margin: 0;
}

/* Text color utilities for modal headers */
.text-warning[b-ss4zlbhk8j] {
    color: #f59e0b !important;
}

.text-info[b-ss4zlbhk8j] {
    color: #3b82f6 !important;
}

/* Responsive for notification pills */
@media (max-width: 576px) {
    .notification-pills .pill-text[b-ss4zlbhk8j] {
        display: none;
    }

    .notification-pill[b-ss4zlbhk8j] {
        padding: 0.4rem;
        border-radius: 50%;
        width: 32px;
        height: 32px;
        justify-content: center;
    }

    .notification-modal[b-ss4zlbhk8j] {
        max-width: 100%;
        margin: 0.5rem;
    }

    .notification-items-list[b-ss4zlbhk8j] {
        max-height: 300px;
    }
}

/* ============================
   Search/Add Row Styles
   ============================ */

.add-search-row[b-ss4zlbhk8j] {
    position: relative;
}

/* Hide prompt when expanded */
.add-search-prompt.hidden[b-ss4zlbhk8j] {
    display: none;
}

.add-search-container[b-ss4zlbhk8j] {
    position: relative;
}

/* iOS overlay mode for add-search-container */
.add-search-container.ios-overlay-mode[b-ss4zlbhk8j] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: 2;
}

/* Hide input wrapper styling in overlay mode */
.add-search-input-wrapper.ios-overlay-wrapper[b-ss4zlbhk8j] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

/* Hide the icon in overlay mode */
.add-search-input-wrapper.ios-overlay-wrapper > .bi[b-ss4zlbhk8j] {
    display: none;
}

/* Transparent input overlay */
.add-search-input.ios-overlay[b-ss4zlbhk8j] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 16px; /* Prevent iOS zoom */
}

.add-search-prompt[b-ss4zlbhk8j] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    font-size: 1rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 12px;
    border: 2px dashed rgba(76, 175, 80, 0.4);
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.03) 0%, rgba(56, 142, 60, 0.03) 100%);
}

@media (hover: hover) {
    .add-search-prompt:hover[b-ss4zlbhk8j] {
        background: linear-gradient(135deg, rgba(76, 175, 80, 0.08) 0%, rgba(56, 142, 60, 0.08) 100%);
        border-color: rgba(76, 175, 80, 0.8);
        color: var(--accent-primary);
        transform: translateY(-1px);
    }
}

.add-search-prompt:active[b-ss4zlbhk8j] {
    transform: translateY(0);
}

.add-search-prompt .bi[b-ss4zlbhk8j] {
    font-size: 1.2rem;
    color: var(--accent-primary);
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

@media (hover: hover) {
    .add-search-prompt:hover .bi[b-ss4zlbhk8j] {
        opacity: 1;
    }
}

.add-search-input-wrapper[b-ss4zlbhk8j] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--card-bg, #fff);
    border: 2px solid var(--accent-primary);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.15);
    transition: box-shadow 0.2s ease;
}

.add-search-input-wrapper:focus-within[b-ss4zlbhk8j] {
    box-shadow: 0 4px 16px rgba(76, 175, 80, 0.25);
}

.add-search-input-wrapper > .bi[b-ss4zlbhk8j] {
    font-size: 1.2rem;
    color: var(--accent-primary);
    flex-shrink: 0;
}

.add-search-input[b-ss4zlbhk8j] {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 1rem;
    padding: 0.25rem 0;
    outline: none;
    min-width: 0;
}

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

/* Clear button */
.search-clear-btn[b-ss4zlbhk8j] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: var(--bg-secondary, #f5f5f5);
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

@media (hover: hover) {
    .search-clear-btn:hover[b-ss4zlbhk8j] {
        background: var(--bg-tertiary, #e0e0e0);
        color: var(--text-primary);
    }
}

.search-clear-btn .bi[b-ss4zlbhk8j] {
    font-size: 1rem;
}

/* Search Dropdown */
.search-dropdown[b-ss4zlbhk8j] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    z-index: 100;
    max-height: 320px;
    overflow-y: auto;
    animation: dropdownSlideIn-b-ss4zlbhk8j 0.15s ease-out;
}

@keyframes dropdownSlideIn-b-ss4zlbhk8j {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.search-dropdown-divider[b-ss4zlbhk8j] {
    height: 1px;
    background: var(--border-color);
    margin: 0;
}

.search-dropdown-item[b-ss4zlbhk8j] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
    border-bottom: 1px solid var(--border-light, rgba(0, 0, 0, 0.05));
}

.search-dropdown-item:last-child[b-ss4zlbhk8j] {
    border-bottom: none;
}

@media (hover: hover) {
    .search-dropdown-item:hover[b-ss4zlbhk8j] {
        background: var(--bg-hover, rgba(0, 0, 0, 0.04));
    }
}

.search-dropdown-item:active[b-ss4zlbhk8j] {
    background: var(--bg-active, rgba(0, 0, 0, 0.08));
}

/* Add new item style */
.search-dropdown-item.add-new[b-ss4zlbhk8j] {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.06) 0%, rgba(56, 142, 60, 0.04) 100%);
    border-bottom: 1px solid rgba(76, 175, 80, 0.15);
}

@media (hover: hover) {
    .search-dropdown-item.add-new:hover[b-ss4zlbhk8j] {
        background: linear-gradient(135deg, rgba(76, 175, 80, 0.12) 0%, rgba(56, 142, 60, 0.08) 100%);
    }
}

.search-dropdown-item.add-new .dropdown-icon[b-ss4zlbhk8j] {
    color: var(--accent-primary);
}

.search-dropdown-item.add-new .dropdown-item-text[b-ss4zlbhk8j] {
    color: var(--accent-primary);
    font-weight: 500;
}

.search-dropdown-item.add-new .dropdown-item-text strong[b-ss4zlbhk8j] {
    font-weight: 600;
}

/* Existing items - compact style */
.search-dropdown-item.existing[b-ss4zlbhk8j] {
    padding: 0.5rem 0.875rem;
    gap: 0.5rem;
}

/* Icon wrapper for hover swap */
.dropdown-icon-wrapper[b-ss4zlbhk8j] {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.dropdown-icon-wrapper .dropdown-icon[b-ss4zlbhk8j] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.15s ease;
}

.dropdown-icon-wrapper .icon-default[b-ss4zlbhk8j] {
    opacity: 1;
}

.dropdown-icon-wrapper .icon-hover[b-ss4zlbhk8j] {
    opacity: 0;
}

@media (hover: hover) {
    .search-dropdown-item.existing:hover .icon-default[b-ss4zlbhk8j] {
        opacity: 0;
    }
}

@media (hover: hover) {
    .search-dropdown-item.existing:hover .icon-hover[b-ss4zlbhk8j] {
        opacity: 1;
    }
}

@media (hover: none) {
    .search-dropdown-item.existing .icon-hover[b-ss4zlbhk8j] {
        opacity: 1;
    }
}

/* Active (uncompleted) item styles */
.search-dropdown-item.active .icon-default[b-ss4zlbhk8j] {
    color: var(--text-muted);
}

.search-dropdown-item.active .icon-hover[b-ss4zlbhk8j] {
    color: var(--accent-primary);
}

@media (hover: hover) {
    .search-dropdown-item.active:hover[b-ss4zlbhk8j] {
        background: rgba(76, 175, 80, 0.08);
    }
}

/* Completed item styles */
.search-dropdown-item.completed[b-ss4zlbhk8j] {
    background: var(--bg-secondary, #fafafa);
}

.search-dropdown-item.completed .icon-default[b-ss4zlbhk8j] {
    color: var(--accent-primary);
}

.search-dropdown-item.completed .icon-hover[b-ss4zlbhk8j] {
    color: var(--text-secondary, #666);
}

@media (hover: hover) {
    .search-dropdown-item.completed:hover[b-ss4zlbhk8j] {
        background: rgba(0, 0, 0, 0.06);
    }
}

.search-dropdown-item.completed .dropdown-item-name[b-ss4zlbhk8j] {
    text-decoration: line-through;
    color: var(--text-muted);
}

.dropdown-icon[b-ss4zlbhk8j] {
    font-size: 1.1rem;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

.dropdown-item-name[b-ss4zlbhk8j] {
    font-size: 0.9rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-item-meta[b-ss4zlbhk8j] {
    font-size: 0.75rem;
    color: var(--text-muted);
    flex-shrink: 0;
    padding: 0.125rem 0.375rem;
    background: var(--bg-secondary, #f0f0f0);
    border-radius: 4px;
}

/* Push remaining space to the right */
.search-dropdown-item.existing .dropdown-item-action[b-ss4zlbhk8j] {
    margin-right: auto;
}

/* Action badge - always visible */
.dropdown-item-action[b-ss4zlbhk8j] {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    flex-shrink: 0;
    white-space: nowrap;
}

.search-dropdown-item.active .dropdown-item-action[b-ss4zlbhk8j] {
    color: var(--accent-primary);
    background: rgba(76, 175, 80, 0.12);
}

.search-dropdown-item.completed .dropdown-item-action[b-ss4zlbhk8j] {
    color: var(--text-secondary, #666);
    background: rgba(0, 0, 0, 0.08);
}

.search-dropdown-empty[b-ss4zlbhk8j] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.search-dropdown-empty .bi[b-ss4zlbhk8j] {
    color: var(--accent-primary);
}

/* Dark theme adjustments */
body.dark-theme .add-search-prompt[b-ss4zlbhk8j] {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.05) 0%, rgba(56, 142, 60, 0.05) 100%);
}

@media (hover: hover) {
    body.dark-theme .add-search-prompt:hover[b-ss4zlbhk8j] {
        background: linear-gradient(135deg, rgba(76, 175, 80, 0.12) 0%, rgba(56, 142, 60, 0.12) 100%);
    }
}

body.dark-theme .add-search-input-wrapper[b-ss4zlbhk8j] {
    background: var(--card-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.dark-theme .add-search-input-wrapper:focus-within[b-ss4zlbhk8j] {
    box-shadow: 0 4px 16px rgba(76, 175, 80, 0.3);
}

body.dark-theme .search-clear-btn[b-ss4zlbhk8j] {
    background: rgba(255, 255, 255, 0.1);
}

@media (hover: hover) {
    body.dark-theme .search-clear-btn:hover[b-ss4zlbhk8j] {
        background: rgba(255, 255, 255, 0.15);
    }
}

body.dark-theme .search-dropdown[b-ss4zlbhk8j] {
    background: var(--card-bg);
    border-color: var(--border-color);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

@media (hover: hover) {
    body.dark-theme .search-dropdown-item:hover[b-ss4zlbhk8j] {
        background: rgba(255, 255, 255, 0.08);
    }
}

body.dark-theme .search-dropdown-item:active[b-ss4zlbhk8j] {
    background: rgba(255, 255, 255, 0.12);
}

body.dark-theme .search-dropdown-item.add-new[b-ss4zlbhk8j] {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(56, 142, 60, 0.08) 100%);
}

@media (hover: hover) {
    body.dark-theme .search-dropdown-item.add-new:hover[b-ss4zlbhk8j] {
        background: linear-gradient(135deg, rgba(76, 175, 80, 0.18) 0%, rgba(56, 142, 60, 0.14) 100%);
    }
}

body.dark-theme .search-dropdown-item.completed[b-ss4zlbhk8j] {
    background: rgba(255, 255, 255, 0.03);
}

@media (hover: hover) {
    body.dark-theme .search-dropdown-item.completed:hover[b-ss4zlbhk8j] {
        background: rgba(255, 255, 255, 0.08);
    }
}

@media (hover: hover) {
    body.dark-theme .search-dropdown-item.active:hover[b-ss4zlbhk8j] {
        background: rgba(76, 175, 80, 0.15);
    }
}

body.dark-theme .dropdown-item-meta[b-ss4zlbhk8j] {
    background: rgba(255, 255, 255, 0.1);
}

body.dark-theme .search-dropdown-item.active .dropdown-item-action[b-ss4zlbhk8j] {
    background: rgba(76, 175, 80, 0.2);
}

body.dark-theme .search-dropdown-item.completed .dropdown-item-action[b-ss4zlbhk8j] {
    background: rgba(255, 255, 255, 0.1);
}

/* Mobile adjustments for search row */
@media (max-width: 576px) {
    .add-search-prompt[b-ss4zlbhk8j],
    .add-search-input-wrapper[b-ss4zlbhk8j] {
        padding: 0.75rem;
        border-radius: 10px;
    }

    .add-search-input[b-ss4zlbhk8j] {
        font-size: 16px; /* Prevents iOS zoom */
    }

    .search-dropdown[b-ss4zlbhk8j] {
        border-radius: 10px;
        max-height: 280px;
    }

    .search-dropdown-item.add-new[b-ss4zlbhk8j] {
        padding: 0.75rem;
    }

    /* Keep existing items compact on mobile too */
    .search-dropdown-item.existing[b-ss4zlbhk8j] {
        padding: 0.5rem 0.75rem;
    }

    .dropdown-item-name[b-ss4zlbhk8j] {
        font-size: 0.85rem;
    }

    .dropdown-item-action[b-ss4zlbhk8j] {
        font-size: 0.6rem;
        padding: 0.15rem 0.4rem;
    }
}

/* Premium Modal Styles */
.premium-modal[b-ss4zlbhk8j] {
    background: var(--bg-primary);
    border-radius: 16px;
    max-width: 450px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideUp 0.3s ease;
}

.premium-modal .modal-header[b-ss4zlbhk8j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.premium-header-content[b-ss4zlbhk8j] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.premium-header-content h3[b-ss4zlbhk8j] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.premium-header-content .warning-icon[b-ss4zlbhk8j] {
    font-size: 1.5rem;
    color: #ffc107;
}

.premium-modal .modal-body[b-ss4zlbhk8j] {
    padding: 1.5rem;
}

.premium-modal .modal-body > p[b-ss4zlbhk8j] {
    margin-bottom: 1.5rem;
    color: var(--text-secondary);
}

.premium-features h4[b-ss4zlbhk8j] {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.premium-features ul[b-ss4zlbhk8j] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.premium-features li[b-ss4zlbhk8j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    color: var(--text-primary);
}

.premium-features li .bi-check-circle-fill[b-ss4zlbhk8j] {
    color: #28a745;
}

.premium-modal .modal-footer[b-ss4zlbhk8j] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
}

.premium-modal .btn-secondary[b-ss4zlbhk8j] {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-primary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

@media (hover: hover) {
    .premium-modal .btn-secondary:hover[b-ss4zlbhk8j] {
        background: var(--bg-secondary);
    }
}

.premium-modal .btn-premium[b-ss4zlbhk8j] {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

@media (hover: hover) {
    .premium-modal .btn-premium:hover[b-ss4zlbhk8j] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }
}

.premium-modal .btn-close[b-ss4zlbhk8j] {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

@media (hover: hover) {
    .premium-modal .btn-close:hover[b-ss4zlbhk8j] {
        color: var(--text-primary);
    }
}

/* Toast Notification */
.toast-notification[b-ss4zlbhk8j] {
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 1.5rem);
    left: 50%;
    transform: translateX(-50%);
    background: var(--text-primary, #111827);
    color: white;
    padding: 0.75rem 1.25rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 1100;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    animation: toastIn-b-ss4zlbhk8j 0.3s ease, toastOut-b-ss4zlbhk8j 0.3s ease 2.2s forwards;
    pointer-events: none;
}

.toast-notification .bi[b-ss4zlbhk8j] {
    color: #4ade80;
    flex-shrink: 0;
}

@keyframes toastIn-b-ss4zlbhk8j {
    from { opacity: 0; transform: translateX(-50%) translateY(12px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes toastOut-b-ss4zlbhk8j {
    from { opacity: 1; transform: translateX(-50%) translateY(0); }
    to   { opacity: 0; transform: translateX(-50%) translateY(12px); }
}

/* Mobile Floating Action Buttons */
.mobile-fab-container[b-ss4zlbhk8j] {
    display: none;
    position: fixed;
    bottom: 90px;
    right: 20px;
    z-index: 990;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.fab-btn[b-ss4zlbhk8j] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: auto;
}

.fab-btn:active[b-ss4zlbhk8j] {
    transform: scale(0.95);
}

.fab-primary[b-ss4zlbhk8j] {
    background: var(--accent-gradient);
    box-shadow: var(--accent-glow), 0 4px 16px rgba(0, 0, 0, 0.2);
}

.fab-secondary[b-ss4zlbhk8j] {
    background: linear-gradient(135deg, #ff9a56, #ffc371);
    box-shadow: 0 4px 16px rgba(255, 154, 86, 0.4);
    width: 44px;
    height: 44px;
    font-size: 1.2rem;
    align-self: center;
}

.fab-tertiary[b-ss4zlbhk8j] {
    background: linear-gradient(135deg, #0d9488, #14b8a6);
    box-shadow: 0 4px 16px rgba(13, 148, 136, 0.4);
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
    align-self: center;
}

/* Show FABs when scan buttons are hidden */
@media (max-width: 900px) {
    .mobile-fab-container[b-ss4zlbhk8j] {
        display: flex;
        right: 10px;
    }
}

/* View Mode Toggle (in header) */
.view-mode-toggle[b-ss4zlbhk8j] {
    display: flex;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.view-mode-btn[b-ss4zlbhk8j] {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 0.4rem 0.65rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.view-mode-btn.active[b-ss4zlbhk8j] {
    background: var(--accent-color, #6366f1);
    color: white;
}

@media (hover: hover) {
    .view-mode-btn:not(.active):hover[b-ss4zlbhk8j] {
        background: var(--bg-tertiary);
        color: var(--text-primary);
    }
}

/* Area Group (View by Area mode) */
.area-group[b-ss4zlbhk8j] {
    margin-bottom: 0.5rem;
}

.area-group-header[b-ss4zlbhk8j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.6rem 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-bottom: 2px solid var(--area-color, var(--border-color));
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    transition: background 0.15s ease;
}

@media (hover: hover) {
    .area-group-header:hover[b-ss4zlbhk8j] {
        background: var(--bg-tertiary);
    }
}

.area-chevron[b-ss4zlbhk8j] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.area-icon[b-ss4zlbhk8j] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.area-name[b-ss4zlbhk8j] {
    flex: 1;
    text-align: left;
}

.area-count[b-ss4zlbhk8j] {
    font-size: 0.7rem;
    font-weight: 700;
    color: white;
    padding: 0.1rem 0.45rem;
    border-radius: 10px;
    min-width: 1.4rem;
    text-align: center;
    flex-shrink: 0;
}

.area-group-items[b-ss4zlbhk8j] {
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    border-radius: 0 0 8px 8px;
}

.area-group-items .item-row[b-ss4zlbhk8j] {
    border-bottom: 1px solid var(--border-color);
}

.area-group-items .item-row:last-child[b-ss4zlbhk8j] {
    border-bottom: none;
    border-radius: 0 0 8px 8px;
}

.area-completed-toggle[b-ss4zlbhk8j] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: none;
    border: none;
    border-top: 1px dashed var(--border-color);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.15s ease, background 0.15s ease;
    text-align: left;
}

@media (hover: hover) {
    .area-completed-toggle:hover[b-ss4zlbhk8j] {
        color: var(--text-primary);
        background: var(--hover-bg);
    }
}

.area-completed-toggle .bi-check-circle-fill[b-ss4zlbhk8j] {
    color: var(--accent-primary);
    font-size: 0.75rem;
}

.area-completed-toggle .bi-chevron-right[b-ss4zlbhk8j],
.area-completed-toggle .bi-chevron-down[b-ss4zlbhk8j] {
    font-size: 0.65rem;
}

.area-completed-items .item-row[b-ss4zlbhk8j] {
    opacity: 0.6;
}

.area-completed-items .item-row:last-child[b-ss4zlbhk8j] {
    border-bottom: none;
    border-radius: 0 0 8px 8px;
}

@media (max-width: 576px) {
    .area-group-header[b-ss4zlbhk8j] {
        padding: 0.5rem 0.6rem;
        font-size: 0.85rem;
    }
}
/* /Components/Pages/GroceryLists.razor.rz.scp.css */
.lists-page-wrapper[b-sibml30xwv] {
    min-height: 100vh;
    width: 100%;
}

.lists-container[b-sibml30xwv] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.lists-header[b-sibml30xwv] {
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.lists-header h1[b-sibml30xwv] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
}

/* View Toggle */
.view-toggle[b-sibml30xwv] {
    display: flex;
    gap: 0.25rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.25rem;
}

.view-btn[b-sibml30xwv] {
    background: none;
    border: none;
    color: var(--text-muted);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

@media (hover: hover) {
    .view-btn:hover[b-sibml30xwv] {
        color: var(--text-primary);
        background: var(--hover-bg);
    }
}

.view-btn.active[b-sibml30xwv] {
    background: var(--accent-primary);
    color: white;
}

/* Lists Content Container */
.lists-content[b-sibml30xwv] {
    transition: all 0.3s ease;
}

/* Grid View */
.lists-content.grid-view[b-sibml30xwv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

/* List View */
.lists-content.list-view[b-sibml30xwv] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* List Item - Universal styles */
.list-item[b-sibml30xwv] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

@media (hover: hover) {
    .list-item:hover[b-sibml30xwv] {
        border-color: var(--accent-primary);
        box-shadow: 0 4px 16px rgba(76, 175, 80, 0.15);
    }
}

/* Grid View - Card Style */
.grid-view .list-item[b-sibml30xwv] {
    border-radius: 10px;
    padding: 0.6rem 0.75rem 0.6rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: auto;
}

@media (hover: hover) {
    .grid-view .list-item:hover[b-sibml30xwv] {
        transform: translateY(-2px);
    }
}

.grid-view .list-item[b-sibml30xwv] {
    position: relative;
}

/* Grid Card Header - Compact Design */
.card-header[b-sibml30xwv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.card-header-left[b-sibml30xwv] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    flex: 1;
}

.card-header-left .btn-favorite-list[b-sibml30xwv] {
    padding: 0.25rem;
    flex-shrink: 0;
}

.card-header-left .btn-favorite-list .bi[b-sibml30xwv] {
    font-size: 1rem;
}

.card-title[b-sibml30xwv] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-header-meta[b-sibml30xwv] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-left: 0.5rem;
    flex-shrink: 0;
}

.card-header-meta .bi[b-sibml30xwv] {
    font-size: 0.8rem;
    color: var(--accent-primary);
}

.card-header-right[b-sibml30xwv] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.card-badge[b-sibml30xwv] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 0.7rem;
}

.card-badge.private[b-sibml30xwv] {
    background: rgba(108, 117, 125, 0.15);
    color: var(--text-muted);
}

.card-badge.shared[b-sibml30xwv] {
    background: rgba(76, 175, 80, 0.15);
    color: var(--accent-primary);
}

.card-header-right .card-menu-btn[b-sibml30xwv] {
    width: 24px;
    height: 24px;
    font-size: 0.75rem;
}

/* Card Meta Row */
.card-meta[b-sibml30xwv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.card-meta-item[b-sibml30xwv] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--text-secondary);
}

.card-meta-item .bi[b-sibml30xwv] {
    font-size: 0.85rem;
    color: var(--accent-primary);
}

.card-meta-divider[b-sibml30xwv] {
    width: 3px;
    height: 3px;
    background: var(--text-muted);
    border-radius: 50%;
    opacity: 0.5;
}

.card-meta-time[b-sibml30xwv] {
    color: var(--text-muted);
}

/* Keep old grid styles for compatibility but not used anymore */
.grid-view .list-main-info[b-sibml30xwv] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
}

.grid-view .list-name-section[b-sibml30xwv] {
    flex: 1;
    min-width: 0;
}

.grid-view .list-meta-inline[b-sibml30xwv] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.grid-view .list-actions[b-sibml30xwv] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* List View - Horizontal Compact Style */
.list-view .list-item[b-sibml30xwv] {
    border-radius: 8px;
    padding: 0.6rem 0.875rem 0.6rem 1.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: auto;
}

.list-view .list-main-info[b-sibml30xwv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.list-name-section[b-sibml30xwv] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.list-meta-inline[b-sibml30xwv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* List View - Inline layout */
.list-view .list-name-section[b-sibml30xwv] {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
}

.list-view .list-name[b-sibml30xwv] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.list-view .list-meta-inline[b-sibml30xwv] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.list-actions[b-sibml30xwv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.list-name[b-sibml30xwv] {
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
}

.grid-view .list-name[b-sibml30xwv] {
    font-size: 1.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.list-view .list-name[b-sibml30xwv] {
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.list-badge[b-sibml30xwv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.grid-view .list-badge[b-sibml30xwv] {
    padding: 0.5rem;
    width: 32px;
    height: 32px;
}

.list-view .list-badge[b-sibml30xwv] {
    padding: 0.4rem;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    max-width: 28px;
    max-height: 28px;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
}

.list-badge.private[b-sibml30xwv] {
    background: rgba(108, 117, 125, 0.15);
    color: var(--text-secondary);
}

.list-badge.shared[b-sibml30xwv] {
    background: rgba(76, 175, 80, 0.15);
    color: var(--accent-primary);
}

.list-badge.shared-with-you[b-sibml30xwv] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    width: auto;
    height: auto;
    font-size: 0.8rem;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
}

.stat-item[b-sibml30xwv] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.stat-item .bi[b-sibml30xwv] {
    font-size: 1rem;
    color: var(--accent-primary);
}

.stat-value[b-sibml30xwv] {
    font-weight: 500;
}

.btn-favorite-list[b-sibml30xwv] {
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    color: #ffc107;
    padding: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

@media (hover: hover) {
    .btn-favorite-list:hover[b-sibml30xwv] {
        background: rgba(255, 193, 7, 0.1);
        transform: scale(1.1);
    }
}

.btn-favorite-list .bi[b-sibml30xwv] {
    font-size: 0.9rem;
}

.btn-favorite-list.not-favorited[b-sibml30xwv] {
    color: #ccc;
    opacity: 0.5;
}

@media (hover: hover) {
    .btn-favorite-list.not-favorited:hover[b-sibml30xwv] {
        color: #ffc107;
        opacity: 1;
        background: rgba(255, 193, 7, 0.1);
    }
}

.btn-edit-list[b-sibml30xwv] {
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    color: #0d6efd;
    padding: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
}

@media (hover: hover) {
    .btn-edit-list:hover[b-sibml30xwv] {
        background: rgba(13, 110, 253, 0.1);
        opacity: 1;
        transform: scale(1.1);
    }
}

.btn-edit-list .bi[b-sibml30xwv] {
    font-size: 0.9rem;
}

.btn-delete-list[b-sibml30xwv] {
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    color: #dc3545;
    padding: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
}

@media (hover: hover) {
    .btn-delete-list:hover[b-sibml30xwv] {
        background: rgba(220, 53, 69, 0.1);
        opacity: 1;
        transform: scale(1.1);
    }
}

.btn-delete-list .bi[b-sibml30xwv] {
    font-size: 0.9rem;
}

.list-description[b-sibml30xwv] {
    margin: 0.5rem 0 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.list-time[b-sibml30xwv] {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

/* Add New List Item */
.add-list-item[b-sibml30xwv] {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.05) 0%, rgba(56, 142, 60, 0.05) 100%);
    border: 2px dashed rgba(76, 175, 80, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.grid-view .add-list-item[b-sibml30xwv] {
    min-height: 120px;
    flex-direction: column;
    gap: 0.5rem;
}

.list-view .add-list-item[b-sibml30xwv] {
    min-height: 60px;
    padding: 1rem 1.25rem;
}

@media (hover: hover) {
    .add-list-item:hover[b-sibml30xwv] {
        background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(56, 142, 60, 0.1) 100%);
        border-color: var(--accent-primary);
        box-shadow: 0 4px 16px rgba(76, 175, 80, 0.15);
    }
}

@media (hover: hover) {
    .grid-view .add-list-item:hover[b-sibml30xwv] {
        transform: translateY(-2px);
    }
}

.add-list-prompt[b-sibml30xwv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-muted);
}

.grid-view .add-list-prompt[b-sibml30xwv] {
    flex-direction: column;
}

.list-view .add-list-prompt[b-sibml30xwv] {
    flex-direction: row;
}

.add-icon[b-sibml30xwv] {
    color: var(--accent-primary);
    opacity: 0.7;
    transition: all 0.2s ease;
}

.grid-view .add-icon[b-sibml30xwv] {
    font-size: 2.5rem;
}

.list-view .add-icon[b-sibml30xwv] {
    font-size: 1.5rem;
}

@media (hover: hover) {
    .add-list-item:hover .add-icon[b-sibml30xwv] {
        opacity: 1;
    }
}

@media (hover: none) {
    .add-icon[b-sibml30xwv] {
        opacity: 1;
    }
}

@media (hover: hover) {
    .grid-view .add-list-item:hover .add-icon[b-sibml30xwv] {
        transform: scale(1.1);
    }
}

.add-text[b-sibml30xwv] {
    font-size: 1rem;
    font-weight: 500;
}

.add-list-form[b-sibml30xwv] {
    width: 100%;
    display: flex;
    gap: 1rem;
}

.grid-view .add-list-form[b-sibml30xwv] {
    flex-direction: column;
}

.list-view .add-list-form[b-sibml30xwv] {
    flex-direction: row;
    align-items: center;
}

.new-list-input[b-sibml30xwv] {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text-primary);
    font-size: 1rem;
    padding: 0.75rem;
    border-radius: 8px;
}

.list-view .new-list-input[b-sibml30xwv] {
    flex: 1;
}

.new-list-input:focus[b-sibml30xwv] {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25);
    outline: none;
}

.add-list-actions[b-sibml30xwv] {
    display: flex;
    gap: 0.5rem;
}

.grid-view .add-list-actions[b-sibml30xwv] {
    justify-content: flex-end;
}

.list-view .add-list-actions[b-sibml30xwv] {
    flex-shrink: 0;
}

.add-list-actions .btn[b-sibml30xwv] {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}


/* Mobile - Compact Shopping Mode */
@media (max-width: 576px) {
    /* === CONTAINER & HEADER === */
    .lists-container[b-sibml30xwv] {
        padding: 0.75rem 0.5rem;
        max-width: 100%;
    }

    .lists-content[b-sibml30xwv] {
        max-width: 100%;
        /* Note: No overflow:hidden here - it clips dropdowns */
    }

    .lists-header[b-sibml30xwv] {
        margin-bottom: 0.75rem;
    }

    .lists-header h1[b-sibml30xwv] {
        font-size: 1.1rem;
    }

    .view-toggle[b-sibml30xwv] {
        align-self: flex-end;
    }

    .view-btn[b-sibml30xwv] {
        min-width: 40px;
        min-height: 40px;
        padding: 0.4rem;
    }

    /* === GRID VIEW === */
    .lists-content.grid-view[b-sibml30xwv] {
        gap: 0.5rem;
    }

    .grid-view .list-item[b-sibml30xwv] {
        padding: 0.4rem 0.5rem 0.4rem 0.75rem;
        border-radius: 8px;
    }

    .grid-view .list-name[b-sibml30xwv] {
        font-size: 1rem;
    }

    /* === CARD HEADER - COMPACT & OVERFLOW FIX === */
    /* Dropdown is in card-header-right, so card-header-left can have overflow:hidden */

    .card-header[b-sibml30xwv] {
        gap: 0.25rem;
    }

    .card-header-left[b-sibml30xwv] {
        min-width: 0;
        flex: 1;
        overflow: hidden;  /* Safe: dropdown is in card-header-right */
        gap: 0.2rem;
    }

    .card-header-left .btn-favorite-list[b-sibml30xwv] {
        padding: 0.15rem;
        flex-shrink: 0;
    }

    .card-header-left .btn-favorite-list .bi[b-sibml30xwv] {
        font-size: 0.85rem;
    }

    .card-title[b-sibml30xwv] {
        flex: 1;  /* Critical: take available space so truncation works */
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.9rem;
    }

    .card-header-meta[b-sibml30xwv] {
        flex-shrink: 1;  /* Allow meta to shrink on very narrow screens */
        min-width: 0;
        overflow: hidden;
        font-size: 0.65rem;
        margin-left: 0.25rem;
        gap: 0.25rem;
    }

    .card-header-meta .bi[b-sibml30xwv] {
        font-size: 0.7rem;
    }

    .card-header-right[b-sibml30xwv] {
        flex-shrink: 0;  /* Don't shrink the menu */
    }

    /* === CARD ITEMS OVERFLOW FIX === */
    .card-items-scroll[b-sibml30xwv] {
        max-width: 100%;
        overflow-x: hidden;
    }

    .card-item[b-sibml30xwv] {
        max-width: 100%;
    }

    .card-item-content[b-sibml30xwv] {
        min-width: 0;
        flex: 1;
        overflow: hidden;
    }

    .card-item-name[b-sibml30xwv] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
        display: block;
    }

    /* === LIST VIEW === */
    .lists-content.list-view[b-sibml30xwv] {
        gap: 0.35rem;
    }

    .list-view .list-item[b-sibml30xwv] {
        padding: 0.4rem 0.5rem 0.4rem 0.75rem;
        gap: 0.4rem;
        border-radius: 6px;
    }

    .list-view .list-main-info[b-sibml30xwv] {
        gap: 0.4rem;
        min-width: 0;
        flex: 1;
        overflow: hidden;
    }

    .list-view .list-name-section[b-sibml30xwv] {
        gap: 0.4rem;
        min-width: 0;
        flex: 1;
        overflow: hidden;
    }

    .list-view .list-name[b-sibml30xwv] {
        font-size: 0.9rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
        flex: 1;
    }

    .list-view .list-meta-inline[b-sibml30xwv] {
        gap: 0.5rem;
        flex-shrink: 1;
        min-width: 0;
        overflow: hidden;
    }

    .list-view .list-actions[b-sibml30xwv] {
        flex-shrink: 0;
    }

    /* === BADGES === */
    .card-badge[b-sibml30xwv] {
        width: 18px;
        height: 18px;
        font-size: 0.55rem;
        border-radius: 4px;
    }

    .list-badge[b-sibml30xwv] {
        width: 22px;
        height: 22px;
        min-width: 22px;
        min-height: 22px;
        max-width: 22px;
        max-height: 22px;
        padding: 0.2rem;
        font-size: 0.7rem;
    }

    /* === STATS === */
    .stat-item[b-sibml30xwv] {
        font-size: 0.75rem;
        gap: 0.2rem;
    }

    .stat-item .bi[b-sibml30xwv] {
        font-size: 0.8rem;
    }

    .list-time[b-sibml30xwv] {
        font-size: 0.7rem;
    }

    /* === MENU BUTTON === */
    .card-menu-btn[b-sibml30xwv] {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
        font-size: 0.9rem;
    }

    .card-header-right .card-menu-btn[b-sibml30xwv] {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }

    /* === CARD ITEMS (Grid view) === */
    .card-items[b-sibml30xwv] {
        margin-top: 0.35rem;
        padding-top: 0.35rem;
    }

    .card-items-scroll[b-sibml30xwv] {
        gap: 0.05rem;
        max-height: 120px;
    }

    .card-item[b-sibml30xwv] {
        padding: 0.2rem 0.35rem;
        font-size: 0.75rem;
        min-height: 32px;
    }

    .card-item-qty[b-sibml30xwv] {
        font-size: 0.65rem;
        padding: 0.05rem 0.25rem;
    }

    .card-item-action[b-sibml30xwv] {
        font-size: 0.55rem;
        padding: 0.1rem 0.3rem;
    }

    .card-item-qty-badge .qty-btn[b-sibml30xwv] {
        width: 28px;
        height: 28px;
    }

    .card-item-edit-btn[b-sibml30xwv] {
        width: 28px;
        height: 28px;
    }

    .card-items-more[b-sibml30xwv] {
        min-height: 32px;
        font-size: 0.75rem;
    }

    /* === ADD PROMPT (Grid cards) === */
    .card-add-row[b-sibml30xwv] {
        margin-top: 0.25rem;
        padding-top: 0.25rem;
    }

    .card-add-prompt[b-sibml30xwv] {
        padding: 0.25rem 0.35rem;
        font-size: 0.75rem;
        min-height: 32px;
    }

    /* === ADD LIST ITEM === */
    .grid-view .add-list-item[b-sibml30xwv] {
        min-height: 60px;
    }

    .list-view .add-list-item[b-sibml30xwv] {
        min-height: 40px;
        padding: 0.4rem 0.5rem;
    }

    .grid-view .add-icon[b-sibml30xwv] {
        font-size: 1.5rem;
    }

    .list-view .add-icon[b-sibml30xwv] {
        font-size: 1rem;
    }

    .add-text[b-sibml30xwv] {
        font-size: 0.85rem;
    }

    /* === THUMBNAILS === */
    .list-thumbnail[b-sibml30xwv] {
        width: 28px;
        height: 28px;
        min-width: 28px;
        min-height: 28px;
        max-width: 28px;
        max-height: 28px;
        border-radius: 4px;
    }

    /* === DROPDOWNS - Touch friendly === */
    .card-dropdown .dropdown-action[b-sibml30xwv],
    .card-item-dropdown .dropdown-action[b-sibml30xwv] {
        min-height: 44px;
        padding: 0.5rem 0.75rem;
    }

    /* === FORM INPUTS === */
    .form-control[b-sibml30xwv],
    .new-list-input[b-sibml30xwv],
    .card-add-input[b-sibml30xwv] {
        min-height: 44px;
        font-size: 16px;
    }

    .add-list-actions .btn[b-sibml30xwv] {
        min-height: 44px;
        padding: 0.4rem 0.75rem;
    }
}

/* Loading Container */
.loading-container[b-sibml30xwv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1.5rem;
}

.loading-text[b-sibml30xwv] {
    color: var(--text-muted);
    font-size: 1rem;
    margin: 0;
}

.spinner-border[b-sibml30xwv] {
    width: 3rem;
    height: 3rem;
    border-width: 0.3rem;
}

/* Dark theme adjustments */
body.dark-theme .add-list-item[b-sibml30xwv] {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.08) 0%, rgba(56, 142, 60, 0.08) 100%);
}

@media (hover: hover) {
    body.dark-theme .add-list-item:hover[b-sibml30xwv] {
        background: linear-gradient(135deg, rgba(76, 175, 80, 0.15) 0%, rgba(56, 142, 60, 0.15) 100%);
    }
}

/* Delete Confirmation Modal */
.modal-backdrop[b-sibml30xwv] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.delete-modal[b-sibml30xwv] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    max-width: 400px;
    width: 90%;
    overflow: hidden;
}

.delete-modal-header[b-sibml30xwv] {
    padding: 1.5rem 1.5rem 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.delete-modal-header h4[b-sibml30xwv] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.delete-modal-body[b-sibml30xwv] {
    padding: 1rem 1.5rem;
}

.delete-modal-body p[b-sibml30xwv] {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
}

.delete-modal-body .text-muted[b-sibml30xwv] {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.delete-modal-footer[b-sibml30xwv] {
    padding: 1rem 1.5rem 1.5rem 1.5rem;
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.btn-cancel-delete[b-sibml30xwv],
.btn-confirm-delete[b-sibml30xwv] {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.btn-cancel-delete[b-sibml30xwv] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

@media (hover: hover) {
    .btn-cancel-delete:hover[b-sibml30xwv] {
        background: var(--hover-bg);
    }
}

.btn-confirm-delete[b-sibml30xwv] {
    background: #dc3545;
    border: 1px solid #dc3545;
    color: white;
}

@media (hover: hover) {
    .btn-confirm-delete:hover[b-sibml30xwv] {
        background: #c82333;
        border-color: #bd2130;
    }
}

/* Edit List Modal - HabitTracker2 Style */
.modal-overlay[b-sibml30xwv] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-sibml30xwv 0.2s ease-out;
}

@keyframes fadeIn-b-sibml30xwv {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-content[b-sibml30xwv] {
    background: var(--card-bg);
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp-b-sibml30xwv 0.3s ease-out;
}

@keyframes slideUp-b-sibml30xwv {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header[b-sibml30xwv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--header-bg, var(--card-bg));
}

.modal-header h3[b-sibml30xwv] {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.modal-header h3 .bi[b-sibml30xwv] {
    color: var(--accent-primary);
    font-size: 1.1rem;
}

.close-button[b-sibml30xwv] {
    padding: 0.5rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 1.1rem;
}

@media (hover: hover) {
    .close-button:hover[b-sibml30xwv] {
        background: rgba(0, 0, 0, 0.05);
        color: var(--text-primary);
    }
}

@media (hover: hover) {
    body.dark-theme .close-button:hover[b-sibml30xwv] {
        background: rgba(255, 255, 255, 0.05);
    }
}

.modal-body[b-sibml30xwv] {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
}

/* Form Sections */
.form-section[b-sibml30xwv] {
    margin-bottom: 2rem;
}

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

.section-header[b-sibml30xwv] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--border-color);
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
}

.section-header .bi[b-sibml30xwv] {
    color: var(--accent-primary);
    font-size: 1.1rem;
}

.form-group[b-sibml30xwv] {
    margin-bottom: 1.25rem;
}

.form-group:last-child[b-sibml30xwv] {
    margin-bottom: 0;
}

.form-group label[b-sibml30xwv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.form-group label .bi[b-sibml30xwv] {
    color: var(--accent-primary);
    font-size: 0.95rem;
}

.form-control[b-sibml30xwv] {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1.5px solid var(--border-color);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: all 0.2s;
}

.form-control:focus[b-sibml30xwv] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

@media (hover: hover) {
    .form-control:hover:not(:focus)[b-sibml30xwv] {
        border-color: var(--accent-primary);
    }
}

textarea.form-control[b-sibml30xwv] {
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
}

.modal-footer[b-sibml30xwv] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 1.25rem 2rem;
    border-top: 1px solid var(--border-color);
    background: var(--header-bg, var(--card-bg));
    gap: 0.75rem;
}

.checkbox-label[b-sibml30xwv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-primary);
}

.checkbox-label input[type="checkbox"][b-sibml30xwv] {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
}

/* Image Toggle Buttons */
.image-toggle[b-sibml30xwv] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.toggle-btn[b-sibml30xwv] {
    flex: 1;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    background: white;
    color: var(--text-primary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    font-size: 0.9rem;
}

@media (hover: hover) {
    .toggle-btn:hover:not(:disabled)[b-sibml30xwv] {
        background: var(--bg-secondary);
        border-color: #0d6efd;
    }
}

.toggle-btn.active[b-sibml30xwv] {
    background: #0d6efd;
    color: white;
    border-color: #0d6efd;
}

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

body.dark-theme .toggle-btn[b-sibml30xwv] {
    background: var(--bg-secondary);
}

body.dark-theme .toggle-btn.active[b-sibml30xwv] {
    background: #0d6efd;
}

/* Image Preview in Modals */
.image-preview[b-sibml30xwv] {
    position: relative;
    display: inline-block;
    max-width: 200px;
}

.image-preview img[b-sibml30xwv] {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.btn-remove-image[b-sibml30xwv] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(220, 53, 69, 0.9);
    color: white;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

@media (hover: hover) {
    .btn-remove-image:hover[b-sibml30xwv] {
        background: #dc3545;
        transform: scale(1.1);
    }
}

/* Upload Spinner */
.upload-spinner[b-sibml30xwv] {
    display: flex;
    align-items: center;
    color: #0d6efd;
    font-size: 0.9rem;
}

/* List Thumbnail */
.list-thumbnail[b-sibml30xwv] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    max-width: 40px;
    max-height: 40px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.list-thumbnail img[b-sibml30xwv] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.list-view .list-thumbnail[b-sibml30xwv] {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    max-width: 32px;
    max-height: 32px;
}

@media (hover: hover) {
    .list-thumbnail:hover[b-sibml30xwv] {
        opacity: 0.8;
    }
}

/* Image Viewer Modal */
.image-viewer-backdrop[b-sibml30xwv] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn-b-sibml30xwv 0.2s ease;
}

.image-viewer-container[b-sibml30xwv] {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.image-viewer-close[b-sibml30xwv] {
    position: absolute;
    top: -50px;
    right: 0;
    background: transparent;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    padding: 0.5rem;
    transition: transform 0.2s ease;
    z-index: 10000;
}

@media (hover: hover) {
    .image-viewer-close:hover[b-sibml30xwv] {
        transform: scale(1.1);
    }
}

.image-viewer-content[b-sibml30xwv] {
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-viewer-content img[b-sibml30xwv] {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.image-viewer-caption[b-sibml30xwv] {
    margin-top: 1rem;
    color: white;
    font-size: 1.1rem;
    text-align: center;
    padding: 0.5rem 1rem;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
}

@keyframes fadeIn-b-sibml30xwv {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* QuickAddRow Component Styling */
.quick-add-row.add-list-item .add-icon[b-sibml30xwv] {
    color: var(--accent-primary) !important;
}

.grid-view .quick-add-row.add-list-item .add-icon[b-sibml30xwv] {
    font-size: 2rem;
    opacity: 0.8;
}

.quick-add-row.add-list-item .add-prompt[b-sibml30xwv] {
    color: var(--text-muted);
}

.grid-view .quick-add-row.add-list-item .add-prompt[b-sibml30xwv] {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 500;
}

.quick-add-row.add-list-item .quick-add-input[b-sibml30xwv] {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text-primary);
    font-size: 1rem;
    padding: 0.75rem;
    border-radius: 8px;
    flex: 1;
}

.quick-add-row.add-list-item .quick-add-input:focus[b-sibml30xwv] {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25);
    outline: none;
}

.quick-add-row.add-list-item .add-form[b-sibml30xwv] {
    width: 100%;
    display: flex;
    gap: 1rem;
    align-items: center;
}

.grid-view .quick-add-row.add-list-item .add-form[b-sibml30xwv] {
    flex-direction: column;
    align-items: stretch;
}

.list-view .quick-add-row.add-list-item .add-form[b-sibml30xwv] {
    flex-direction: row;
}

.quick-add-row.add-list-item .add-actions[b-sibml30xwv] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.grid-view .quick-add-row.add-list-item .add-actions[b-sibml30xwv] {
    justify-content: flex-end;
}

body.dark-theme .quick-add-row.add-list-item .quick-add-input[b-sibml30xwv] {
    background: var(--input-bg);
    color: var(--text-primary);
}

/* Card Empty State (Grid View Only) */
.card-empty-state[b-sibml30xwv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.85rem;
}

.card-empty-state .bi[b-sibml30xwv] {
    font-size: 1.25rem;
    opacity: 0.5;
}

/* Card Items Display (Grid View Only) */
.card-items[b-sibml30xwv] {
    display: flex;
    flex-direction: column;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
    width: 100%;
}

.card-items-scroll[b-sibml30xwv] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.75rem;
    margin-right: -0.25rem;
}

.card-items-scroll[b-sibml30xwv]::-webkit-scrollbar {
    width: 4px;
}

.card-items-scroll[b-sibml30xwv]::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 2px;
}

.card-items-scroll[b-sibml30xwv]::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 2px;
}

.card-items-scroll[b-sibml30xwv]::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.card-item[b-sibml30xwv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.85rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
    border-radius: 6px;
    margin: 0 -0.5rem;
}

@media (hover: hover) {
    .card-item:hover[b-sibml30xwv] {
        background: var(--hover-bg);
        color: var(--accent-primary);
    }
}

.card-item .bi[b-sibml30xwv] {
    font-size: 0.9rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

@media (hover: hover) {
    .card-item:hover .bi[b-sibml30xwv] {
        color: var(--accent-primary);
    }
}

.card-item-content[b-sibml30xwv] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 1;
    min-width: 0;
}

.card-item-name[b-sibml30xwv] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-item-qty[b-sibml30xwv] {
    font-size: 0.75rem;
    color: var(--text-muted);
    flex-shrink: 0;
    background: var(--bg-secondary);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
}

/* Completed items in card */
.card-item.completed[b-sibml30xwv] {
    opacity: 0.6;
}

.card-item.completed .card-item-name[b-sibml30xwv] {
    text-decoration: line-through;
}

.card-item.completed .bi[b-sibml30xwv] {
    color: var(--accent-primary);
}

/* More items indicator */
.card-items-more[b-sibml30xwv] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--accent-primary);
    padding: 0.5rem 0;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s ease;
    border-radius: 6px;
    margin: 0.25rem -0.25rem 0;
}

@media (hover: hover) {
    .card-items-more:hover[b-sibml30xwv] {
        background: var(--hover-bg);
        color: var(--accent-secondary);
    }
}

.card-items-more .bi[b-sibml30xwv] {
    font-size: 0.9rem;
}

/* Card Add/Search Row */
.card-add-row[b-sibml30xwv] {
    position: relative; /* For iOS overlay positioning */
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border-color);
}

.card-add-prompt[b-sibml30xwv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    border-radius: 6px;
    margin: 0 -0.5rem;
}

@media (hover: hover) {
    .card-add-prompt:hover[b-sibml30xwv] {
        background: var(--hover-bg);
        color: var(--accent-primary);
    }
}

.card-add-prompt .bi[b-sibml30xwv] {
    font-size: 0.9rem;
    color: var(--accent-primary);
    opacity: 0.7;
}

@media (hover: hover) {
    .card-add-prompt:hover .bi[b-sibml30xwv] {
        opacity: 1;
    }
}

.card-add-input-wrapper[b-sibml30xwv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    background: var(--input-bg);
    border: 1.5px solid var(--accent-primary);
    border-radius: 6px;
    margin: 0 -0.5rem;
}

.card-add-input-wrapper .bi[b-sibml30xwv] {
    font-size: 0.9rem;
    color: var(--accent-primary);
    flex-shrink: 0;
}

.card-add-input[b-sibml30xwv] {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.85rem;
    padding: 0.3rem 0;
    outline: none;
}

.card-add-input[b-sibml30xwv]::placeholder {
    color: var(--text-muted);
}

/* ========================================
   iOS OVERLAY FOCUS FIX FOR CARD-ADD-ROW
   On iOS Safari, programmatic focus() doesn't open keyboard.
   Solution: Input is always in DOM as transparent overlay.
   ======================================== */

/* Hide prompt when expanded */
.card-add-prompt.hidden[b-sibml30xwv] {
    display: none;
}

/* iOS overlay mode - wrapper positioned as transparent overlay */
.card-add-input-wrapper.ios-overlay-mode[b-sibml30xwv] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    z-index: 2;
}

/* Hide the icon in overlay mode */
.card-add-input-wrapper.ios-overlay-mode .bi[b-sibml30xwv] {
    display: none;
}

/* Transparent input overlay - fills the card-add-row area */
.card-add-input.ios-overlay[b-sibml30xwv] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 16px; /* Prevent iOS zoom on focus */
}

/* Add item option in search results */
.card-item.card-item-add[b-sibml30xwv] {
    background: rgba(76, 175, 80, 0.08);
    border: 1px dashed var(--accent-primary);
    margin-bottom: 0.25rem;
}

@media (hover: hover) {
    .card-item.card-item-add:hover[b-sibml30xwv] {
        background: rgba(76, 175, 80, 0.15);
    }
}

.card-item.card-item-add .bi[b-sibml30xwv] {
    color: var(--accent-primary);
}

.card-item.card-item-add .card-item-name[b-sibml30xwv] {
    color: var(--accent-primary);
    font-weight: 500;
}

/* Empty search state */
.card-empty-search[b-sibml30xwv] {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8rem;
    padding: 0.5rem;
    font-style: italic;
}

/* Completed section separator */
.card-completed-section[b-sibml30xwv] {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
}

/* Dark theme adjustments for card search */
body.dark-theme .card-add-input-wrapper[b-sibml30xwv] {
    background: var(--input-bg);
}

body.dark-theme .card-item.card-item-add[b-sibml30xwv] {
    background: rgba(76, 175, 80, 0.12);
}

@media (hover: hover) {
    body.dark-theme .card-item.card-item-add:hover[b-sibml30xwv] {
        background: rgba(76, 175, 80, 0.2);
    }
}

/* Card search action tags - default is green (active state) */
.card-item-action[b-sibml30xwv] {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    flex-shrink: 0;
    white-space: nowrap;
    margin-right: auto;
    color: var(--accent-primary);
    background: rgba(76, 175, 80, 0.12);
}

/* Completed items get gray style */
.card-item.completed .card-item-action[b-sibml30xwv] {
    color: var(--text-secondary, #666);
    background: rgba(0, 0, 0, 0.08);
}

/* Dark theme */
body.dark-theme .card-item-action[b-sibml30xwv] {
    background: rgba(76, 175, 80, 0.2);
}

body.dark-theme .card-item.completed .card-item-action[b-sibml30xwv] {
    background: rgba(255, 255, 255, 0.1);
}

/* Card Menu (Settings Dropdown) */
.card-menu-wrapper[b-sibml30xwv] {
    position: relative;
}

.card-menu-btn[b-sibml30xwv] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
}

@media (hover: hover) {
    .card-menu-btn:hover[b-sibml30xwv],
    .card-menu-btn.active[b-sibml30xwv] {
        background: var(--hover-bg);
        color: var(--accent-primary);
        border-color: var(--accent-primary);
    }
}

.card-dropdown[b-sibml30xwv] {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    min-width: 160px;
    z-index: 1000;
    padding: 0.5rem;
    animation: cardDropdownSlide-b-sibml30xwv 0.2s ease-out;
}

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

.card-dropdown .dropdown-action[b-sibml30xwv] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s;
    text-decoration: none;
}

@media (hover: hover) {
    .card-dropdown .dropdown-action:hover[b-sibml30xwv] {
        background: var(--hover-bg);
    }
}

.card-dropdown .dropdown-action .bi[b-sibml30xwv] {
    font-size: 1rem;
    color: var(--text-secondary);
}

@media (hover: hover) {
    .card-dropdown .dropdown-action:hover .bi[b-sibml30xwv] {
        color: var(--accent-primary);
    }
}

.card-dropdown .dropdown-action.text-danger[b-sibml30xwv] {
    color: #dc3545;
}

.card-dropdown .dropdown-action.text-danger .bi[b-sibml30xwv] {
    color: #dc3545;
}

@media (hover: hover) {
    .card-dropdown .dropdown-action.text-danger:hover[b-sibml30xwv] {
        background: rgba(220, 53, 69, 0.1);
    }
}

.card-dropdown .dropdown-divider[b-sibml30xwv] {
    height: 1px;
    background: var(--border-color);
    margin: 0.35rem 0;
}

/* Card Item Quantity Badge (clickable to expand) */
.card-item-qty-badge[b-sibml30xwv] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

@media (hover: hover) {
    .card-item-qty-badge:hover[b-sibml30xwv] {
        background: var(--bg-secondary);
        color: var(--text-primary);
    }
}

.card-item-qty-badge.expanded[b-sibml30xwv] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    padding: 0.15rem;
    gap: 0.2rem;
}

.card-item-qty-badge .qty-btn[b-sibml30xwv] {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.8rem;
    padding: 0;
}

@media (hover: hover) {
    .card-item-qty-badge .qty-btn:hover[b-sibml30xwv] {
        background: var(--hover-bg);
        color: var(--accent-primary);
    }
}

.card-item-qty-badge .qty-btn:active[b-sibml30xwv] {
    transform: scale(0.95);
}

.card-item-qty-badge .qty-value[b-sibml30xwv] {
    min-width: 24px;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-primary);
    padding: 0 0.15rem;
}

/* Card Item Edit Button */
.card-item-edit-btn[b-sibml30xwv] {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.75rem;
    padding: 0;
    margin-left: auto;
    flex-shrink: 0;
    opacity: 0.5;
}

@media (hover: hover) {
    .card-item-edit-btn:hover[b-sibml30xwv] {
        background: var(--hover-bg);
        color: var(--accent-primary);
        opacity: 1;
    }
}

/* Card Item Menu (gear icon dropdown) - kept for compatibility */
.card-item-menu-wrapper[b-sibml30xwv] {
    position: relative;
}

.card-item-menu-btn[b-sibml30xwv] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.8rem;
    padding: 0;
}

@media (hover: hover) {
    .card-item-menu-btn:hover[b-sibml30xwv],
    .card-item-menu-btn.active[b-sibml30xwv] {
        background: var(--hover-bg);
        color: var(--accent-primary);
        border-color: var(--accent-primary);
    }
}

.card-item-dropdown[b-sibml30xwv] {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
    min-width: 140px;
    z-index: 1001;
    padding: 0.35rem;
    animation: cardDropdownSlide-b-sibml30xwv 0.15s ease-out;
}

.card-item-dropdown .dropdown-action[b-sibml30xwv] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s;
    text-decoration: none;
}

@media (hover: hover) {
    .card-item-dropdown .dropdown-action:hover[b-sibml30xwv] {
        background: var(--hover-bg);
    }
}

.card-item-dropdown .dropdown-action .bi[b-sibml30xwv] {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

@media (hover: hover) {
    .card-item-dropdown .dropdown-action:hover .bi[b-sibml30xwv] {
        color: var(--accent-primary);
    }
}

.card-item-dropdown .dropdown-action.text-danger[b-sibml30xwv] {
    color: #dc3545;
}

.card-item-dropdown .dropdown-action.text-danger .bi[b-sibml30xwv] {
    color: #dc3545;
}

@media (hover: hover) {
    .card-item-dropdown .dropdown-action.text-danger:hover[b-sibml30xwv] {
        background: rgba(220, 53, 69, 0.1);
    }
}

.card-item-dropdown .dropdown-divider[b-sibml30xwv] {
    height: 1px;
    background: var(--border-color);
    margin: 0.25rem 0;
}

/* Edit Item Modal */
.edit-item-modal[b-sibml30xwv] {
    max-width: 450px;
}

.edit-item-modal .form-row[b-sibml30xwv] {
    display: flex;
    gap: 1rem;
}

.edit-item-modal .form-row .form-group[b-sibml30xwv] {
    flex: 1;
}

.edit-item-modal .section-header[b-sibml30xwv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.edit-item-modal .section-header .bi[b-sibml30xwv] {
    color: var(--accent-primary);
}

/* Quantity input with +/- buttons */
.qty-input-wrapper[b-sibml30xwv] {
    display: flex;
    align-items: center;
    gap: 0;
}

.qty-input-wrapper .qty-input-btn[b-sibml30xwv] {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 1rem;
    padding: 0;
}

.qty-input-wrapper .qty-input-btn:first-child[b-sibml30xwv] {
    border-radius: 8px 0 0 8px;
    border-right: none;
}

.qty-input-wrapper .qty-input-btn:last-child[b-sibml30xwv] {
    border-radius: 0 8px 8px 0;
    border-left: none;
}

@media (hover: hover) {
    .qty-input-wrapper .qty-input-btn:hover[b-sibml30xwv] {
        background: var(--hover-bg);
        color: var(--accent-primary);
    }
}

.qty-input-wrapper .qty-input-btn:active[b-sibml30xwv] {
    transform: scale(0.95);
}

.qty-input-wrapper .qty-input[b-sibml30xwv] {
    flex: 1;
    text-align: center;
    border-radius: 0;
    min-width: 60px;
}

/* Modal footer with delete button */
.edit-item-modal .modal-footer[b-sibml30xwv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.edit-item-modal .modal-footer-right[b-sibml30xwv] {
    display: flex;
    gap: 0.5rem;
}
/* /Components/Pages/Pantry.razor.rz.scp.css */
.pantry-page[b-w5jj0thc6l] {
    min-height: 100vh;
}

.pantry-container[b-w5jj0thc6l] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.pantry-header[b-w5jj0thc6l] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.back-btn[b-w5jj0thc6l] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

@media (hover: hover) {
    .back-btn:hover[b-w5jj0thc6l] {
        background: var(--bg-tertiary);
    }
}

.pantry-title[b-w5jj0thc6l] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
}


/* Loading State */
.loading[b-w5jj0thc6l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem;
    color: var(--text-secondary);
}

.spinner[b-w5jj0thc6l] {
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin-b-w5jj0thc6l 1s linear infinite;
}

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

/* Empty State */
.empty-state[b-w5jj0thc6l] {
    text-align: center;
    padding: 3rem;
    color: var(--text-secondary);
}

.empty-state .bi[b-w5jj0thc6l] {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
    display: block;
}

.empty-state p[b-w5jj0thc6l] {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
}

.empty-state small[b-w5jj0thc6l] {
    opacity: 0.7;
}

/* Pantry Sections */
.pantry-section[b-w5jj0thc6l] {
    margin-bottom: 2rem;
}

.section-header[b-w5jj0thc6l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.section-title[b-w5jj0thc6l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.btn-add-all[b-w5jj0thc6l] {
    background: var(--accent-primary);
    border: none;
    color: white;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 500;
}

@media (hover: hover) {
    .btn-add-all:hover[b-w5jj0thc6l] {
        background: var(--accent-secondary);
        transform: translateY(-1px);
    }
}

.section-title .bi[b-w5jj0thc6l] {
    font-size: 1rem;
}

.pantry-section.expired .section-title[b-w5jj0thc6l] {
    color: #ef4444;
}

.pantry-section.expiring-soon .section-title[b-w5jj0thc6l] {
    color: #f59e0b;
}

.pantry-section.scheduled .section-title[b-w5jj0thc6l] {
    color: #3b82f6;
}

.pantry-section.history[b-w5jj0thc6l] {
    padding-bottom: 3rem;
}

.pantry-section.history .section-title[b-w5jj0thc6l] {
    color: var(--text-secondary);
}

/* Pantry Items */
.pantry-item[b-w5jj0thc6l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.875rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    transition: all 0.2s ease;
    cursor: pointer;
    max-width: 100%;
}

@media (hover: hover) {
    .pantry-item:hover[b-w5jj0thc6l] {
        background: var(--bg-tertiary);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
}

.pantry-item.expired[b-w5jj0thc6l] {
    border-left: 4px solid #ef4444;
}

.pantry-item.expiring-soon[b-w5jj0thc6l] {
    border-left: 4px solid #f59e0b;
}

.pantry-item.fresh[b-w5jj0thc6l] {
    border-left: 4px solid #22c55e;
}

.pantry-item.scheduled[b-w5jj0thc6l] {
    border-left: 4px solid #3b82f6;
}

.item-main[b-w5jj0thc6l] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

.item-info[b-w5jj0thc6l] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    max-width: 100%;
}

.item-name[b-w5jj0thc6l] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1rem;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}

.item-name .item-qty[b-w5jj0thc6l] {
    margin-left: 0.35rem;
}

.item-qty[b-w5jj0thc6l] {
    font-weight: 400;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.item-details[b-w5jj0thc6l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.item-category[b-w5jj0thc6l] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.item-quantity-inline[b-w5jj0thc6l] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.item-list-tag[b-w5jj0thc6l] {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    color: #6366f1;
    background: rgba(99, 102, 241, 0.1);
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
    border: 1px solid rgba(99, 102, 241, 0.2);
    max-width: 150px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

@media (hover: hover) {
    .item-list-tag:hover[b-w5jj0thc6l] {
        background: rgba(99, 102, 241, 0.2);
        border-color: rgba(99, 102, 241, 0.4);
        transform: translateY(-1px);
    }
}

.item-list-tag .bi[b-w5jj0thc6l] {
    font-size: 0.65rem;
    opacity: 0.8;
    margin-right: 0.3rem;
}

.item-actions[b-w5jj0thc6l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.item-date-inline[b-w5jj0thc6l] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    white-space: nowrap;
}

.date-separator[b-w5jj0thc6l] {
    color: var(--text-muted);
    opacity: 0.5;
}

.expiry-status[b-w5jj0thc6l] {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.expiry-status.expired[b-w5jj0thc6l] {
    color: #ef4444;
}

.expiry-status.warning[b-w5jj0thc6l] {
    color: #f59e0b;
}

.expiry-status.fresh[b-w5jj0thc6l] {
    color: #22c55e;
}

.expired-status[b-w5jj0thc6l] {
    font-weight: 600;
    color: #ef4444;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.scheduled-status[b-w5jj0thc6l] {
    font-weight: 600;
    color: #3b82f6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.btn-add-to-list[b-w5jj0thc6l] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.85rem;
    padding: 0;
}

@media (hover: hover) {
    .btn-add-to-list:hover[b-w5jj0thc6l] {
        background: var(--hover-bg);
        color: var(--accent-primary);
        border-color: var(--accent-primary);
    }
}

.purchase-date[b-w5jj0thc6l] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.purchase-date .bi[b-w5jj0thc6l] {
    font-size: 0.75rem;
}

/* List Filter Badges */
.list-filter-badges[b-w5jj0thc6l] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-left: auto;
}

.list-badge[b-w5jj0thc6l] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: 500;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s ease;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

@media (hover: hover) {
    .list-badge:hover[b-w5jj0thc6l] {
        background: var(--bg-tertiary);
        transform: translateY(-1px);
    }
}

.list-badge.active[b-w5jj0thc6l] {
    background: var(--accent-primary);
    color: white;
    border-color: var(--accent-primary);
}

.list-badge .bi[b-w5jj0thc6l] {
    font-size: 0.75rem;
    margin-right: 0.35rem;
}

/* Area Overview — Horizontal Chip Row */
.area-overview[b-w5jj0thc6l] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.area-chip[b-w5jj0thc6l] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    background: var(--card-bg);
    border: 1.5px solid var(--border-color);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
    min-height: 36px;
}

@media (hover: hover) {
    .area-chip:hover[b-w5jj0thc6l] {
        background: var(--bg-tertiary);
        border-color: var(--area-color, var(--accent-primary));
    }
}

.area-chip.active[b-w5jj0thc6l] {
    border-color: var(--area-color, var(--accent-primary));
    background: color-mix(in srgb, var(--area-color, var(--accent-primary)) 10%, var(--card-bg));
    color: var(--text-primary);
    font-weight: 600;
}

.area-chip .bi[b-w5jj0thc6l] {
    font-size: 0.85rem;
}

.area-chip-icon[b-w5jj0thc6l] {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.area-chip-count[b-w5jj0thc6l] {
    font-size: 0.7rem;
    font-weight: 600;
    color: white;
    background: var(--accent-primary);
    padding: 0.05rem 0.4rem;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

/* Location Badge on Items */
.location-badge[b-w5jj0thc6l] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--badge-color);
    background: color-mix(in srgb, var(--badge-color) 12%, transparent);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
    border: 1px solid color-mix(in srgb, var(--badge-color) 25%, transparent);
}

/* Responsive */
@media (max-width: 768px) {
    .pantry-container[b-w5jj0thc6l] {
        padding: 1rem 0.75rem;
    }

    .pantry-title[b-w5jj0thc6l] {
        font-size: 1.25rem;
    }
}

/* Mobile - Compact Shopping Mode */
@media (max-width: 576px) {
    /* === AREA OVERVIEW === */
    .area-overview[b-w5jj0thc6l] {
        gap: 0.35rem;
        margin-bottom: 0.75rem;
    }

    .area-chip[b-w5jj0thc6l] {
        padding: 0.25rem 0.5rem;
        font-size: 0.7rem;
        min-height: 32px;
        gap: 0.3rem;
    }

    .area-chip-count[b-w5jj0thc6l] {
        font-size: 0.6rem;
        padding: 0.05rem 0.3rem;
    }

    .location-badge[b-w5jj0thc6l] {
        font-size: 0.6rem;
        padding: 0.1rem 0.35rem;
    }

    /* === CONTAINER & HEADER === */
    .pantry-container[b-w5jj0thc6l] {
        padding: 0.75rem 0.5rem;
    }

    .pantry-header[b-w5jj0thc6l] {
        gap: 0.5rem;
        margin-bottom: 0.75rem;
    }

    .back-btn[b-w5jj0thc6l] {
        padding: 0.4rem 0.6rem;
        font-size: 0.85rem;
    }

    .pantry-title[b-w5jj0thc6l] {
        font-size: 1.1rem;
    }

    /* === SECTIONS === */
    .pantry-section[b-w5jj0thc6l] {
        margin-bottom: 1rem;
    }

    .section-header[b-w5jj0thc6l] {
        margin-bottom: 0.5rem;
        padding-bottom: 0.35rem;
    }

    .section-title[b-w5jj0thc6l] {
        font-size: 0.95rem;
        gap: 0.35rem;
    }

    .section-title .bi[b-w5jj0thc6l] {
        font-size: 0.85rem;
    }

    .btn-add-all[b-w5jj0thc6l] {
        padding: 0.3rem 0.5rem;
        font-size: 0.75rem;
        gap: 0.25rem;
    }

    /* === LIST FILTER BADGES === */
    .list-filter-badges[b-w5jj0thc6l] {
        gap: 0.35rem;
    }

    .list-badge[b-w5jj0thc6l] {
        padding: 0.2rem 0.5rem;
        font-size: 0.7rem;
        max-width: 100px;
    }

    /* === PANTRY ITEMS - COMPACT === */
    .pantry-item[b-w5jj0thc6l] {
        padding: 0.4rem 0.5rem;
        gap: 0.5rem;
        margin-bottom: 0.35rem;
        border-radius: 6px;
    }

    .item-main[b-w5jj0thc6l] {
        gap: 0.15rem;
    }

    .item-info[b-w5jj0thc6l] {
        gap: 0.5rem;
    }

    .item-name[b-w5jj0thc6l] {
        font-size: 0.9rem;
    }

    .item-qty[b-w5jj0thc6l] {
        font-size: 0.8rem;
    }

    .item-details[b-w5jj0thc6l] {
        gap: 0.35rem;
    }

    .item-category[b-w5jj0thc6l] {
        font-size: 0.7rem;
        padding: 0.15rem 0.4rem;
        max-width: 80px;
    }

    .item-quantity-inline[b-w5jj0thc6l] {
        font-size: 0.75rem;
        padding: 0.15rem 0.4rem;
    }

    .item-list-tag[b-w5jj0thc6l] {
        font-size: 0.65rem;
        padding: 0.15rem 0.4rem;
        max-width: 80px;
    }

    .item-list-tag .bi[b-w5jj0thc6l] {
        font-size: 0.55rem;
        margin-right: 0.2rem;
    }

    /* === ITEM ACTIONS === */
    .item-actions[b-w5jj0thc6l] {
        gap: 0.35rem;
    }

    .item-date-inline[b-w5jj0thc6l] {
        font-size: 0.7rem;
        gap: 0.25rem;
    }

    .expiry-status[b-w5jj0thc6l],
    .expired-status[b-w5jj0thc6l],
    .scheduled-status[b-w5jj0thc6l] {
        font-size: 0.7rem;
        max-width: 80px;
    }

    .purchase-date[b-w5jj0thc6l] {
        font-size: 0.7rem;
        max-width: 100px;
    }

    .purchase-date .bi[b-w5jj0thc6l] {
        font-size: 0.65rem;
    }

    /* === BUTTONS === */
    .btn-add-to-list[b-w5jj0thc6l] {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }

    .item-menu-btn[b-w5jj0thc6l] {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }

    /* === OVERFLOW HANDLING === */
    .item-info[b-w5jj0thc6l] {
        min-width: 0;
        overflow: hidden;
    }

    .item-name[b-w5jj0thc6l] {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .item-actions[b-w5jj0thc6l] {
        flex-shrink: 0;
    }

    /* === DROPDOWNS - Touch friendly === */
    .item-dropdown .dropdown-action[b-w5jj0thc6l] {
        min-height: 44px;
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }

    /* === FORM INPUTS === */
    .form-control[b-w5jj0thc6l] {
        min-height: 44px;
        font-size: 16px;  /* Prevent iOS zoom */
    }

    /* === EMPTY STATE === */
    .empty-state[b-w5jj0thc6l] {
        padding: 2rem 1rem;
    }

    .empty-state .bi[b-w5jj0thc6l] {
        font-size: 2rem;
    }

    .empty-state p[b-w5jj0thc6l] {
        font-size: 0.95rem;
    }
}

/* Item Menu (gear icon dropdown) */
.item-menu-wrapper[b-w5jj0thc6l] {
    position: relative;
}

.item-menu-btn[b-w5jj0thc6l] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.85rem;
    padding: 0;
}

@media (hover: hover) {
    .item-menu-btn:hover[b-w5jj0thc6l],
    .item-menu-btn.active[b-w5jj0thc6l] {
        background: var(--hover-bg);
        color: var(--accent-primary);
        border-color: var(--accent-primary);
    }
}

.item-dropdown[b-w5jj0thc6l] {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    min-width: 160px;
    z-index: 1000;
    padding: 0.5rem;
    animation: itemDropdownSlide-b-w5jj0thc6l 0.2s ease-out;
}

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

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

.item-dropdown .dropdown-action[b-w5jj0thc6l] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s;
    text-decoration: none;
}

@media (hover: hover) {
    .item-dropdown .dropdown-action:hover[b-w5jj0thc6l] {
        background: var(--hover-bg);
    }
}

.item-dropdown .dropdown-action .bi[b-w5jj0thc6l] {
    font-size: 1rem;
    color: var(--text-secondary);
}

@media (hover: hover) {
    .item-dropdown .dropdown-action:hover .bi[b-w5jj0thc6l] {
        color: var(--accent-primary);
    }
}

.item-dropdown .dropdown-action.text-danger[b-w5jj0thc6l] {
    color: #dc3545;
}

.item-dropdown .dropdown-action.text-danger .bi[b-w5jj0thc6l] {
    color: #dc3545;
}

@media (hover: hover) {
    .item-dropdown .dropdown-action.text-danger:hover[b-w5jj0thc6l] {
        background: rgba(220, 53, 69, 0.1);
    }
}

.item-dropdown .dropdown-divider[b-w5jj0thc6l] {
    height: 1px;
    background: var(--border-color);
    margin: 0.35rem 0;
}

/* Edit Item Modal */
.modal-overlay[b-w5jj0thc6l] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-w5jj0thc6l 0.2s ease-out;
}

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

    to {
        opacity: 1;
    }
}

.modal-content[b-w5jj0thc6l] {
    background: var(--card-bg);
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp-b-w5jj0thc6l 0.3s ease-out;
}

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

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

.modal-header[b-w5jj0thc6l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--header-bg, var(--card-bg));
}

.modal-header h3[b-w5jj0thc6l] {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.modal-header h3 .bi[b-w5jj0thc6l] {
    color: var(--accent-primary);
    font-size: 1.1rem;
}

.close-button[b-w5jj0thc6l] {
    padding: 0.5rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 1.1rem;
}

@media (hover: hover) {
    .close-button:hover[b-w5jj0thc6l] {
        background: rgba(0, 0, 0, 0.05);
        color: var(--text-primary);
    }
}

@media (hover: hover) {
    body.dark-theme .close-button:hover[b-w5jj0thc6l] {
        background: rgba(255, 255, 255, 0.05);
    }
}

.modal-body[b-w5jj0thc6l] {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
}

/* Form Sections */
.form-section[b-w5jj0thc6l] {
    margin-bottom: 2rem;
}

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

.modal-body .section-header[b-w5jj0thc6l] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--border-color);
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
}

.modal-body .section-header .bi[b-w5jj0thc6l] {
    color: var(--accent-primary);
    font-size: 1.1rem;
}

.form-group[b-w5jj0thc6l] {
    margin-bottom: 1.25rem;
}

.form-group:last-child[b-w5jj0thc6l] {
    margin-bottom: 0;
}

.form-group label[b-w5jj0thc6l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.form-group label .bi[b-w5jj0thc6l] {
    color: var(--accent-primary);
    font-size: 0.95rem;
}

.form-control[b-w5jj0thc6l] {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1.5px solid var(--border-color);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: all 0.2s;
}

.form-control:focus[b-w5jj0thc6l] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

@media (hover: hover) {
    .form-control:hover:not(:focus)[b-w5jj0thc6l] {
        border-color: var(--accent-primary);
    }
}

.modal-footer[b-w5jj0thc6l] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 1.25rem 2rem;
    border-top: 1px solid var(--border-color);
    background: var(--header-bg, var(--card-bg));
    gap: 0.75rem;
}

/* Buttons */
.btn[b-w5jj0thc6l] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

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

@media (hover: hover) {
    .btn-primary:hover[b-w5jj0thc6l] {
        background: var(--accent-secondary);
        transform: translateY(-1px);
    }
}

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

@media (hover: hover) {
    .btn-secondary:hover[b-w5jj0thc6l] {
        background: var(--bg-tertiary);
    }
}

/* Form Row */
.form-row[b-w5jj0thc6l] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Checkbox Label */
.checkbox-label[b-w5jj0thc6l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-primary);
}

.checkbox-label input[type="checkbox"][b-w5jj0thc6l] {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
}

/* Image Toggle Buttons */
.image-toggle[b-w5jj0thc6l] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.toggle-btn[b-w5jj0thc6l] {
    flex: 1;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    background: white;
    color: var(--text-primary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    font-size: 0.9rem;
}

@media (hover: hover) {
    .toggle-btn:hover:not(:disabled)[b-w5jj0thc6l] {
        background: var(--bg-secondary);
        border-color: #0d6efd;
    }
}

.toggle-btn.active[b-w5jj0thc6l] {
    background: #0d6efd;
    color: white;
    border-color: #0d6efd;
}

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

body.dark-theme .toggle-btn[b-w5jj0thc6l] {
    background: var(--bg-secondary);
}

body.dark-theme .toggle-btn.active[b-w5jj0thc6l] {
    background: #0d6efd;
}

/* Image Preview in Modals */
.image-preview[b-w5jj0thc6l] {
    position: relative;
    display: inline-block;
    max-width: 200px;
}

.image-preview img[b-w5jj0thc6l] {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.btn-remove-image[b-w5jj0thc6l] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(220, 53, 69, 0.9);
    color: white;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

@media (hover: hover) {
    .btn-remove-image:hover[b-w5jj0thc6l] {
        background: #dc3545;
        transform: scale(1.1);
    }
}

/* Toggle Switches */
.toggle-group[b-w5jj0thc6l] {
    margin-bottom: 1.25rem;
}

.toggle-label[b-w5jj0thc6l] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
}

.toggle-input[b-w5jj0thc6l] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-w5jj0thc6l] {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--border-color);
    border-radius: 24px;
    transition: all 0.3s;
    flex-shrink: 0;
}

.toggle-slider[b-w5jj0thc6l]::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: white;
    border-radius: 50%;
    transition: all 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-input:checked+.toggle-slider[b-w5jj0thc6l] {
    background: var(--accent-primary);
}

.toggle-input:checked+.toggle-slider[b-w5jj0thc6l]::before {
    transform: translateX(20px);
}

.toggle-input:focus+.toggle-slider[b-w5jj0thc6l] {
    box-shadow: 0 0 0 3px var(--hover-bg);
}

.toggle-text[b-w5jj0thc6l] {
    font-weight: 500;
    color: var(--text-color);
    font-size: 0.95rem;
}

/* Recurrence Info Box */
.recurrence-info-box[b-w5jj0thc6l] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(var(--accent-primary-rgb, 99, 102, 241), 0.1);
    border: 1px solid var(--accent-primary);
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: var(--text-color);
}

.recurrence-info-box .bi[b-w5jj0thc6l] {
    color: var(--accent-primary);
    flex-shrink: 0;
    margin-top: 2px;
}

/* Days of week selector */
.days-of-week-selector[b-w5jj0thc6l] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.day-checkbox[b-w5jj0thc6l] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    background: var(--input-bg);
    transition: all 0.2s;
    font-size: 0.875rem;
}

@media (hover: hover) {
    .day-checkbox:hover[b-w5jj0thc6l] {
        background: var(--hover-bg);
    }
}

.day-checkbox input[type="checkbox"][b-w5jj0thc6l] {
    width: auto;
    margin: 0;
}

.day-checkbox input[type="checkbox"]:checked+span[b-w5jj0thc6l],
.day-checkbox:has(input[type="checkbox"]:checked)[b-w5jj0thc6l] {
    background: var(--hover-bg);
    font-weight: 600;
}

/* Monthly recurrence mode options */
.monthly-mode-options[b-w5jj0thc6l] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.radio-label[b-w5jj0thc6l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--input-bg);
    cursor: pointer;
    transition: all 0.2s;
    flex-wrap: wrap;
}

@media (hover: hover) {
    .radio-label:hover[b-w5jj0thc6l] {
        background: var(--hover-bg);
    }
}

.radio-label input[type="radio"][b-w5jj0thc6l] {
    width: auto;
    margin: 0;
    cursor: pointer;
}

.radio-label input[type="radio"]:checked[b-w5jj0thc6l] {
    accent-color: var(--accent-primary);
}

.radio-label:has(input[type="radio"]:checked)[b-w5jj0thc6l] {
    background: var(--hover-bg);
    border-color: var(--accent-primary);
}

.radio-label span[b-w5jj0thc6l] {
    color: var(--text-color);
    font-size: 0.875rem;
}

.hint-text[b-w5jj0thc6l] {
    color: var(--text-secondary, #6c757d);
}

.day-input[b-w5jj0thc6l] {
    width: 70px;
    padding: 0.3rem 0.5rem;
    font-size: 0.875rem;
}

.ordinal-select[b-w5jj0thc6l],
.weekday-select[b-w5jj0thc6l] {
    padding: 0.3rem 0.5rem;
    font-size: 0.875rem;
    width: auto;
}

.ordinal-select[b-w5jj0thc6l] {
    min-width: 85px;
}

.weekday-select[b-w5jj0thc6l] {
    min-width: 110px;
}

.warning-text[b-w5jj0thc6l] {
    color: #f59e0b;
    font-size: 0.8rem;
    margin-top: 0.25rem;
    display: block;
}

/* Recurrence end options */
.recurrence-end-options[b-w5jj0thc6l] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.occurrence-input[b-w5jj0thc6l] {
    width: 80px;
    padding: 0.3rem 0.5rem;
    font-size: 0.875rem;
}

/* Interval selector for daily recurrence */
.interval-selector[b-w5jj0thc6l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.interval-input[b-w5jj0thc6l] {
    width: 80px;
    padding: 0.3rem 0.5rem;
    font-size: 0.875rem;
}

.interval-label[b-w5jj0thc6l] {
    color: var(--text-secondary, #6c757d);
    font-size: 0.875rem;
}

/* Yearly date selector */
.yearly-date-selector[b-w5jj0thc6l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.month-select[b-w5jj0thc6l] {
    padding: 0.3rem 0.5rem;
    font-size: 0.875rem;
    width: auto;
    min-width: 120px;
}

/* Upload spinner */
.upload-spinner[b-w5jj0thc6l] {
    display: flex;
    align-items: center;
    color: #0d6efd;
    font-size: 0.9rem;
}

/* Responsive adjustments for recurrence section */
@media (max-width: 768px) {
    .form-row[b-w5jj0thc6l] {
        grid-template-columns: 1fr;
    }

    .days-of-week-selector[b-w5jj0thc6l] {
        gap: 0.25rem;
    }

    .day-checkbox[b-w5jj0thc6l] {
        padding: 0.3rem 0.6rem;
        font-size: 0.8rem;
    }

    .radio-label[b-w5jj0thc6l] {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .ordinal-select[b-w5jj0thc6l],
    .weekday-select[b-w5jj0thc6l] {
        flex: 1;
        min-width: 0;
    }
}
/* /Components/Pages/PrivacyPolicy.razor.rz.scp.css */
.privacy-container[b-z9zqj25oku] {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.privacy-header[b-z9zqj25oku] {
    text-align: center;
    margin-bottom: 3rem;
}

.page-title[b-z9zqj25oku] {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.page-subtitle[b-z9zqj25oku] {
    font-size: 1rem;
    color: var(--text-secondary);
    font-style: italic;
}

.privacy-content[b-z9zqj25oku] {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
}

.privacy-section[b-z9zqj25oku] {
    margin-bottom: 2.5rem;
}

.privacy-section:last-of-type[b-z9zqj25oku] {
    margin-bottom: 0;
}

.privacy-section h2[b-z9zqj25oku] {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--accent-primary);
}

.privacy-section h3[b-z9zqj25oku] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.privacy-section p[b-z9zqj25oku] {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.privacy-section ul[b-z9zqj25oku] {
    margin: 1rem 0 1rem 1.5rem;
    padding: 0;
}

.privacy-section li[b-z9zqj25oku] {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.privacy-section a[b-z9zqj25oku] {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color 0.2s;
}

@media (hover: hover) {
    .privacy-section a:hover[b-z9zqj25oku] {
        color: var(--accent-secondary);
        text-decoration: underline;
    }
}

.privacy-section strong[b-z9zqj25oku] {
    color: var(--text-primary);
    font-weight: 600;
}

.privacy-footer[b-z9zqj25oku] {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-light);
    text-align: center;
}

.privacy-footer p[b-z9zqj25oku] {
    font-size: 0.938rem;
    color: var(--text-secondary);
    font-style: italic;
}

@media (max-width: 768px) {
    .privacy-container[b-z9zqj25oku] {
        padding: 1rem;
    }

    .page-title[b-z9zqj25oku] {
        font-size: 2rem;
    }

    .privacy-content[b-z9zqj25oku] {
        padding: 1.5rem;
    }

    .privacy-section h2[b-z9zqj25oku] {
        font-size: 1.5rem;
    }

    .privacy-section h3[b-z9zqj25oku] {
        font-size: 1.125rem;
    }
}

/* Mobile - Touch Friendly */
@media (max-width: 576px) {
    .privacy-container[b-z9zqj25oku] {
        padding: 0.75rem;
    }

    .page-title[b-z9zqj25oku] {
        font-size: 1.5rem;
    }

    .privacy-content[b-z9zqj25oku] {
        padding: 1rem;
    }

    .privacy-section h2[b-z9zqj25oku] {
        font-size: 1.25rem;
    }

    .privacy-section a[b-z9zqj25oku] {
        display: inline-block;
        padding: 0.25rem 0;
    }
}
/* /Components/Pages/SharedList.razor.rz.scp.css */
/* Loading State */
.loading-container[b-hue1zklkmj] {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.loading-container p[b-hue1zklkmj] {
    color: var(--text-secondary);
    font-size: 1rem;
}

/* Error State */
.error-container[b-hue1zklkmj] {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: var(--bg-secondary, #f8f9fa);
}

.error-content[b-hue1zklkmj] {
    background: var(--card-bg, white);
    border-radius: 16px;
    padding: 3rem;
    max-width: 500px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.error-icon[b-hue1zklkmj] {
    font-size: 4rem;
    color: #ffc107;
    margin-bottom: 1.5rem;
}

.error-content h2[b-hue1zklkmj] {
    color: var(--text-primary);
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.error-content p[b-hue1zklkmj] {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.error-content .btn[b-hue1zklkmj] {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.error-content .btn-primary[b-hue1zklkmj] {
    background: #4CAF50;
    color: white;
}

@media (hover: hover) {
    .error-content .btn-primary:hover[b-hue1zklkmj] {
        background: #45a049;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
    }
}

/* Tablet */
@media (max-width: 768px) {
    .error-content[b-hue1zklkmj] {
        padding: 2rem 1.5rem;
    }

    .error-content h2[b-hue1zklkmj] {
        font-size: 1.5rem;
    }

    .error-icon[b-hue1zklkmj] {
        font-size: 3rem;
    }
}

/* Mobile - Touch Friendly */
@media (max-width: 576px) {
    .error-container[b-hue1zklkmj] {
        padding: 1rem;
    }

    .error-content[b-hue1zklkmj] {
        padding: 1.5rem 1rem;
    }

    .error-content h2[b-hue1zklkmj] {
        font-size: 1.25rem;
    }

    .error-content .btn[b-hue1zklkmj] {
        min-height: 48px;
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Pages/TermsOfService.razor.rz.scp.css */
.terms-container[b-moj8nf6pgd] {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.terms-header[b-moj8nf6pgd] {
    text-align: center;
    margin-bottom: 3rem;
}

.page-title[b-moj8nf6pgd] {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.page-subtitle[b-moj8nf6pgd] {
    font-size: 1rem;
    color: var(--text-secondary);
    font-style: italic;
}

.terms-content[b-moj8nf6pgd] {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
}

.terms-section[b-moj8nf6pgd] {
    margin-bottom: 2.5rem;
}

.terms-section:last-of-type[b-moj8nf6pgd] {
    margin-bottom: 0;
}

.intro-section[b-moj8nf6pgd] {
    padding: 1.5rem;
    background: var(--bg-tertiary);
    border-radius: 12px;
    border-left: 4px solid var(--accent-primary);
}

.terms-section h2[b-moj8nf6pgd] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--accent-primary);
}

.terms-section h3[b-moj8nf6pgd] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.terms-section p[b-moj8nf6pgd] {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.terms-section ul[b-moj8nf6pgd] {
    margin: 1rem 0 1rem 1.5rem;
    padding: 0;
}

.terms-section li[b-moj8nf6pgd] {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.terms-section a[b-moj8nf6pgd] {
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

@media (hover: hover) {
    .terms-section a:hover[b-moj8nf6pgd] {
        color: var(--accent-secondary);
        text-decoration: underline;
    }
}

.terms-section strong[b-moj8nf6pgd] {
    color: var(--text-primary);
    font-weight: 600;
}

.important-notice[b-moj8nf6pgd] {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(239, 68, 68, 0.1);
    border: 2px solid rgba(239, 68, 68, 0.3);
    border-radius: 12px;
    margin: 1.5rem 0;
}

.important-notice > span[b-moj8nf6pgd] {
    font-size: 1.5rem;
    color: #dc2626;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.important-notice h3[b-moj8nf6pgd] {
    color: #dc2626;
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
}

.important-notice p[b-moj8nf6pgd] {
    color: var(--text-primary);
    font-size: 0.938rem;
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.important-notice p:last-child[b-moj8nf6pgd] {
    margin-bottom: 0;
}

.terms-footer[b-moj8nf6pgd] {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid var(--border-light);
    text-align: center;
}

.terms-footer p[b-moj8nf6pgd] {
    font-size: 1rem;
    color: var(--text-primary);
}

@media (max-width: 768px) {
    .terms-container[b-moj8nf6pgd] {
        padding: 1rem;
    }

    .page-title[b-moj8nf6pgd] {
        font-size: 2rem;
    }

    .terms-content[b-moj8nf6pgd] {
        padding: 1.5rem;
    }

    .terms-section h2[b-moj8nf6pgd] {
        font-size: 1.25rem;
    }

    .terms-section h3[b-moj8nf6pgd] {
        font-size: 1.063rem;
    }

    .terms-section p[b-moj8nf6pgd],
    .terms-section li[b-moj8nf6pgd] {
        font-size: 0.938rem;
    }

    .important-notice[b-moj8nf6pgd] {
        flex-direction: column;
        padding: 1.25rem;
    }

    .important-notice > span[b-moj8nf6pgd] {
        font-size: 1.25rem;
    }
}

/* Mobile - Touch Friendly */
@media (max-width: 576px) {
    .terms-container[b-moj8nf6pgd] {
        padding: 0.75rem;
    }

    .page-title[b-moj8nf6pgd] {
        font-size: 1.5rem;
    }

    .terms-content[b-moj8nf6pgd] {
        padding: 1rem;
    }

    .terms-section a[b-moj8nf6pgd] {
        display: inline-block;
        padding: 0.25rem 0;
    }

    .important-notice[b-moj8nf6pgd] {
        padding: 1rem;
    }
}