/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Legacy .page/.sidebar/.top-row scaffold rules removed: MainLayout renders
+ .main-content only, so those selectors matched nothing. */
#blazor-error-ui[b-ac1gsue7j2] {
color-scheme: light only;
background: lightyellow;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
display: none;
left: 0;
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
position: fixed;
width: 100%;
z-index: 1000;
}
#blazor-error-ui .dismiss[b-ac1gsue7j2] {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-8nyhudom8p] {
appearance: none;
cursor: pointer;
width: 3.5rem;
height: 2.5rem;
color: white;
position: absolute;
top: 0.5rem;
right: 1rem;
border: 1px solid rgba(255, 255, 255, 0.1);
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}
.navbar-toggler:checked[b-8nyhudom8p] {
background-color: rgba(255, 255, 255, 0.5);
}
.top-row[b-8nyhudom8p] {
min-height: 3.5rem;
background-color: rgba(0,0,0,0.4);
}
.navbar-brand[b-8nyhudom8p] {
font-size: 1.1rem;
}
.bi[b-8nyhudom8p] {
display: inline-block;
position: relative;
width: 1.25rem;
height: 1.25rem;
margin-right: 0.75rem;
top: -1px;
background-size: cover;
}
.bi-house-door-fill-nav-menu[b-8nyhudom8p] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}
.bi-plus-square-fill-nav-menu[b-8nyhudom8p] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}
.bi-list-nested-nav-menu[b-8nyhudom8p] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}
.bi-lock-nav-menu[b-8nyhudom8p] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}
.bi-person-nav-menu[b-8nyhudom8p] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}
.bi-person-badge-nav-menu[b-8nyhudom8p] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}
.bi-person-fill-nav-menu[b-8nyhudom8p] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}
.bi-arrow-bar-left-nav-menu[b-8nyhudom8p] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}
.nav-item[b-8nyhudom8p] {
font-size: 0.9rem;
padding-bottom: 0.5rem;
}
.nav-item:first-of-type[b-8nyhudom8p] {
padding-top: 1rem;
}
.nav-item:last-of-type[b-8nyhudom8p] {
padding-bottom: 1rem;
}
.nav-item[b-8nyhudom8p] .nav-link {
color: #d7d7d7;
background: none;
border: none;
border-radius: 4px;
height: 3rem;
display: flex;
align-items: center;
line-height: 3rem;
width: 100%;
}
.nav-item[b-8nyhudom8p] a.active {
background-color: rgba(255,255,255,0.37);
color: white;
}
.nav-item[b-8nyhudom8p] .nav-link:hover {
background-color: rgba(255,255,255,0.1);
color: white;
}
.nav-scrollable[b-8nyhudom8p] {
display: none;
}
.navbar-toggler:checked ~ .nav-scrollable[b-8nyhudom8p] {
display: block;
}
@media (min-width: 641px) {
.navbar-toggler[b-8nyhudom8p] {
display: none;
}
.nav-scrollable[b-8nyhudom8p] {
/* Never collapse the sidebar for wide screens */
display: block;
/* Allow sidebar to scroll for tall menus */
height: calc(100vh - 3.5rem);
overflow-y: auto;
}
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-kgjep72rr3],
.components-reconnect-repeated-attempt-visible[b-kgjep72rr3],
.components-reconnect-failed-visible[b-kgjep72rr3],
.components-pause-visible[b-kgjep72rr3],
.components-resume-failed-visible[b-kgjep72rr3],
.components-rejoining-animation[b-kgjep72rr3] {
display: none;
}
#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-kgjep72rr3],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-kgjep72rr3],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-kgjep72rr3],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-kgjep72rr3],
#components-reconnect-modal.components-reconnect-retrying[b-kgjep72rr3],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-kgjep72rr3],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-kgjep72rr3],
#components-reconnect-modal.components-reconnect-failed[b-kgjep72rr3],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-kgjep72rr3] {
display: block;
}
#components-reconnect-modal[b-kgjep72rr3] {
background-color: white;
width: 20rem;
margin: 20vh auto;
padding: 2rem;
border: 0;
border-radius: 0.5rem;
box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
opacity: 0;
transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
animation: components-reconnect-modal-fadeOutOpacity-b-kgjep72rr3 0.5s both;
&[open]
{
animation: components-reconnect-modal-slideUp-b-kgjep72rr3 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-kgjep72rr3 0.5s ease-in-out 0.3s;
animation-fill-mode: both;
}
}
#components-reconnect-modal[b-kgjep72rr3]::backdrop {
background-color: rgba(0, 0, 0, 0.4);
animation: components-reconnect-modal-fadeInOpacity-b-kgjep72rr3 0.5s ease-in-out;
opacity: 1;
}
@keyframes components-reconnect-modal-slideUp-b-kgjep72rr3 {
0% {
transform: translateY(30px) scale(0.95);
}
100% {
transform: translateY(0);
}
}
@keyframes components-reconnect-modal-fadeInOpacity-b-kgjep72rr3 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes components-reconnect-modal-fadeOutOpacity-b-kgjep72rr3 {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.components-reconnect-container[b-kgjep72rr3] {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
#components-reconnect-modal p[b-kgjep72rr3] {
margin: 0;
text-align: center;
}
#components-reconnect-modal button[b-kgjep72rr3] {
border: 0;
background-color: #6b9ed2;
color: white;
padding: 4px 24px;
border-radius: 4px;
}
#components-reconnect-modal button:hover[b-kgjep72rr3] {
background-color: #3b6ea2;
}
#components-reconnect-modal button:active[b-kgjep72rr3] {
background-color: #6b9ed2;
}
.components-rejoining-animation[b-kgjep72rr3] {
position: relative;
width: 80px;
height: 80px;
}
.components-rejoining-animation div[b-kgjep72rr3] {
position: absolute;
border: 3px solid #0087ff;
opacity: 1;
border-radius: 50%;
animation: components-rejoining-animation-b-kgjep72rr3 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.components-rejoining-animation div:nth-child(2)[b-kgjep72rr3] {
animation-delay: -0.5s;
}
@keyframes components-rejoining-animation-b-kgjep72rr3 {
0% {
top: 40px;
left: 40px;
width: 0;
height: 0;
opacity: 0;
}
4.9% {
top: 40px;
left: 40px;
width: 0;
height: 0;
opacity: 0;
}
5% {
top: 40px;
left: 40px;
width: 0;
height: 0;
opacity: 1;
}
100% {
top: 0px;
left: 0px;
width: 80px;
height: 80px;
opacity: 0;
}
}
/* /Components/Pages/AuditReviewQueue.razor.rz.scp.css */
/* ── Page header (Pencil frame dT9ya) ──
Title row: H1 "Ingredient Audit Review" Poppins 30/700 + subtitle Inter 14/normal.
Right side: Export As pill (white/border) + Refresh Queue pill (#25507C / white).
24px padding, 1px bottom divider. */
.audit-page-header[b-16ogc1145n] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px;
border-bottom: 1px solid #E0DBE7;
margin: -24px -24px 24px -24px; /* extend to page edges, like the wireframe */
}
.audit-page-header-left[b-16ogc1145n] {
display: flex;
flex-direction: column;
gap: 4px;
}
.audit-page-title[b-16ogc1145n] {
font-family: var(--font-family-serif);
font-size: 30px;
font-weight: 700;
color: #1A102C;
margin: 0;
line-height: 1.2;
}
.audit-page-subtitle[b-16ogc1145n] {
font-family: var(--font-family-primary);
font-size: 14px;
font-weight: 400;
color: #5D566A;
margin: 0;
}
.audit-page-header-right[b-16ogc1145n] {
display: flex;
align-items: center;
gap: 12px;
}
.audit-header-btn[b-16ogc1145n] {
display: inline-flex;
align-items: center;
gap: 8px;
border-radius: 9999px;
font-family: var(--font-family-primary);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background-color 120ms ease, border-color 120ms ease;
}
.audit-header-btn-icon.material-icons[b-16ogc1145n] {
font-size: 18px;
width: 18px;
height: 18px;
line-height: 18px;
}
.audit-header-btn-secondary[b-16ogc1145n] {
padding: 10px 20px;
background: #FFFFFF;
border: 1px solid #E0DBE7;
color: #413A4D;
}
.audit-header-btn-secondary:hover:not(:disabled)[b-16ogc1145n] {
background: #FAFAFE;
}
.audit-header-btn-secondary:disabled[b-16ogc1145n] {
opacity: 0.6;
cursor: not-allowed;
}
.audit-header-btn-primary[b-16ogc1145n] {
padding: 10px 24px;
background: #25507C;
border: 0;
color: #FFFFFF;
}
.audit-header-btn-primary:hover[b-16ogc1145n] {
background: #1E4368;
}
/* ── Filter card (Pencil frame EpA9e) ──
White card with 4px green left accent (#34D399), shadow, 8 radius, 24 padding,
16 gap between header + rows. Inputs are 42 high, 8 radius, #E0DBE7 border. */
.audit-filters-wrap[b-16ogc1145n] {
padding: 0 0 24px 0;
}
.audit-filters-card[b-16ogc1145n] {
display: flex;
flex-direction: column;
gap: 16px;
padding: 24px;
background: #FFFFFF;
border-radius: 8px;
border-left: 4px solid #34D399;
box-shadow: 0 1px 3px rgba(26, 16, 44, 0.10);
font-family: var(--font-family-primary);
}
.audit-filters-header[b-16ogc1145n] {
display: flex;
align-items: flex-start;
gap: 8px;
}
.audit-filters-header-icon.material-icons[b-16ogc1145n] {
font-size: 20px;
width: 20px;
height: 20px;
line-height: 20px;
color: #25507C;
margin-top: 1px;
}
.audit-filters-header-title[b-16ogc1145n] {
font-size: 14px;
font-weight: 600;
color: #1A102C;
line-height: 1.3;
}
.audit-filters-header-sub[b-16ogc1145n] {
font-size: 11px;
font-weight: 400;
color: #5D566A;
line-height: 1.4;
}
.audit-filters-row[b-16ogc1145n] {
display: flex;
align-items: flex-end;
gap: 12px;
width: 100%;
}
.audit-filter[b-16ogc1145n] {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1 1 0;
min-width: 0;
}
.audit-filter-spacer[b-16ogc1145n] {
visibility: hidden;
}
.audit-filter-label[b-16ogc1145n] {
font-size: 12px;
font-weight: 400;
color: #1E4368;
}
.audit-filter-input[b-16ogc1145n] {
display: flex;
align-items: center;
gap: 8px;
height: 42px;
padding: 0 10px;
background: #FFFFFF;
border: 1px solid #E0DBE7;
border-radius: 8px;
font-size: 13px;
color: #1A102C;
}
.audit-filter-input:focus-within[b-16ogc1145n] {
border-color: #25507C;
box-shadow: 0 0 0 1px #25507C;
}
.audit-filter-input-icon.material-icons[b-16ogc1145n] {
font-size: 16px;
width: 16px;
height: 16px;
line-height: 16px;
color: #A8A2B3;
flex-shrink: 0;
}
.audit-filter-input input[b-16ogc1145n],
.audit-filter-input select[b-16ogc1145n] {
flex: 1 1 auto;
border: 0;
outline: none;
background: transparent;
font-family: inherit;
font-size: 13px;
color: #1A102C;
min-width: 0;
}
.audit-filter-input input[b-16ogc1145n]::placeholder {
color: #A8A2B3;
}
.audit-filter-input select[b-16ogc1145n] {
appearance: none;
-webkit-appearance: none;
cursor: pointer;
color: #1A102C;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0 center;
padding-right: 18px;
}
@media (max-width: 768px) {
.audit-page-header[b-16ogc1145n] {
align-items: flex-start;
flex-direction: column;
gap: 16px;
padding: 20px 16px;
margin: -16px -16px 20px -16px;
}
.audit-page-header-left[b-16ogc1145n],
.audit-page-header-right[b-16ogc1145n] {
min-width: 0;
width: 100%;
}
.audit-page-title[b-16ogc1145n] {
font-size: 28px;
line-height: 1.1;
}
.audit-header-btn[b-16ogc1145n] {
justify-content: center;
width: 100%;
min-height: 44px;
}
.audit-filters-wrap[b-16ogc1145n] {
padding-bottom: 20px;
}
.audit-filters-card[b-16ogc1145n] {
gap: 18px;
padding: 20px 16px;
overflow: hidden;
}
.audit-filters-row[b-16ogc1145n] {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: stretch;
gap: 16px;
}
.audit-filter[b-16ogc1145n],
.audit-filter-input[b-16ogc1145n],
.audit-filter-input input[b-16ogc1145n],
.audit-filter-input select[b-16ogc1145n] {
min-width: 0;
width: 100%;
}
.audit-filter-spacer[b-16ogc1145n] {
display: none;
}
.audit-queue-status-tabs[b-16ogc1145n] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.audit-tab[b-16ogc1145n],
.audit-tab.audit-tab-first[b-16ogc1145n],
.audit-tab.audit-tab-last[b-16ogc1145n],
.audit-tab.audit-tab-active[b-16ogc1145n] {
border-radius: 10px;
box-shadow: none;
padding: 14px 10px;
}
.audit-tab.audit-tab-active[b-16ogc1145n] {
padding: 12px 8px;
}
.audit-tab-num[b-16ogc1145n] {
font-size: 24px;
}
}
@media (max-width: 360px) {
.audit-queue-status-tabs[b-16ogc1145n] {
grid-template-columns: minmax(0, 1fr);
}
}
/* Status Tabs strip — matches Pencil wireframe (frame ed1Mv et al.).
Pencil: parent gap:0, padding:[0,24]. Each card: vertical layout, alignItems:center,
gap:10, padding:20. Inactive cards have a 1px right divider; first/last get
left/right rounded corners. Active card pops with a 2px accent border, full
border-radius, and a tinted fill. Number 30/700 in accent; pill 9999 radius +
4×10 padding + 6 gap with 14px icon + 12/600 label; description 10/normal in
#5D566A; sub-line 10/600 in accent. */
.audit-queue-status-tabs[b-16ogc1145n] {
display: flex;
flex-direction: row;
align-items: stretch;
gap: 0;
padding: 0;
width: 100%;
}
.audit-tab[b-16ogc1145n] {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 10px;
padding: 20px;
background: #FFFFFF;
border: 0;
border-radius: 0;
text-align: center;
cursor: pointer;
transition: background-color 120ms ease;
box-shadow: inset -1px 0 0 #E5E7EB;
font-family: var(--font-family-primary);
}
.audit-tab.audit-tab-first[b-16ogc1145n] {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.audit-tab.audit-tab-last[b-16ogc1145n] {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: none;
}
.audit-tab:hover:not(.audit-tab-active)[b-16ogc1145n] {
background: #FAFAFB;
}
.audit-tab-num[b-16ogc1145n] {
font-size: 30px;
font-weight: 700;
line-height: 1.05;
margin: 0;
padding: 0;
}
.audit-tab-pill[b-16ogc1145n] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 9999px;
}
.audit-tab-icon.material-icons[b-16ogc1145n] {
font-size: 14px;
width: 14px;
height: 14px;
line-height: 14px;
}
.audit-tab-label[b-16ogc1145n] {
font-size: 12px;
font-weight: 600;
line-height: 1.2;
}
.audit-tab-desc[b-16ogc1145n] {
font-size: 10px;
font-weight: 400;
line-height: 1.3;
color: #5D566A;
}
.audit-tab-sub[b-16ogc1145n] {
font-size: 10px;
font-weight: 600;
line-height: 1.3;
}
/* ── Accent palette (Pencil hex codes) ── */
.audit-tab.accent-all .audit-tab-num[b-16ogc1145n] { color: #6B7280; }
.audit-tab.accent-all .audit-tab-pill[b-16ogc1145n] { background: #F3F4F6; }
.audit-tab.accent-all .audit-tab-icon[b-16ogc1145n],
.audit-tab.accent-all .audit-tab-label[b-16ogc1145n] { color: #6B7280; }
.audit-tab.accent-all.audit-tab-active[b-16ogc1145n] {
background: #F3F4F6;
border: 2px solid #6B7280;
border-radius: 10px;
padding: 18px;
box-shadow: none;
}
.audit-tab.accent-open .audit-tab-num[b-16ogc1145n] { color: #25507C; }
.audit-tab.accent-open .audit-tab-pill[b-16ogc1145n] { background: #ECF1F6; }
.audit-tab.accent-open .audit-tab-icon[b-16ogc1145n],
.audit-tab.accent-open .audit-tab-label[b-16ogc1145n],
.audit-tab.accent-open .audit-tab-sub[b-16ogc1145n] { color: #25507C; }
.audit-tab.accent-open.audit-tab-active[b-16ogc1145n] {
background: #ECF1F6;
border: 2px solid #25507C;
border-radius: 10px;
padding: 18px;
box-shadow: none;
}
.audit-tab.accent-escalated .audit-tab-num[b-16ogc1145n] { color: #D97706; }
.audit-tab.accent-escalated .audit-tab-pill[b-16ogc1145n] { background: #FEF3C7; }
.audit-tab.accent-escalated .audit-tab-icon[b-16ogc1145n],
.audit-tab.accent-escalated .audit-tab-label[b-16ogc1145n],
.audit-tab.accent-escalated .audit-tab-sub[b-16ogc1145n] { color: #B45309; }
.audit-tab.accent-escalated.audit-tab-active[b-16ogc1145n] {
background: #FEF3C7;
border: 2px solid #D97706;
border-radius: 10px;
padding: 18px;
box-shadow: none;
}
.audit-tab.accent-accepted .audit-tab-num[b-16ogc1145n] { color: #10B981; }
.audit-tab.accent-accepted .audit-tab-pill[b-16ogc1145n] { background: #ECFDF5; }
.audit-tab.accent-accepted .audit-tab-icon[b-16ogc1145n],
.audit-tab.accent-accepted .audit-tab-label[b-16ogc1145n],
.audit-tab.accent-accepted .audit-tab-sub[b-16ogc1145n] { color: #10B981; }
.audit-tab.accent-accepted.audit-tab-active[b-16ogc1145n] {
background: #ECFDF5;
border: 2px solid #10B981;
border-radius: 10px;
padding: 18px;
box-shadow: none;
}
.audit-tab.accent-newcanon .audit-tab-num[b-16ogc1145n] { color: #4F46E5; }
.audit-tab.accent-newcanon .audit-tab-pill[b-16ogc1145n] { background: #EEF2FF; }
.audit-tab.accent-newcanon .audit-tab-icon[b-16ogc1145n],
.audit-tab.accent-newcanon .audit-tab-label[b-16ogc1145n],
.audit-tab.accent-newcanon .audit-tab-sub[b-16ogc1145n] { color: #4F46E5; }
.audit-tab.accent-newcanon.audit-tab-active[b-16ogc1145n] {
background: #EEF2FF;
border: 2px solid #4F46E5;
border-radius: 10px;
padding: 18px;
}
.audit-tab.accent-rejected .audit-tab-num[b-16ogc1145n] { color: #EF4444; }
.audit-tab.accent-rejected .audit-tab-pill[b-16ogc1145n] { background: #FEE2E2; }
.audit-tab.accent-rejected .audit-tab-icon[b-16ogc1145n],
.audit-tab.accent-rejected .audit-tab-label[b-16ogc1145n] { color: #EF4444; }
.audit-tab.accent-rejected.audit-tab-active[b-16ogc1145n] {
background: #FEF2F2;
border: 2px solid #EF4444;
border-radius: 10px;
padding: 18px;
box-shadow: none;
}
.audit-tab.accent-canceled .audit-tab-num[b-16ogc1145n] { color: #64748B; }
.audit-tab.accent-canceled .audit-tab-pill[b-16ogc1145n] { background: #F1F5F9; }
.audit-tab.accent-canceled .audit-tab-icon[b-16ogc1145n],
.audit-tab.accent-canceled .audit-tab-label[b-16ogc1145n] { color: #64748B; }
.audit-tab.accent-canceled.audit-tab-active[b-16ogc1145n] {
background: #F8FAFC;
border: 2px solid #64748B;
border-radius: 10px;
padding: 18px;
box-shadow: none;
}
.audit-tab.accent-kickback .audit-tab-num[b-16ogc1145n] { color: #0D9488; }
.audit-tab.accent-kickback .audit-tab-pill[b-16ogc1145n] { background: #CCFBF1; }
.audit-tab.accent-kickback .audit-tab-icon[b-16ogc1145n],
.audit-tab.accent-kickback .audit-tab-label[b-16ogc1145n] { color: #0F766E; }
.audit-tab.accent-kickback.audit-tab-active[b-16ogc1145n] {
background: #F0FDFA;
border: 2px solid #0D9488;
border-radius: 10px;
padding: 18px;
box-shadow: none;
}
/* ── Bulk action bar (Pencil frames R1zsp "Bulk Action Bar" + nzkkn) ──
Indigo bar between the Status Tabs and the table while flags are check-selected.
Left: 24px check badge + "N flags selected" + composition line. Right: only the
actions that apply to every selected flag, plus Clear. The mixed (open +
superseded) state swaps to the amber guard with narrow-the-selection pills. */
.audit-bulk-bar[b-16ogc1145n] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 12px 16px;
background: #EEF2FF;
border: 1.5px solid #4F46E5;
border-radius: 8px;
font-family: var(--font-family-primary);
}
.audit-bulk-bar-mixed[b-16ogc1145n] {
background: #FFFBEB;
border-color: #FDE68A;
}
.audit-bulk-left[b-16ogc1145n] {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.audit-bulk-badge[b-16ogc1145n] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 6px;
background: #4F46E5;
flex-shrink: 0;
}
.audit-bulk-bar-mixed .audit-bulk-badge[b-16ogc1145n] {
background: #92400E;
}
.audit-bulk-badge .material-icons[b-16ogc1145n] {
font-size: 15px;
color: #FFFFFF;
}
.audit-bulk-text[b-16ogc1145n] {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.audit-bulk-count[b-16ogc1145n] {
font-size: 14px;
font-weight: 700;
color: #3730A3;
line-height: 1.2;
}
.audit-bulk-bar-mixed .audit-bulk-count[b-16ogc1145n] {
color: #92400E;
}
.audit-bulk-scope[b-16ogc1145n] {
font-size: 12px;
font-weight: 400;
color: #5D566A;
line-height: 1.2;
}
.audit-bulk-actions[b-16ogc1145n] {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}
.audit-bulk-guard[b-16ogc1145n] {
font-size: 12.5px;
font-weight: 500;
color: #92400E;
}
.audit-bulk-btn[b-16ogc1145n] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border: 0;
border-radius: 9999px;
font-family: var(--font-family-primary);
font-size: 12.5px;
font-weight: 600;
color: #FFFFFF;
cursor: pointer;
transition: background-color 120ms ease, border-color 120ms ease;
white-space: nowrap;
}
.audit-bulk-btn .material-icons[b-16ogc1145n] {
font-size: 15px;
width: 15px;
height: 15px;
line-height: 15px;
}
.audit-bulk-btn:disabled[b-16ogc1145n] {
opacity: 0.5;
cursor: not-allowed;
}
.audit-bulk-btn-map[b-16ogc1145n] { background: #25507C; }
.audit-bulk-btn-map:hover:not(:disabled)[b-16ogc1145n] { background: #1E4368; }
.audit-bulk-btn-kickback[b-16ogc1145n] { background: #0D9488; }
.audit-bulk-btn-kickback:hover:not(:disabled)[b-16ogc1145n] { background: #0F766E; }
.audit-bulk-btn-create[b-16ogc1145n] { background: #4F46E5; }
.audit-bulk-btn-create:hover:not(:disabled)[b-16ogc1145n] { background: #4338CA; }
.audit-bulk-btn-keep[b-16ogc1145n] {
background: #FFFFFF;
border: 1.5px solid #10B981;
color: #10B981;
padding: 7px 13px;
}
.audit-bulk-btn-keep:hover:not(:disabled)[b-16ogc1145n] { background: #ECFDF5; }
.audit-bulk-btn-close[b-16ogc1145n] { background: #64748B; }
.audit-bulk-btn-close:hover:not(:disabled)[b-16ogc1145n] { background: #526073; }
.audit-bulk-btn-outline[b-16ogc1145n] {
background: #FFFFFF;
border: 1px solid #E0DBE7;
color: #413A4D;
font-size: 12px;
padding: 7px 12px;
}
.audit-bulk-btn-outline:hover:not(:disabled)[b-16ogc1145n] { background: #FAFAFE; }
.audit-bulk-clear[b-16ogc1145n] {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 8px 10px;
background: none;
border: 0;
font-family: var(--font-family-primary);
font-size: 12.5px;
font-weight: 500;
color: #5D566A;
cursor: pointer;
white-space: nowrap;
}
.audit-bulk-clear:hover[b-16ogc1145n] { color: #1A102C; }
.audit-bulk-clear .material-icons[b-16ogc1145n] {
font-size: 14px;
width: 14px;
height: 14px;
line-height: 14px;
}
/* ── Bulk-selection checkboxes (Pencil frames CnXmf "Checkbox Cell" + R1zsp header) ── */
.audit-cell-check[b-16ogc1145n] {
width: 44px;
flex: 0 0 44px;
}
.audit-bulk-checkbox[b-16ogc1145n] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
padding: 0;
border-radius: 4px;
border: 1.5px solid #B7B2C4;
background: #FFFFFF;
cursor: pointer;
transition: background-color 120ms ease, border-color 120ms ease;
flex-shrink: 0;
}
.audit-bulk-checkbox:hover[b-16ogc1145n] {
border-color: #4F46E5;
}
.audit-bulk-checkbox.audit-bulk-checkbox-checked[b-16ogc1145n] {
background: #4F46E5;
border-color: #4F46E5;
}
.audit-bulk-checkbox .material-icons[b-16ogc1145n] {
font-size: 12px;
width: 12px;
height: 12px;
line-height: 12px;
color: #FFFFFF;
}
/* Check-selected row tint (Pencil frame R1zsp rows 1-4). Distinct from
.audit-row-selected (the single "working on this" click marker, which adds the
inset indigo stripe); the extra :not() hover rule keeps the tint under the
generic row-hover rule's higher specificity. */
.audit-row.audit-row-bulk-selected[b-16ogc1145n] {
background: #EEF2FF;
}
.audit-row.audit-row-bulk-selected:not(.audit-row-header):not(.audit-row-footer):hover[b-16ogc1145n] {
background: #E4E9FD;
}
/* ── Audit table (Pencil frame Tq8PF) ── */
.audit-table-wrap[b-16ogc1145n] {
padding: 8px 0 24px 0;
}
/* Reconcile progress pill — sits above the audit-table-card while the audit-resolve
pipeline runs. Uses the same indigo style as IngredientsVerification's autosave label so the
visual language matches between the two pages. */
.audit-reconcile-pill-wrap[b-16ogc1145n] {
display: flex;
justify-content: flex-end;
margin: 0 0 8px 0;
}
.audit-table-card[b-16ogc1145n] {
background: #FFFFFF;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(26, 16, 44, 0.10);
overflow-x: auto;
overflow-y: hidden;
font-family: var(--font-family-primary);
}
.audit-row[b-16ogc1145n] {
display: flex;
align-items: center;
padding: 0 16px;
height: 64px;
min-width: 1080px;
background: #FFFFFF;
border-bottom: 1px solid #E0DBE7;
transition: background-color 120ms ease;
position: relative; /* anchors the All-tab status stripe (::before) */
}
/* All-tab row status stripe — 4px colored bar on the left edge that matches the
Status Tabs palette. Only applied when the auditor is on the All tab; on
single-status tabs the active tab pill already telegraphs the color, so the
per-row stripe is pure noise. Color comes from the status modifier below. */
.audit-row-stripe[b-16ogc1145n]::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: var(--stripe-color, transparent);
}
.audit-row-stripe-open[b-16ogc1145n] { --stripe-color: #25507C; }
.audit-row-stripe-accepted[b-16ogc1145n] { --stripe-color: #10B981; }
.audit-row-stripe-newcanon[b-16ogc1145n] { --stripe-color: #4F46E5; }
.audit-row-stripe-rejected[b-16ogc1145n] { --stripe-color: #EF4444; }
.audit-row-stripe-kickedback[b-16ogc1145n] { --stripe-color: #0D9488; }
.audit-row-stripe-canceled[b-16ogc1145n] { --stripe-color: #64748B; }
/* Cream tint for any Canceled row (brand-withdrawn or superseded by a newer parse).
Combines with the lifecycle stripe on the All / Canceled tabs. */
.audit-row.audit-row-canceled[b-16ogc1145n] {
background: #FFFCF7;
}
.audit-row.audit-row-canceled:not(.audit-row-header):not(.audit-row-footer):hover[b-16ogc1145n] {
background: #FCF7EE;
}
.audit-row:last-child[b-16ogc1145n] {
border-bottom: 0;
}
/* Match the admin-table row hover used on Organizations / User Management
(Tailwind hover:bg-oyster-50). Header + footer rows are excluded — they
are non-interactive chrome with their own background. */
.audit-row:not(.audit-row-header):not(.audit-row-footer):hover[b-16ogc1145n] {
background: #FDFCFF;
}
.audit-row-header[b-16ogc1145n] {
height: 44px;
background: #FAFAFE;
}
.audit-row-footer[b-16ogc1145n] {
height: 48px;
background: #FAFAFE;
color: #5D566A;
font-size: 12px;
font-weight: 400;
justify-content: flex-start;
}
.audit-cell[b-16ogc1145n] {
display: flex;
align-items: center;
height: 100%;
color: #1A102C;
overflow: hidden;
padding-right: 8px;
}
.audit-row-header .audit-cell[b-16ogc1145n] {
color: #5D566A;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.5px;
}
.audit-cell-brand[b-16ogc1145n] { width: 170px; flex: 0 0 170px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
.audit-cell-raw[b-16ogc1145n] { width: 200px; flex: 0 0 200px; padding-right: 20px; }
.audit-cell-mapped[b-16ogc1145n] { width: 170px; flex: 0 0 170px; }
.audit-row:not(.audit-row-header) .audit-cell-mapped[b-16ogc1145n] { align-items: stretch; }
.audit-mapped-stack[b-16ogc1145n] {
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
width: 100%;
overflow: hidden;
}
.audit-mapped-strike[b-16ogc1145n] {
text-decoration: line-through;
color: #A8A2B3;
}
.audit-mapped-arrow[b-16ogc1145n] {
font-size: 12px;
font-weight: 600;
color: #10B981;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.audit-mapped-kept[b-16ogc1145n] {
font-size: 10px;
font-weight: 600;
color: #10B981;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Click-selected row: the auditor's "I'm working on this one" marker. One row
at a time; clicking the selected row again clears it. */
.audit-row.audit-row-selected[b-16ogc1145n] {
background: #EEF2FF;
box-shadow: inset 3px 0 0 #4F46E5;
}
/* Indigo NEW pill next to the arrow on CreateNewCanon resolutions — the canon
the auditor remapped to was created by that resolve (wireframe 3). */
.audit-newcanon-pill[b-16ogc1145n] {
display: inline-block;
margin-left: 4px;
padding: 1px 7px;
border-radius: 999px;
background: #4F46E5;
color: #FFFFFF;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.5px;
vertical-align: middle;
}
.audit-cell-action[b-16ogc1145n] { width: 160px; flex: 0 0 160px; }
.audit-cell-notes[b-16ogc1145n] { flex: 1 1 auto; min-width: 120px; padding-right: 12px; }
.audit-cell-flagged[b-16ogc1145n] { width: 100px; flex: 0 0 100px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
/* SLA age badge on the FLAGGED column, applied by FlaggedSlaClasses only while the row is still
actually Open (resolved / withdrawn / brand-superseded rows never tint). Amber at 36h
(approaching the 48h review SLA), red at 48h (past it). It's a content-sized rounded badge
(not a full-cell fill), so it reads as a chip with breathing room, like the tier chips, and
stays visible over the row hover / selected / bulk-selected backgrounds. */
.audit-flagged-sla[b-16ogc1145n] { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 100%; }
.audit-flagged-sla.audit-flagged-warn[b-16ogc1145n],
.audit-flagged-sla.audit-flagged-breach[b-16ogc1145n] { padding: 4px 9px; border-radius: 8px; }
.audit-flagged-sla.audit-flagged-warn[b-16ogc1145n] { background: #FEF3C7; }
.audit-flagged-sla.audit-flagged-warn .audit-flagged-when[b-16ogc1145n] { color: #B45309; }
.audit-flagged-sla.audit-flagged-breach[b-16ogc1145n] { background: #FEE2E2; }
.audit-flagged-sla.audit-flagged-breach .audit-flagged-when[b-16ogc1145n] { color: #B91C1C; font-weight: 700; }
.audit-cell-actions[b-16ogc1145n] { width: 384px; flex: 0 0 384px; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px; padding-right: 0; }
/* Action buttons: single no-wrap row so Flag-for-Tier-2 + Resolve + Explain never break to a
second line. Escalation / superseded context stacks above this row (the cell is column-flow). */
.audit-actions-btns[b-16ogc1145n] { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 6px; }
/* Keep each action label on one line so a three-button cell (Flag for Tier 2 + Kick back +
Resolve) never wraps "Flag for Tier 2" onto multiple lines and squishes the pills. */
.audit-actions-btns > button[b-16ogc1145n] { white-space: nowrap; flex: 0 0 auto; }
.audit-row-header .audit-cell-brand[b-16ogc1145n],
.audit-row-header .audit-cell-flagged[b-16ogc1145n] {
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 0;
}
/* Sortable FLAGGED column header: a bare button that inherits the header cell's
typography, with an arrow showing the active sort direction (up = oldest first). */
.audit-sort-header[b-16ogc1145n] {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 0;
margin: 0;
border: none;
background: none;
cursor: pointer;
color: inherit;
font: inherit;
letter-spacing: inherit;
text-transform: inherit;
}
.audit-sort-header:hover[b-16ogc1145n] {
color: #1A102C;
}
.audit-sort-icon[b-16ogc1145n] {
font-size: 14px;
line-height: 1;
}
.audit-brand-name[b-16ogc1145n] {
font-size: 13px;
font-weight: 600;
color: #1A102C;
line-height: 1.2;
}
.audit-food-name[b-16ogc1145n] {
font-size: 11px;
font-weight: 400;
color: #5D566A;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
display: block;
}
.audit-food-name-link[b-16ogc1145n] {
color: #4F45A8;
text-decoration: none;
cursor: pointer;
}
.audit-food-name-link:hover[b-16ogc1145n],
.audit-food-name-link:focus[b-16ogc1145n] {
color: #1A102C;
text-decoration: underline;
}
.audit-cell-text-primary[b-16ogc1145n] {
font-size: 12px;
font-weight: 400;
color: #1A102C;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.audit-cell-text-secondary[b-16ogc1145n] {
font-size: 12px;
font-weight: 400;
color: #5D566A;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.audit-cell-unmatched[b-16ogc1145n] {
font-size: 12px;
font-style: italic;
color: #A8A2B3;
}
.audit-cell-notes-text[b-16ogc1145n] {
font-size: 12px;
font-weight: 400;
color: #413A4D;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.audit-flagged-when[b-16ogc1145n] {
font-size: 12px;
font-weight: 600;
color: #1A102C;
}
.audit-flagged-who[b-16ogc1145n] {
font-size: 10px;
font-weight: 400;
color: #5D566A;
}
/* ── Action chips (one per AuditAction, exact Pencil colors) ── */
.audit-chip[b-16ogc1145n] {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
border-radius: 9999px;
border: 1px solid;
font-size: 11px;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
flex-shrink: 0;
}
.audit-chip-icon.material-icons[b-16ogc1145n] {
font-size: 13px;
width: 13px;
height: 13px;
line-height: 13px;
}
.audit-chip-flag[b-16ogc1145n] { background: #FEE2E2; border-color: #B91C1C; color: #B91C1C; }
.audit-chip-lookup[b-16ogc1145n] { background: #F5F3FF; border-color: #7C3AED; color: #7C3AED; }
.audit-chip-newcanon[b-16ogc1145n] { background: #CFFAFE; border-color: #0891B2; color: #0891B2; }
.audit-chip-notsure[b-16ogc1145n] { background: #FEF3C7; border-color: #92400E; color: #92400E; }
/* ── Resolve / View buttons ── */
.audit-resolve-btn[b-16ogc1145n] {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 14px;
border: 0;
border-radius: 9999px;
background: #1E3A8A;
color: #FFFFFF;
font-family: var(--font-family-primary);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background-color 120ms ease;
}
.audit-resolve-btn:hover[b-16ogc1145n] {
background: #1E40AF;
}
.audit-resolve-icon.material-icons[b-16ogc1145n] {
font-size: 14px;
width: 14px;
height: 14px;
line-height: 14px;
}
/* All-tab status pill — replaces the Resolve button on rows that are no longer
actionable (Accepted / Rejected / Canceled). Mirrors the row stripe palette
so the left-edge color and the tail badge tell the same story. */
.audit-status-pill[b-16ogc1145n] {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px 4px 8px;
border-radius: 9999px;
border: 1px solid;
font-family: var(--font-family-primary);
font-size: 11px;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
flex-shrink: 0;
}
.audit-status-pill-icon.material-icons[b-16ogc1145n] {
font-size: 14px;
width: 14px;
height: 14px;
line-height: 14px;
}
.audit-status-pill-accepted[b-16ogc1145n] { background: #ECFDF5; border-color: #10B981; color: #10B981; }
.audit-status-pill-newcanon[b-16ogc1145n] { background: #EEF2FF; border-color: #4F46E5; color: #4F46E5; }
.audit-status-pill-rejected[b-16ogc1145n] { background: #FEF2F2; border-color: #EF4444; color: #EF4444; }
.audit-status-pill-kickedback[b-16ogc1145n] { background: #F0FDFA; border-color: #0D9488; color: #0F766E; }
.audit-status-pill-canceled[b-16ogc1145n] { background: #F8FAFC; border-color: #64748B; color: #64748B; }
/* ── Internal-supersession marker ── shown above the Resolve button when an
internal auditor re-analyzed the food after the audit was filed. Two-line
stack: chip on top, "FirstName L. re-analyzed" subtext below. */
/* Single horizontal line (chip + byline) so it fits the fixed 64px row height. */
.audit-superseded-stack[b-16ogc1145n] {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 6px;
max-width: 100%;
min-width: 0;
}
.audit-superseded-chip[b-16ogc1145n] {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
border-radius: 9999px;
border: 1px solid #C4B5FD;
background: #F5F3FF;
color: #5B21B6;
font-family: var(--font-family-primary);
font-size: 11px;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
flex-shrink: 0;
}
.audit-superseded-chip-icon.material-icons[b-16ogc1145n] {
font-size: 13px;
width: 13px;
height: 13px;
line-height: 13px;
}
.audit-superseded-byline[b-16ogc1145n] {
font-size: 10.5px;
color: #6D28D9;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
/* Per-row tier chip: Tier 1 = Canon Auditor (blue), Tier 2 = Canon Creator (amber). */
.audit-tier-chip[b-16ogc1145n] {
display: inline-block;
align-self: flex-start;
margin-bottom: 3px;
padding: 1px 7px;
border-radius: 999px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.5px;
line-height: 1.6;
}
.audit-tier-chip-1[b-16ogc1145n] { background: #ECF1F6; color: #25507C; }
.audit-tier-chip-2[b-16ogc1145n] { background: #FEF3C7; color: #B45309; }
/* Escalation context stack on escalated rows (mirrors .audit-superseded-stack). */
/* Single horizontal line (chip + who/when) that fits the fixed 64px row height. */
.audit-escalated-line[b-16ogc1145n] {
display: inline-flex;
align-items: center;
gap: 6px;
max-width: 100%;
min-width: 0;
}
.audit-escalated-chip[b-16ogc1145n] {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
border-radius: 9999px;
border: 1px solid #FDE68A;
background: #FFFBEB;
color: #B45309;
font-family: var(--font-family-primary);
font-size: 11px;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
flex-shrink: 0;
}
.audit-escalated-chip-icon.material-icons[b-16ogc1145n] {
font-size: 13px;
width: 13px;
height: 13px;
line-height: 13px;
}
.audit-escalated-meta[b-16ogc1145n] {
font-size: 10.5px;
color: #92400E;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
/* Flag-for-Tier-2 (escalate) button — amber outline counterpart to the blue Resolve button. */
.audit-escalate-btn[b-16ogc1145n] {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 14px;
border: 1px solid #D97706;
border-radius: 9999px;
background: #FFFFFF;
color: #B45309;
font-family: var(--font-family-primary);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background-color 120ms ease;
}
.audit-escalate-btn:hover[b-16ogc1145n] {
background: #FEF3C7;
}
.audit-escalate-icon.material-icons[b-16ogc1145n] {
font-size: 14px;
}
.audit-kickback-btn[b-16ogc1145n] {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 14px;
border: 1px solid #0D9488;
border-radius: 9999px;
background: #FFFFFF;
color: #0F766E;
font-family: var(--font-family-primary);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background-color 120ms ease;
}
.audit-kickback-btn:hover[b-16ogc1145n] {
background: #CCFBF1;
}
.audit-kickback-icon.material-icons[b-16ogc1145n] {
font-size: 14px;
}
/* ── Empty / loading / error ── */
.audit-empty[b-16ogc1145n] {
padding: 48px 24px;
text-align: center;
color: #5D566A;
font-size: 13px;
}
.audit-empty-icon.material-icons[b-16ogc1145n] {
font-size: 48px;
color: #D6D2DE;
display: block;
margin: 0 auto 12px;
}
.audit-error[b-16ogc1145n] {
padding: 24px;
color: #B91C1C;
font-size: 13px;
}
/* Row-open error banner — dismissible, sits between the reconcile pill and
the table card. Distinct from .audit-error (which is queue-load-fatal). */
.audit-row-open-error[b-16ogc1145n] {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 12px 0;
padding: 10px 12px;
background: #FEF2F2;
border: 1px solid #FECACA;
border-radius: 8px;
color: #991B1B;
font-size: 13px;
}
.audit-row-open-error-icon[b-16ogc1145n] {
font-size: 18px;
color: #B91C1C;
flex-shrink: 0;
}
.audit-row-open-error-text[b-16ogc1145n] {
flex: 1;
line-height: 1.4;
}
.audit-row-open-error-close[b-16ogc1145n] {
background: none;
border: none;
cursor: pointer;
padding: 2px;
color: #991B1B;
display: flex;
align-items: center;
border-radius: 4px;
flex-shrink: 0;
}
.audit-row-open-error-close:hover[b-16ogc1145n] {
background: #FEE2E2;
}
.audit-row-open-error-close .material-icons[b-16ogc1145n] {
font-size: 18px;
}
/* Pagination markup moved into Components/Shared/Pager.razor (+ .razor.css). */
@media (max-width: 768px) {
.audit-queue-status-tabs[b-16ogc1145n] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
width: 100%;
overflow: visible;
}
.audit-tab[b-16ogc1145n],
.audit-tab.audit-tab-first[b-16ogc1145n],
.audit-tab.audit-tab-last[b-16ogc1145n],
.audit-tab.audit-tab-active[b-16ogc1145n] {
min-width: 0;
width: 100%;
border-radius: 10px;
box-shadow: none;
padding: 14px 10px;
}
.audit-tab.audit-tab-active[b-16ogc1145n] {
padding: 12px 8px;
}
.audit-tab.audit-tab-last[b-16ogc1145n] {
grid-column: 1 / -1;
}
.audit-tab-num[b-16ogc1145n] {
font-size: 24px;
}
.audit-tab-desc[b-16ogc1145n],
.audit-tab-sub[b-16ogc1145n] {
overflow-wrap: anywhere;
}
}
@media (max-width: 360px) {
.audit-queue-status-tabs[b-16ogc1145n] {
grid-template-columns: minmax(0, 1fr);
}
.audit-tab.audit-tab-last[b-16ogc1145n] {
grid-column: auto;
}
}
@media (max-width: 768px) {
.audit-table-wrap[b-16ogc1145n] {
padding-top: 4px;
}
.audit-bulk-bar[b-16ogc1145n] {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.audit-bulk-actions[b-16ogc1145n] {
justify-content: flex-start;
}
.audit-table-card[b-16ogc1145n] {
display: flex;
flex-direction: column;
gap: 12px;
overflow: visible;
background: transparent;
box-shadow: none;
}
.audit-row-header[b-16ogc1145n] {
display: none;
}
.audit-row[b-16ogc1145n] {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 12px;
min-width: 0;
height: auto;
padding: 16px;
border: 1px solid #E0DBE7;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(26, 16, 44, 0.10);
}
.audit-row:last-child[b-16ogc1145n] {
border-bottom: 1px solid #E0DBE7;
}
.audit-row-stripe[b-16ogc1145n]::before {
width: 5px;
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
}
.audit-cell[b-16ogc1145n],
.audit-cell-brand[b-16ogc1145n],
.audit-cell-raw[b-16ogc1145n],
.audit-cell-mapped[b-16ogc1145n],
.audit-cell-action[b-16ogc1145n],
.audit-cell-notes[b-16ogc1145n],
.audit-cell-flagged[b-16ogc1145n],
.audit-cell-actions[b-16ogc1145n] {
width: auto;
min-width: 0;
height: auto;
flex: 1 1 auto;
overflow: visible;
padding: 0;
}
.audit-cell:not(.audit-cell-actions)[b-16ogc1145n] {
display: grid;
grid-template-columns: minmax(92px, 0.38fr) minmax(0, 1fr);
align-items: start;
gap: 10px;
}
.audit-cell:not(.audit-cell-actions)[b-16ogc1145n]::before {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.05em;
line-height: 1.35;
text-transform: uppercase;
color: #827C90;
}
.audit-cell-check[b-16ogc1145n]::before { content: "Select"; }
.audit-cell-brand[b-16ogc1145n]::before { content: "Brand / Food"; }
.audit-cell-raw[b-16ogc1145n]::before { content: "Raw"; }
.audit-cell-mapped[b-16ogc1145n]::before { content: "Mapping"; }
.audit-cell-action[b-16ogc1145n]::before { content: "Action"; }
.audit-cell-notes[b-16ogc1145n]::before { content: "Notes"; }
.audit-cell-flagged[b-16ogc1145n]::before { content: "Flagged"; }
.audit-cell-brand[b-16ogc1145n] {
flex-direction: initial;
align-items: start;
justify-content: initial;
}
.audit-cell-actions[b-16ogc1145n] {
justify-content: flex-start;
align-items: stretch;
gap: 8px;
padding-top: 4px;
}
/* On phones the action cell is full-width, so let the buttons wrap rather than overflow. */
.audit-actions-btns[b-16ogc1145n] {
flex-wrap: wrap;
justify-content: flex-start;
}
.audit-brand-name[b-16ogc1145n],
.audit-food-name[b-16ogc1145n],
.audit-cell-text-primary[b-16ogc1145n],
.audit-cell-text-secondary[b-16ogc1145n],
.audit-mapped-arrow[b-16ogc1145n],
.audit-mapped-kept[b-16ogc1145n],
.audit-superseded-byline[b-16ogc1145n] {
white-space: normal;
overflow: visible;
text-overflow: clip;
}
.audit-cell-notes-text[b-16ogc1145n] {
display: block;
overflow: visible;
-webkit-line-clamp: initial;
-webkit-box-orient: initial;
}
.audit-resolve-btn[b-16ogc1145n] {
min-height: 40px;
padding-inline: 16px;
}
}
/* ── Queue-flow strip (7-day rolling inflow/outflow), above the filters ── */
.audit-flow-wrap[b-16ogc1145n] {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 20px;
font-family: var(--font-family-primary);
}
.audit-flow-label[b-16ogc1145n] {
display: flex;
align-items: center;
gap: 6px;
}
.audit-flow-label-icon.material-icons[b-16ogc1145n] {
font-size: 16px;
color: #827C90;
}
.audit-flow-label-text[b-16ogc1145n] {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
color: #827C90;
}
.audit-flow-cards[b-16ogc1145n] {
display: flex;
gap: 16px;
}
.audit-flow-card[b-16ogc1145n] {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: 8px;
padding: 20px;
background: #FFFFFF;
border-radius: 8px;
border-left: 4px solid #827C90;
box-shadow: 0 1px 3px rgba(26, 16, 44, 0.06);
}
.audit-flow-card-head[b-16ogc1145n] {
display: flex;
align-items: center;
gap: 6px;
}
.audit-flow-card-icon.material-icons[b-16ogc1145n] {
font-size: 16px;
}
.audit-flow-card-label[b-16ogc1145n] {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
color: #5D566A;
}
.audit-flow-card-value[b-16ogc1145n] {
font-size: 30px;
font-weight: 700;
line-height: 1.1;
}
.audit-flow-card-sub[b-16ogc1145n] {
font-size: 11px;
color: #5D566A;
line-height: 1.4;
}
/* Accent per card: left border + icon + value color. */
.audit-flow-submitted[b-16ogc1145n] { border-left-color: #25507C; }
.audit-flow-submitted .audit-flow-card-icon.material-icons[b-16ogc1145n],
.audit-flow-submitted .audit-flow-card-value[b-16ogc1145n] { color: #25507C; }
.audit-flow-resolved[b-16ogc1145n] { border-left-color: #10B981; }
.audit-flow-resolved .audit-flow-card-icon.material-icons[b-16ogc1145n],
.audit-flow-resolved .audit-flow-card-value[b-16ogc1145n] { color: #10B981; }
.audit-flow-net-pos[b-16ogc1145n] { border-left-color: #D97706; }
.audit-flow-net-pos .audit-flow-card-icon.material-icons[b-16ogc1145n],
.audit-flow-net-pos .audit-flow-card-value[b-16ogc1145n] { color: #D97706; }
.audit-flow-net-neg[b-16ogc1145n] { border-left-color: #10B981; }
.audit-flow-net-neg .audit-flow-card-icon.material-icons[b-16ogc1145n],
.audit-flow-net-neg .audit-flow-card-value[b-16ogc1145n] { color: #10B981; }
.audit-flow-net-flat[b-16ogc1145n] { border-left-color: #827C90; }
.audit-flow-net-flat .audit-flow-card-icon.material-icons[b-16ogc1145n],
.audit-flow-net-flat .audit-flow-card-value[b-16ogc1145n] { color: #827C90; }
/* ── Collapsible filters header ── */
/* Overrides .audit-filters-header (declared earlier) so the button reads as a plain clickable header. */
.audit-filters-toggle[b-16ogc1145n] {
align-items: center;
gap: 12px;
width: 100%;
background: none;
border: none;
padding: 0;
cursor: pointer;
text-align: left;
font: inherit;
}
.audit-filters-active-badge[b-16ogc1145n] {
margin-left: auto;
padding: 2px 10px;
border-radius: 999px;
background: #EEF2FF;
color: #25507C;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
.audit-filters-chevron.material-icons[b-16ogc1145n] {
margin-left: auto;
color: #5D566A;
font-size: 22px;
}
/* When the active-count badge is present it takes the auto margin, so the chevron sits next to it. */
.audit-filters-active-badge + .audit-filters-chevron.material-icons[b-16ogc1145n] {
margin-left: 8px;
}
.audit-filters-body[b-16ogc1145n] {
display: flex;
flex-direction: column;
gap: 16px;
}
@media (max-width: 900px) {
.audit-flow-cards[b-16ogc1145n] {
flex-direction: column;
}
}
/* /Components/Pages/Error.razor.rz.scp.css */
.error-page[b-x41sexjml5] {
display: flex;
align-items: center;
justify-content: center;
min-height: 60vh;
padding: 2rem 1.5rem;
}
.error-card[b-x41sexjml5] {
max-width: 32rem;
width: 100%;
text-align: center;
background: #ffffff;
border: 1px solid #e7e2d9; /* oyster-200 */
border-radius: 1rem;
padding: 2.5rem 2rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.error-icon[b-x41sexjml5] {
font-size: 3rem;
color: #d97706; /* amber-600 */
margin-bottom: 0.75rem;
}
.error-title[b-x41sexjml5] {
font-size: 1.5rem;
font-weight: 700;
color: #1c1917; /* oyster-900 */
margin: 0 0 0.75rem;
}
.error-message[b-x41sexjml5] {
font-size: 0.95rem;
line-height: 1.6;
color: #57534e; /* oyster-600 */
margin: 0 auto 1.5rem;
max-width: 28rem;
}
.error-actions[b-x41sexjml5] {
display: flex;
justify-content: center;
gap: 0.75rem;
}
.error-btn-primary[b-x41sexjml5] {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.625rem 1.5rem;
border-radius: 9999px;
background: #4f46e5; /* indigo-600 */
color: #ffffff;
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
transition: background-color 0.2s ease;
}
.error-btn-primary:hover[b-x41sexjml5] {
background: #4338ca; /* indigo-700 */
}
.error-reference[b-x41sexjml5] {
margin: 1.5rem 0 0;
font-size: 0.8rem;
color: #a8a29e; /* oyster-400 */
}
.error-reference code[b-x41sexjml5] {
font-size: 0.78rem;
color: #78716c; /* oyster-500 */
word-break: break-all;
}
/* /Components/Pages/IsFoodUpf.razor.rz.scp.css */
/*
* Non-UPF assessment widget.
* Built one-to-one from the Figma "Non-UPF Verification" contact-form section
* (node 53486:858). Values below are the design tokens from that file:
* Surface/surface-2 #FBF6ED General/radius-lg 16px
* Ink/ink-1 #1A2339 Ink/ink-2 rgba(26,35,57,.64)
* Input/input-fill #FFFDF9 Input/input-border #DFDBD3
* Input/input-placeholder rgba(26,35,57,.32)
* Input/input-height 56px Input/input-radius 8px
* Gap 02/04/06/07/08 8/16/24/32/48px
* Button/button-lg-height 56px Button/button-rect-radius 16px
* Button secondary fill rgba(26,35,57,.08)
*/
/* ── Page + card ── */
.ftt-page[b-gv37puy7l3] {
width: 100%;
max-width: 680px; /* Grid/Columns/6 Columns */
margin: 0 auto;
box-sizing: border-box;
}
.ftt-card[b-gv37puy7l3] {
display: flex;
flex-direction: column;
gap: 48px; /* Gap/gap-08 */
padding: 48px; /* Gap/gap-08 */
background: #FBF6ED;
border-radius: 16px;
box-sizing: border-box;
}
/* ── Card header ── */
.ftt-header[b-gv37puy7l3] {
display: flex;
flex-direction: column;
gap: 16px; /* Gap/gap-04 */
max-width: 486px;
}
.ftt-title[b-gv37puy7l3] {
font-family: 'DM Sans', system-ui, sans-serif;
font-size: 40px;
font-weight: 500;
line-height: 44px; /* Heading/H3/h3-line-height */
letter-spacing: -1px; /* Heading/H3/h3-letter-spacing */
color: #1A2339;
margin: 0;
font-variation-settings: 'opsz' 14;
}
.ftt-subtitle[b-gv37puy7l3] {
font-family: 'DM Sans', system-ui, sans-serif;
font-size: 16px; /* Text/Medium */
font-weight: 400;
line-height: 24px;
color: rgba(26, 35, 57, 0.64);
margin: 0;
font-variation-settings: 'opsz' 9;
}
/* ── Form block ── */
.ftt-form[b-gv37puy7l3] {
display: flex;
flex-direction: column;
gap: 32px; /* Gap/gap-07 */
}
.ftt-body[b-gv37puy7l3] {
display: flex;
flex-direction: column;
}
.step-panel[b-gv37puy7l3] {
display: flex;
flex-direction: column;
gap: 24px; /* Gap/gap-06 */
animation: stepFadeIn-b-gv37puy7l3 0.28s ease-out;
}
@keyframes stepFadeIn-b-gv37puy7l3 {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Field ── */
.ftt-field[b-gv37puy7l3] {
display: flex;
flex-direction: column;
gap: 8px; /* Gap/gap-02 */
}
/* Uppercase mono label — Utility/Label */
.ftt-label[b-gv37puy7l3] {
display: block;
font-family: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 14px;
font-weight: 400;
line-height: 16px;
letter-spacing: 1.25px;
text-transform: uppercase;
color: rgba(26, 35, 57, 0.64);
}
/* ── Inputs ── */
.ftt-input[b-gv37puy7l3],
.ftt-textarea[b-gv37puy7l3],
.ftt-dropdown-wrapper[b-gv37puy7l3] {
width: 100%;
box-sizing: border-box;
background: #FFFDF9;
border: 1px solid #DFDBD3;
border-radius: 8px;
font-family: 'DM Sans', system-ui, sans-serif;
font-size: 16px;
line-height: 24px;
color: #1A2339;
outline: none;
font-variation-settings: 'opsz' 9;
transition: border-color 0.15s ease;
}
.ftt-input[b-gv37puy7l3] {
height: 56px; /* Input/input-height */
padding: 0 16px; /* Gap/gap-04 */
}
.ftt-textarea[b-gv37puy7l3] {
/* Figma sizes the ingredient field block at 388px: label 16 + gap 8 + field 364 */
height: 364px;
min-height: 56px;
padding: 16px;
resize: vertical;
}
.ftt-input[b-gv37puy7l3]::placeholder,
.ftt-textarea[b-gv37puy7l3]::placeholder {
color: rgba(26, 35, 57, 0.32);
}
.ftt-input:focus[b-gv37puy7l3],
.ftt-textarea:focus[b-gv37puy7l3] {
border-color: #1A2339;
}
/* Hide the native number spinners so the fields match the design */
.ftt-input[type="number"][b-gv37puy7l3] {
-moz-appearance: textfield;
appearance: textfield;
}
.ftt-input[type="number"][b-gv37puy7l3]::-webkit-outer-spin-button,
.ftt-input[type="number"][b-gv37puy7l3]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* ── Category dropdown (custom, supports icons) ── */
.ftt-dropdown-wrapper[b-gv37puy7l3] {
position: relative;
height: 56px;
padding: 0 16px;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.ftt-dropdown-wrapper:hover[b-gv37puy7l3] {
border-color: #C9C3B8;
}
.ftt-dropdown-wrapper:focus[b-gv37puy7l3],
.ftt-dropdown-wrapper:focus-visible[b-gv37puy7l3] {
border-color: #1A2339;
}
.ftt-dropdown-display[b-gv37puy7l3] {
display: flex;
align-items: center;
gap: 8px;
flex: 1 1 auto;
min-width: 0;
}
.ftt-dropdown-placeholder[b-gv37puy7l3] {
color: rgba(26, 35, 57, 0.32);
}
.ftt-dropdown-icon[b-gv37puy7l3] {
font-size: 20px; /* icon-md */
color: rgba(26, 35, 57, 0.48);
flex-shrink: 0;
}
.ftt-dropdown-chevron[b-gv37puy7l3] {
font-size: 20px;
color: #1A2339;
flex-shrink: 0;
pointer-events: none;
}
.ftt-dropdown-backdrop[b-gv37puy7l3] {
position: fixed;
inset: 0;
z-index: 59;
}
.ftt-dropdown-menu[b-gv37puy7l3] {
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
background: #FFFDF9;
border: 1px solid #DFDBD3;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(26, 35, 57, 0.12);
z-index: 60;
max-height: 280px;
overflow-y: auto;
padding: 8px;
animation: stepFadeIn-b-gv37puy7l3 0.15s ease-out;
}
.ftt-dropdown-option[b-gv37puy7l3] {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
font-size: 16px;
line-height: 24px;
color: #1A2339;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.12s ease;
}
.ftt-dropdown-option:hover[b-gv37puy7l3],
.ftt-dropdown-option.highlighted[b-gv37puy7l3] {
background-color: rgba(26, 35, 57, 0.06);
}
.ftt-dropdown-option.selected[b-gv37puy7l3] {
background-color: rgba(26, 35, 57, 0.1);
font-weight: 500;
}
/* ── Actions ── */
.ftt-actions[b-gv37puy7l3] {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
/* Button/Secondary — the design's Run Assessment button */
.ftt-btn[b-gv37puy7l3] {
height: 56px; /* Button/button-lg-height */
padding: 0 20px; /* Gap/gap-05 */
border: none;
border-radius: 16px; /* Button/button-rect-radius */
background: rgba(26, 35, 57, 0.08);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: #1A2339;
font-family: 'DM Sans', system-ui, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
white-space: nowrap;
transition: background-color 0.2s ease;
font-variation-settings: 'opsz' 9;
}
.ftt-btn:hover:not(:disabled)[b-gv37puy7l3] {
background: rgba(26, 35, 57, 0.14);
}
.ftt-btn:active:not(:disabled)[b-gv37puy7l3] {
background: rgba(26, 35, 57, 0.2);
}
.ftt-btn.disabled[b-gv37puy7l3],
.ftt-btn:disabled[b-gv37puy7l3] {
color: rgba(26, 35, 57, 0.32);
cursor: not-allowed;
}
.ftt-btn-text[b-gv37puy7l3] {
background: none;
border: none;
padding: 0;
font-family: 'DM Sans', system-ui, sans-serif;
font-size: 16px;
line-height: 24px;
color: rgba(26, 35, 57, 0.64);
cursor: pointer;
transition: color 0.2s ease;
}
.ftt-btn-text:hover[b-gv37puy7l3] {
color: #1A2339;
}
/* ── Error banner ── */
.ftt-err-banner[b-gv37puy7l3] {
padding: 12px 16px;
background: #FFE1DC;
border: 1px solid #DC3038;
border-radius: 8px;
font-family: 'DM Sans', system-ui, sans-serif;
font-size: 14px;
line-height: 20px;
color: #831F23;
}
/* ── Loading / processing state ── */
.ftt-loading[b-gv37puy7l3] {
display: flex;
flex-direction: column;
align-items: center;
padding: 56px 0;
gap: 16px;
}
.ftt-loading p[b-gv37puy7l3] {
font-family: 'DM Sans', system-ui, sans-serif;
font-size: 16px;
line-height: 24px;
color: rgba(26, 35, 57, 0.64);
margin: 0;
}
.ftt-spin[b-gv37puy7l3] {
font-size: 44px;
color: #1A2339;
animation: fttSpin-b-gv37puy7l3 0.9s linear infinite;
display: inline-block;
}
@keyframes fttSpin-b-gv37puy7l3 {
to { transform: rotate(360deg); }
}
/* ── Service error state ── */
.ftt-service-error[b-gv37puy7l3] {
text-align: center;
padding: 32px 0;
}
.ftt-service-error .material-icons[b-gv37puy7l3] {
font-size: 56px;
color: rgba(26, 35, 57, 0.32);
display: block;
margin-bottom: 16px;
}
.ftt-service-error h2[b-gv37puy7l3] {
font-family: 'DM Sans', system-ui, sans-serif;
font-size: 20px;
font-weight: 500;
color: #1A2339;
margin: 0 0 8px;
}
.ftt-service-error p[b-gv37puy7l3] {
font-family: 'DM Sans', system-ui, sans-serif;
font-size: 16px;
line-height: 24px;
color: rgba(26, 35, 57, 0.64);
margin: 0 0 24px;
}
/* ── Result badges ── */
.ftt-result-badge[b-gv37puy7l3] {
border-radius: 8px;
padding: 20px 24px;
font-family: 'DM Sans', system-ui, sans-serif;
}
.ftt-result-badge-title[b-gv37puy7l3] {
font-size: 18px;
line-height: 28px;
font-weight: 500;
margin: 0 0 4px;
}
.ftt-result-badge-desc[b-gv37puy7l3] {
font-size: 16px;
line-height: 24px;
margin: 0;
}
/* green-100 bg / green-200 border / green-300 (Iron Wood) text */
.ftt-result-green[b-gv37puy7l3] {
border: 1px solid #83A992;
background: #E2F3E9;
}
.ftt-result-green .ftt-result-badge-title[b-gv37puy7l3],
.ftt-result-green .ftt-result-badge-desc[b-gv37puy7l3] { color: #245E3B; }
/* poor-100 bg / poor-200 border / poor-300 text */
.ftt-result-red[b-gv37puy7l3] {
border: 1px solid #DC3038;
background: #FFE1DC;
}
.ftt-result-red .ftt-result-badge-title[b-gv37puy7l3],
.ftt-result-red .ftt-result-badge-desc[b-gv37puy7l3] { color: #831F23; }
.ftt-result-amber[b-gv37puy7l3] {
border: 1px solid #C9962B;
background: #FBF1DC;
}
.ftt-result-amber .ftt-result-badge-title[b-gv37puy7l3],
.ftt-result-amber .ftt-result-badge-desc[b-gv37puy7l3] { color: #946005; }
.ftt-result-body[b-gv37puy7l3] {
font-family: 'DM Sans', system-ui, sans-serif;
font-size: 16px;
line-height: 24px;
color: rgba(26, 35, 57, 0.64);
margin: 0;
}
/* ── Mobile responsive ── */
@media (max-width: 720px) {
.ftt-card[b-gv37puy7l3] {
gap: 32px;
padding: 24px;
border-radius: 12px;
}
.ftt-title[b-gv37puy7l3] {
font-size: 30px;
line-height: 36px;
}
.ftt-textarea[b-gv37puy7l3] {
height: 200px;
}
.ftt-actions[b-gv37puy7l3] {
gap: 12px;
}
.ftt-btn[b-gv37puy7l3] {
flex: 1 1 auto;
}
}
/* /Components/Pages/MyFoods.razor.rz.scp.css */
.my-foods-package-size[b-zvgdztcuab] {
color: #6b7280;
font-size: 0.75rem;
line-height: 1rem;
white-space: nowrap;
}
/* Internal-staff Removed lane. Deliberately off-palette from the three indigo customer tabs: amber,
a dashed outline and a small "internal" flag, so nobody mistakes it for something the brand sees.
The dashes carry the message on their own if the colours wash out (projector, print, colour vision
deficiency), which is why the treatment is not colour alone. */
.my-foods-lane-internal[b-zvgdztcuab] {
border: 1px dashed #d97706;
background-color: #fffbeb;
color: #92400e;
}
.my-foods-lane-internal:hover[b-zvgdztcuab] {
background-color: #fef3c7;
}
.my-foods-lane-internal--active[b-zvgdztcuab] {
border-style: solid;
background-color: #d97706;
color: #ffffff;
}
/* The word "internal" on the tab itself. Small and uppercase so it reads as a label on the control
rather than part of the tab's name. */
.my-foods-internal-flag[b-zvgdztcuab] {
border-radius: 9999px;
background-color: rgba(146, 64, 14, 0.12);
padding: 0.0625rem 0.375rem;
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1.2;
}
.my-foods-lane-internal--active .my-foods-internal-flag[b-zvgdztcuab] {
background-color: rgba(255, 255, 255, 0.25);
color: #ffffff;
}
/* The banner above the Removed rows, in the same amber family as the tab so the tab and the view it
opens read as one internal-only surface. */
.my-foods-internal-banner[b-zvgdztcuab] {
display: flex;
align-items: flex-start;
gap: 0.75rem;
border: 1px dashed #d97706;
border-radius: 0.75rem;
background-color: #fffbeb;
padding: 0.875rem 1rem;
color: #92400e;
}
/* /Components/Pages/OrganizationsAdmin.razor.rz.scp.css */
/* Shared hover-tooltip pattern (tooltip-wrap / tooltip-text), same as InviteHistoryRow /
QuickInvite / FoodScoutIngredientsPanel, applied to the org table's icon column headers.
Replaces the native title= attribute so the tip appears instantly on hover (no ~1s browser
delay). Centered under the header trigger, and a step larger than the base pattern
(0.875rem vs 0.75rem, roomier padding) for readability. font-weight is reset because the
bubble lives inside a , which is bold by default. */
.tooltip-wrap[b-c8pjlz2njs] { position: relative; display: inline-flex; }
.tooltip-wrap .tooltip-text[b-c8pjlz2njs] {
display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
margin-top: 0.5rem; padding: 0.625rem 0.875rem; background-color: #1e1b2e; color: white;
font-size: 0.875rem; font-weight: 500; font-style: normal; line-height: 1.45;
border-radius: 0.5rem; white-space: normal; width: max-content; max-width: 18rem;
z-index: 50; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
text-align: center;
}
.tooltip-wrap:hover .tooltip-text[b-c8pjlz2njs] { display: block; }
/* /Components/Pages/QuickInvite.razor.rz.scp.css */
/* Shared hover-tooltip pattern (tooltip-wrap / tooltip-text), matching the ingredients panels.
Used on the invite-history "resent" indicator to reveal the original send date on hover.
Anchored to the right edge of the trigger (rather than centered) because the indicator sits at
the right of the row, so the bubble opens leftward and stays on screen. */
.tooltip-wrap[b-d7neuv1ot5] { position: relative; display: inline-flex; }
.tooltip-wrap .tooltip-text[b-d7neuv1ot5] {
display: none; position: absolute; top: 100%; right: 0;
margin-top: 0.5rem; padding: 0.5rem 0.75rem; background-color: #1e1b2e; color: white;
font-size: 0.75rem; font-style: normal; line-height: 1.4; border-radius: 0.375rem;
white-space: normal; width: max-content; max-width: 18rem; z-index: 50;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
text-align: left;
}
.tooltip-wrap:hover .tooltip-text[b-d7neuv1ot5] { display: block; }
/* /Components/Pages/Waitlist.razor.rz.scp.css */
/* Waitlist page — layout, buttons, and keyframes only.
Colors, fonts, radii and shadows all come from the global design tokens
(wwwroot/css/tokens.css, loaded app-wide via App.razor). This page declares
NO palette or type tokens of its own — it inherits the brand-blue primary,
teal secondary, linen surfaces, and DM Sans / Noto Serif faces like the
rest of the app. */
.wl[b-h7t3yt39u6] {
color: var(--color-oyster-900);
background: var(--color-oyster-100);
}
/* Two product cards side by side; stack on narrow screens.
align-items:stretch (the grid default) makes both cards take the height of
the taller one so their bottom edges line up. */
.wl-products[b-h7t3yt39u6] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
align-items: stretch;
}
@media (max-width: 900px) {
.wl-products[b-h7t3yt39u6] { grid-template-columns: 1fr; }
}
/* The "Join the waitlist" CTA now uses the canonical .wise-btn--primary
(components.css) so it matches every other primary button in the app. */
/* "Leave the waitlist" text button. */
.wl-leave[b-h7t3yt39u6] {
background: none;
border: 0;
color: var(--color-oyster-500);
font-family: inherit;
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
text-decoration: underline;
}
.wl-leave:hover[b-h7t3yt39u6] { color: var(--color-oyster-700); }
@keyframes wlRise-b-h7t3yt39u6 { 0% { transform: translateY(10px); } 100% { transform: translateY(0); } }
@keyframes wlPop-b-h7t3yt39u6 { 0% { transform: scale(.97); } 100% { transform: scale(1); } }
/* /Components/Shared/AddFoodChat/AddFoodChatModal.razor.rz.scp.css */
.add-food-chat-overlay[b-6dt2w3cjcr] {
background: var(--color-oyster-200);
z-index: 90 !important;
}
.add-food-chat-shell[b-6dt2w3cjcr] {
background: var(--color-oyster-100);
color: var(--color-oyster-900);
box-shadow: 0 4px 48px rgba(0, 0, 0, 0.06);
min-height: 100dvh;
}
/* The shell has no chrome of its own any more: the top bar (avatar, title, subtitle, X) is gone,
and every header in the modal is the shared PaneHeader band inside a pane. What is left here is
the overlay, the shell surface, and the session notice. */
/* Small-screen shell chrome. Workspace-level responsive layout lives in each
workspace's own scoped stylesheet. */
@media (max-width: 640px) {
.add-food-chat-shell[b-6dt2w3cjcr] {
height: 100dvh;
}
}
/* Session-level notice strip above the workspace (an unavailable brand). Deliberately part of the
shell: it is about the session, not about whatever the workspace is doing. */
.add-food-chat-notice[b-6dt2w3cjcr] {
display: flex;
align-items: center;
gap: 8px;
margin: 0.75rem 2rem 0;
padding: 8px 12px;
border: 1px solid #fecaca;
border-radius: 10px;
background: #fef2f2;
color: #b91c1c;
font-size: 0.8125rem;
}
.add-food-chat-notice .material-icons[b-6dt2w3cjcr] {
font-size: 1.125rem;
}
.add-food-chat-notice button[b-6dt2w3cjcr] {
background: none;
border: none;
cursor: pointer;
color: inherit;
opacity: 0.7;
display: flex;
align-items: center;
}
.add-food-chat-notice button:hover[b-6dt2w3cjcr] {
opacity: 1;
}
/* /Components/Shared/AddFoodChat/BulkCatalogWorkspace.razor.rz.scp.css */
/* Portfolio-first layout: chat is a fixed rail, the canvas takes the rest. The canvas is the
only scroller, and every wide child (the product grid) scrolls inside its own box so the page
never grows a horizontal scrollbar. */
.bulk-catalog-workspace[b-n2am0k0lpr] {
padding: 1.25rem;
gap: 1rem;
overflow: hidden;
}
.bulk-catalog-rail[b-n2am0k0lpr] {
/* The assistant and the canvas split the work area evenly. Deliberately flex rather than
width: 50%: the session-history panel is a third flex item beside these two, so a percentage
of the whole workspace would hand the left side history + half, and the gaps come off the
canvas alone. Equal basis with equal growth is even at any width, collapsed history or not. */
flex: 1 1 0;
min-width: 0;
background: var(--color-oyster-100);
border: 1px solid var(--color-oyster-300);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 32px rgba(0, 0, 0, 0.05);
}
/* One-line batch status pinned above the composer: the rail's own answer to "where is this at". */
.bulk-rail-status[b-n2am0k0lpr] {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 0 1rem 0.5rem;
padding: 8px 10px;
border: 1px solid var(--color-indigo-200, #c7d2fe);
border-radius: 10px;
background: var(--color-indigo-50, #eef2ff);
color: var(--color-oyster-700, #4a4356);
font-size: 0.75rem;
line-height: 1.4;
}
.bulk-rail-status > .material-icons[b-n2am0k0lpr] {
font-size: 1rem;
color: var(--color-indigo-600);
}
.bulk-catalog-canvas[b-n2am0k0lpr] {
background: #ffffff;
border: 1px solid var(--color-oyster-300);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 32px rgba(0, 0, 0, 0.05);
}
/* The canvas header band (and the rail's) is PaneHeader's, shared with every other pane in the
modal. All that lives here is what this workspace slots INTO the band: the status pill. */
.bulk-status-pill[b-n2am0k0lpr] {
display: inline-flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
padding: 5px 12px;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
}
.bulk-status-pill > .material-icons[b-n2am0k0lpr] {
font-size: 1rem;
}
.bulk-status-busy[b-n2am0k0lpr] {
background: var(--color-indigo-50, #eef2ff);
color: var(--color-indigo-600, #4f46e5);
}
.bulk-status-good[b-n2am0k0lpr] {
background: #ecfdf5;
color: #047857;
}
.bulk-status-warn[b-n2am0k0lpr] {
background: #fffbeb;
color: #b45309;
}
/* The pill for a status with work actually running behind it. Breathing chrome beats a static
label the user has to re-read to know whether anything is happening. */
.bulk-status-live[b-n2am0k0lpr] {
animation: bulk-pill-pulse-b-n2am0k0lpr 2s ease-in-out infinite;
}
.bulk-status-live > .material-icons[b-n2am0k0lpr] {
animation: bulk-icon-pulse-b-n2am0k0lpr 2s ease-in-out infinite;
}
@keyframes bulk-pill-pulse-b-n2am0k0lpr {
0%, 100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.28); }
50% { box-shadow: 0 0 0 5px rgba(79, 70, 229, 0); }
}
@keyframes bulk-icon-pulse-b-n2am0k0lpr {
0%, 100% { opacity: 1; }
50% { opacity: 0.45; }
}
.bulk-canvas-body[b-n2am0k0lpr] {
padding: 1.25rem 1.5rem 2rem;
overflow-y: auto;
overflow-x: hidden;
}
/* The awaiting-the-file state is one small card on an otherwise empty canvas, so the
expanse behind it matches the app background instead of reading as a blank white page.
The data-bearing states keep the white canvas: their tables ARE the surface. */
.bulk-canvas-body-awaiting[b-n2am0k0lpr] {
background: var(--color-oyster-100);
}
.bulk-canvas-body-awaiting .bulk-card[b-n2am0k0lpr] {
background: #ffffff;
}
/* ── Summary tiles ─────────────────────────────────────────────────────── */
/* The bare grid is the post-import batch grid, and it holds FIVE tiles. Four columns wrapped it
4 + 1 and left the fifth stranded on a row of its own; three columns break it 3 + 2, which reads
as a shape rather than an accident. Five across is restored below, once the canvas is wide
enough to give each tile room. The staged grid sets its own column count (2 or 3). */
.bulk-stat-grid[b-n2am0k0lpr] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.75rem;
margin-bottom: 1.25rem;
}
.bulk-stat-grid-3[b-n2am0k0lpr] {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.bulk-stat-grid-2[b-n2am0k0lpr] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bulk-stat[b-n2am0k0lpr] {
border: 1px solid var(--color-oyster-200, #e7e4ea);
border-radius: 12px;
background: var(--color-oyster-50, #faf9fb);
padding: 0.75rem 1rem;
}
.bulk-stat-value[b-n2am0k0lpr] {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-oyster-900, #1a102c);
line-height: 1.1;
}
.bulk-stat-label[b-n2am0k0lpr] {
margin-top: 2px;
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--color-oyster-500, #756e82);
}
/* ── Cards ─────────────────────────────────────────────────────────────── */
.bulk-card[b-n2am0k0lpr] {
border: 1px solid var(--color-oyster-200, #e7e4ea);
border-radius: 14px;
background: #ffffff;
padding: 1.125rem 1.25rem;
margin-bottom: 1rem;
}
.bulk-card-warn[b-n2am0k0lpr] {
border-color: #fde68a;
background: #fffbeb;
}
/* Status cards (a wait, a publish pass, a pre-import summary) hold one short paragraph, so they
are capped rather than stretched across a wide canvas. */
.bulk-card-narrow[b-n2am0k0lpr] {
max-width: 46rem;
}
.bulk-card-head[b-n2am0k0lpr] {
display: flex;
align-items: flex-start;
gap: 12px;
}
.bulk-card-icon[b-n2am0k0lpr] {
color: var(--color-indigo-600, #4f46e5);
font-size: 1.25rem;
margin-top: 2px;
}
.bulk-card-title[b-n2am0k0lpr] {
font-size: 0.9375rem;
font-weight: 700;
color: var(--color-oyster-900, #1a102c);
}
.bulk-card-sub[b-n2am0k0lpr] {
margin-top: 4px;
font-size: 0.8125rem;
line-height: 1.5;
color: var(--color-oyster-600, #5d566a);
}
.bulk-upload-guidance[b-n2am0k0lpr] {
margin-top: 1rem;
padding: 0.875rem;
border: 1px solid var(--color-oyster-200, #e7e4ea);
border-radius: 12px;
background: var(--color-oyster-50, #faf9fb);
font-size: 0.8125rem;
line-height: 1.5;
color: var(--color-oyster-600, #5d566a);
}
.bulk-upload-guidance-title[b-n2am0k0lpr] {
margin: 0 0 0.25rem;
font-size: 0.8125rem;
font-weight: 700;
color: var(--color-oyster-900, #1a102c);
}
.bulk-upload-guidance p + p[b-n2am0k0lpr] {
margin-top: 0.375rem;
}
.bulk-downloads[b-n2am0k0lpr] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-top: 0.75rem;
}
.bulk-download-link[b-n2am0k0lpr] {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
padding: 8px 10px;
border: 1px solid var(--color-indigo-200, #c7d2fe);
border-radius: 10px;
background: #ffffff;
color: var(--color-indigo-700, #4338ca);
text-decoration: none;
transition: border-color 0.15s ease, background 0.15s ease;
}
/* The rows-to-fix download is generated in memory rather than served from a URL, so it is a button
wearing the same clothes as the template links above it. */
button.bulk-download-link[b-n2am0k0lpr] {
font: inherit;
text-align: left;
cursor: pointer;
}
.bulk-blocked-rows[b-n2am0k0lpr] {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--color-oyster-100, #eceae6);
}
.bulk-download-link:hover[b-n2am0k0lpr] {
border-color: var(--color-indigo-500, #6366f1);
background: var(--color-indigo-50, #eef2ff);
}
.bulk-download-link > .material-icons[b-n2am0k0lpr] {
flex-shrink: 0;
font-size: 1.125rem;
}
.bulk-download-link > span:last-child[b-n2am0k0lpr] {
display: flex;
flex-direction: column;
}
.bulk-download-link strong[b-n2am0k0lpr] {
font-size: 0.75rem;
line-height: 1.25;
}
.bulk-download-link small[b-n2am0k0lpr] {
margin-top: 1px;
font-size: 0.6875rem;
line-height: 1.25;
color: var(--color-oyster-500, #756e82);
}
/* ── Live indicators ───────────────────────────────────────────────────────
Two signals, both cheap: a ring that pulses out from the card icon, and a dot beside the title.
Between them a running batch cannot be mistaken for a frozen one, whatever the progress bar
happens to read. */
.bulk-live-icon[b-n2am0k0lpr] {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.5rem;
height: 1.5rem;
margin-top: 2px;
}
.bulk-live-icon > .material-icons[b-n2am0k0lpr] {
margin-top: 0;
}
.bulk-live-icon[b-n2am0k0lpr]::after {
content: "";
position: absolute;
inset: -2px;
border-radius: 9999px;
border: 2px solid var(--color-indigo-400, #818cf8);
animation: bulk-ring-pulse-b-n2am0k0lpr 1.8s ease-out infinite;
}
.bulk-live-dot[b-n2am0k0lpr] {
display: inline-block;
vertical-align: middle;
margin-left: 8px;
width: 7px;
height: 7px;
border-radius: 9999px;
background: var(--color-indigo-600, #4f46e5);
animation: bulk-dot-pulse-b-n2am0k0lpr 1.4s ease-in-out infinite;
}
.bulk-spin[b-n2am0k0lpr] {
animation: bulk-spin-b-n2am0k0lpr 1.1s linear infinite;
}
@keyframes bulk-ring-pulse-b-n2am0k0lpr {
0% { transform: scale(0.85); opacity: 0.55; }
70% { transform: scale(1.45); opacity: 0; }
100% { transform: scale(1.45); opacity: 0; }
}
@keyframes bulk-dot-pulse-b-n2am0k0lpr {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(0.6); opacity: 0.35; }
}
@keyframes bulk-spin-b-n2am0k0lpr {
to { transform: rotate(360deg); }
}
/* ── Progress ──────────────────────────────────────────────────────────── */
.bulk-progress-row[b-n2am0k0lpr] {
display: flex;
align-items: center;
gap: 12px;
margin-top: 1rem;
}
.bulk-progress-track[b-n2am0k0lpr] {
flex: 1;
height: 8px;
border-radius: 9999px;
background: var(--color-oyster-200, #e7e4ea);
overflow: hidden;
}
.bulk-progress-fill[b-n2am0k0lpr] {
height: 100%;
border-radius: 9999px;
background: var(--color-indigo-600, #4f46e5);
transition: width 0.3s ease;
}
.bulk-progress-indeterminate[b-n2am0k0lpr] {
width: 35%;
animation: bulk-progress-slide-b-n2am0k0lpr 1.6s ease-in-out infinite;
}
@keyframes bulk-progress-slide-b-n2am0k0lpr {
0% { margin-left: 0; }
50% { margin-left: 65%; }
100% { margin-left: 0; }
}
/* Nothing has reported back yet, so there is no honest width to draw: the track itself sweeps.
The first completed slice replaces this with a real determinate fill. */
.bulk-progress-shimmer[b-n2am0k0lpr] {
background-image: linear-gradient(
90deg,
var(--color-oyster-200, #e7e4ea) 0%,
var(--color-indigo-200, #c7d2fe) 35%,
var(--color-indigo-400, #818cf8) 50%,
var(--color-indigo-200, #c7d2fe) 65%,
var(--color-oyster-200, #e7e4ea) 100%);
background-size: 220% 100%;
animation: bulk-shimmer-sweep-b-n2am0k0lpr 1.8s linear infinite;
}
@keyframes bulk-shimmer-sweep-b-n2am0k0lpr {
0% { background-position: 120% 0; }
100% { background-position: -120% 0; }
}
.bulk-progress-label[b-n2am0k0lpr] {
flex-shrink: 0;
font-size: 0.75rem;
font-weight: 600;
color: var(--color-oyster-600, #5d566a);
}
/* ── Alerts ────────────────────────────────────────────────────────────── */
.bulk-alert[b-n2am0k0lpr] {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border-radius: 10px;
font-size: 0.8125rem;
margin-bottom: 1rem;
}
.bulk-alert-error[b-n2am0k0lpr] {
border: 1px solid #fecaca;
background: #fef2f2;
color: #b91c1c;
}
.bulk-alert > .material-icons[b-n2am0k0lpr] {
font-size: 1.125rem;
}
.bulk-alert-dismiss[b-n2am0k0lpr] {
background: none;
border: none;
cursor: pointer;
color: inherit;
opacity: 0.7;
display: flex;
align-items: center;
}
.bulk-alert-dismiss:hover[b-n2am0k0lpr] {
opacity: 1;
}
/* ── Pre-import: what happens once the mapping is settled ──────────────── */
.bulk-steps[b-n2am0k0lpr] {
margin: 1.125rem 0 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
counter-reset: bulk-step;
}
.bulk-step[b-n2am0k0lpr] {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.8125rem;
color: var(--color-oyster-500, #756e82);
}
.bulk-step > span:last-child[b-n2am0k0lpr] {
display: flex;
flex-direction: column;
}
.bulk-step strong[b-n2am0k0lpr] {
font-size: 0.8125rem;
line-height: 1.3;
}
.bulk-step small[b-n2am0k0lpr] {
margin-top: 1px;
font-size: 0.75rem;
line-height: 1.3;
font-weight: 400;
color: var(--color-oyster-500, #756e82);
}
.bulk-step-marker[b-n2am0k0lpr] {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.5rem;
height: 1.5rem;
border-radius: 9999px;
background: var(--color-oyster-100, #f2f0f4);
color: var(--color-oyster-500, #756e82);
}
.bulk-step-marker > .material-icons[b-n2am0k0lpr] {
font-size: 0.9375rem;
}
.bulk-step-active[b-n2am0k0lpr] {
color: var(--color-oyster-900, #1a102c);
font-weight: 600;
}
.bulk-step-active .bulk-step-marker[b-n2am0k0lpr] {
background: var(--color-indigo-50, #eef2ff);
color: var(--color-indigo-600, #4f46e5);
}
.bulk-step-done .bulk-step-marker[b-n2am0k0lpr] {
background: #ecfdf5;
color: #047857;
}
.bulk-staged-actions[b-n2am0k0lpr] {
display: flex;
justify-content: flex-start;
margin-top: 1rem;
padding-top: 0.875rem;
border-top: 1px solid var(--color-oyster-200, #e7e4ea);
}
/* ── The done moment ───────────────────────────────────────────────────────
The batch has an ending: a success mark, one sentence, and the way onward. Deliberately the
loudest thing on the canvas, and only for as long as the user leaves it up. */
.bulk-done[b-n2am0k0lpr] {
border: 1px solid var(--color-indigo-200, #c7d2fe);
border-radius: 16px;
background: linear-gradient(180deg, var(--color-indigo-50, #eef2ff) 0%, #ffffff 70%);
padding: 1.5rem;
margin-bottom: 1rem;
text-align: center;
}
.bulk-done-badge[b-n2am0k0lpr] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border-radius: 9999px;
background: #ecfdf5;
color: #047857;
box-shadow: 0 0 0 6px rgba(4, 120, 87, 0.06);
}
.bulk-done-badge > .material-icons[b-n2am0k0lpr] {
font-size: 1.75rem;
}
.bulk-done-title[b-n2am0k0lpr] {
margin-top: 0.75rem;
font-size: 1.125rem;
font-weight: 700;
color: var(--color-oyster-900, #1a102c);
}
.bulk-done-sub[b-n2am0k0lpr] {
margin: 4px auto 0;
max-width: 34rem;
font-size: 0.8125rem;
line-height: 1.5;
color: var(--color-oyster-600, #5d566a);
}
/* The "not everything published" line. Quieter than the headline, but it has to be readable:
it is the only place the user is told some products are still parked. */
.bulk-done-pending[b-n2am0k0lpr] {
margin-top: 0.5rem;
color: var(--color-oyster-700, #4a4356);
}
/* A count inside a sentence that navigates. A button, not an anchor, because the chat has to be
torn down before the portfolio loads. */
.bulk-done-link[b-n2am0k0lpr] {
display: inline;
padding: 0;
border: none;
background: none;
font: inherit;
font-weight: 600;
color: var(--color-primary, #4f46e5);
text-decoration: underline;
cursor: pointer;
}
.bulk-done-link:hover[b-n2am0k0lpr] {
color: var(--color-indigo-700, #4338ca);
}
.bulk-done-actions[b-n2am0k0lpr] {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 1.125rem;
}
.bulk-btn-primary[b-n2am0k0lpr] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 18px;
border: none;
border-radius: 9999px;
background: var(--color-indigo-600, #4f46e5);
color: #ffffff;
font-size: 0.8125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s ease;
}
.bulk-btn-primary:hover:not(:disabled)[b-n2am0k0lpr] {
background: var(--color-indigo-700, #4338ca);
}
.bulk-btn-primary > .material-icons[b-n2am0k0lpr] {
font-size: 1rem;
}
.bulk-btn-primary:disabled[b-n2am0k0lpr] {
opacity: 0.5;
cursor: default;
}
/* ── Leftovers ─────────────────────────────────────────────────────────── */
.bulk-leftovers[b-n2am0k0lpr] {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--color-oyster-200, #e7e4ea);
}
.bulk-leftovers-lead[b-n2am0k0lpr] {
font-size: 0.8125rem;
color: var(--color-oyster-700, #4a4356);
}
.bulk-leftovers-list[b-n2am0k0lpr] {
margin: 0.5rem 0 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 4px;
}
.bulk-leftovers-list li[b-n2am0k0lpr] {
display: flex;
align-items: baseline;
gap: 8px;
font-size: 0.8125rem;
color: var(--color-oyster-800, #302842);
}
.bulk-leftover-upc[b-n2am0k0lpr] {
font-variant-numeric: tabular-nums;
font-size: 0.75rem;
color: var(--color-oyster-500, #756e82);
}
.bulk-leftovers-more[b-n2am0k0lpr] {
margin-top: 4px;
font-size: 0.75rem;
color: var(--color-oyster-500, #756e82);
}
.bulk-leftovers-actions[b-n2am0k0lpr] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 0.875rem;
}
.bulk-btn-secondary[b-n2am0k0lpr],
.bulk-btn-quiet[b-n2am0k0lpr] {
padding: 7px 14px;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease;
}
.bulk-btn-secondary[b-n2am0k0lpr] {
border: 1px solid var(--color-oyster-300);
background: #ffffff;
color: var(--color-oyster-700, #4a4356);
}
.bulk-btn-secondary:hover:not(:disabled)[b-n2am0k0lpr] {
border-color: var(--color-indigo-600, #4f46e5);
color: var(--color-indigo-600, #4f46e5);
}
.bulk-btn-quiet[b-n2am0k0lpr] {
border: none;
background: transparent;
color: var(--color-oyster-600, #5d566a);
}
.bulk-btn-quiet:hover:not(:disabled)[b-n2am0k0lpr] {
background: rgba(26, 16, 44, 0.06);
}
.bulk-btn-secondary:disabled[b-n2am0k0lpr],
.bulk-btn-quiet:disabled[b-n2am0k0lpr] {
opacity: 0.5;
cursor: default;
}
/* ── Product grid ──────────────────────────────────────────────────────── */
.bulk-grid-scroll[b-n2am0k0lpr] {
margin-top: 1rem;
max-height: 26rem;
overflow: auto;
border: 1px solid var(--color-oyster-200, #e7e4ea);
border-radius: 12px;
}
.bulk-grid[b-n2am0k0lpr] {
width: 100%;
border-collapse: collapse;
font-size: 0.8125rem;
}
.bulk-grid thead th[b-n2am0k0lpr] {
position: sticky;
top: 0;
z-index: 1;
background: var(--color-oyster-50, #faf9fb);
text-align: left;
padding: 8px 12px;
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--color-oyster-500, #756e82);
border-bottom: 1px solid var(--color-oyster-200, #e7e4ea);
}
.bulk-grid tbody td[b-n2am0k0lpr] {
padding: 8px 12px;
border-bottom: 1px solid var(--color-oyster-100, #f2f0f4);
color: var(--color-oyster-800, #302842);
vertical-align: middle;
}
.bulk-grid tbody tr:last-child td[b-n2am0k0lpr] {
border-bottom: none;
}
.bulk-grid-row-col[b-n2am0k0lpr] {
width: 4rem;
color: var(--color-oyster-500, #756e82);
font-variant-numeric: tabular-nums;
}
.bulk-grid-upc[b-n2am0k0lpr] {
font-variant-numeric: tabular-nums;
color: var(--color-oyster-600, #5d566a);
}
.bulk-grid-link[b-n2am0k0lpr] {
color: var(--color-indigo-600, #4f46e5);
font-weight: 600;
text-decoration: none;
}
.bulk-grid-link:hover[b-n2am0k0lpr] {
text-decoration: underline;
}
.bulk-grid-name[b-n2am0k0lpr] {
font-weight: 600;
color: var(--color-oyster-700, #4a4356);
}
/* The list is real, it is just not the user's to open yet. Held back rather than hidden, so the
publish pass has something honest to show. */
.bulk-grid-publishing[b-n2am0k0lpr] {
opacity: 0.7;
}
.bulk-tag[b-n2am0k0lpr] {
display: inline-block;
padding: 2px 10px;
border-radius: 9999px;
font-size: 0.6875rem;
font-weight: 600;
white-space: nowrap;
}
.bulk-tag-good[b-n2am0k0lpr] {
background: #ecfdf5;
color: #047857;
}
.bulk-tag-warn[b-n2am0k0lpr] {
background: #fffbeb;
color: #b45309;
}
/* ── Row issues ────────────────────────────────────────────────────────── */
.bulk-issue-list[b-n2am0k0lpr] {
margin: 1rem 0 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 6px;
max-height: 16rem;
overflow-y: auto;
}
.bulk-issue[b-n2am0k0lpr] {
display: flex;
gap: 10px;
font-size: 0.8125rem;
color: var(--color-oyster-700, #4a4356);
}
.bulk-issue-note[b-n2am0k0lpr] {
color: var(--color-oyster-500, #756e82);
}
.bulk-issue-row[b-n2am0k0lpr] {
flex-shrink: 0;
min-width: 4.5rem;
font-weight: 600;
color: var(--color-oyster-500, #756e82);
font-variant-numeric: tabular-nums;
}
.bulk-issue-more[b-n2am0k0lpr] {
margin-top: 8px;
font-size: 0.75rem;
color: var(--color-oyster-500, #756e82);
}
/* ── Reduced motion ────────────────────────────────────────────────────────
Every liveness cue above degrades to a static state that still reads as "in progress": the
shimmer becomes a flat indigo track, the indeterminate bar a full one, and the pulses stop. */
@media (prefers-reduced-motion: reduce) {
.bulk-status-live[b-n2am0k0lpr],
.bulk-status-live > .material-icons[b-n2am0k0lpr],
.bulk-live-dot[b-n2am0k0lpr],
.bulk-spin[b-n2am0k0lpr],
.bulk-progress-indeterminate[b-n2am0k0lpr],
.bulk-progress-shimmer[b-n2am0k0lpr] {
animation: none;
}
.bulk-live-icon[b-n2am0k0lpr]::after {
animation: none;
opacity: 0.4;
}
.bulk-progress-indeterminate[b-n2am0k0lpr] {
width: 100%;
opacity: 0.6;
}
.bulk-progress-shimmer[b-n2am0k0lpr] {
background-image: none;
background: var(--color-indigo-200, #c7d2fe);
}
.bulk-progress-fill[b-n2am0k0lpr] {
transition: none;
}
}
/* ── Responsive: the rail narrows, then stacks above the canvas ─────────── */
/* Wide enough for all five batch tiles on one row. The staged grid's own column counts are
restated because this block sits after them in the cascade. */
@media (min-width: 1700px) {
.bulk-stat-grid[b-n2am0k0lpr] {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.bulk-stat-grid-3[b-n2am0k0lpr] {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.bulk-stat-grid-2[b-n2am0k0lpr] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 1400px) {
/* The rail is a percentage now, so it needs no narrowing of its own here; only the canvas
content that runs out of room does. */
.bulk-stat-grid[b-n2am0k0lpr] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bulk-card-narrow[b-n2am0k0lpr] {
max-width: none;
}
}
@media (max-width: 1180px) {
.bulk-catalog-workspace[b-n2am0k0lpr] {
padding: 0;
gap: 0;
}
.bulk-catalog-rail[b-n2am0k0lpr],
.bulk-catalog-canvas[b-n2am0k0lpr] {
border-radius: 0;
border-top: 0;
border-bottom: 0;
}
}
@media (max-width: 900px) {
.bulk-catalog-workspace[b-n2am0k0lpr] {
flex-direction: column;
}
.bulk-catalog-rail[b-n2am0k0lpr] {
/* Stacked, so the even side-by-side split does not apply: the rail is a fixed slice of the
height and the canvas takes the rest. Without resetting flex here, the basis and growth
from the base rule would apply to the vertical axis and swallow this height. */
flex: 0 0 auto;
width: 100%;
min-width: 0;
height: 40vh;
border-left: 0;
border-right: 0;
}
.bulk-canvas-body[b-n2am0k0lpr] {
padding: 1rem 1rem 1.5rem;
}
}
@media (max-width: 640px) {
.bulk-stat-grid[b-n2am0k0lpr] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bulk-downloads[b-n2am0k0lpr] {
grid-template-columns: 1fr;
}
}
/* /Components/Shared/AddFoodChat/ChatComposer.razor.rz.scp.css */
.add-food-composer[b-ajjuu756yk] {
position: relative;
z-index: 2;
padding: 1.25rem 2.5rem max(1.5rem, calc(env(safe-area-inset-bottom) + 1.5rem));
background: #ffffff;
border-top: 1px solid var(--color-oyster-300);
}
.add-food-composer-stack[b-ajjuu756yk] {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.add-food-suggestion-row[b-ajjuu756yk] {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.add-food-composer-suggestion-chip[b-ajjuu756yk] {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.45rem 0.85rem;
border-radius: 999px;
border: 1px solid var(--color-indigo-200);
background: var(--color-primary-soft);
color: var(--color-indigo-600);
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
}
.add-food-composer-suggestion-chip:hover:not(:disabled)[b-ajjuu756yk] {
background: var(--color-indigo-100);
border-color: var(--color-indigo-300);
}
.add-food-composer-suggestion-chip:active:not(:disabled)[b-ajjuu756yk] {
transform: translateY(1px);
}
.add-food-composer-suggestion-chip:disabled[b-ajjuu756yk] {
opacity: 0.55;
cursor: not-allowed;
}
/* Rejected-attachment notice: unsupported type, over the per-kind size cap, or an
unreadable pick. Material icons default to 24px, which towers over the 13px copy,
so both glyphs are sized down and given the same 19px line box as the text — with
align-items:flex-start that keeps the icon optically centred on the first line
(rather than the row's full height) when a multi-file rejection wraps. */
.add-food-unsupported-row[b-ajjuu756yk] {
display: flex;
align-items: flex-start;
gap: 0.5rem;
padding: 0.55rem 0.6rem 0.55rem 0.7rem;
border-radius: 10px;
border: 1px solid var(--color-warning-200);
background: var(--color-warning-100);
color: var(--color-warning-text);
}
.add-food-unsupported-row > .material-icons[b-ajjuu756yk] {
font-size: 18px;
line-height: 19px;
flex-shrink: 0;
color: var(--color-warning-600);
}
.add-food-unsupported-text[b-ajjuu756yk] {
flex: 1;
min-width: 0;
font-size: 13px;
line-height: 19px;
font-weight: 600;
}
.add-food-unsupported-dismiss[b-ajjuu756yk] {
width: 22px;
height: 22px;
border-radius: 999px;
color: var(--color-warning-text);
opacity: 0.6;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.12s ease, opacity 0.12s ease;
}
.add-food-unsupported-dismiss:hover[b-ajjuu756yk] {
background: var(--color-warning-200);
opacity: 1;
}
.add-food-unsupported-dismiss .material-icons[b-ajjuu756yk] {
font-size: 15px;
line-height: 19px;
}
.add-food-attachments-row[b-ajjuu756yk] {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.add-food-attachment-chip[b-ajjuu756yk] {
display: inline-flex;
align-items: center;
gap: 0.5rem;
height: 38px;
padding: 0 0.5rem 0 0.35rem;
border-radius: 999px;
border: 1px solid var(--color-oyster-300);
background: var(--color-oyster-100);
color: var(--color-oyster-900);
font-size: 12px;
font-weight: 600;
max-width: 240px;
}
.add-food-attachment-chip-thumb[b-ajjuu756yk] {
position: relative;
width: 28px;
height: 28px;
border-radius: 999px;
background: var(--color-oyster-200);
color: var(--color-indigo-600);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
}
.add-food-attachment-chip-thumb img[b-ajjuu756yk] {
width: 100%;
height: 100%;
object-fit: cover;
}
.add-food-attachment-chip-thumb .material-icons[b-ajjuu756yk] {
font-size: 18px;
}
.add-food-attachment-chip-spinner[b-ajjuu756yk] {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(249, 248, 243, 0.78);
color: var(--color-indigo-600);
}
.add-food-attachment-chip-spinner .material-icons[b-ajjuu756yk] {
font-size: 16px;
}
.add-food-attachment-chip-name[b-ajjuu756yk] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.add-food-attachment-chip-remove[b-ajjuu756yk] {
width: 22px;
height: 22px;
border-radius: 999px;
color: var(--color-oyster-500);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.12s ease, color 0.12s ease;
}
.add-food-attachment-chip-remove:hover:not(:disabled)[b-ajjuu756yk] {
background: var(--color-oyster-200);
color: var(--color-oyster-900);
}
.add-food-attachment-chip-remove:disabled[b-ajjuu756yk] {
opacity: 0.4;
cursor: not-allowed;
}
.add-food-attachment-chip-remove .material-icons[b-ajjuu756yk] {
font-size: 16px;
}
.add-food-input-row[b-ajjuu756yk] {
display: flex;
align-items: center;
gap: 0.5rem;
}
.add-food-input-wrap[b-ajjuu756yk] {
position: relative;
flex: 1;
min-width: 0;
display: flex;
align-items: flex-end;
gap: 0.5rem;
min-height: 52px;
padding: 22px 12px 10px 14px;
background: var(--color-oyster-100);
border: 1.5px solid var(--color-oyster-300);
border-radius: 14px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.add-food-input-wrap:focus-within[b-ajjuu756yk] {
border-color: var(--color-indigo-400);
box-shadow: 0 0 0 3px rgba(37, 80, 124, 0.15);
}
.add-food-input-label[b-ajjuu756yk] {
position: absolute;
top: 6px;
left: 14px;
color: var(--color-oyster-500);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
pointer-events: none;
}
.add-food-input-wrap:focus-within .add-food-input-label[b-ajjuu756yk] {
color: var(--color-indigo-600);
}
.add-food-input[b-ajjuu756yk] {
flex: 1;
min-width: 0;
/* `field-sizing: content` auto-grows the textarea as the user types, up to
max-height — replaces a JS resize handler that previously ran on every
keystroke. Supported in Chrome/Edge 123+, Safari 17.4+, Firefox 137+. */
field-sizing: content;
min-height: 1.35em;
max-height: 300px;
resize: none;
overflow-y: auto;
border: 0;
outline: 0;
background: transparent;
color: var(--color-oyster-900);
font-size: 14px;
line-height: 1.35;
padding: 0;
box-sizing: border-box;
}
/* Hide the first-turn suggestion chip once the user starts typing. Pure CSS
replaces the per-keystroke server round-trip that used to drive this. */
.add-food-composer-stack:not(:has(.add-food-input:placeholder-shown)) .add-food-suggestion-row[b-ajjuu756yk] {
display: none;
}
.add-food-input[b-ajjuu756yk]::placeholder {
color: var(--color-oyster-400);
}
.add-food-input-divider[b-ajjuu756yk] {
width: 1px;
height: 18px;
background: var(--color-oyster-300);
flex-shrink: 0;
}
.add-food-input-icon[b-ajjuu756yk] {
width: 30px;
height: 30px;
border-radius: 999px;
color: var(--color-oyster-500);
display: flex;
align-items: center;
justify-content: center;
transition: background 0.12s ease, color 0.12s ease;
flex-shrink: 0;
}
.add-food-input-icon:hover[b-ajjuu756yk] {
background: var(--color-oyster-200);
color: var(--color-indigo-600);
}
.add-food-input-icon .material-icons[b-ajjuu756yk] {
font-size: 19px;
}
.add-food-send-button[b-ajjuu756yk] {
width: 48px;
height: 48px;
border-radius: 999px;
background: var(--color-indigo-600);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.15s ease, opacity 0.15s ease;
}
.add-food-send-button:hover[b-ajjuu756yk] {
background: var(--color-indigo-700);
}
.add-food-send-button:disabled[b-ajjuu756yk],
.add-food-input-icon:disabled[b-ajjuu756yk] {
opacity: 0.45;
cursor: not-allowed;
}
@media (max-width: 640px) {
.add-food-composer[b-ajjuu756yk] {
padding: 0.75rem 0.875rem max(1rem, calc(env(safe-area-inset-bottom) + 1rem));
}
}
/* /Components/Shared/AddFoodChat/ChatHistoryPanel.razor.rz.scp.css */
.add-food-history[b-uko8puykau] {
background: #ffffff;
border: 1px solid var(--color-oyster-300);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 32px rgba(0, 0, 0, 0.05);
}
.add-food-history-collapsed[b-uko8puykau] {
align-self: stretch;
}
/* The header band itself is PaneHeader's, shared with every other pane in the modal. Only the
toggle inside it is ours. */
.add-food-history-icon[b-uko8puykau] {
width: 30px;
height: 30px;
border-radius: 999px;
color: var(--color-oyster-500);
display: flex;
align-items: center;
justify-content: center;
}
.add-food-history-icon:hover[b-uko8puykau] {
background: var(--color-oyster-200);
color: var(--color-indigo-600);
}
.add-food-history-new[b-uko8puykau] {
background: var(--color-indigo-600);
color: #ffffff;
}
.add-food-history-new:hover[b-uko8puykau] {
background: var(--color-indigo-700);
}
.add-food-history-empty[b-uko8puykau],
.add-food-history-item-meta[b-uko8puykau] {
color: var(--color-oyster-500);
}
.add-food-history-item[b-uko8puykau] {
border: 1px solid transparent;
color: var(--color-oyster-800);
}
.add-food-history-item:hover[b-uko8puykau] {
background: var(--color-oyster-100);
}
.add-food-history-item-active[b-uko8puykau] {
background: var(--color-primary-soft);
border-color: var(--color-indigo-200);
}
.add-food-history-item-title[b-uko8puykau] {
color: var(--color-oyster-900);
}
@media (max-width: 1180px) {
.add-food-history[b-uko8puykau] {
border-radius: 0;
border-top: 0;
border-bottom: 0;
}
}
@media (max-width: 900px) {
.add-food-history[b-uko8puykau] {
display: none;
}
}
/* /Components/Shared/AddFoodChat/ChatTranscript.razor.rz.scp.css */
.add-food-transcript[b-nnx55b2dbr] {
position: relative;
padding: 2rem 2.5rem;
background: var(--color-oyster-100);
}
.add-food-welcome[b-nnx55b2dbr] {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
}
.add-food-welcome-logo-wrap[b-nnx55b2dbr] {
position: relative;
width: 72px;
height: 72px;
margin-bottom: 1.75rem;
display: flex;
align-items: center;
justify-content: center;
}
.add-food-welcome-ring[b-nnx55b2dbr] {
position: absolute;
left: 50%;
top: 50%;
width: 72px;
height: 72px;
margin-left: -36px;
margin-top: -36px;
border-radius: 999px;
border: 1px solid rgba(37, 80, 124, 0.4);
box-shadow: 0 0 16px rgba(37, 80, 124, 0.25), 0 0 32px rgba(37, 80, 124, 0.15);
animation: addFoodRingBloom-b-nnx55b2dbr 5s cubic-bezier(0.2, 0.85, 0.25, 1) infinite;
}
.add-food-welcome-ring:nth-child(2)[b-nnx55b2dbr] {
animation-delay: -1.66s;
}
.add-food-welcome-ring:nth-child(3)[b-nnx55b2dbr] {
animation-delay: -3.33s;
}
.add-food-welcome-logo[b-nnx55b2dbr] {
position: relative;
z-index: 1;
width: 72px;
height: 72px;
border-radius: 999px;
background: var(--color-indigo-600);
padding: 14px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 24px rgba(37, 80, 124, 0.35), 0 0 48px rgba(37, 80, 124, 0.2);
}
.add-food-welcome-logo img[b-nnx55b2dbr] {
width: 100%;
height: 100%;
filter: brightness(0) invert(1);
}
.add-food-welcome p[b-nnx55b2dbr] {
color: var(--color-oyster-500);
font-size: 0.9375rem;
line-height: 1.6;
margin: 0;
}
.add-food-msg-row[b-nnx55b2dbr] {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 2px 0;
border-radius: 8px;
margin-top: 14px;
}
.add-food-msg-row:hover[b-nnx55b2dbr] {
background: rgba(0, 0, 0, 0.025);
}
.add-food-msg-avatar-col[b-nnx55b2dbr] {
width: 36px;
min-width: 36px;
padding-top: 2px;
}
.add-food-assistant-avatar[b-nnx55b2dbr],
.add-food-user-avatar[b-nnx55b2dbr] {
width: 36px;
height: 36px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.add-food-assistant-avatar[b-nnx55b2dbr] {
background: var(--color-indigo-600);
padding: 7px;
box-shadow: 0 0 0 1px rgba(37, 80, 124, 0.18);
}
.add-food-assistant-avatar img[b-nnx55b2dbr] {
width: 100%;
height: 100%;
filter: brightness(0) invert(1);
}
.add-food-user-avatar[b-nnx55b2dbr] {
background: var(--color-oyster-200);
border: 1px solid var(--color-oyster-300);
color: var(--color-indigo-600);
font-size: 11px;
font-weight: 800;
}
.add-food-msg-content[b-nnx55b2dbr] {
flex: 1;
min-width: 0;
padding-top: 1px;
}
.add-food-msg-meta[b-nnx55b2dbr] {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 2px;
line-height: 1;
}
.add-food-msg-name[b-nnx55b2dbr] {
font-size: 14px;
font-weight: 800;
}
.add-food-msg-name-assistant[b-nnx55b2dbr] {
color: var(--color-indigo-600);
}
.add-food-msg-name-user[b-nnx55b2dbr] {
color: var(--color-oyster-800);
}
.add-food-msg-time[b-nnx55b2dbr] {
font-size: 11px;
color: var(--color-oyster-500);
}
.add-food-msg-text[b-nnx55b2dbr] {
max-width: 760px;
color: var(--color-oyster-800);
font-size: 14px;
line-height: 1.6;
white-space: pre-wrap;
}
.add-food-rich-text[b-nnx55b2dbr] {
white-space: normal;
}
/* ::deep is required because the child elements below are generated by Markdig
inside a MarkupString and don't carry Blazor's scoped-CSS attribute. Without
::deep, none of these rules match. */
.add-food-rich-text[b-nnx55b2dbr] :is(p, ul, ol, blockquote, pre) {
margin: 0 0 1rem;
}
.add-food-rich-text[b-nnx55b2dbr] :is(p, ul, ol, blockquote, pre):last-child {
margin-bottom: 0;
}
.add-food-rich-text[b-nnx55b2dbr] strong {
color: var(--color-oyster-900);
font-weight: 800;
}
.add-food-rich-text[b-nnx55b2dbr] em {
color: var(--color-oyster-600);
}
.add-food-rich-text[b-nnx55b2dbr] :is(ul, ol) {
padding-left: 1.2rem;
}
.add-food-rich-text[b-nnx55b2dbr] li {
margin: 0.15rem 0;
}
.add-food-rich-text[b-nnx55b2dbr] code {
background: var(--color-oyster-200);
color: var(--color-indigo-600);
border-radius: 0.25rem;
padding: 0.1rem 0.3rem;
font-size: 0.9em;
}
.add-food-rich-text[b-nnx55b2dbr] a {
color: var(--color-indigo-600);
text-decoration: underline;
}
.add-food-rich-text[b-nnx55b2dbr] table {
width: 100%;
border-collapse: collapse;
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--color-oyster-300);
margin: 0 0 1rem;
font-size: 13px;
}
.add-food-rich-text[b-nnx55b2dbr] table:last-child {
margin-bottom: 0;
}
.add-food-rich-text[b-nnx55b2dbr] thead th {
background: var(--color-oyster-200);
color: var(--color-oyster-800);
font-weight: 800;
text-align: left;
padding: 0.5rem 0.75rem;
border-bottom: 1px solid var(--color-oyster-300);
}
.add-food-rich-text[b-nnx55b2dbr] tbody td {
padding: 0.4rem 0.75rem;
border-bottom: 1px solid var(--color-oyster-200);
color: var(--color-oyster-800);
}
.add-food-rich-text[b-nnx55b2dbr] tbody tr:last-child td {
border-bottom: none;
}
.add-food-rich-text[b-nnx55b2dbr] tbody tr:nth-child(even) {
background: rgba(37, 80, 124, 0.03);
}
.add-food-attachments[b-nnx55b2dbr] {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 0.35rem;
}
.add-food-tool-chips[b-nnx55b2dbr] {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.5rem;
margin-bottom: 0.65rem;
}
.add-food-attachment-preview[b-nnx55b2dbr] {
width: 144px;
height: 144px;
object-fit: cover;
border-radius: 10px;
border: 1px solid var(--color-oyster-300);
background: #ffffff;
}
.add-food-file-pill[b-nnx55b2dbr],
.add-food-tool-chip[b-nnx55b2dbr] {
display: inline-flex;
align-items: center;
gap: 0.35rem;
min-width: 0;
border-radius: 999px;
border: 1px solid var(--color-oyster-300);
background: var(--color-oyster-200);
color: var(--color-oyster-600);
font-size: 12px;
font-weight: 700;
padding: 0.35rem 0.65rem;
}
.add-food-file-pill span:last-child[b-nnx55b2dbr] {
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.add-food-tool-chip-active[b-nnx55b2dbr] {
background: var(--color-primary-soft);
border-color: var(--color-indigo-200);
color: var(--color-indigo-600);
}
.add-food-suggestions[b-nnx55b2dbr] {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.65rem;
}
.add-food-suggestion-chip[b-nnx55b2dbr] {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.45rem 0.85rem;
border-radius: 999px;
border: 1px solid var(--color-indigo-200);
background: var(--color-primary-soft);
color: var(--color-indigo-600);
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
}
.add-food-suggestion-chip:hover:not(:disabled)[b-nnx55b2dbr] {
background: var(--color-indigo-100);
border-color: var(--color-indigo-300);
}
.add-food-suggestion-chip:active:not(:disabled)[b-nnx55b2dbr] {
transform: translateY(1px);
}
.add-food-suggestion-chip:disabled[b-nnx55b2dbr] {
opacity: 0.55;
cursor: not-allowed;
}
.add-food-suggestion-chip-edit[b-nnx55b2dbr] {
background: #fef3c7;
border-color: #fcd34d;
color: #92400e;
}
.add-food-suggestion-chip-edit:hover:not(:disabled)[b-nnx55b2dbr] {
background: #fde68a;
border-color: #fbbf24;
}
.add-food-review-parse-chip[b-nnx55b2dbr],
.add-food-suggestion-chip-attest[b-nnx55b2dbr] {
background: #ecfdf5;
border-color: #6ee7b7;
color: #065f46;
}
.add-food-review-parse-chip:hover:not(:disabled)[b-nnx55b2dbr],
.add-food-suggestion-chip-attest:hover:not(:disabled)[b-nnx55b2dbr] {
background: #d1fae5;
border-color: #34d399;
}
.add-food-narration-row[b-nnx55b2dbr] {
display: flex;
margin-top: 12px;
padding-left: 46px;
}
.add-food-system-note[b-nnx55b2dbr] {
color: var(--color-oyster-500);
font-size: 12px;
font-style: italic;
}
/* Positioning wrapper only; the dots themselves come from the shared
component. */
.add-food-typing[b-nnx55b2dbr] {
display: inline-flex;
align-items: center;
padding-top: 6px;
}
/* Trailing indicator rendered at the tail of the live assistant bubble (after any
streamed text or tool chips). A little top breathing room separates it from the
content above when the bubble already has text. */
.add-food-typing-inline[b-nnx55b2dbr] {
margin-top: 2px;
}
@keyframes addFoodRingBloom-b-nnx55b2dbr {
0% { transform: scale(1); opacity: 0.48; }
55% { opacity: 0.16; }
100% { transform: scale(3.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.add-food-welcome-ring[b-nnx55b2dbr] {
animation: none;
}
}
@media (max-width: 640px) {
.add-food-transcript[b-nnx55b2dbr] {
padding: 1rem 0.875rem;
}
.add-food-msg-avatar-col[b-nnx55b2dbr] {
width: 30px;
min-width: 30px;
}
.add-food-assistant-avatar[b-nnx55b2dbr],
.add-food-user-avatar[b-nnx55b2dbr] {
width: 30px;
height: 30px;
}
}
/* /Components/Shared/AddFoodChat/EndOfSessionSummary.razor.rz.scp.css */
.add-food-session-summary[b-z2isqwr33x] {
background: #ffffff;
}
.add-food-session-summary h2[b-z2isqwr33x],
.add-food-session-name[b-z2isqwr33x] {
color: var(--color-oyster-900);
}
.add-food-session-summary p[b-z2isqwr33x],
.add-food-session-meta[b-z2isqwr33x] {
color: var(--color-oyster-500);
}
.add-food-session-card[b-z2isqwr33x] {
background: #ffffff;
border: 1px solid var(--color-oyster-300);
}
.add-food-session-avatar[b-z2isqwr33x] {
background: var(--color-oyster-200);
color: var(--color-indigo-600);
}
.add-food-session-link[b-z2isqwr33x] {
color: var(--color-indigo-600);
}
.add-food-session-link:hover[b-z2isqwr33x] {
color: var(--color-indigo-700);
}
.add-food-session-button[b-z2isqwr33x] {
background: var(--color-indigo-600);
color: #ffffff;
}
.add-food-session-button:hover[b-z2isqwr33x] {
background: var(--color-indigo-700);
}
/* /Components/Shared/AddFoodChat/FoodChatStepTracker.razor.rz.scp.css */
.step-tracker[b-ifvqiy6n6z] {
display: flex;
align-items: center;
justify-content: center;
padding: 10px 24px;
gap: 0;
border-bottom: 1px solid var(--color-oyster-300);
background: #ffffff;
min-height: 52px;
}
.step-item[b-ifvqiy6n6z] {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.step-circle[b-ifvqiy6n6z] {
width: 28px;
height: 28px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.2s ease, border-color 0.2s ease;
}
.step-label[b-ifvqiy6n6z] {
font-size: 0.625rem;
font-weight: 600;
white-space: nowrap;
line-height: 1;
}
.step-connector[b-ifvqiy6n6z] {
width: 24px;
height: 2px;
flex-shrink: 0;
margin-bottom: 16px;
border-radius: 1px;
transition: background 0.2s ease;
}
@media (min-width: 900px) {
.step-connector[b-ifvqiy6n6z] {
width: 36px;
}
}
@media (min-width: 1180px) {
.step-connector[b-ifvqiy6n6z] {
width: 48px;
}
}
@media (max-width: 640px) {
.step-tracker[b-ifvqiy6n6z] {
padding: 8px 12px;
}
.step-label[b-ifvqiy6n6z] {
display: none;
}
.step-connector[b-ifvqiy6n6z] {
width: 16px;
margin-bottom: 0;
}
}
/* /Components/Shared/AddFoodChat/PaneHeader.razor.rz.scp.css */
/* THE single header system for the Add-with-AI modal. Every pane's header band is this one
rule set: same 60px height, same type scale, same padding, same white background, same
bottom border. Change it here and all four panes move together, which is the entire point
of the component existing (see PaneHeader.razor for why a shared CSS class could not do
this job under Blazor's scoped CSS).
Per-pane content (status pills, the history toggle, the count chip) is passed in as a
RenderFragment and keeps the CALLING component's scoped styles. Do not add pane-specific
rules to this file. */
.pane-header[b-du5zvni2mb] {
display: flex;
align-items: center;
gap: 0.75rem;
min-height: 60px;
padding: 0.625rem 1.25rem;
background: #ffffff;
border-bottom: 1px solid var(--color-oyster-300);
flex-shrink: 0;
}
/* A pane too narrow for the full gutter (the 48px collapsed history rail). */
.pane-header-compact[b-du5zvni2mb] {
padding: 0.625rem 0.5rem;
justify-content: center;
}
/* For a pane that scrolls under its own header. Released on small screens, where the pane is
short enough that a pinned band costs more than it gives. */
.pane-header-sticky[b-du5zvni2mb] {
position: sticky;
top: 0;
z-index: 20;
}
.pane-header-text[b-du5zvni2mb] {
flex: 1 1 auto;
min-width: 0;
}
.pane-header-title[b-du5zvni2mb] {
margin: 0;
font-size: 1rem;
font-weight: 700;
line-height: 1.25;
color: var(--color-oyster-900);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pane-header-subtitle[b-du5zvni2mb] {
margin: 2px 0 0;
font-size: 0.8125rem;
line-height: 1.35;
font-weight: 400;
color: var(--color-oyster-500);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* "This is on hold", not "do this". */
.pane-header-subtitle.muted[b-du5zvni2mb] {
color: var(--color-oyster-400);
font-style: italic;
}
.pane-header-trailing[b-du5zvni2mb] {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
margin-left: auto;
}
/* A band with no pill and no close button must not pay for the row gap. */
.pane-header-trailing:empty[b-du5zvni2mb] {
display: none;
}
/* The assistant's mark, carried by the chat rails now that the modal has no top bar. */
.pane-header-avatar[b-du5zvni2mb] {
width: 32px;
height: 32px;
min-width: 32px;
border-radius: 999px;
background: var(--color-indigo-600);
display: flex;
align-items: center;
justify-content: center;
padding: 6px;
box-shadow: 0 0 24px rgba(37, 80, 124, 0.28);
}
.pane-header-avatar img[b-du5zvni2mb] {
width: 100%;
height: 100%;
filter: brightness(0) invert(1);
}
.pane-header-close[b-du5zvni2mb] {
width: 34px;
height: 34px;
min-width: 34px;
border: none;
background: transparent;
border-radius: 999px;
color: var(--color-oyster-500);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.pane-header-close:hover[b-du5zvni2mb] {
background: var(--color-oyster-200);
color: var(--color-oyster-800);
}
.pane-header-close:focus-visible[b-du5zvni2mb] {
outline: 2px solid var(--color-indigo-600);
outline-offset: 2px;
}
@media (max-width: 900px) {
.pane-header-sticky[b-du5zvni2mb] {
position: static;
}
}
@media (max-width: 640px) {
.pane-header[b-du5zvni2mb] {
padding: 0.625rem 1rem;
}
}
/* /Components/Shared/AddFoodChat/ParseAttestationModal.razor.rz.scp.css */
/* Scoped CSS for ParseAttestationModal. Mirrors the FoodDetails parsed-tree presentation
for a chat-side read-only viewer. We can't reach FoodDetails.razor.css ::deep selectors
from this scope, so the relevant base + tree styles are restated here. Action affordances
(flag, confirm, lookup) live in FoodDetails-only state, so their styles are intentionally
omitted — the IsReadOnly path on ParsedIngredientRow doesn't render any of them. */
.readonly-parsed-tree-scroll[b-exivwlb6f4] {
max-height: 60vh;
overflow-y: auto;
overflow-x: clip;
border: 1px solid #e5e7eb;
border-radius: 8px;
}
[b-exivwlb6f4] .readonly-parsed-tree { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
[b-exivwlb6f4] .readonly-parsed-tree thead th {
background: #f9fafb; padding: 8px 14px; text-align: left;
font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.06em; color: #6b7280;
border-bottom: 1px solid #e5e7eb;
position: sticky; top: 0; z-index: 10;
}
[b-exivwlb6f4] .readonly-parsed-tree tbody td {
padding: 7px 14px; color: #374151;
border-bottom: 1px solid #f3f4f6; vertical-align: middle;
}
[b-exivwlb6f4] .readonly-parsed-tree tbody tr:last-child td { border-bottom: none; }
[b-exivwlb6f4] .readonly-parsed-tree td:nth-child(3) { white-space: nowrap; }
/* ── Tree indent rails ── mirrors IngredientsVerification.razor.css */
[b-exivwlb6f4] .readonly-parsed-tree .tree-cell { padding-left: 4px; }
[b-exivwlb6f4] .readonly-parsed-tree .tree-cell-inner { display: flex; align-items: center; }
[b-exivwlb6f4] .readonly-parsed-tree .tree-cell-railed .tree-cell-inner { height: 100%; }
[b-exivwlb6f4] .readonly-parsed-tree .tree-rail {
display: inline-block;
flex: 0 0 auto;
width: 22px;
align-self: stretch;
position: relative;
}
/* Pipes extend past the rail box to bridge cell padding + border — see
IngredientsVerification.razor.css comment for the math. */
[b-exivwlb6f4] .readonly-parsed-tree .tree-rail-continue::before,
[b-exivwlb6f4] .readonly-parsed-tree .tree-rail-branch::before,
[b-exivwlb6f4] .readonly-parsed-tree .tree-rail-lastbranch::before {
content: ''; position: absolute; left: 10px;
width: 1.5px; background: #94a3b8;
}
[b-exivwlb6f4] .readonly-parsed-tree .tree-rail-continue::before,
[b-exivwlb6f4] .readonly-parsed-tree .tree-rail-branch::before { top: -8px; bottom: -9px; }
[b-exivwlb6f4] .readonly-parsed-tree .tree-rail-lastbranch::before { top: -8px; height: calc(50% + 8px); }
[b-exivwlb6f4] .readonly-parsed-tree .tree-rail-branch::after,
[b-exivwlb6f4] .readonly-parsed-tree .tree-rail-lastbranch::after {
content: ''; position: absolute; top: 50%; left: 10px;
width: 11px; height: 1.5px; background: #94a3b8;
transform: translateY(-0.5px);
}
/* ── Tree name styles ── */
[b-exivwlb6f4] .readonly-parsed-tree .tree-name-root { font-weight: 600; color: #111827; text-transform: capitalize; }
[b-exivwlb6f4] .readonly-parsed-tree .tree-name-child { color: #374151; text-transform: capitalize; }
/* ── Depth-based row tinting ── */
[b-exivwlb6f4] .readonly-parsed-tree tr[data-depth] {
background: hsl(220 14% calc(99% - min(var(--tree-depth, 0), 10) * 0.55%));
}
[b-exivwlb6f4] .readonly-parsed-tree .parser-norm-static { font-size: 0.78rem; }
/* ── Match badges ── */
[b-exivwlb6f4] .readonly-parsed-tree .match-cell { display: inline-flex; align-items: center; gap: 5px; }
[b-exivwlb6f4] .readonly-parsed-tree .code-interp-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.68rem; font-weight: 600; }
[b-exivwlb6f4] .readonly-parsed-tree .code-badge-green { background: #dcfce7; color: #166534; }
[b-exivwlb6f4] .readonly-parsed-tree .code-badge-yellow { background: #fef3c7; color: #92400e; }
[b-exivwlb6f4] .readonly-parsed-tree .code-badge-red { background: #fee2e2; color: #991b1b; }
[b-exivwlb6f4] .readonly-parsed-tree .code-badge-gray { background: #f3f4f6; color: #374151; }
[b-exivwlb6f4] .readonly-parsed-tree .code-badge-audited { background: var(--color-primary-soft); color: var(--color-primary); }
[b-exivwlb6f4] .readonly-parsed-tree .audited-badge {
display: inline-flex; align-items: center; gap: 2px;
font-size: 0.6rem; font-weight: 700;
background: #dbeafe; color: #1e3a8a;
border-radius: 4px; padding: 1px 5px; margin-left: 4px; vertical-align: middle;
}
/* The audit-note tooltip stays informational even in read-only mode. */
[b-exivwlb6f4] .readonly-parsed-tree .ingred-flag-hover {
position: relative; display: inline-flex; align-items: center;
}
[b-exivwlb6f4] .readonly-parsed-tree .ingred-flag-popup {
position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 50;
width: 280px; padding: 10px 12px;
background: #fff; border: 1.5px solid var(--color-indigo-600); border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
text-align: left; white-space: normal;
font-weight: 400; font-size: 0.78rem; line-height: 1.45; color: #1f2937;
visibility: hidden; opacity: 0;
transition: visibility 0s linear 0s, opacity 0.15s ease 0s;
}
[b-exivwlb6f4] .readonly-parsed-tree .ingred-flag-hover:hover .ingred-flag-popup,
[b-exivwlb6f4] .readonly-parsed-tree .ingred-flag-hover:focus-within .ingred-flag-popup {
visibility: visible; opacity: 1;
transition: visibility 0s linear 0.5s, opacity 0.15s ease 0.5s;
}
[b-exivwlb6f4] .readonly-parsed-tree .ingred-flag-popup-header {
font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.04em; color: var(--color-primary); margin-bottom: 4px;
}
[b-exivwlb6f4] .readonly-parsed-tree .ingred-flag-popup-body { white-space: pre-wrap; }
/* /Components/Shared/AddFoodChat/ProductChipStrip.razor.rz.scp.css */
.add-food-product-chips[b-0qs0btxcd0] {
background: #ffffff;
border-bottom: 1px solid var(--color-oyster-300);
}
.add-food-product-chip[b-0qs0btxcd0] {
background: var(--color-oyster-200);
border: 1px solid transparent;
color: var(--color-oyster-800);
transition: background 0.15s ease, border-color 0.15s ease;
}
.add-food-product-chip:hover[b-0qs0btxcd0] {
background: var(--color-oyster-300);
border-color: var(--color-oyster-300);
}
.add-food-product-chip-active[b-0qs0btxcd0] {
background: var(--color-indigo-600);
border-color: var(--color-indigo-600);
color: #ffffff;
}
.add-food-product-chip-remove:hover[b-0qs0btxcd0] {
background: rgba(255, 255, 255, 0.2);
}
/* /Components/Shared/AddFoodChat/SingleFoodWorkspace.razor.rz.scp.css */
/* Layout for the one-product workspace: history rail, chat column, product sheet.
These rules used to live in AddFoodChatModal.razor.css; they moved with the markup
because Blazor's scoped CSS only reaches elements a component renders itself. */
.add-food-chat-main[b-qa6nsojoe3] {
padding: 1.25rem;
gap: 1rem;
overflow: hidden;
}
.add-food-chat-conversation[b-qa6nsojoe3] {
background: var(--color-oyster-100);
border: 1px solid var(--color-oyster-300);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 32px rgba(0, 0, 0, 0.05);
}
.add-food-chat-product-panel[b-qa6nsojoe3] {
width: 360px;
min-width: 360px;
flex-shrink: 0;
background: #ffffff;
border: 1px solid var(--color-oyster-300);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 32px rgba(0, 0, 0, 0.05);
}
/* Claim card for Discovered edit sessions: sits above the spec sheet so the
review-then-claim step is visible next to the data being reviewed. Indigo
tint (invitation, not warning) to contrast with the amber unsaved bar. */
.add-food-claim-card[b-qa6nsojoe3] {
flex-shrink: 0;
margin: 12px 12px 0;
padding: 12px;
border: 1px solid var(--color-indigo-200, #c7d2fe);
border-radius: 12px;
background: var(--color-indigo-50, #eef2ff);
display: flex;
flex-direction: column;
gap: 10px;
}
.add-food-claim-lead[b-qa6nsojoe3] {
display: flex;
align-items: flex-start;
gap: 10px;
}
.add-food-claim-lead > .material-icons[b-qa6nsojoe3] {
color: var(--color-primary, #4f46e5);
font-size: 20px;
margin-top: 1px;
}
.add-food-claim-title[b-qa6nsojoe3] {
font-size: 0.8125rem;
font-weight: 700;
color: var(--color-oyster-900, #1a102c);
}
.add-food-claim-sub[b-qa6nsojoe3],
.add-food-claim-attest[b-qa6nsojoe3] {
font-size: 0.75rem;
line-height: 1.45;
color: var(--color-oyster-600, #5d566a);
}
.add-food-claim-attest[b-qa6nsojoe3] {
font-weight: 500;
color: var(--color-oyster-900, #1a102c);
}
.add-food-claim-actions[b-qa6nsojoe3] {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.add-food-claim-btn[b-qa6nsojoe3] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 7px 12px;
border: none;
border-radius: 9999px;
background: var(--color-primary, #4f46e5);
color: #fff;
font-size: 0.8125rem;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease;
}
.add-food-claim-btn:hover:not(:disabled)[b-qa6nsojoe3] {
background: var(--color-primary-bright, #4338ca);
}
.add-food-claim-btn:disabled[b-qa6nsojoe3] {
opacity: 0.5;
cursor: default;
}
.add-food-claim-cancel[b-qa6nsojoe3] {
padding: 7px 12px;
border: none;
border-radius: 9999px;
background: transparent;
color: var(--color-oyster-600, #5d566a);
font-size: 0.8125rem;
font-weight: 600;
cursor: pointer;
}
.add-food-claim-cancel:hover:not(:disabled)[b-qa6nsojoe3] {
background: rgba(26, 16, 44, 0.06);
}
.add-food-claim-error[b-qa6nsojoe3] {
font-size: 0.75rem;
color: #b91c1c;
}
@media (max-width: 1180px) {
.add-food-chat-main[b-qa6nsojoe3] {
padding: 0;
gap: 0;
}
.add-food-chat-conversation[b-qa6nsojoe3] {
border-radius: 0;
border-top: 0;
border-bottom: 0;
}
.add-food-chat-product-panel[b-qa6nsojoe3] {
width: 320px;
min-width: 320px;
border-radius: 0;
border-top: 0;
border-bottom: 0;
}
}
@media (max-width: 900px) {
.add-food-chat-main[b-qa6nsojoe3] {
flex-direction: column;
}
.add-food-chat-product-panel[b-qa6nsojoe3] {
width: 100%;
min-width: 0;
height: 42vh;
border-left: 0;
border-right: 0;
}
}
/* /Components/Shared/AddFoodChat/SpecSheetPane.razor.rz.scp.css */
.add-food-spec-pane[b-7rbzlvfkox] {
background: #ffffff;
color: var(--color-oyster-900);
}
/* The pane's header band is PaneHeader's, shared with every other pane in the Add-with-AI modal
(its sticky positioning, its type scale, and the paused-subtitle treatment all live there).
All that is ours is the count chip we slot into it. */
.add-food-spec-count[b-7rbzlvfkox],
.add-food-saved-pill[b-7rbzlvfkox] {
border: 1px solid var(--color-indigo-200);
background: var(--color-primary-soft);
color: var(--color-indigo-600);
font-size: 0.75rem;
font-weight: 800;
border-radius: 999px;
padding: 0.25rem 0.55rem;
white-space: nowrap;
}
.add-food-empty-product .material-icons[b-7rbzlvfkox],
.add-food-empty-product p[b-7rbzlvfkox] {
color: var(--color-oyster-500);
}
.add-food-empty-product[b-7rbzlvfkox] {
position: relative;
overflow: hidden;
}
.add-food-empty-product > .max-w-sm[b-7rbzlvfkox] {
position: relative;
z-index: 2;
}
.add-food-empty-product.scanning[b-7rbzlvfkox] {
background: linear-gradient(180deg, #ffffff 0%, var(--color-oyster-100) 100%);
}
.add-food-empty-product.scanning .material-icons[b-7rbzlvfkox] {
color: var(--color-primary);
}
.add-food-empty-product h2[b-7rbzlvfkox] {
color: var(--color-oyster-900);
}
.add-food-spec-body[b-7rbzlvfkox] {
padding: 1rem;
}
/* ── Product card ─────────────────────────────────────── */
.product-card[b-7rbzlvfkox] {
background: #ffffff;
border: 1px solid var(--color-oyster-300);
border-radius: 12px;
/* No overflow:hidden here — the category picker drops out of the bottom of the
card and would be clipped to nothing. The hero image rounds its own top corners
(see .product-image) so the card corners still read as rounded. */
box-shadow: 0 1px 2px rgba(26, 16, 44, 0.04);
}
/* Geometry (4:3, white, padded, centred) comes from the shared `.food-showcase` class in
components.css. Only this pane's extras live here. */
.product-image[b-7rbzlvfkox] {
/* Rounds the hero to the card's top corners on its own, so .product-card
doesn't need overflow:hidden (which would clip the category picker). */
border-radius: 12px 12px 0 0;
}
/* Empty state keeps the linen tint; a bare white band with only a placeholder glyph
reads as a rendering failure rather than "no image yet". */
.product-image:not(.has-image)[b-7rbzlvfkox] {
background: var(--color-oyster-100);
}
.pv-brand-chip[b-7rbzlvfkox] {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
background: transparent;
padding: 0;
border: none;
box-shadow: none;
}
.pv-brand-chip img[b-7rbzlvfkox] {
width: auto;
height: 28px;
max-width: 80px;
object-fit: contain;
background: transparent;
border: none;
border-radius: 0;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
display: block;
}
/* Solid white + a hairline edge: the band behind it is now white, so a translucent pill
with only a soft shadow to define it would all but disappear. */
.pv-brand-chip span[b-7rbzlvfkox] {
display: inline-block;
background: var(--color-white);
color: var(--color-oyster-900);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.02em;
padding: 4px 8px;
border: 1px solid var(--color-oyster-300);
border-radius: 999px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.product-image .placeholder[b-7rbzlvfkox] {
position: absolute;
inset: 0;
background: linear-gradient(180deg, var(--color-primary-soft) 0%, var(--color-indigo-100) 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 12px;
color: var(--color-oyster-600);
}
.product-image .placeholder .material-icons[b-7rbzlvfkox] {
font-size: 28px;
color: var(--color-primary);
}
.product-image .placeholder-label[b-7rbzlvfkox] {
font-weight: 600;
}
/* UPC block sits below the nutrition facts panel, full-width with a quiet card frame. */
.upc-block[b-7rbzlvfkox] {
margin-top: 14px;
background: #ffffff;
border: 1px solid var(--color-oyster-300);
border-radius: 8px;
padding: 14px 16px 10px;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 6px;
}
.upc-block img[b-7rbzlvfkox] {
width: 100%;
height: 72px;
display: block;
object-fit: contain;
}
.upc-num[b-7rbzlvfkox] {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 13px;
letter-spacing: 0.12em;
color: var(--color-oyster-600);
text-align: center;
}
/* Missing-UPC variant of the UPC block — same red tint as missing nutrient rows so
the user notices it as a required field. The barcode itself is rendered with a
placeholder UPC ("000000000000") and grayed out to read as a stand-in, not data. */
.upc-block.missing[b-7rbzlvfkox] {
background-color: rgba(254, 202, 202, 0.32);
transition: background-color 240ms ease-out;
}
.upc-block.missing.scanning[b-7rbzlvfkox] {
position: relative;
overflow: hidden;
border-color: var(--color-indigo-200);
background-color: var(--color-primary-soft);
}
.upc-block.missing img[b-7rbzlvfkox] {
opacity: 0.45;
filter: grayscale(1);
}
.upc-block.missing.scanning img[b-7rbzlvfkox] {
opacity: 0.62;
filter: grayscale(1) sepia(0.18) hue-rotate(190deg) saturate(1.2);
}
.upc-num-missing[b-7rbzlvfkox] {
color: #b3261e;
font-weight: 600;
letter-spacing: 0.04em;
}
.upc-block.missing.scanning .upc-num-missing[b-7rbzlvfkox] {
color: var(--color-indigo-700);
}
/* ── Ingredients block ────────────────────────────────────
Sits between the Nutrition Facts panel and the UPC block. Quiet card frame
matching .upc-block; shows the raw ingredient string verbatim. When empty,
takes the same red tint as a missing UPC so the user can see at a glance
that the field still needs to be captured. */
.ingredients-block[b-7rbzlvfkox] {
margin-top: 14px;
background: #ffffff;
border: 1px solid var(--color-oyster-300);
border-radius: 8px;
padding: 12px 16px 14px;
}
.ingredients-hdr[b-7rbzlvfkox] {
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-oyster-600);
margin-bottom: 6px;
}
.ingredients-text[b-7rbzlvfkox] {
margin: 0;
font-size: 0.78rem;
line-height: 1.5;
color: var(--color-oyster-900);
white-space: pre-wrap;
word-break: break-word;
}
.ingredients-block.missing[b-7rbzlvfkox] {
background-color: rgba(254, 202, 202, 0.32);
transition: background-color 240ms ease-out;
}
.ingredients-block.missing.scanning[b-7rbzlvfkox] {
position: relative;
overflow: hidden;
border-color: var(--color-indigo-200);
background-color: var(--color-primary-soft);
}
.ingredients-text-missing[b-7rbzlvfkox] {
margin: 0;
font-size: 0.78rem;
color: #b3261e;
font-weight: 600;
font-style: italic;
}
.ingredients-block.missing.scanning .ingredients-text-missing[b-7rbzlvfkox] {
color: var(--color-indigo-700);
}
.ingredients-block.missing.scanning[b-7rbzlvfkox]::after,
.upc-block.missing.scanning[b-7rbzlvfkox]::after {
content: "";
position: absolute;
left: 14px;
bottom: 7px;
width: 62%;
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg,
transparent 0%,
rgba(37, 80, 124, 0.15) 10%,
rgba(37, 80, 124, 0.9) 45%,
rgba(56, 189, 248, 0.95) 55%,
rgba(37, 80, 124, 0.15) 90%,
transparent 100%);
box-shadow:
0 0 8px rgba(37, 80, 124, 0.65),
0 0 18px rgba(56, 189, 248, 0.35);
animation: row-scan-h-b-7rbzlvfkox 1.8s ease-in-out infinite;
pointer-events: none;
}
/* ── Product body (name, brand, description, badges) ──── */
.product-body[b-7rbzlvfkox] {
padding: 14px 16px;
}
.product-name[b-7rbzlvfkox] {
font-size: 15px;
font-weight: 700;
color: var(--color-oyster-900);
line-height: 1.3;
min-height: 20px;
}
.product-name.empty[b-7rbzlvfkox] {
color: var(--color-oyster-500);
font-weight: 400;
font-style: italic;
}
.product-brand[b-7rbzlvfkox] {
font-size: 11px;
font-weight: 500;
color: var(--color-oyster-600);
margin-top: 2px;
}
.product-description[b-7rbzlvfkox] {
font-size: 12px;
color: var(--color-oyster-600);
margin-top: 6px;
line-height: 1.45;
}
.product-price[b-7rbzlvfkox] {
font-size: 13px;
font-weight: 600;
color: var(--color-oyster-900);
margin-top: 6px;
}
/* Category row: chips for the assigned categories, a picker popover (AI candidates on top,
then the searchable catalog), and the edit-session AI suggestion badge. Missing state takes
the same red tint as a missing UPC/ingredient block. */
.category-row[b-7rbzlvfkox] {
position: relative;
margin-top: 10px;
border-radius: 8px;
padding: 6px 8px 8px;
margin-left: -8px;
margin-right: -8px;
}
.category-row.missing[b-7rbzlvfkox] {
background-color: rgba(254, 202, 202, 0.32);
transition: background-color 240ms ease-out;
}
.category-hdr[b-7rbzlvfkox] {
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-oyster-600);
margin-bottom: 5px;
}
.category-chips[b-7rbzlvfkox] {
display: flex;
gap: 6px;
flex-wrap: wrap;
align-items: center;
}
.category-chip[b-7rbzlvfkox] {
display: inline-flex;
align-items: center;
gap: 2px;
font-size: 11px;
font-weight: 600;
padding: 3px 8px;
border-radius: 999px;
background: var(--color-primary-soft);
color: var(--color-indigo-700);
}
.category-chip-remove[b-7rbzlvfkox] {
display: inline-flex;
align-items: center;
border: none;
background: transparent;
padding: 0;
margin-left: 2px;
cursor: pointer;
color: var(--color-indigo-700);
opacity: 0.6;
}
.category-chip-remove:hover[b-7rbzlvfkox] {
opacity: 1;
}
.category-chip-remove .material-icons[b-7rbzlvfkox] {
font-size: 13px;
line-height: 1;
}
.category-add-btn[b-7rbzlvfkox] {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 11px;
font-weight: 600;
padding: 3px 8px;
border-radius: 999px;
border: 1px dashed var(--color-oyster-400);
background: transparent;
color: var(--color-oyster-600);
cursor: pointer;
}
.category-add-btn:hover[b-7rbzlvfkox] {
border-color: var(--color-indigo-400);
color: var(--color-indigo-700);
}
.category-add-btn .material-icons[b-7rbzlvfkox] {
font-size: 13px;
line-height: 1;
}
.category-add-btn.attention[b-7rbzlvfkox] {
border-style: solid;
border-color: #f0b4b0;
color: #b3261e;
}
.category-none[b-7rbzlvfkox] {
font-size: 11px;
font-weight: 600;
font-style: italic;
color: #b3261e;
}
.category-suggestion[b-7rbzlvfkox] {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-top: 7px;
padding: 5px 8px;
border-radius: 8px;
background: var(--color-primary-soft);
font-size: 11.5px;
color: var(--color-indigo-700);
}
.category-suggestion .material-icons[b-7rbzlvfkox] {
font-size: 14px;
line-height: 1;
}
.category-suggestion-text[b-7rbzlvfkox] {
flex: 1;
min-width: 120px;
}
.category-suggestion-btn[b-7rbzlvfkox] {
font-size: 11px;
font-weight: 700;
padding: 2px 9px;
border-radius: 999px;
border: 1px solid var(--color-indigo-300);
background: #ffffff;
color: var(--color-indigo-700);
cursor: pointer;
}
.category-suggestion-btn.accept[b-7rbzlvfkox] {
background: var(--color-indigo-600, #4f46e5);
border-color: var(--color-indigo-600, #4f46e5);
color: #ffffff;
}
.category-suggestion-btn:disabled[b-7rbzlvfkox] {
opacity: 0.5;
cursor: default;
}
.category-picker-backdrop[b-7rbzlvfkox] {
position: fixed;
inset: 0;
z-index: 30;
}
.category-picker[b-7rbzlvfkox] {
position: absolute;
z-index: 31;
top: calc(100% - 2px);
left: 8px;
right: 8px;
max-width: 340px;
background: #ffffff;
border: 1px solid var(--color-oyster-300);
border-radius: 10px;
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
padding: 8px;
}
.category-picker-search[b-7rbzlvfkox] {
width: 100%;
font-size: 12px;
padding: 6px 9px;
border: 1px solid var(--color-oyster-300);
border-radius: 7px;
margin-bottom: 6px;
}
.category-picker-search:focus[b-7rbzlvfkox] {
outline: none;
border-color: var(--color-indigo-400);
}
.category-picker-list[b-7rbzlvfkox] {
max-height: 240px;
overflow-y: auto;
}
.category-picker-section[b-7rbzlvfkox] {
font-size: 0.65rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-oyster-500);
padding: 5px 6px 3px;
}
.category-picker-option[b-7rbzlvfkox] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: 100%;
text-align: left;
font-size: 12px;
padding: 6px 8px;
border: none;
border-radius: 6px;
background: transparent;
color: var(--color-oyster-900);
cursor: pointer;
}
.category-picker-option:hover[b-7rbzlvfkox] {
background: var(--color-oyster-100);
}
.category-picker-confidence[b-7rbzlvfkox] {
font-size: 10.5px;
font-weight: 700;
color: var(--color-indigo-700);
background: var(--color-primary-soft);
border-radius: 999px;
padding: 1px 7px;
}
.category-picker-empty[b-7rbzlvfkox] {
font-size: 12px;
color: var(--color-oyster-500);
padding: 8px 6px;
}
.product-meta[b-7rbzlvfkox] {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 10px;
}
.meta-pill[b-7rbzlvfkox] {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 600;
padding: 3px 8px;
border-radius: 999px;
background: var(--color-oyster-100);
color: var(--color-oyster-600);
}
.meta-pill .material-icons[b-7rbzlvfkox] {
font-size: 13px;
line-height: 1;
}
.meta-pill.success[b-7rbzlvfkox] {
background: #dcfce7;
color: #166534;
}
.meta-pill.warning[b-7rbzlvfkox] {
background: #fef3c7;
color: #854d0e;
}
.meta-pill.info[b-7rbzlvfkox] {
background: var(--color-primary-soft);
color: var(--color-indigo-700);
}
/* The shared component owns its own scoped styling, including
the flash + missing tints. Wrapper div spaces the panel beneath the product card. */
.nf-label-wrap[b-7rbzlvfkox] {
margin-top: 14px;
}
/* ── AI scan sweep ─────────────────────────────────────── */
.scan-sweep[b-7rbzlvfkox] {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(37, 80, 124, 0.08) 100%),
rgba(37, 80, 124, 0.06);
}
.scan-bar[b-7rbzlvfkox] {
position: absolute;
left: -5%;
right: -5%;
height: 3px;
border-radius: 999px;
background: linear-gradient(90deg,
transparent 0%,
rgba(37, 80, 124, 0.85) 20%,
rgba(56, 189, 248, 1) 50%,
rgba(37, 80, 124, 0.85) 80%,
transparent 100%);
box-shadow:
0 0 10px rgba(37, 80, 124, 0.72),
0 0 24px rgba(56, 189, 248, 0.44);
animation: scan-sweep-b-7rbzlvfkox 2.2s ease-in-out infinite;
}
@keyframes scan-sweep-b-7rbzlvfkox {
0% {
top: 0%;
opacity: 0.9;
}
50% {
top: calc(100% - 3px);
opacity: 1;
}
100% {
top: 0%;
opacity: 0.9;
}
}
@keyframes row-scan-h-b-7rbzlvfkox {
0% {
transform: translateX(-45%);
opacity: 0.55;
}
50% {
transform: translateX(75%);
opacity: 1;
}
100% {
transform: translateX(-45%);
opacity: 0.55;
}
}
/* Field-change flash for chat-side product header (product name / brand / description /
price). The NFP's own flash + missing rules live in NutritionFactsLabel.razor.css. */
@keyframes spec-field-flash-b-7rbzlvfkox {
0% {
background-color: rgba(37, 80, 124, 0.28);
box-shadow: inset 0 0 0 1px rgba(37, 80, 124, 0.32);
}
40% {
background-color: rgba(37, 80, 124, 0.18);
box-shadow: inset 0 0 0 1px rgba(37, 80, 124, 0.18);
}
100% {
background-color: transparent;
box-shadow: inset 0 0 0 1px transparent;
}
}
.product-name.flash-a[b-7rbzlvfkox],
.product-name.flash-b[b-7rbzlvfkox],
.product-brand.flash-a[b-7rbzlvfkox],
.product-brand.flash-b[b-7rbzlvfkox],
.product-description.flash-a[b-7rbzlvfkox],
.product-description.flash-b[b-7rbzlvfkox],
.product-price.flash-a[b-7rbzlvfkox],
.product-price.flash-b[b-7rbzlvfkox] {
animation: spec-field-flash-b-7rbzlvfkox 2.4s ease-out;
border-radius: 6px;
padding: 2px 4px;
margin-left: -4px;
margin-right: -4px;
}
.category-row.flash-a[b-7rbzlvfkox],
.category-row.flash-b[b-7rbzlvfkox] {
animation: spec-field-flash-b-7rbzlvfkox 2.4s ease-out;
}
@media (prefers-reduced-motion: reduce) {
.scan-bar[b-7rbzlvfkox] {
top: 50%;
animation: scan-pulse-b-7rbzlvfkox 1.6s ease-in-out infinite;
}
.ingredients-block.missing.scanning[b-7rbzlvfkox]::after,
.upc-block.missing.scanning[b-7rbzlvfkox]::after {
animation: row-scan-pulse-b-7rbzlvfkox 1.6s ease-in-out infinite;
transform: none;
}
@keyframes scan-pulse-b-7rbzlvfkox {
0%, 100% {
opacity: 0.35;
}
50% {
opacity: 1;
}
}
@keyframes row-scan-pulse-b-7rbzlvfkox {
0%, 100% {
opacity: 0.28;
}
50% {
opacity: 0.95;
}
}
.product-name.flash-a[b-7rbzlvfkox],
.product-name.flash-b[b-7rbzlvfkox],
.product-brand.flash-a[b-7rbzlvfkox],
.product-brand.flash-b[b-7rbzlvfkox],
.product-description.flash-a[b-7rbzlvfkox],
.product-description.flash-b[b-7rbzlvfkox],
.product-price.flash-a[b-7rbzlvfkox],
.product-price.flash-b[b-7rbzlvfkox],
.category-row.flash-a[b-7rbzlvfkox],
.category-row.flash-b[b-7rbzlvfkox] {
animation: none;
}
}
/* ── Click-to-edit affordances ─────────────────────────────
Product-card fields (name, description, price, allergen text) swap to an inline input
on click. Hover shows a quiet tint + pencil; the pencil reserves its space so rows
don't shift. The NFP's own editing styles live in NutritionFactsLabel.razor.css. */
.editable-field[b-7rbzlvfkox] {
cursor: pointer;
border-radius: 6px;
padding: 2px 4px;
margin-left: -4px;
margin-right: -4px;
transition: background-color 120ms ease-out;
}
.editable-field:hover[b-7rbzlvfkox] {
background-color: var(--color-primary-soft);
}
.edit-pencil[b-7rbzlvfkox] {
display: inline-block;
vertical-align: baseline;
margin-left: 4px;
font-size: 12px;
line-height: 1;
color: var(--color-primary);
opacity: 0;
transition: opacity 120ms ease-out;
pointer-events: none;
}
.editable-field:hover .edit-pencil[b-7rbzlvfkox] {
opacity: 1;
}
.spec-edit-input[b-7rbzlvfkox] {
display: block;
width: 100%;
font: inherit;
color: var(--color-oyster-900);
background: #ffffff;
border: 1px solid var(--color-indigo-200);
border-radius: 6px;
padding: 4px 6px;
outline: none;
resize: vertical;
}
.spec-edit-input:focus[b-7rbzlvfkox] {
border-color: var(--color-primary);
box-shadow: 0 0 0 2px rgba(37, 80, 124, 0.15);
}
.spec-edit-input.invalid[b-7rbzlvfkox] {
border-color: #b3261e;
background-color: rgba(254, 202, 202, 0.32);
}
.spec-edit-name[b-7rbzlvfkox] {
font-size: 15px;
font-weight: 700;
}
.spec-edit-description[b-7rbzlvfkox] {
margin-top: 6px;
font-size: 12px;
line-height: 1.45;
}
.spec-edit-price[b-7rbzlvfkox] {
margin-top: 6px;
max-width: 180px;
font-size: 13px;
font-weight: 600;
}
.spec-edit-allergen[b-7rbzlvfkox],
.spec-edit-ingredients[b-7rbzlvfkox] {
font-size: 0.78rem;
line-height: 1.5;
}
/* Quiet "add this optional field" line shown in place of an empty description/price/allergen. */
.spec-add-field[b-7rbzlvfkox] {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 6px;
font-size: 12px;
color: var(--color-oyster-500);
cursor: pointer;
border-radius: 6px;
padding: 2px 4px;
margin-left: -4px;
transition: background-color 120ms ease-out, color 120ms ease-out;
}
.spec-add-field:hover[b-7rbzlvfkox] {
background-color: var(--color-primary-soft);
color: var(--color-indigo-700);
}
.spec-add-field .material-icons[b-7rbzlvfkox] {
font-size: 14px;
line-height: 1;
}
/* ── Hero image chooser ────────────────────────────────────
The hero becomes clickable only when candidate images exist in session state. */
.product-image.hero-clickable[b-7rbzlvfkox] {
cursor: pointer;
}
.hero-edit-hint[b-7rbzlvfkox] {
position: absolute;
right: 10px;
bottom: 10px;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.92);
color: var(--color-primary);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
opacity: 0;
transition: opacity 120ms ease-out;
pointer-events: none;
}
.hero-edit-hint .material-icons[b-7rbzlvfkox] {
font-size: 17px;
line-height: 1;
}
.product-image.hero-clickable:hover .hero-edit-hint[b-7rbzlvfkox] {
opacity: 1;
}
.hero-chooser[b-7rbzlvfkox] {
border-bottom: 1px solid var(--color-oyster-300);
background: var(--color-oyster-100);
padding: 10px 12px 12px;
}
.hero-chooser-hdr[b-7rbzlvfkox] {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-oyster-600);
margin-bottom: 8px;
}
.hero-chooser-close[b-7rbzlvfkox] {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 999px;
color: var(--color-oyster-500);
}
.hero-chooser-close:hover[b-7rbzlvfkox] {
background: var(--color-oyster-300);
color: var(--color-oyster-900);
}
.hero-chooser-grid[b-7rbzlvfkox] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
gap: 8px;
}
.hero-chooser-item[b-7rbzlvfkox] {
position: relative;
aspect-ratio: 1 / 1;
border: 2px solid var(--color-oyster-300);
border-radius: 8px;
overflow: hidden;
background: #ffffff;
cursor: pointer;
padding: 0;
transition: border-color 120ms ease-out;
}
.hero-chooser-item:hover[b-7rbzlvfkox] {
border-color: var(--color-primary);
}
.hero-chooser-item.current[b-7rbzlvfkox] {
border-color: var(--color-primary);
}
/* Candidate front-of-pack photos. `contain` for the same reason uses it:
you cannot pick between two label shots that have both been cropped. Not a
itself because the button already provides the frame (its border doubles
as the selection state), and nesting a tile inside it would double-frame each thumb. */
.hero-chooser-item img[b-7rbzlvfkox] {
width: 100%;
height: 100%;
object-fit: contain;
padding: 3px;
box-sizing: border-box;
display: block;
}
.hero-chooser-check[b-7rbzlvfkox] {
position: absolute;
right: 3px;
bottom: 3px;
font-size: 16px;
color: var(--color-primary);
background: rgba(255, 255, 255, 0.92);
border-radius: 999px;
}
/* ── Ingredients header row (review affordance / science-team lock) ── */
.ingredients-hdr-row[b-7rbzlvfkox] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 6px;
}
.ingredients-hdr-row .ingredients-hdr[b-7rbzlvfkox] {
margin-bottom: 0;
}
.ingredients-review-btn[b-7rbzlvfkox] {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 600;
color: var(--color-indigo-600);
background: var(--color-primary-soft);
border: 1px solid var(--color-indigo-200);
border-radius: 999px;
padding: 2px 8px;
cursor: pointer;
transition: background-color 120ms ease-out;
}
.ingredients-review-btn:hover:not(:disabled)[b-7rbzlvfkox] {
background: var(--color-indigo-100);
}
.ingredients-review-btn:disabled[b-7rbzlvfkox] {
opacity: 0.5;
cursor: default;
}
.ingredients-review-btn .material-icons[b-7rbzlvfkox] {
font-size: 13px;
line-height: 1;
}
.ingredients-lock[b-7rbzlvfkox] {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 600;
color: var(--color-oyster-500);
cursor: help;
}
.ingredients-lock .material-icons[b-7rbzlvfkox] {
font-size: 13px;
line-height: 1;
}
/* ── UPC lock (edit mode: UPC is the food's identity) ── */
.upc-lock[b-7rbzlvfkox] {
font-size: 13px;
line-height: 1;
vertical-align: text-bottom;
margin-left: 6px;
color: var(--color-oyster-500);
cursor: help;
}
/* The small-screen release of the sticky header moved to PaneHeader with the band itself. */
.requirement-exception[b-7rbzlvfkox] {
display: flex;
align-items: center;
gap: .75rem;
margin: 1rem 0;
padding: .875rem 1rem;
border: 1px solid var(--color-mint-300, #86d5b4);
border-radius: .75rem;
background: var(--color-mint-50, #effcf6);
color: var(--color-oyster-900, #2c2439);
}
.requirement-exception > .material-icons[b-7rbzlvfkox] { color: var(--color-mint-700, #14785b); }
.requirement-exception div[b-7rbzlvfkox] { display: flex; flex: 1; flex-direction: column; gap: .125rem; }
.requirement-exception strong[b-7rbzlvfkox] { font-size: .875rem; }
.requirement-exception span:not(.material-icons)[b-7rbzlvfkox] { font-size: .75rem; color: var(--color-oyster-600, #6f6878); }
.requirement-exception button[b-7rbzlvfkox] { font-size: .75rem; font-weight: 600; color: var(--color-mint-800, #0f6149); }
.requirement-exception-undo[b-7rbzlvfkox] {
flex: none;
padding: .25rem .6rem;
border: 1px solid var(--color-mint-300, #86d5b4);
border-radius: 999px;
background: #fff;
cursor: pointer;
transition: background-color 120ms ease-out;
}
.requirement-exception-undo:hover[b-7rbzlvfkox] { background: var(--color-mint-100, #d6f5e6); }
/* Styled as a real secondary button (solid border, filled ground, pointer cursor) rather than
the dashed muted note it used to be. It offers to record a regulatory exemption, so it has to
read as something you press, not as a caption explaining why the panel above is empty. */
.requirement-exception-action[b-7rbzlvfkox] {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
gap: .4rem;
margin: .75rem 0 1rem;
padding: .6rem .8rem;
border: 1px solid var(--color-indigo-200);
border-radius: .6rem;
background: var(--color-primary-soft);
color: var(--color-indigo-600);
font-size: .78rem;
font-weight: 600;
cursor: pointer;
transition: background-color 120ms ease-out, border-color 120ms ease-out;
}
.requirement-exception-action:hover[b-7rbzlvfkox] {
background: var(--color-indigo-100);
border-color: var(--color-indigo-300);
}
.requirement-exception-action:focus-visible[b-7rbzlvfkox] {
outline: 2px solid var(--color-indigo-600);
outline-offset: 2px;
}
.requirement-exception-action .material-icons[b-7rbzlvfkox] { font-size: 1rem; }
/* /Components/Shared/AuditEscalateModal.razor.rz.scp.css */
.escalate-modal[b-6tq6jcgrxq] {
font-family: var(--font-family-primary);
}
.escalate-badge[b-6tq6jcgrxq] {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: 9999px;
background: #FEF3C7;
color: #B45309;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
}
.escalate-badge-icon.material-icons[b-6tq6jcgrxq] {
font-size: 13px;
}
.escalate-title[b-6tq6jcgrxq] {
margin: 12px 0 0;
font-size: 20px;
font-weight: 700;
color: #1F2937;
}
.escalate-subtitle[b-6tq6jcgrxq] {
margin: 4px 0 0;
font-size: 13px;
color: #6B7280;
}
.escalate-context[b-6tq6jcgrxq] {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 18px;
}
.escalate-field[b-6tq6jcgrxq] {
display: flex;
flex-direction: column;
gap: 5px;
}
.escalate-field-reason[b-6tq6jcgrxq] {
margin-top: 18px;
}
.escalate-label[b-6tq6jcgrxq] {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #6B7280;
}
.escalate-value[b-6tq6jcgrxq] {
padding: 8px 12px;
border-radius: 8px;
background: #F3F4F6;
font-size: 13px;
color: #374151;
word-break: break-word;
}
.escalate-value-muted[b-6tq6jcgrxq] {
color: #9CA3AF;
font-style: italic;
}
.escalate-textarea[b-6tq6jcgrxq] {
width: 100%;
padding: 9px 12px;
border: 1px solid #D1D5DB;
border-radius: 8px;
background: #FFFFFF;
font-family: var(--font-family-primary);
font-size: 13px;
color: #374151;
resize: vertical;
}
.escalate-textarea:focus[b-6tq6jcgrxq] {
outline: none;
border-color: #25507C;
box-shadow: 0 0 0 3px rgba(37, 80, 124, 0.12);
}
.escalate-textarea:disabled[b-6tq6jcgrxq] {
background: #F9FAFB;
color: #9CA3AF;
}
.escalate-banner[b-6tq6jcgrxq] {
display: flex;
align-items: flex-start;
gap: 8px;
margin-top: 18px;
padding: 12px 14px;
border: 1px solid #FDE68A;
border-radius: 8px;
background: #FFFBEB;
font-size: 12.5px;
line-height: 1.45;
color: #92400E;
}
.escalate-banner-icon.material-icons[b-6tq6jcgrxq] {
font-size: 16px;
flex-shrink: 0;
margin-top: 1px;
}
.escalate-error[b-6tq6jcgrxq] {
margin-top: 12px;
padding: 9px 12px;
border: 1px solid #FCA5A5;
border-radius: 8px;
background: #FEF2F2;
font-size: 12.5px;
color: #B91C1C;
}
.escalate-actions[b-6tq6jcgrxq] {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 22px;
}
.escalate-cancel[b-6tq6jcgrxq] {
padding: 8px 18px;
border: 1px solid #D1D5DB;
border-radius: 9999px;
background: #FFFFFF;
font-family: var(--font-family-primary);
font-size: 13px;
font-weight: 600;
color: #374151;
cursor: pointer;
transition: background-color 120ms ease;
}
.escalate-cancel:hover:not(:disabled)[b-6tq6jcgrxq] {
background: #F3F4F6;
}
.escalate-submit[b-6tq6jcgrxq] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 18px;
border: 0;
border-radius: 9999px;
background: #D97706;
font-family: var(--font-family-primary);
font-size: 13px;
font-weight: 600;
color: #FFFFFF;
cursor: pointer;
transition: background-color 120ms ease;
}
.escalate-submit:hover:not(:disabled)[b-6tq6jcgrxq] {
background: #B45309;
}
.escalate-submit:disabled[b-6tq6jcgrxq],
.escalate-cancel:disabled[b-6tq6jcgrxq] {
opacity: 0.6;
cursor: not-allowed;
}
.escalate-submit-icon.material-icons[b-6tq6jcgrxq] {
font-size: 15px;
}
/* /Components/Shared/AuditKickBackModal.razor.rz.scp.css */
.kickback-modal[b-x3ys62yfvi] {
font-family: var(--font-family-primary);
}
.kickback-badge[b-x3ys62yfvi] {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: 9999px;
background: #CCFBF1;
color: #0F766E;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
}
.kickback-badge-icon.material-icons[b-x3ys62yfvi] {
font-size: 13px;
}
.kickback-title[b-x3ys62yfvi] {
margin: 12px 0 0;
font-size: 20px;
font-weight: 700;
color: #1F2937;
}
.kickback-subtitle[b-x3ys62yfvi] {
margin: 4px 0 0;
font-size: 13px;
color: #6B7280;
}
.kickback-context[b-x3ys62yfvi] {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 18px;
}
.kickback-field[b-x3ys62yfvi] {
display: flex;
flex-direction: column;
gap: 5px;
}
.kickback-field-message[b-x3ys62yfvi] {
margin-top: 18px;
}
.kickback-label[b-x3ys62yfvi] {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #6B7280;
}
.kickback-value[b-x3ys62yfvi] {
padding: 8px 12px;
border-radius: 8px;
background: #F3F4F6;
font-size: 13px;
color: #374151;
word-break: break-word;
}
.kickback-value-mono[b-x3ys62yfvi] {
font-family: "Roboto Mono", ui-monospace, monospace;
}
.kickback-textarea[b-x3ys62yfvi] {
width: 100%;
padding: 9px 12px;
border: 1px solid #D1D5DB;
border-radius: 8px;
background: #FFFFFF;
font-family: var(--font-family-primary);
font-size: 13px;
line-height: 1.5;
color: #374151;
resize: vertical;
}
.kickback-textarea:focus[b-x3ys62yfvi] {
outline: none;
border-color: #0D9488;
box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
}
.kickback-textarea:disabled[b-x3ys62yfvi] {
background: #F9FAFB;
color: #9CA3AF;
}
.kickback-notify[b-x3ys62yfvi] {
display: flex;
align-items: center;
gap: 8px;
margin-top: 14px;
font-size: 13px;
color: #374151;
cursor: pointer;
}
.kickback-notify input[b-x3ys62yfvi] {
width: 16px;
height: 16px;
accent-color: #0D9488;
cursor: pointer;
}
.kickback-banner[b-x3ys62yfvi] {
display: flex;
align-items: flex-start;
gap: 8px;
margin-top: 16px;
padding: 12px 14px;
border: 1px solid #99F6E4;
border-radius: 8px;
background: #F0FDFA;
font-size: 12.5px;
line-height: 1.45;
color: #0F766E;
}
.kickback-banner-icon.material-icons[b-x3ys62yfvi] {
font-size: 16px;
flex-shrink: 0;
margin-top: 1px;
}
.kickback-error[b-x3ys62yfvi] {
margin-top: 12px;
padding: 9px 12px;
border: 1px solid #FCA5A5;
border-radius: 8px;
background: #FEF2F2;
font-size: 12.5px;
color: #B91C1C;
}
.kickback-actions[b-x3ys62yfvi] {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 22px;
}
.kickback-cancel[b-x3ys62yfvi] {
padding: 8px 18px;
border: 1px solid #D1D5DB;
border-radius: 9999px;
background: #FFFFFF;
font-family: var(--font-family-primary);
font-size: 13px;
font-weight: 600;
color: #374151;
cursor: pointer;
transition: background-color 120ms ease;
}
.kickback-cancel:hover:not(:disabled)[b-x3ys62yfvi] {
background: #F3F4F6;
}
.kickback-submit[b-x3ys62yfvi] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 18px;
border: 0;
border-radius: 9999px;
background: #0D9488;
font-family: var(--font-family-primary);
font-size: 13px;
font-weight: 600;
color: #FFFFFF;
cursor: pointer;
transition: background-color 120ms ease;
}
.kickback-submit:hover:not(:disabled)[b-x3ys62yfvi] {
background: #0F766E;
}
.kickback-submit:disabled[b-x3ys62yfvi],
.kickback-cancel:disabled[b-x3ys62yfvi] {
opacity: 0.6;
cursor: not-allowed;
}
.kickback-submit-icon.material-icons[b-x3ys62yfvi] {
font-size: 15px;
}
/* /Components/Shared/AuditResolveModal.razor.rz.scp.css */
.audit-resolve-header[b-pmilnyeteo] {
display: block;
}
.audit-resolve-title-block[b-pmilnyeteo] {
min-width: 0;
}
.audit-resolve-subtitle[b-pmilnyeteo] {
max-width: 28rem;
margin-left: auto;
margin-right: auto;
line-height: 1.45;
}
@media (max-width: 768px) {
.audit-resolve-actions[b-pmilnyeteo] {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: stretch !important;
gap: 0.75rem;
width: 100%;
}
.audit-resolve-actions > *[b-pmilnyeteo] {
min-width: 0;
width: 100%;
}
.audit-resolve-actions .explain-pill-btn[b-pmilnyeteo],
.audit-resolve-actions .wise-btn[b-pmilnyeteo],
.audit-resolve-actions button[b-pmilnyeteo] {
justify-content: center;
min-height: 44px;
white-space: normal;
text-align: center;
}
}
@media (max-width: 520px) {
.audit-resolve-header[b-pmilnyeteo] {
padding-right: 2rem;
}
.audit-resolve-title-block[b-pmilnyeteo] {
order: 1;
text-align: left !important;
}
.audit-resolve-title-block h2[b-pmilnyeteo] {
font-size: 1.5rem;
line-height: 1.15;
}
.audit-resolve-subtitle[b-pmilnyeteo] {
max-width: none;
margin-left: 0;
margin-right: 0;
font-size: 0.95rem;
line-height: 1.45;
}
.audit-resolve-actions[b-pmilnyeteo] {
grid-template-columns: 1fr;
}
}
/* /Components/Shared/Breadcrumbs.razor.rz.scp.css */
/* Quiet single-line trail that sits above the page header without competing
with it. Uses the design tokens (tokens.css) for the oyster ink ramp. */
.breadcrumbs[b-8xmdtvckjl] {
margin-bottom: 10px;
/* Scroll, never wrap: on mobile the trail pans horizontally. */
overflow-x: auto;
scrollbar-width: none; /* Firefox */
}
.breadcrumbs[b-8xmdtvckjl]::-webkit-scrollbar {
display: none; /* WebKit */
}
.breadcrumbs-list[b-8xmdtvckjl] {
display: flex;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
white-space: nowrap;
min-width: max-content;
}
.breadcrumbs-item[b-8xmdtvckjl] {
display: inline-flex;
align-items: center;
font-size: 0.8rem;
line-height: 1.2;
}
.breadcrumbs-link[b-8xmdtvckjl],
.breadcrumbs-text[b-8xmdtvckjl],
.breadcrumbs-current[b-8xmdtvckjl] {
display: inline-block;
max-width: 18rem;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: bottom;
}
.breadcrumbs-link[b-8xmdtvckjl] {
color: var(--color-oyster-500);
text-decoration: none;
transition: color 0.15s ease;
}
.breadcrumbs-link:hover[b-8xmdtvckjl] {
color: var(--color-oyster-700);
text-decoration: underline;
text-underline-offset: 2px;
}
.breadcrumbs-text[b-8xmdtvckjl] {
color: var(--color-oyster-500);
}
/* Current page: slightly emphasized, still subordinate to the H1 below. */
.breadcrumbs-current[b-8xmdtvckjl] {
color: var(--color-oyster-700);
font-weight: 600;
}
.breadcrumbs-sep[b-8xmdtvckjl] {
font-size: 1rem;
color: var(--color-oyster-400);
margin: 0 2px;
flex-shrink: 0;
user-select: none;
}
@media (max-width: 640px) {
.breadcrumbs-link[b-8xmdtvckjl],
.breadcrumbs-text[b-8xmdtvckjl],
.breadcrumbs-current[b-8xmdtvckjl] {
max-width: 11rem;
}
}
/* /Components/Shared/FoodAttestationModal.razor.rz.scp.css */
/* Modal-rendered descendants — selectors apply directly without ::deep because the
.confirm-diff and .confirm-attest-note elements live in FoodAttestationModal's own
render tree (IngredientsVerification.razor.css can't reach across this component boundary). */
.confirm-diff[b-qn80toffqj] {
background: #f9fafb;
border-radius: 10px;
padding: 20px 24px;
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 20px;
}
.confirm-diff-row[b-qn80toffqj] {
display: flex;
align-items: center;
gap: 14px;
font-size: 0.8rem;
}
.confirm-diff-label[b-qn80toffqj] {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #9ca3af;
width: 40px;
flex-shrink: 0;
}
.confirm-diff-val[b-qn80toffqj] {
font-family: 'Courier New', monospace;
font-size: 0.8rem;
padding: 3px 10px;
border-radius: 6px;
font-weight: 600;
}
.confirm-diff-from[b-qn80toffqj] {
background: #fee2e2;
color: #991b1b;
text-decoration: line-through;
}
.confirm-diff-to[b-qn80toffqj] {
background: #dcfce7;
color: #166534;
}
.confirm-attest-note[b-qn80toffqj] {
display: flex;
align-items: flex-start;
gap: 10px;
background: #fffbeb;
border-left: 4px solid #f59e0b;
border-radius: 0 8px 8px 0;
padding: 16px;
font-size: 0.8rem;
color: #78350f;
line-height: 1.5;
}
.confirm-attest-note .material-icons[b-qn80toffqj] {
font-size: 1rem;
color: #d97706;
flex-shrink: 0;
margin-top: 1px;
}
/* /Components/Shared/FoodImage.razor.rz.scp.css */
/* Unified food/product photo tile. See FoodImage.razor for why this is centralised.
The whole point is `object-fit: contain` on a square white tile: product photos
arrive at arbitrary aspect ratios (brand-site scrapes, label uploads, retailer
feeds), so anything that fills the frame crops the package. Contain letterboxes
instead, and since packaging shots are already shot on white the letterbox is
usually invisible. Do not change this to cover. */
.fi[b-zm7aswz8zj] {
position: relative;
flex: 0 0 auto;
line-height: 0; /* no descender gap under the frame */
}
.fi-frame[b-zm7aswz8zj] {
width: 100%;
height: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: var(--color-white, #fff);
border: 1px solid var(--color-oyster-300, #E0DBE7);
}
.fi-frame img[b-zm7aswz8zj] {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
/* No photo (or a print surface that suppresses photos): a quiet linen tile with a
single placeholder glyph. One placeholder everywhere — the app previously used
fastfood / add_a_photo / photo / image / inventory_2 / a brand initial / the words
"Product Image" depending on which screen you were on. */
.fi-frame-empty[b-zm7aswz8zj] {
background: var(--color-oyster-100, #F9F8F3);
}
.fi-ph[b-zm7aswz8zj] {
color: var(--color-oyster-400, #B7B2C4);
}
/* Broken photo. The placeholder glyph ships in the markup on every tile so the
swap needs no DOM surgery: while a photo is present the glyph carries
.fi-ph-hidden, and food-image-fallback.js adds .fi-frame-broken to the frame
when the ![]() fails, which un-hides the glyph and hides the image (hiding the
image is also what suppresses the browser's alt-text rendering). Both broken
rules deliberately out-specify the two they override, so their position in this
file does not matter. */
.fi-ph-hidden[b-zm7aswz8zj] {
display: none;
}
.fi-frame.fi-frame-broken[b-zm7aswz8zj] {
background: var(--color-oyster-100, #F9F8F3);
}
.fi-frame.fi-frame-broken img[b-zm7aswz8zj] {
display: none;
}
.fi-frame-broken .fi-ph-hidden[b-zm7aswz8zj] {
display: inline-block;
}
/* Pending-review dot. Lives on .fi (outside the overflow-hidden frame) so it is
never clipped, and it is driven by DraftUrl rather than re-derived per call site. */
.fi-pending[b-zm7aswz8zj] {
position: absolute;
top: -3px;
right: -3px;
width: 12px;
height: 12px;
border-radius: 999px;
background: #FBBF24;
border: 2px solid var(--color-white, #fff);
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.16);
}
/* ── Size tokens ─────────────────────────────────────────────────────────────
Radius and inner padding scale with the tile so small thumbnails stay crisp
and large heroes stay soft. Padding keeps a contained label off the border. */
.fi-xs[b-zm7aswz8zj] { width: 32px; height: 32px; }
.fi-xs .fi-frame[b-zm7aswz8zj] { border-radius: 6px; padding: 2px; }
.fi-xs .fi-ph[b-zm7aswz8zj] { font-size: 16px; }
.fi-xs .fi-pending[b-zm7aswz8zj] { width: 10px; height: 10px; top: -2px; right: -2px; }
.fi-sm[b-zm7aswz8zj] { width: 40px; height: 40px; }
.fi-sm .fi-frame[b-zm7aswz8zj] { border-radius: 8px; padding: 3px; }
.fi-sm .fi-ph[b-zm7aswz8zj] { font-size: 19px; }
.fi-md[b-zm7aswz8zj] { width: 64px; height: 64px; }
.fi-md .fi-frame[b-zm7aswz8zj] { border-radius: 10px; padding: 4px; }
.fi-md .fi-ph[b-zm7aswz8zj] { font-size: 26px; }
.fi-lg[b-zm7aswz8zj] { width: 96px; height: 96px; }
.fi-lg .fi-frame[b-zm7aswz8zj] { border-radius: 12px; padding: 6px; box-shadow: 0 2px 8px rgba(16, 24, 40, 0.10); }
.fi-lg .fi-ph[b-zm7aswz8zj] { font-size: 34px; }
.fi-xl[b-zm7aswz8zj] { width: 120px; height: 120px; }
.fi-xl .fi-frame[b-zm7aswz8zj] { border-radius: 14px; padding: 7px; box-shadow: 0 2px 10px rgba(16, 24, 40, 0.12); }
.fi-xl .fi-ph[b-zm7aswz8zj] { font-size: 40px; }
/* ── Fill: no fixed size, contained at 100% of the parent box ────────────────
For showcase bands, whose job is to present the product big. Frameless on purpose:
a border would draw a box around the letterbox and make it legible, whereas a
white-background packshot floating on a white band has no visible seam at all. */
.fi-fill[b-zm7aswz8zj] {
width: 100%;
height: 100%;
}
.fi-fill .fi-frame[b-zm7aswz8zj] {
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
}
.fi-fill .fi-ph[b-zm7aswz8zj] {
font-size: 44px;
}
/* On a dark band the same photo needs the white plate back, or a white-background
packshot reads as a ragged floating blob against the artwork. The plate fills the
band (minus the band's own padding) rather than shrinking to a token. */
.fi-fill.fi-on-dark .fi-frame[b-zm7aswz8zj] {
background: var(--color-white, #fff);
border-radius: 12px;
padding: 10px;
}
/* On the two dark hero bands (product report hero, ingredients verification banner)
the white tile needs to lift off the artwork rather than hug it with a hairline.
Handled here, keyed off the band, so call sites still pass nothing but a size. */
.fi-on-dark .fi-frame[b-zm7aswz8zj] {
border-color: rgba(255, 255, 255, 0.55);
box-shadow: 0 10px 28px rgba(7, 12, 26, 0.34), 0 0 0 4px rgba(255, 255, 255, 0.16);
}
/* Print / PDF: drop the shadows (they render as grey mud) and keep the hairline. */
@media print {
.fi-frame[b-zm7aswz8zj] {
box-shadow: none !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.fi-pending[b-zm7aswz8zj] {
box-shadow: none;
}
}
/* /Components/Shared/FoodScoutIngredientsPanel.razor.rz.scp.css */
/* Tree rails — mirrors IngredientsVerification.razor.css ::deep rules.
Needed here because this component renders outside any HTML element owned
by IngredientsVerification, so ::deep from that file cannot reach us. */
.tree-cell[b-4bcszr0mv7] { padding-left: 4px; }
.tree-cell-inner[b-4bcszr0mv7] { display: flex; align-items: center; }
.tree-cell-railed .tree-cell-inner[b-4bcszr0mv7] { height: 100%; }
.tree-rail[b-4bcszr0mv7] {
display: inline-block;
flex: 0 0 auto;
width: 22px;
align-self: stretch;
position: relative;
}
.tree-rail-continue[b-4bcszr0mv7]::before,
.tree-rail-branch[b-4bcszr0mv7]::before,
.tree-rail-lastbranch[b-4bcszr0mv7]::before {
content: ''; position: absolute; left: 10px;
width: 1.5px; background: #94a3b8;
}
.tree-rail-continue[b-4bcszr0mv7]::before,
.tree-rail-branch[b-4bcszr0mv7]::before { top: -8px; bottom: -9px; }
.tree-rail-lastbranch[b-4bcszr0mv7]::before { top: -8px; height: calc(50% + 8px); }
.tree-rail-branch[b-4bcszr0mv7]::after,
.tree-rail-lastbranch[b-4bcszr0mv7]::after {
content: ''; position: absolute; top: 50%; left: 10px;
width: 11px; height: 1.5px; background: #94a3b8;
transform: translateY(-0.5px);
}
/* Tooltip */
.tooltip-wrap[b-4bcszr0mv7] { position: relative; display: inline-flex; }
.tooltip-wrap .tooltip-text[b-4bcszr0mv7] {
display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
margin-top: 0.5rem; padding: 0.5rem 0.75rem; background-color: #1e1b2e; color: white;
font-size: 0.75rem; font-style: normal; line-height: 1.4; border-radius: 0.375rem;
white-space: normal; width: max-content; max-width: 20rem; z-index: 50;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.tooltip-wrap:hover .tooltip-text[b-4bcszr0mv7] { display: block; }
/* /Components/Shared/IngredientLookupPanel.razor.rz.scp.css */
/* Panel-rendered descendants — selectors apply directly without ::deep because the
panel renders these elements in its own scope (IngredientsVerification.razor.css can't
reach across this component boundary since the panel is position:fixed and lives
outside IngredientsVerification's DOM subtree). */
.ai-lookup-result-card[b-djna5i84qm] {
border: 1.5px solid #e5e7eb;
border-radius: 10px;
padding: 13px 16px;
cursor: pointer;
transition: border-color 0.15s, background 0.15s, transform 0.15s, box-shadow 0.15s;
background: #fff;
}
.ai-lookup-result-card:hover[b-djna5i84qm] {
border-color: #25507c;
background: #f5f3ff;
box-shadow: 0 3px 10px rgba(37, 80, 124, 0.13);
transform: translateY(-1px);
}
.ai-lookup-result-card.ai-lookup-current[b-djna5i84qm] {
border-color: #059669;
background: #f0fdf4;
box-shadow: 0 0 0 1px #059669;
}
.ai-lookup-score-bar[b-djna5i84qm] {
height: 3px;
border-radius: 999px;
background: #f3f4f6;
overflow: hidden;
margin-top: 8px;
}
.ai-lookup-score-fill[b-djna5i84qm] {
height: 100%;
border-radius: 999px;
transition: width 0.55s cubic-bezier(.4, 0, .2, 1);
}
/* "Thinking" animation orb. */
.ai-lookup-orb[b-djna5i84qm] {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #25507c 0%, #5c7fa5 50%, #93aec9 100%);
animation: aiOrbPulse-b-djna5i84qm 1.5s ease-in-out infinite;
position: relative;
overflow: hidden;
flex-shrink: 0;
}
.ai-lookup-orb[b-djna5i84qm]::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.85) 50%, transparent 100%);
animation: aiScanLine-b-djna5i84qm 1.8s linear infinite;
}
@keyframes aiOrbPulse-b-djna5i84qm {
0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 80, 124, 0.3); }
50% { transform: scale(1.06); box-shadow: 0 0 20px 6px rgba(37, 80, 124, 0.15); }
}
@keyframes aiScanLine-b-djna5i84qm {
0% { transform: translateY(-6px); }
100% { transform: translateY(60px); }
}
/* Bouncing-dots indicator now lives in ThinkingDots.razor — kept the orb +
scan-line animation here because it's specific to this panel's layout. */
/* /Components/Shared/IngredientsVerificationPanel.razor.rz.scp.css */
/* Scoped CSS for IngredientsVerificationPanel.razor (extracted from the
IngredientsVerification page so the panel can also be hosted in ProductDetail's
fullscreen modal). Selectors are prefixed with ::deep so styles reach descendant
elements that may be rendered by extracted sub-components (ParsedIngredientRow,
AuditResolveModal, IngredientFlagModal, etc.); the panel wraps its markup in a
single scoped root div so the ::deep rules always have a scoped ancestor. */
/* ── Ingredient table base ── */
[b-g07oeh80ji] .ingredient-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
[b-g07oeh80ji] .ingredient-table thead th {
background: var(--color-oyster-100); padding: 8px 14px; text-align: left;
font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.06em; color: var(--color-oyster-500);
border-bottom: 1px solid var(--color-oyster-300);
position: sticky; top: 0; z-index: 10;
box-shadow: 0 2px 4px -1px rgba(0,0,0,0.08);
}
[b-g07oeh80ji] .ingredient-table tbody td {
padding: 7px 14px; color: var(--color-oyster-700);
border-bottom: 1px solid var(--color-oyster-200); vertical-align: middle;
}
[b-g07oeh80ji] .ingredient-table tbody tr:last-child td { border-bottom: none; }
[b-g07oeh80ji] .ingredient-table tbody tr { transition: background 0.12s; cursor: pointer; }
[b-g07oeh80ji] .ingredient-table tbody tr:hover { background: var(--color-oyster-100); }
/* ── Parsed ingredients collapsible panel ── */
[b-g07oeh80ji] .parsed-panel {
max-height: 0; overflow: clip; opacity: 0;
transition: max-height 0.32s cubic-bezier(0.4,0,0.2,1),
opacity 0.22s ease;
}
[b-g07oeh80ji] .parsed-panel.open {
max-height: 9000px; opacity: 1;
transition: max-height 0.32s cubic-bezier(0.4,0,0.2,1),
opacity 0.22s ease 0.04s;
}
/* `.fully-open` is added by attachPanelOverflowToggle (IngredientsVerification.razor.js) on
transitionend so the .ingred-flag-popup tooltip can escape the panel. The class
is stripped on transitionrun (and thus on close) so overflow:clip is back in
effect during the shrink animation — otherwise table rows leak below the
panel as max-height animates to 0. */
[b-g07oeh80ji] .parsed-panel.open.fully-open { overflow: visible; }
[b-g07oeh80ji] .parser-table-scroll { overflow-x: clip; }
[b-g07oeh80ji] #parser-table td:nth-child(3) { white-space: nowrap; }
/* ── Tree indent rails ──
Directory-tree-style guide lines drawn in the tree-cell before the name. The cell
stays a normal table-cell so it fills the full row height even when a sibling cell
wraps; an inner flex wrapper (.tree-cell-inner) takes `height: 100%` of that cell so
each rail span can `align-self: stretch` to the full row height. (Making the td
itself inline-flex shrank it to its own content, so the vertical lines broke between
rows whenever a sibling cell pushed the row taller.) One rail span per depth level is
emitted by ParsedIngredientRow; the kind (continue / branch / last) is computed by
IngredientDisplayHelpers.ComputeRailSlots.
Replaces the previous depth-based `padding-left: calc(4px + depth * 8px)` indent
plus the 8×1 gray tick on `.tree-name-child::before`. */
[b-g07oeh80ji] .tree-cell { padding-left: 4px; }
[b-g07oeh80ji] #parser-table .tree-cell { padding-left: 4px !important; }
[b-g07oeh80ji] .tree-cell-inner { display: flex; align-items: center; }
[b-g07oeh80ji] .tree-cell-railed .tree-cell-inner { height: 100%; }
[b-g07oeh80ji] .tree-rail {
display: inline-block;
flex: 0 0 auto;
width: 22px;
align-self: stretch;
position: relative;
}
/* The vertical pipe extends 7px above and 8px below the rail box so it bridges
the cell's 7px top/bottom padding AND the 1px border-bottom — without this,
consecutive rows' pipes leave a visible 15px gap. The horizontal connector
sits at the rail's vertical center, which is the row's visual center because
the cell content is vertically centered. */
[b-g07oeh80ji] .tree-rail-continue::before,
[b-g07oeh80ji] .tree-rail-branch::before,
[b-g07oeh80ji] .tree-rail-lastbranch::before {
content: ''; position: absolute; left: 10px;
width: 1.5px; background: var(--color-oyster-400);
}
/* Overlap +1px past each cell edge so the line bridges the row-divider border
even under subpixel rendering — the alternative ends at the boundary and the
browser rounds down on one side, leaving a hairline gap. */
[b-g07oeh80ji] .tree-rail-continue::before,
[b-g07oeh80ji] .tree-rail-branch::before { top: -8px; bottom: -9px; }
[b-g07oeh80ji] .tree-rail-lastbranch::before { top: -8px; height: calc(50% + 8px); }
[b-g07oeh80ji] .tree-rail-branch::after,
[b-g07oeh80ji] .tree-rail-lastbranch::after {
content: ''; position: absolute; top: 50%; left: 10px;
width: 11px; height: 1.5px; background: var(--color-oyster-400);
transform: translateY(-0.5px);
}
/* ── Tree name styles ── */
[b-g07oeh80ji] .tree-name-root { font-weight: 600; color: var(--color-oyster-900); text-transform: capitalize; }
[b-g07oeh80ji] .tree-name-child { color: var(--color-oyster-700); text-transform: capitalize; }
[b-g07oeh80ji] #parser-table .tree-name-child { color: var(--color-oyster-700); }
[b-g07oeh80ji] #parser-table tr[data-depth="25"] .tree-name-child { color: var(--color-primary); font-weight: 600; }
/* ── Depth-based row tinting ──
Background lightness steps down with depth, capped so deep nodes don't go pitch.
Depth 25 is the special "leaf overflow" indigo accent. */
[b-g07oeh80ji] #parser-table tr[data-depth] {
background: hsl(220 14% calc(99% - min(var(--tree-depth, 0), 10) * 0.55%));
}
[b-g07oeh80ji] #parser-table tr[data-depth="25"] {
background: #ecf1f6; /* one step lighter than --color-indigo-100, which is the hover tint */
border-left: 3px solid var(--color-primary);
}
[b-g07oeh80ji] #parser-table tr[data-depth]:hover { background: #e8eaf2 !important; }
[b-g07oeh80ji] #parser-table tr[data-depth="25"]:hover { background: var(--color-indigo-100) !important; }
/* Selection highlight wins over the depth-tinted base. The base rule above
(`#parser-table tr[data-depth]`) has higher specificity than a bare
`.bg-indigo-50` Tailwind utility, so the indigo class on a selected row gets
overridden to a near-white tint and looks unselected. Re-asserting the indigo
here, scoped + with the same attribute selector, takes precedence. */
[b-g07oeh80ji] #parser-table tr[data-depth].bg-indigo-50,
[b-g07oeh80ji] #parser-table tr[data-depth].bg-indigo-50:hover { background: #ecf1f6 !important; }
/* ── Match badges ── */
[b-g07oeh80ji] .match-cell { display: inline-flex; align-items: center; gap: 5px; }
[b-g07oeh80ji] .code-interp-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.68rem; font-weight: 600; }
[b-g07oeh80ji] .code-badge-green { background: var(--color-success-100); color: var(--color-success-text); }
[b-g07oeh80ji] .code-badge-yellow { background: var(--color-warning-100); color: var(--color-warning-text); }
[b-g07oeh80ji] .code-badge-red { background: var(--color-danger-100); color: var(--color-danger-text); }
[b-g07oeh80ji] .code-badge-gray { background: var(--color-oyster-200); color: var(--color-oyster-700); }
[b-g07oeh80ji] .code-badge-audited { background: var(--color-indigo-100); color: var(--color-indigo-600); }
[b-g07oeh80ji] .audited-badge { display: inline-flex; align-items: center; gap: 2px; font-size: 0.6rem; font-weight: 700; background: var(--color-indigo-200); color: var(--color-indigo-700); border-radius: 4px; padding: 1px 5px; margin-left: 4px; vertical-align: middle; }
[b-g07oeh80ji] .kickback-badge { display: inline-flex; align-items: center; gap: 2px; font-size: 0.6rem; font-weight: 700; background: #CCFBF1; color: #0F766E; border-radius: 4px; padding: 1px 5px; margin-left: 4px; vertical-align: middle; }
[b-g07oeh80ji] .audit-resolve-btn { background: var(--color-indigo-700) !important; color: #fff !important; border-color: var(--color-indigo-700) !important; }
[b-g07oeh80ji] .audit-resolve-btn:hover { background: var(--color-indigo-600) !important; }
[b-g07oeh80ji] .audit-banner { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.75rem 0; padding: 0.5rem 0.75rem; background: var(--color-indigo-100); color: var(--color-indigo-700); border: 1px solid var(--color-indigo-200); border-radius: 0.5rem; font-size: 0.75rem; }
/* Persistent "Matched still needs confirming" call to action (see .razor). */
[b-g07oeh80ji] .confirm-prompt-banner { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0.75rem 1rem 1rem; padding: 0.75rem 0.9rem; background: var(--color-success-100); color: var(--color-success-text); border: 1.5px solid var(--color-success-300); border-radius: 0.5rem; }
[b-g07oeh80ji] .confirm-prompt-text { flex: 1; font-size: 0.82rem; line-height: 1.45; }
[b-g07oeh80ji] .confirm-prompt-text strong { display: block; font-weight: 700; margin-bottom: 2px; }
[b-g07oeh80ji] .confirm-prompt-cta { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.9rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; background: var(--color-success-600); color: #fff; border: 1.5px solid var(--color-success-600); cursor: pointer; white-space: nowrap; transition: background 0.12s, border-color 0.12s; }
[b-g07oeh80ji] .confirm-prompt-cta:hover:not(:disabled) { background: var(--color-success-700); border-color: var(--color-success-700); }
[b-g07oeh80ji] .confirm-prompt-cta:disabled { opacity: 0.55; cursor: not-allowed; }
/* Kick-back "action needed" bar + Edit ingredients CTA. Amber, to match the row's
action-needed highlight; reuses .confirm-prompt-text for the copy block. */
[b-g07oeh80ji] .kickback-prompt-banner { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0.75rem 1rem 1rem; padding: 0.75rem 0.9rem; background: var(--color-warning-100); color: var(--color-warning-text); border: 1.5px solid var(--color-warning-500); border-radius: 0.5rem; }
[b-g07oeh80ji] .kickback-prompt-banner > .material-icons { color: var(--color-warning-700); }
[b-g07oeh80ji] .kickback-prompt-cta { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.9rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; background: var(--color-warning-700); color: #fff; border: 1.5px solid var(--color-warning-700); cursor: pointer; white-space: nowrap; transition: filter 0.12s; }
[b-g07oeh80ji] .kickback-prompt-cta:hover { filter: brightness(0.92); }
/* ── Row action buttons (shown on hover) ── */
[b-g07oeh80ji] .row-confirm-btn { border: 1.5px solid; border-radius: 999px; padding: 2px 9px; font-size: 0.68rem; font-weight: 700; cursor: pointer; background: none; transition: background 0.12s, border-color 0.12s; line-height: 1.4; margin-left: 5px; display: inline-flex; align-items: center; gap: 3px; }
[b-g07oeh80ji] .row-confirm-fuzzy { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
[b-g07oeh80ji] .row-confirm-fuzzy:hover { background: var(--color-indigo-600); border-color: var(--color-indigo-600); }
[b-g07oeh80ji] .row-confirm-nomatch { border-color: var(--color-primary); color: var(--color-indigo-700); background: #ecf1f6; }
[b-g07oeh80ji] .row-confirm-nomatch:hover { background: var(--color-indigo-100); }
[b-g07oeh80ji] .row-submit-review { background: var(--color-warning-500); color: var(--color-oyster-800); border-color: var(--color-warning-500); }
[b-g07oeh80ji] .row-submit-review:hover { background: var(--color-warning-600); border-color: var(--color-warning-600); color: #fff; }
[b-g07oeh80ji] .ingred-flag-btn {
background: none; border: none; padding: 2px 3px; cursor: pointer;
font-size: 0.8rem !important; color: var(--color-oyster-300); line-height: 1;
transition: color 0.12s; vertical-align: middle; margin-left: 4px;
}
[b-g07oeh80ji] .ingred-flag-btn:hover { color: var(--color-danger-500); }
[b-g07oeh80ji] .ingred-flag-btn.flagged { color: var(--color-danger-500); }
[b-g07oeh80ji] .ingred-flag-btn .material-icons { font-size: 0.8rem !important; }
/* HTML popup for flag notes (replaces native title=) */
[b-g07oeh80ji] .ingred-flag-hover {
position: relative;
display: inline-flex;
align-items: center;
}
[b-g07oeh80ji] .ingred-flag-readonly {
display: inline-flex;
align-items: center;
color: var(--color-danger-500);
margin-left: 4px;
padding: 2px 3px;
}
[b-g07oeh80ji] .ingred-flag-readonly .material-icons { font-size: 0.8rem !important; }
[b-g07oeh80ji] .ingred-flag-popup {
position: absolute;
bottom: calc(100% + 6px);
right: 0;
z-index: 50;
width: 280px;
padding: 10px 12px;
background: #fff;
border: 1.5px solid var(--color-indigo-600);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
text-align: left;
white-space: normal;
font-weight: 400;
font-size: 0.78rem;
line-height: 1.45;
color: var(--color-oyster-800);
visibility: hidden;
opacity: 0;
/* Hide is instant; show is delayed 1s and then fades in over 0.15s. */
transition: visibility 0s linear 0s, opacity 0.15s ease 0s;
}
[b-g07oeh80ji] .ingred-flag-hover:hover .ingred-flag-popup,
[b-g07oeh80ji] .ingred-flag-hover:focus-within .ingred-flag-popup {
visibility: visible;
opacity: 1;
transition: visibility 0s linear 1s, opacity 0.15s ease 1s;
}
[b-g07oeh80ji] .ingred-flag-hover.popup-suppressed .ingred-flag-popup {
visibility: hidden !important;
opacity: 0 !important;
transition: none !important;
}
[b-g07oeh80ji] .ingred-flag-popup-header {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-primary);
margin-bottom: 4px;
}
[b-g07oeh80ji] .ingred-flag-popup-body { white-space: pre-wrap; }
/* Owl icon next to ingredient names */
[b-g07oeh80ji] .owl-icon-inline { display: inline-flex; align-items: center; margin-left: 4px; vertical-align: middle; opacity: 0.6; }
[b-g07oeh80ji] .owl-icon-inline:hover { opacity: 1; }
/* ── Review stepper active row ── */
[b-g07oeh80ji] #parser-table tbody tr.review-active { background: #ecf1f6 !important; outline: 2px solid var(--color-primary); outline-offset: -1px; }
/* ── Kick-back arrival highlight ──
A brand landing from the kick-back email auto-scrolls to the flagged row; this yellow
"action needed" highlight pulses a glowing halo on arrival to grab the eye, holds bright
long enough to be noticed, then fades so the persistent marker is the row's own badge.
The glow rides on box-shadow; the outline gives a crisp edge on top of it. */
[b-g07oeh80ji] #parser-table tbody tr.kickback-target { animation: kickback-target-flash-b-g07oeh80ji 12s ease-out forwards; }
@keyframes kickback-target-flash-b-g07oeh80ji {
0% { background: #FEF08A !important; outline: 3px solid #EAB308; outline-offset: -1px; box-shadow: 0 0 0 3px rgba(234,179,8,0.55), 0 0 18px 6px rgba(234,179,8,0.65); }
6% { box-shadow: 0 0 0 2px rgba(234,179,8,0.30), 0 0 8px 2px rgba(234,179,8,0.30); }
12% { box-shadow: 0 0 0 3px rgba(234,179,8,0.55), 0 0 18px 6px rgba(234,179,8,0.65); }
18% { box-shadow: 0 0 0 2px rgba(234,179,8,0.30), 0 0 8px 2px rgba(234,179,8,0.30); }
24% { box-shadow: 0 0 0 3px rgba(234,179,8,0.55), 0 0 18px 6px rgba(234,179,8,0.65); }
90% { background: #FEF08A !important; outline: 3px solid #EAB308; outline-offset: -1px; box-shadow: 0 0 0 3px rgba(234,179,8,0.55), 0 0 18px 6px rgba(234,179,8,0.65); }
100% { background: transparent; outline: 3px solid transparent; outline-offset: -1px; box-shadow: 0 0 0 0 rgba(234,179,8,0); }
}
@media (prefers-reduced-motion: reduce) {
[b-g07oeh80ji] #parser-table tbody tr.kickback-target { animation: none; background: #FEF08A !important; outline: 3px solid #EAB308; outline-offset: -1px; box-shadow: 0 0 0 3px rgba(234,179,8,0.55), 0 0 18px 6px rgba(234,179,8,0.6); }
}
/* (.confirm-diff* + .confirm-attest-note moved to FoodAttestationModal.razor.css —
modal contents render in their own scope, unreachable from this file via ::deep.) */
/* (.conv-* moved to ResolveConversationPanel.razor.css; .ai-lookup-* moved to
IngredientLookupPanel.razor.css — those panels render in their own scopes,
unreachable from this file via ::deep.) */
/* Tooltip */
[b-g07oeh80ji] .tooltip-wrap { position: relative; display: inline-flex; }
[b-g07oeh80ji] .tooltip-wrap .tooltip-text {
display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
margin-top: 0.5rem; padding: 0.5rem 0.75rem; background-color: var(--color-oyster-900); color: white;
font-size: 0.75rem; font-style: normal; line-height: 1.4; border-radius: 0.375rem;
white-space: normal; width: max-content; max-width: 20rem; z-index: 50;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
[b-g07oeh80ji] .tooltip-wrap:hover .tooltip-text { display: block; }
/* ── Header pill hover effects ── */
[b-g07oeh80ji] .review-fuzzy-pill:hover { background: var(--color-warning-200) !important; }
[b-g07oeh80ji] .review-unmatched-pill:hover { background: var(--color-danger-200) !important; }
[b-g07oeh80ji] .confirm-all-pill:hover { background: var(--color-success-200) !important; border-color: var(--color-success-400) !important; }
/* ── Hero Banner ── */
[b-g07oeh80ji] .food-hero-outer {
border-radius: 16px; overflow: hidden;
box-shadow: 0 4px 24px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
margin-bottom: 1.5rem; position: relative; z-index: 0;
}
[b-g07oeh80ji] .food-card-image {
width: 100%; aspect-ratio: 3 / 1; min-height: 220px;
background: var(--color-oyster-900); overflow: hidden; position: relative;
--plate: 168px;
}
@media (min-width: 1024px) { [b-g07oeh80ji] .food-card-image { aspect-ratio: 4 / 1; min-height: 240px; --plate: 200px; } }
/* Branded band surface. Always the same, so the band never depends on the photo being
colourful enough to carry it. */
[b-g07oeh80ji] .food-card-base {
position: absolute; inset: 0;
background: linear-gradient(135deg, var(--color-indigo-500) 0%, var(--color-indigo-700) 60%, var(--color-indigo-800) 100%);
}
/* Dark showcase band (the second of the two blessed band patterns; the light one is
`.food-showcase` in components.css). A 4:1 strip cannot be filled by any product photo
without cropping it to a stripe, so the product sits on a white plate over a branded
surface, sized to the band rather than to a tile token so it stays large.
The plate and the overlay's left inset both derive from --plate on the band, so text can
never run under the plate. A purely height-driven plate (top/bottom inset + 1:1) would be
wrong here: the band's height tracks its width, so the plate would silently change width
at every viewport size while the text inset stayed where it was. */
[b-g07oeh80ji] .food-hero-plate {
position: absolute;
left: 24px; top: 50%; transform: translateY(-50%);
width: var(--plate); height: var(--plate);
z-index: 3;
}
[b-g07oeh80ji] .food-card-overlay {
position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
/* Left padding clears the plate (24px inset + plate + 20px gutter). */
padding: 56px calc(220px + 32px) 20px calc(var(--plate) + 44px);
background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.34) 55%, transparent 100%);
}
@media (min-width: 1024px) { [b-g07oeh80ji] .food-card-overlay { padding-right: calc(300px + 32px); } }
[b-g07oeh80ji] .food-card-name {
font-size: 1.6rem; font-weight: 900; color: #fff;
letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.2;
margin-bottom: 6px; text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
[b-g07oeh80ji] .food-card-brand {
font-size: 0.95rem; font-weight: 500; color: rgba(255,255,255,0.85);
text-shadow: 0 1px 6px rgba(0,0,0,0.5); letter-spacing: 0.02em;
}
[b-g07oeh80ji] .hero-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
[b-g07oeh80ji] .hero-pill {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 9px 3px 7px; border-radius: 999px;
font-size: 0.68rem; font-weight: 600; line-height: 1.3;
letter-spacing: 0.01em; backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px); white-space: nowrap;
}
[b-g07oeh80ji] .hero-pill .material-icons { font-size: 0.82rem; }
[b-g07oeh80ji] .hero-pill-indigo-dark { background: rgba(37,80,124,0.88); color: #fff; }
/* ── UPC chip inside hero ── */
[b-g07oeh80ji] .food-card-upc {
position: absolute; bottom: 14px; right: 16px;
display: flex; flex-direction: column; align-items: center; text-align: center;
background: #fff; border: 1px solid var(--color-oyster-300); border-radius: 10px;
padding: 8px 14px 12px; z-index: 2;
box-shadow: 0 2px 12px rgba(0,0,0,0.18); min-width: 220px;
}
@media (min-width: 1024px) { [b-g07oeh80ji] .food-card-upc { width: 300px; } }
/* ── Mobile hero adjustments ── */
@media (max-width: 639px) {
[b-g07oeh80ji] .food-card-overlay { padding: 40px 20px 16px 20px; }
[b-g07oeh80ji] .food-card-name { font-size: 1.1rem; }
[b-g07oeh80ji] .food-card-brand { font-size: 0.88rem; }
[b-g07oeh80ji] .food-card-upc { position: relative; bottom: auto; right: auto; width: 100%; margin-top: -1px; border-radius: 0 0 10px 10px; min-width: auto; }
/* Tight band: a smaller plate pinned to the top-left corner, with the overlay text
taking its full-width mobile padding beneath rather than beside it. */
[b-g07oeh80ji] .food-card-image { --plate: 116px; }
[b-g07oeh80ji] .food-hero-plate { left: 16px; top: 16px; transform: none; }
}
/* /Components/Shared/InviteHistoryRow.razor.rz.scp.css */
/* Shared hover-tooltip pattern (tooltip-wrap / tooltip-text) used on the invitation-row "resent"
indicator to reveal the original send date on hover. Anchored to the right edge of the trigger
(rather than centered) because the indicator sits at the right of the row, so the bubble opens
leftward and stays on screen. Scoped to this component so both host surfaces get it identically. */
.tooltip-wrap[b-nwzjeccac9] { position: relative; display: inline-flex; }
.tooltip-wrap .tooltip-text[b-nwzjeccac9] {
display: none; position: absolute; top: 100%; right: 0;
margin-top: 0.5rem; padding: 0.5rem 0.75rem; background-color: #1e1b2e; color: white;
font-size: 0.75rem; font-style: normal; line-height: 1.4; border-radius: 0.375rem;
white-space: normal; width: max-content; max-width: 18rem; z-index: 50;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
text-align: left;
}
.tooltip-wrap:hover .tooltip-text[b-nwzjeccac9] { display: block; }
/* /Components/Shared/NutritionFactsLabel.razor.rz.scp.css */
/* FDA-style Nutrition Facts label — shared between SpecSheetPane (chat) and SpecSheetView
(read-only spec sheet). Visual rules deliberately stay self-contained: no Tailwind, no app
theme tokens; this surface mimics a printed FDA label across all consumers. */
.nf-label[b-0a7upoh76i] {
background: #ffffff;
color: #000000;
border: 2px solid #000000;
border-radius: 8px;
overflow: hidden;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
.nf-label .nf-hdr[b-0a7upoh76i] {
font-size: 1.55rem;
font-weight: 900;
line-height: 1.05;
padding: 6px 10px 4px;
border-bottom: 1px solid #000000;
letter-spacing: -0.01em;
}
.nf-label .nf-serv[b-0a7upoh76i] {
padding: 2px 10px 4px;
border-bottom: 8px solid #000000;
}
.nf-label .nf-serv-top[b-0a7upoh76i] {
font-size: 0.72rem;
padding: 2px 0;
border-bottom: 1px solid #000000;
}
.nf-label .nf-serv-bot[b-0a7upoh76i] {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 6px;
font-size: 0.78rem;
padding: 3px 0 2px;
}
.nf-label .nf-serv-bot strong[b-0a7upoh76i] {
font-weight: 800;
}
.nf-label .nf-cal[b-0a7upoh76i] {
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 3px 10px 3px;
border-bottom: 4px solid #000000;
}
.nf-label .nf-cal-l[b-0a7upoh76i] {
display: flex;
flex-direction: column;
}
.nf-label .nf-cal-lbl[b-0a7upoh76i] {
font-size: 0.62rem;
line-height: 1.2;
}
.nf-label .nf-cal-kw[b-0a7upoh76i] {
font-size: 1.3rem;
font-weight: 900;
line-height: 1;
}
.nf-label .nf-cal-n[b-0a7upoh76i] {
font-size: 2.1rem;
font-weight: 900;
line-height: 1;
}
.nf-label .nf-dv-hdr[b-0a7upoh76i] {
text-align: right;
font-size: 0.68rem;
font-weight: 800;
padding: 2px 10px 2px;
border-bottom: 1px solid #000000;
}
.nf-label .nf-r[b-0a7upoh76i] {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 6px;
padding: 2px 10px;
border-bottom: 1px solid #000000;
font-size: 0.72rem;
min-height: 20px;
}
.nf-label .nf-r:last-child[b-0a7upoh76i] {
border-bottom: none;
}
.nf-label .nf-r .k[b-0a7upoh76i] {
flex: 1;
}
.nf-label .nf-r .dv[b-0a7upoh76i] {
flex-shrink: 0;
font-weight: 700;
}
.nf-label .nf-r strong[b-0a7upoh76i] {
font-weight: 800;
}
.nf-label .nf-r em[b-0a7upoh76i] {
font-style: italic;
}
.nf-label .nf-ind1[b-0a7upoh76i] {
padding-left: 24px;
}
.nf-label .nf-ind2[b-0a7upoh76i] {
padding-left: 38px;
}
.nf-label .nf-sep-thick[b-0a7upoh76i] {
height: 8px;
background: #000000;
}
.nf-label .nf-sep-med[b-0a7upoh76i] {
height: 4px;
background: #000000;
}
.nf-label .nf-foot[b-0a7upoh76i] {
padding: 6px 10px 8px;
font-size: 0.6rem;
line-height: 1.35;
color: #000000;
}
.nf-label .nf-dash[b-0a7upoh76i] {
color: #9ca3af;
font-weight: 400;
}
/* ── Click-to-edit affordances (chat spec-sheet pane only, via the Editable parameter) ──
Read-only consumers never get the nf-editable class, so nothing below applies to them. */
.nf-label .nf-editable[b-0a7upoh76i] {
cursor: pointer;
}
.nf-label .nf-r.nf-editable:hover[b-0a7upoh76i],
.nf-label .nf-cal.nf-editable:hover[b-0a7upoh76i],
.nf-label .nf-serv-top.nf-editable:hover[b-0a7upoh76i],
.nf-label .nf-serv-bot.nf-editable:hover[b-0a7upoh76i] {
background-color: rgba(37, 80, 124, 0.07);
}
/* The % Daily Value cell is its own click target inside the row, so it needs its own affordance:
without one it inherits the row's highlight and reads as "click here to edit the amount", which
is the opposite of what it does. Slightly stronger than the row tint so the smaller target wins
the eye when the pointer is over it. */
.nf-label .nf-r .dv.nf-editable:hover[b-0a7upoh76i] {
background-color: rgba(37, 80, 124, 0.16);
border-radius: 3px;
}
.nf-label .nf-edit-pencil[b-0a7upoh76i] {
flex-shrink: 0;
font-size: 12px;
line-height: 1;
color: rgba(37, 80, 124, 0.75);
opacity: 0;
transition: opacity 120ms ease-out;
pointer-events: none;
}
.nf-label .nf-editable:hover .nf-edit-pencil[b-0a7upoh76i] {
opacity: 1;
}
/* Serving lines are not flex rows; keep the pencil inline. */
.nf-label .nf-serv-top .nf-edit-pencil[b-0a7upoh76i],
.nf-label .nf-cal-n .nf-edit-pencil[b-0a7upoh76i] {
display: inline-block;
vertical-align: baseline;
margin-left: 4px;
}
.nf-label .nf-edit-input[b-0a7upoh76i] {
font: inherit;
font-weight: 600;
color: inherit;
background: #ffffff;
border: 1px solid rgba(37, 80, 124, 0.55);
border-radius: 4px;
padding: 0 4px;
width: 64px;
line-height: 1.3;
outline: none;
}
.nf-label .nf-edit-input:focus[b-0a7upoh76i] {
border-color: rgba(37, 80, 124, 0.9);
box-shadow: 0 0 0 2px rgba(37, 80, 124, 0.15);
}
.nf-label .nf-edit-input.invalid[b-0a7upoh76i] {
border-color: #b3261e;
background-color: rgba(254, 202, 202, 0.32);
}
.nf-label .nf-edit-unit[b-0a7upoh76i] {
margin-left: 2px;
color: #4b5563;
}
.nf-label .nf-edit-cal[b-0a7upoh76i] {
width: 84px;
font-size: 1rem;
font-weight: 800;
}
.nf-label .nf-serv-editor[b-0a7upoh76i] {
align-items: center;
}
.nf-label .nf-serv-editor-inputs[b-0a7upoh76i] {
display: flex;
gap: 4px;
}
.nf-label .nf-serv-editor-inputs .nf-edit-input[b-0a7upoh76i] {
width: 82px;
font-size: 0.72rem;
}
/* ── Field-change flash + missing-required tints (chat-side only via decorator) ─────
Rules live alongside the rest of the NFP styling so the panel is self-contained. */
@keyframes spec-field-flash-b-0a7upoh76i {
0% {
background-color: rgba(37, 80, 124, 0.28);
box-shadow: inset 0 0 0 1px rgba(37, 80, 124, 0.32);
}
40% {
background-color: rgba(37, 80, 124, 0.18);
box-shadow: inset 0 0 0 1px rgba(37, 80, 124, 0.18);
}
100% {
background-color: transparent;
box-shadow: inset 0 0 0 1px transparent;
}
}
.nf-label .nf-r.flash-a[b-0a7upoh76i],
.nf-label .nf-r.flash-b[b-0a7upoh76i],
.nf-label .nf-cal.flash-a[b-0a7upoh76i],
.nf-label .nf-cal.flash-b[b-0a7upoh76i],
.nf-label .nf-serv.flash-a[b-0a7upoh76i],
.nf-label .nf-serv.flash-b[b-0a7upoh76i] {
animation: spec-field-flash-b-0a7upoh76i 2.4s ease-out;
border-radius: 0;
}
@media (prefers-reduced-motion: reduce) {
.nf-label .nf-r.flash-a[b-0a7upoh76i],
.nf-label .nf-r.flash-b[b-0a7upoh76i],
.nf-label .nf-cal.flash-a[b-0a7upoh76i],
.nf-label .nf-cal.flash-b[b-0a7upoh76i],
.nf-label .nf-serv.flash-a[b-0a7upoh76i],
.nf-label .nf-serv.flash-b[b-0a7upoh76i] {
animation: none;
}
}
.nf-label .nf-r.missing[b-0a7upoh76i],
.nf-label .nf-cal.missing[b-0a7upoh76i],
.nf-label .nf-serv.missing[b-0a7upoh76i] {
background-color: rgba(254, 202, 202, 0.32);
transition: background-color 240ms ease-out;
}
/* NFP-check failure tint: a stronger red than the missing-required tint, with a red left accent bar,
since a failing panel is a validation error (not merely an absent value). Chat-side only, applied via
the RowClassFor/ServingExtraClasses/CaloriesExtraClasses decorators when save_product's NFP check
flags a row (INTEL-218). */
.nf-label .nf-r.nfp-fail[b-0a7upoh76i],
.nf-label .nf-cal.nfp-fail[b-0a7upoh76i],
.nf-label .nf-serv.nfp-fail[b-0a7upoh76i] {
background-color: rgba(248, 113, 113, 0.22);
box-shadow: inset 3px 0 0 0 #dc2626;
transition: background-color 240ms ease-out;
}
.nf-label .nf-r.missing.scanning[b-0a7upoh76i],
.nf-label .nf-cal.missing.scanning[b-0a7upoh76i],
.nf-label .nf-serv.missing.scanning[b-0a7upoh76i] {
position: relative;
overflow: hidden;
background-color: rgba(238, 242, 255, 0.9);
}
.nf-label .nf-r.missing.scanning .nf-dash[b-0a7upoh76i],
.nf-label .nf-cal.missing.scanning .nf-dash[b-0a7upoh76i],
.nf-label .nf-serv.missing.scanning .nf-dash[b-0a7upoh76i] {
color: #163450;
}
.nf-label .nf-r.missing.scanning[b-0a7upoh76i]::after,
.nf-label .nf-cal.missing.scanning[b-0a7upoh76i]::after,
.nf-label .nf-serv.missing.scanning[b-0a7upoh76i]::after {
content: "";
position: absolute;
right: 10px;
bottom: 2px;
width: 60%;
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg,
transparent 0%,
rgba(37, 80, 124, 0.15) 10%,
rgba(37, 80, 124, 0.9) 45%,
rgba(56, 189, 248, 0.95) 55%,
rgba(37, 80, 124, 0.15) 90%,
transparent 100%);
box-shadow:
0 0 8px rgba(37, 80, 124, 0.65),
0 0 18px rgba(56, 189, 248, 0.35);
animation: nf-row-scan-h-b-0a7upoh76i 1.8s ease-in-out infinite;
pointer-events: none;
}
@keyframes nf-row-scan-h-b-0a7upoh76i {
0% {
transform: translateX(-45%);
opacity: 0.55;
}
50% {
transform: translateX(75%);
opacity: 1;
}
100% {
transform: translateX(-45%);
opacity: 0.55;
}
}
@media (prefers-reduced-motion: reduce) {
.nf-label .nf-r.missing.scanning[b-0a7upoh76i]::after,
.nf-label .nf-cal.missing.scanning[b-0a7upoh76i]::after,
.nf-label .nf-serv.missing.scanning[b-0a7upoh76i]::after {
animation: nf-row-scan-pulse-b-0a7upoh76i 1.6s ease-in-out infinite;
transform: none;
}
@keyframes nf-row-scan-pulse-b-0a7upoh76i {
0%, 100% {
opacity: 0.28;
}
50% {
opacity: 0.95;
}
}
}
/* /Components/Shared/OnboardingResearch.razor.rz.scp.css */
/* "Research in progress" onboarding landing card. Renders in the dashboard content area (the real,
locked sidebar frames it), so this styles only the centered status card itself. */
.ob[b-8hkhiwk8x1] {
display: flex;
align-items: center;
justify-content: center;
min-height: calc(100vh - 8rem); /* content area minus MainLayout's p-8 top/bottom padding */
padding: 1rem;
}
.ob-card[b-8hkhiwk8x1] {
width: 100%;
max-width: 34rem;
background: #ffffff;
border: 1px solid #ece7dd;
border-radius: 24px;
box-shadow: 0 18px 48px -24px rgba(26, 16, 44, 0.28);
padding: 2.75rem 2.5rem 3rem;
text-align: center;
}
/* ── Spinner: a rotating arc around the WISEcode bug ── */
.ob-spinner[b-8hkhiwk8x1] {
position: relative;
width: 72px;
height: 72px;
margin: 0 auto 1.5rem;
}
.ob-spinner-arc[b-8hkhiwk8x1] {
position: absolute;
inset: 0;
border-radius: 50%;
border: 3px solid #eceafb;
border-top-color: #3b3ce8;
animation: ob-spin-b-8hkhiwk8x1 1s linear infinite;
}
.ob-spinner-bug[b-8hkhiwk8x1] {
position: absolute;
inset: 0;
margin: auto;
width: 38px;
height: 38px;
}
@keyframes ob-spin-b-8hkhiwk8x1 {
to { transform: rotate(360deg); }
}
/* ── Status pill ── */
.ob-pill[b-8hkhiwk8x1] {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.35rem 0.85rem;
border-radius: 999px;
background: #e8f7f1;
color: #0f7a5a;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 1.1rem;
}
.ob-dot[b-8hkhiwk8x1] {
width: 7px;
height: 7px;
border-radius: 50%;
background: #17b47f;
animation: ob-pulse-b-8hkhiwk8x1 1.6s ease-in-out infinite;
}
@keyframes ob-pulse-b-8hkhiwk8x1 {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.7); }
}
.ob-headline[b-8hkhiwk8x1] {
font-size: 1.6rem;
line-height: 1.25;
font-weight: 800;
color: #1a102c;
margin: 0 0 0.85rem;
}
.ob-body[b-8hkhiwk8x1] {
font-size: 0.95rem;
line-height: 1.6;
color: #6b6357;
margin: 0;
}
/* Reduced-motion: hold everything still. */
.ob--paused .ob-spinner-arc[b-8hkhiwk8x1],
.ob--paused .ob-dot[b-8hkhiwk8x1] {
animation: none;
}
@media (prefers-reduced-motion: reduce) {
.ob-spinner-arc[b-8hkhiwk8x1],
.ob-dot[b-8hkhiwk8x1] {
animation: none;
}
}
/* /Components/Shared/PackFormatsChip.razor.rz.scp.css */
.pack-format-wrap[b-rat7jcsdz6] {
margin-top: 0.35rem;
}
.pack-format-chip[b-rat7jcsdz6] {
align-items: center;
background: #eef2ff;
border: 1px solid #c7d2fe;
border-radius: 9999px;
color: #4338ca;
cursor: pointer;
display: inline-flex;
font-size: 0.7rem;
font-weight: 600;
line-height: 1rem;
padding: 0.15rem 0.55rem;
transition: background-color 150ms ease, border-color 150ms ease;
}
.pack-format-chip:hover[b-rat7jcsdz6],
.pack-format-chip[aria-expanded="true"][b-rat7jcsdz6] {
background: #e0e7ff;
border-color: #a5b4fc;
}
.pack-format-popover[b-rat7jcsdz6] {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 0.75rem;
box-shadow: 0 10px 25px rgb(15 23 42 / 14%);
min-width: 15rem;
overflow: hidden;
width: min(20rem, calc(100vw - 2rem));
}
.pack-format-heading[b-rat7jcsdz6] {
border-bottom: 1px solid #f3f4f6;
color: #6b7280;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.06em;
padding: 0.65rem 0.85rem;
text-transform: uppercase;
}
.pack-format-list[b-rat7jcsdz6] {
max-height: 14rem;
overflow-y: auto;
padding: 0.35rem;
}
.pack-format-item[b-rat7jcsdz6] {
align-items: center;
color: #374151;
display: flex;
font-size: 0.8rem;
gap: 0.75rem;
justify-content: space-between;
min-height: 2.25rem;
padding: 0.45rem 0.55rem;
}
.pack-format-identity[b-rat7jcsdz6] {
align-items: center;
display: flex;
gap: 0.6rem;
min-width: 0;
}
/* Name over package size, both clipped rather than wrapped so the popover keeps its width. */
.pack-format-text[b-rat7jcsdz6] {
display: flex;
flex-direction: column;
min-width: 0;
}
.pack-format-name[b-rat7jcsdz6] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pack-format-meta[b-rat7jcsdz6] {
color: #6b7280;
font-size: 0.7rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pack-format-processing[b-rat7jcsdz6] {
align-items: center;
color: #b45309;
display: inline-flex;
flex-shrink: 0;
font-size: 0.7rem;
font-weight: 600;
gap: 0.2rem;
}
.pack-format-processing .material-icons[b-rat7jcsdz6] {
font-size: 0.9rem;
}
.pack-format-link[b-rat7jcsdz6] {
border-top: 1px solid #f3f4f6;
color: #4f46e5;
display: block;
font-size: 0.8rem;
font-weight: 600;
padding: 0.65rem 0.85rem;
text-decoration: none;
}
.pack-format-link:hover[b-rat7jcsdz6] {
background: #eef2ff;
}
/* /Components/Shared/PageShell.razor.rz.scp.css */
/* THE canonical page content width: 1220px, centered.
Decision: the reports family already renders at ~1220px and is the app's
most-designed surface, so the rest of the app converges on it (rather than
Tailwind's max-w-7xl = 1280px, which only MyFoods/verification used, or the
assorted max-w-5xl/6xl one-offs). Padding matches the px-6/py-8 the pages
previously hand-rolled inside MainLayout's .p-8. */
.wise-page[b-4izy7p3mpm] {
max-width: 1220px;
margin-left: auto;
margin-right: auto;
padding: 32px 24px;
}
/* /Components/Shared/PortfolioLandingSummary.razor.rz.scp.css */
/* The card shell, donut, legends, shield block and buttons all come
from brand-intelligence.css; this file only lays the two columns out and gives the donut column
the container scope the Overview's own `donut-card` container query expects. */
.portfolio-landing[b-7jtjnmvwsc] {
margin-bottom: 24px;
}
.portfolio-landing-loading[b-7jtjnmvwsc] {
display: flex;
align-items: center;
justify-content: center;
padding: 48px 0;
}
/* Donut on the left, call to action on the right, with the Overview's hairline between them. */
.portfolio-landing-band[b-7jtjnmvwsc] {
display: grid;
grid-template-columns: minmax(0, 1.65fr) 1px minmax(280px, 1fr);
gap: 28px;
align-items: stretch;
padding-top: 26px;
padding-bottom: 26px;
}
.portfolio-landing-band > .dash-claim-divider[b-7jtjnmvwsc] {
background: var(--border);
align-self: stretch;
}
/* The donut column is its own `donut-card` container so the Overview's query that stacks the rings
above the legends still fires when the column gets narrow. */
.portfolio-landing-donut[b-7jtjnmvwsc] {
min-width: 0;
container-type: inline-size;
container-name: donut-card;
}
/* Center the call to action against the donut instead of letting it float at the top. */
.portfolio-landing-cta[b-7jtjnmvwsc] {
display: flex;
flex-direction: column;
justify-content: center;
gap: 18px;
min-width: 0;
}
.portfolio-landing-cta .dash-shield-block[b-7jtjnmvwsc] {
margin-top: 0;
}
/* One column below roughly a tablet: the donut needs ~500px beside its legends, and the shield
headline wraps, so cramming two columns any narrower reads worse than stacking. */
@media (max-width: 1100px) {
.portfolio-landing-band[b-7jtjnmvwsc] {
grid-template-columns: 1fr;
}
.portfolio-landing-band > .dash-claim-divider[b-7jtjnmvwsc] {
display: none;
}
}
/* /Components/Shared/Reports/ReportSquareCard.razor.rz.scp.css */
/* Report-hub card chrome — a more "designed" treatment for the (now permanent)
card view on the Portfolio / Studio report landing pages:
• a faint brand-tinted radial wash in the top-right corner
• a soft glow that fades in on hover, plus a lift + deeper shadow
• the icon tile lifts/tilts slightly on hover
• a gentle fade-up entrance when the page loads
All motion is disabled under prefers-reduced-motion. */
.report-hub-card[b-8ru3kuowwm] {
/* Brand blue (#25507C) — the same family the report headers use — drives the
card wash, glow and hover border. */
--rhc-accent: 37, 80, 124;
position: relative;
overflow: hidden;
/* A real-light, uniform blue surface (a few % of the header blue over white)
so cards read as a soft tinted panel rather than plain white. */
background:
linear-gradient(180deg, rgba(var(--rhc-accent), .08) 0%, rgba(var(--rhc-accent), .045) 100%),
#fff;
transition: transform .22s cubic-bezier(.22, 1, .36, 1),
box-shadow .22s ease,
border-color .22s ease;
animation: rhc-card-in-b-8ru3kuowwm .45s cubic-bezier(.22, 1, .36, 1) both;
will-change: transform;
}
/* Hover glow (kept behind the content via z-index below). */
.report-hub-card[b-8ru3kuowwm]::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: radial-gradient(150% 150% at 100% 0%, rgba(var(--rhc-accent), .12), transparent 55%);
opacity: 0;
transition: opacity .25s ease;
pointer-events: none;
}
.report-hub-card > *[b-8ru3kuowwm] { position: relative; z-index: 1; }
/* Navy header band — the same brand-navy field the report hero uses — spanning
the full card width and ending just above the report name. Carries the embossed
WISEcode bug watermark (darker navy emboss, like the hero) behind the icon + pill,
which sit on top. The band's overflow clips the tall owl to a strip. */
.report-hub-bug[b-8ru3kuowwm] {
position: absolute;
top: 0; left: 0; right: 0;
z-index: 0;
height: 72px;
overflow: hidden;
pointer-events: none;
display: flex;
align-items: center;
/* Match the report hero exactly: same navy field + embossed-bug colour. */
background: color-mix(in srgb, #25507C 78%, #1A2339);
color: color-mix(in srgb, #0B1426 38%, #25507C);
}
.report-hub-bug[b-8ru3kuowwm] .upf-hero-bug {
width: 100%; height: auto; display: block;
filter: drop-shadow(0 1.5px 0 rgba(255, 255, 255, .14));
}
.report-hub-card:hover[b-8ru3kuowwm] {
transform: translateY(-4px);
border-color: rgba(var(--rhc-accent), .35);
box-shadow: 0 18px 40px -16px rgba(17, 24, 39, .28), 0 4px 12px -6px rgba(var(--rhc-accent), .18);
}
.report-hub-card:hover[b-8ru3kuowwm]::after { opacity: 1; }
/* Icon tile micro-interaction. */
.report-hub-tile[b-8ru3kuowwm] { transition: transform .22s cubic-bezier(.22, 1, .36, 1); }
.report-hub-card:hover .report-hub-tile[b-8ru3kuowwm] { transform: scale(1.06) rotate(-3deg); }
@keyframes rhc-card-in-b-8ru3kuowwm {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.report-hub-card[b-8ru3kuowwm] { animation: none; transition: border-color .2s ease; }
.report-hub-card:hover[b-8ru3kuowwm] { transform: none; }
.report-hub-tile[b-8ru3kuowwm] { transition: none; }
.report-hub-card:hover .report-hub-tile[b-8ru3kuowwm] { transform: none; }
}
/* /Components/Shared/ResolveConversationPanel.razor.rz.scp.css */
/* Conversation-flow styles for the No-Match Resolve panel. Same scoping rationale as
the other extracted modals/panels: this component is position:fixed and lives outside
IngredientsVerification's DOM subtree, so its scope is unreachable from IngredientsVerification.razor.css. */
.conv-choices[b-4j7mbjatxj] {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
}
.conv-choice-btn[b-4j7mbjatxj] {
border: 1.5px solid #cbd9e8;
border-radius: 20px;
padding: 5px 12px;
font-size: 0.73rem;
font-weight: 600;
color: #163450;
background: #fff;
cursor: pointer;
transition: background 0.12s, border-color 0.12s;
}
.conv-choice-btn:hover[b-4j7mbjatxj] {
background: #ecf1f6;
border-color: #25507c;
}
/* Chat thinking-dots indicator now lives in ThinkingDots.razor. */
/* /Components/Shared/SpecSheetModal.razor.rz.scp.css */
/* Modal-only pending-review banner. Sits outside SpecSheetView so the theme custom properties
set on the spec-sheet root aren't visible here — colors are passed via inline style at the
call site instead. */
.ss-pending-banner[b-bx73b27y4w] {
margin: 12px 32px 0;
padding: 10px 14px;
border: 1px solid;
border-radius: 4px;
display: flex;
align-items: center;
gap: 10px;
font-size: 9pt;
font-weight: 600;
}
.ss-pending-banner .material-icons[b-bx73b27y4w] {
font-size: 18px;
}
.spec-sheet-modal-backdrop[b-bx73b27y4w] {
z-index: 90 !important;
}
@media (max-width: 768px) {
.spec-sheet-modal-dialog[b-bx73b27y4w] {
min-height: 100dvh;
}
.spec-sheet-modal-chrome[b-bx73b27y4w] {
top: 0;
flex-wrap: wrap;
gap: 0.75rem;
padding: 0.75rem 1rem;
}
.spec-sheet-modal-title[b-bx73b27y4w] {
flex: 1 1 100%;
min-width: 0;
padding-right: 0;
}
.spec-sheet-modal-actions[b-bx73b27y4w] {
width: 100%;
justify-content: flex-end;
gap: 0.5rem;
}
.spec-sheet-modal-actions button[b-bx73b27y4w] {
min-height: 2.5rem;
}
.spec-sheet-modal-actions button[title="Close"][b-bx73b27y4w] {
width: 2.5rem;
flex: 0 0 2.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
}
.ss-pending-banner[b-bx73b27y4w] {
margin: 10px 16px 0;
}
}
/* /Components/Shared/SpecSheetView.razor.rz.scp.css */
/* SpecSheetView — scoped stylesheet, mirrors food-details-export/project/spec-sheet.html.
All design tokens come from the parent's CSS custom properties (set via SpecSheetTheme.CssVars).
No Tailwind, no oyster/indigo tokens, no Material Icons, no app-card / btn-primary styles.
This surface is intentionally a printable artifact, not a regular WISE page. */
.spec-sheet-root[b-2yrlwh3xgx] {
font-family: var(--font-sans);
color: var(--ink);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 10.5pt;
line-height: 1.4;
}
.spec-sheet-root *[b-2yrlwh3xgx] { box-sizing: border-box; }
.ss-page[b-2yrlwh3xgx] {
/* Locked to the shared report page token (--rs-page) so the product details page
background matches the GRAS / UPF / Insights reports. The .ss-page wrapper carries
the rpt-skin class to bring that token into scope. */
background: var(--rs-page);
width: 100%;
display: flex;
flex-direction: column;
}
/* ───────── Header ───────── */
.ss-hdr[b-2yrlwh3xgx] {
background: var(--header-navy);
color: #fff;
padding: 18px 32px 14px;
position: relative;
}
.ss-hdr-row[b-2yrlwh3xgx] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.ss-hdr-brand[b-2yrlwh3xgx] {
display: flex;
align-items: center;
gap: 14px;
}
.ss-hdr-logoblock[b-2yrlwh3xgx] {
display: flex;
flex-direction: column;
align-items: center;
}
.ss-hdr-logo[b-2yrlwh3xgx] {
height: 28px;
width: auto;
filter: brightness(0) invert(1);
}
.ss-hdr-intelligence[b-2yrlwh3xgx] {
font-size: 7pt;
font-weight: 400;
letter-spacing: 0.18em;
color: rgba(255,255,255,0.6);
margin-top: 2px;
margin-left: 36px;
}
.ss-hdr-divider[b-2yrlwh3xgx] {
width: 1px;
height: 22px;
background: rgba(255,255,255,0.22);
}
.ss-hdr-doctype[b-2yrlwh3xgx] {
font-size: 9.5pt;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.ss-hdr-doctype span[b-2yrlwh3xgx] {
display: block;
font-weight: 400;
color: rgba(255,255,255,0.6);
letter-spacing: 0.14em;
font-size: 8pt;
margin-top: 2px;
}
.ss-hdr-meta[b-2yrlwh3xgx] {
display: flex;
gap: 24px;
align-items: center;
}
.ss-hdr-meta-item[b-2yrlwh3xgx] {
text-align: right;
}
.ss-hdr-meta-item .k[b-2yrlwh3xgx] {
font-size: 7.5pt;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
font-weight: 700;
line-height: 1;
}
.ss-hdr-meta-item .v[b-2yrlwh3xgx] {
font-size: 10pt;
color: #fff;
font-weight: 700;
margin-top: 4px;
font-variant-numeric: tabular-nums;
}
.ss-hdr-stripe[b-2yrlwh3xgx] {
height: 3px;
background: var(--brand-indigo);
}
/* ───────── Product identity ───────── */
.ss-product[b-2yrlwh3xgx] {
padding: 22px 32px 18px;
border-bottom: 1px solid var(--card-border);
}
.ss-product-top[b-2yrlwh3xgx] {
display: grid;
grid-template-columns: 116px 1fr auto;
align-items: flex-start;
gap: 22px;
}
/* The package shot used to be a bespoke 116×143 cover frame here; the spec sheet now
renders its identity through the shared , whose product image is
a tile. Nothing left to style. */
.ss-product-info[b-2yrlwh3xgx] { min-width: 0; }
.ss-product-brandmark[b-2yrlwh3xgx] {
height: 64px; width: auto; max-width: 240px; object-fit: contain; display: block;
margin-bottom: 12px;
}
.ss-product-brand[b-2yrlwh3xgx] {
font-size: 9pt;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--rule-blue);
font-weight: 700;
margin-bottom: 6px;
}
.ss-product-title[b-2yrlwh3xgx] {
font-size: 22pt;
font-weight: 700;
letter-spacing: -0.012em;
line-height: 1.1;
color: var(--ink);
max-width: 28ch;
}
/* Status badge + shield */
.ss-product-badges[b-2yrlwh3xgx] {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
flex-wrap: wrap;
}
.ss-upf-badge[b-2yrlwh3xgx] {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: 999px;
font-size: 8.5pt;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.4;
}
.ss-upf-badge svg[b-2yrlwh3xgx] { flex-shrink: 0; }
.ss-upf-non-verified[b-2yrlwh3xgx] { background: var(--upf-non-verified-bg); color: var(--upf-non-verified-ink); }
.ss-upf-non-prequal[b-2yrlwh3xgx] { background: var(--upf-non-prequal-bg); color: var(--upf-non-prequal-ink); }
.ss-upf-non[b-2yrlwh3xgx] { background: var(--upf-non-bg); color: var(--upf-non-ink); }
.ss-upf-ultra[b-2yrlwh3xgx] { background: var(--upf-ultra-bg); color: var(--upf-ultra-ink); }
/* Description */
.ss-description[b-2yrlwh3xgx] {
margin-top: 12px;
font-size: 9.5pt;
line-height: 1.5;
color: var(--description-ink, var(--ink-soft));
}
.ss-product-id[b-2yrlwh3xgx] {
text-align: right;
font-variant-numeric: tabular-nums;
}
.ss-product-id .lbl[b-2yrlwh3xgx] {
font-size: 7.5pt;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-muted);
font-weight: 700;
}
.ss-product-id .val[b-2yrlwh3xgx] {
font-size: 12pt;
font-weight: 700;
color: var(--ink);
margin-top: 2px;
}
.ss-product-barcode[b-2yrlwh3xgx] {
margin-top: 6px;
height: 56px;
width: auto;
max-width: 200px;
display: inline-block;
}
.ss-product-barcode:not([src])[b-2yrlwh3xgx], .ss-product-barcode[src=""][b-2yrlwh3xgx] { display: none; }
/* Serving facts — slim inline band: a small Material Symbol + small-caps label
beside a moderate serif value, segments split by a dot, sitting on a single
bottom hairline (no card chrome). Reads as a refined caption line and stays
balanced with either one or two facts. Uses .rpt-skin tokens. */
.ss-facts[b-2yrlwh3xgx] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 12px;
padding: 14px 2px;
border-bottom: 1px solid var(--rs-border);
}
/* Each fact is icon + label + value, evenly spaced by the inner gap. */
.ss-fact[b-2yrlwh3xgx] { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
/* Dot separator before every fact except the first. It is a flex child of the
band, so it spaces itself naturally and never dangles when a value wraps. */
.ss-fact:not(:first-child)[b-2yrlwh3xgx]::before {
content: "";
width: 4px;
height: 4px;
border-radius: 50%;
background: color-mix(in srgb, var(--rs-text) 22%, transparent);
}
.ss-fact-icon[b-2yrlwh3xgx] {
font-size: 17px;
line-height: 1;
color: color-mix(in srgb, var(--rs-muted) 60%, var(--rs-surface));
font-variation-settings: 'FILL' 0, 'wght' 400, 'opsz' 20;
}
.ss-fact-label[b-2yrlwh3xgx] {
font-size: 11px;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--rs-muted);
white-space: nowrap;
}
.ss-fact-value[b-2yrlwh3xgx] {
font-family: var(--rs-serif);
font-size: 17px;
font-weight: 700;
color: var(--rs-text);
font-variant-numeric: tabular-nums;
}
/* ───────── Report-style body shell ───────── */
/* The body reuses the shared .rpt-skin/.rpt-page/.rpt-card system; cards float
on the existing page background, the same as the analytics reports. */
.ss-rpt-body[b-2yrlwh3xgx] { width: 100%; }
/* Product description lead line above the serving strip. */
.ss-lead[b-2yrlwh3xgx] {
margin: 0;
font-size: 13.5px;
line-height: 1.55;
color: var(--rs-muted);
}
/* Source note on the right of the Package Nutrition & Ingredients card head. */
.ss-card-source[b-2yrlwh3xgx] {
margin-left: auto;
align-self: baseline;
font-size: 12px;
color: var(--rs-subtle);
font-weight: 500;
letter-spacing: 0.02em;
}
/* ───────── NFP + Ingredients grid ───────── */
.ss-grid[b-2yrlwh3xgx] {
margin-top: 14px;
display: grid;
grid-template-columns: 320px 1fr;
gap: 22px;
align-items: start;
}
@media (max-width: 768px) {
.ss-grid[b-2yrlwh3xgx] { grid-template-columns: 1fr; }
}
/* The actual Nutrition Facts panel is rendered by the shared
component (Components/Shared/NutritionFactsLabel.razor) — keep this host slot
constrained to the design's left-column width. */
.ss-nfp-host[b-2yrlwh3xgx] {
width: 100%;
max-width: 340px;
}
.ss-requirement-exception[b-2yrlwh3xgx] {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 16px 18px;
border: 1px solid color-mix(in srgb, var(--rs-success, #28755b) 35%, var(--rs-border));
border-radius: var(--rs-r);
background: color-mix(in srgb, var(--rs-success, #28755b) 8%, var(--rs-surface-2));
color: var(--rs-text);
}
.ss-requirement-exception .material-icons[b-2yrlwh3xgx] {
color: var(--rs-success, #28755b);
font-size: 20px;
}
.ss-requirement-exception div[b-2yrlwh3xgx] { display: grid; gap: 4px; }
.ss-requirement-exception strong[b-2yrlwh3xgx] { font-size: 13px; }
.ss-requirement-exception span:last-child[b-2yrlwh3xgx] {
color: var(--rs-muted);
font-size: 12px;
line-height: 1.45;
}
/* ───────── Ingredients column ───────── */
.ss-ing[b-2yrlwh3xgx] {
display: flex;
flex-direction: column;
gap: 14px;
}
/* Ingredients/allergen card — styled to match the shared report cards
(.rpt-skin tokens: linen surface, hairline border, rounded corners). */
.ss-ing-card[b-2yrlwh3xgx] {
background: var(--rs-surface-2);
border: 1px solid var(--rs-border);
border-radius: var(--rs-r);
padding: 18px 20px;
}
.ss-ing-heading[b-2yrlwh3xgx] {
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--rs-subtle);
font-weight: 800;
margin-bottom: 8px;
}
.ss-ing-statement[b-2yrlwh3xgx] {
font-family: var(--rs-sans);
font-size: 13.5px;
line-height: 1.6;
color: var(--rs-text);
margin: 0;
white-space: pre-wrap;
}
/* ───────── Footer ───────── */
.ss-spacer[b-2yrlwh3xgx] { flex: 1; min-height: 24px; }
.ss-footer[b-2yrlwh3xgx] {
margin-top: auto;
padding: 14px 32px 18px;
border-top: 1px solid var(--card-border);
display: flex;
justify-content: space-between;
align-items: center;
font-size: 8pt;
color: var(--ink-muted);
flex-wrap: wrap;
gap: 8px;
}
.ss-footer-left[b-2yrlwh3xgx] { display: flex; align-items: center; gap: 10px; }
.ss-footer-logo[b-2yrlwh3xgx] {
height: 16px;
width: auto;
}
.ss-footer strong[b-2yrlwh3xgx] { color: var(--ink); font-weight: 700; }
.ss-footer-right[b-2yrlwh3xgx] { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.ss-footer-right a[b-2yrlwh3xgx] { color: var(--rule-blue); font-weight: 700; text-decoration: none; }
/* /Components/Shared/SwitchOrganization.razor.rz.scp.css */
.switch-organization-modal[b-6776ea0gd5] {
padding: 60px;
}
.switch-organization-close[b-6776ea0gd5] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 9999px;
z-index: 2;
}
.switch-organization-close:hover[b-6776ea0gd5] {
background: rgba(17, 24, 39, 0.04);
}
@media (max-width: 768px) {
.switch-organization-overlay[b-6776ea0gd5] {
z-index: 90;
align-items: flex-start;
padding: 76px 14px 14px;
overflow-y: auto;
}
.switch-organization-modal[b-6776ea0gd5] {
width: min(100%, 640px);
max-height: calc(100dvh - 92px);
margin: 0;
overflow-y: auto;
padding: 28px 20px 24px;
border-radius: 16px;
}
.switch-organization-close[b-6776ea0gd5] {
position: sticky;
top: 0;
float: right;
margin: -12px -8px 8px 12px;
color: #827c90;
background: #fff;
box-shadow: 0 1px 2px rgba(17, 24, 39, 0.08);
}
.switch-organization-close .material-icons[b-6776ea0gd5] {
font-size: 24px !important;
}
}
/* /Components/Shared/ThinkingDots.razor.rz.scp.css */
/* Three-dot "thinking" indicator for chat-styled drawers. */
.thinking-dots[b-t2tx7t5k4d] {
display: inline-flex;
gap: 4px;
align-items: center;
}
.thinking-dots span[b-t2tx7t5k4d] {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-indigo-300);
animation: thinkingDotsBounce-b-t2tx7t5k4d 1.2s infinite;
}
.thinking-dots span:nth-child(2)[b-t2tx7t5k4d] { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3)[b-t2tx7t5k4d] { animation-delay: 0.4s; }
@keyframes thinkingDotsBounce-b-t2tx7t5k4d {
0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
30% { opacity: 1; transform: scale(1.2); }
}
@media (prefers-reduced-motion: reduce) {
.thinking-dots span[b-t2tx7t5k4d] { animation: none; }
}
/* /Components/Shared/VerificationStepHeader.razor.rz.scp.css */
/* Inner column matches PageShell's canonical .wise-page frame (1220px centered,
24px side padding) so the header content aligns with the page content below. */
.verification-step-header-inner[b-8am7sh19j9] {
max-width: 1220px;
margin-left: auto;
margin-right: auto;
padding: 0 24px;
}
/* /Components/Shared/WiseToast.razor.rz.scp.css */
/* Keyframes are bundled globally by Blazor CSS isolation (selector-less rules
don't get scoped), so the inline animation: declarations in WiseToast.razor
can still reference them by name. */
@keyframes wi-toast-in-b-mafshysot2 {
from { opacity: 0; transform: translateX(1rem); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes wi-toast-out-b-mafshysot2 {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(1rem); }
}
|