@layer infine.components {
/* =============================================================
   Structured-field grid integration
   ============================================================= */

/* Summary chip rendered in the grid cell when the column type is one of the
   structured ones (ingredient-details, nutrition, material-weights,
   checkbox-group). Replaces the lossy flatten-value string with counts +
   status so the reader can scan the column at a glance. */
.connect-grid-summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--infine-text);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.connect-grid-summary--empty {
    color: var(--mantine-color-gray-5);
}

.connect-grid-summary--complete {
    color: var(--infine-green-dark-strong);
    font-weight: 600;
}

.connect-grid-summary--partial {
    color: var(--infine-yellow-strong, var(--infine-yellow-bright));
}

.connect-grid-summary--error {
    color: var(--infine-red-strong);
    font-weight: 600;
}

.connect-grid-summary-meta {
    color: var(--mantine-color-gray-6);
    font-weight: 400;
}

.connect-grid-summary-pip {
    font-size: 13px;
    flex-shrink: 0;
}

/* Popup cell editor — the AG Grid floating panel hosts the SAME
   render-field-input renderer the single view uses. The shell adds:
   - a title row (field label · product name)
   - a footer with "Copy from row…" + "Open in single view"
   - a hint row showing keyboard shortcuts
   Field-state on the wrapper (`.connect-grid-popup-editor--error /
   --required-empty`) tints the left edge so the same vocabulary as the
   single view's field block survives. */
.connect-grid-popup-editor {
    background: white;
    border: 1px solid var(--infine-blue-light);
    border-radius: 6px;
    box-shadow:
        0 12px 32px rgba(0, 51, 102, 0.18),
        0 2px 8px rgba(0, 51, 102, 0.08);
    padding: 14px 16px 10px;
    /* Explicit width — `max-width` alone lets the popup shrink to its content's
       intrinsic min-width when AG Grid anchors the wrapper at a constrained
       horizontal position (e.g. near the right edge). The popup-position
       useEffect on the editor clamps the wrapper's left so a fixed-width
       popup still fits in the viewport. */
    width: min(640px, calc(100vw - 24px));
    max-height: min(560px, calc(100vh - 120px));
    overflow-y: auto;
    z-index: 100;
    /* Inherit Mantine font so Mantine components render in Open Sans, not
       AG Grid's inherited Quartz font. */
    font-family: var(--mantine-font-family);
    color: var(--infine-text);
}

/* Ingredient-details hosts a 6-column grid (ingredient · origin · share ·
   certification · seafood · remove) that won't shrink below ~730px. Widen its
   popup beyond the default 640px so the Seafood column + remove button render
   inside the popup instead of overflowing past its right edge. */
.connect-grid-popup-editor--wide {
    width: min(768px, calc(100vw - 24px));
}

.connect-grid-popup-editor--error {
    border-left: 3px solid var(--infine-red-bright);
}

.connect-grid-popup-editor--required-empty {
    border-left: 3px solid var(--infine-yellow-bright);
}

.connect-grid-popup-editor-header {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--mantine-color-gray-2);
}

.connect-grid-popup-editor-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.connect-grid-popup-editor-label {
    font-family: var(--mantine-font-family-headings);
    font-weight: 700;
    font-size: 14px;
    color: var(--infine-blue);
}

.connect-grid-popup-editor-product {
    font-size: 12px;
    color: var(--mantine-color-gray-6);
}

.connect-grid-popup-editor-body {
    padding: 4px 0 12px;
}

.connect-grid-popup-editor-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--mantine-color-gray-2);
}

.connect-grid-popup-editor-hint {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    font-size: 11px;
    color: var(--mantine-color-gray-6);
}

.connect-grid-popup-editor-hint kbd {
    display: inline-block;
    padding: 1px 4px;
    border-radius: 3px;
    background: var(--mantine-color-gray-1);
    border: 1px solid var(--mantine-color-gray-3);
    font-family: var(--mantine-font-family-monospace, monospace);
    font-size: 10px;
    color: var(--infine-text);
}

/* Donor picker rows inside the popup's "Copy from row…" dropdown. */
.connect-grid-popup-donor-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: background 120ms ease, border-color 120ms ease;
}

.connect-grid-popup-donor-row:hover {
    background: var(--infine-blue-bg);
    border-color: var(--infine-blue-light);
}

.connect-grid-popup-donor-row .donor-name {
    font-weight: 500;
    color: var(--infine-text);
    font-size: 13px;
}

/* When Mantine Comboboxes are rendered with `withinPortal: false` inside the
   popup, their dropdowns inherit `width: target` (matching the trigger). The
   ingredient picker's trigger is column-narrow, so the dropdown collapses to
   a sliver and the long option labels wrap one character per line. Give every
   dropdown inside the popup room to breathe — they're allowed to overflow the
   trigger's column horizontally, but stay clamped inside the popup wrapper. */
.connect-grid-popup-editor .mantine-Combobox-dropdown,
.connect-grid-popup-editor .mantine-Select-dropdown,
.connect-grid-popup-editor .mantine-MultiSelect-dropdown {
    min-width: 220px;
    max-width: min(360px, calc(100vw - 48px));
    width: max-content;
}

.connect-grid-popup-donor-row .donor-gtin {
    font-family: var(--mantine-font-family-monospace, monospace);
    font-size: 11px;
    color: var(--mantine-color-gray-6);
}

/* Make sure AG Grid's own popup wrapper doesn't clip our editor. */
.ag-popup-editor {
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* =============================================================
   "Open in single view" focus pulse — fires once when the grid's popup
   editor routes the user into the single view with a target field id.
   ============================================================= */

.connect-field-block--just-focused {
    animation: connect-field-block-just-focused 1500ms ease-out;
}

@keyframes connect-field-block-just-focused {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--infine-blue-bright) 40%, transparent); }
    40%  { box-shadow: 0 0 0 10px color-mix(in srgb, var(--infine-blue-bright) 22%, transparent); }
    100% { box-shadow: 0 0 0 0 transparent; }
}

}