/* vorugreind.css — per-field review page */

.vorugreind-page {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--light-grey);
    color: var(--text-color);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    overflow: hidden;
}

.vorugreind-page h1,
.vorugreind-page h2,
.vorugreind-page h3 {
    font-family: var(--font-display);
    color: var(--blue-brand);
    font-weight: 500;
    margin: 0;
}

/* Header strip */
.vg-header {
    background: #fff;
    border-bottom: 1px solid var(--light-blue-2);
    padding: 12px 32px;
    display: flex;
    align-items: center;
    gap: 24px;
}
.vg-header__crumb { font-size: 11px; color: var(--text-muted); margin-bottom: 2px; }
.vg-header__title {
    font-size: 20px;
    font-weight: 500;
    color: var(--blue-brand);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vg-header__title .gtin { color: var(--text-muted); font-weight: 400; font-size: 14px; }

.vg-header__counters { display: flex; align-items: center; gap: 18px; }

.vg-counter { display: flex; align-items: center; gap: 7px; }
.vg-counter__icon {
    width: 24px; height: 24px; border-radius: 4px;
    display: inline-flex; align-items: center; justify-content: center;
}
.vg-counter__num { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.05; }
.vg-counter__label { font-size: 9px; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.05; }

.vg-counter.approved .vg-counter__icon { background: #DCFCE7; color: #166534; }
.vg-counter.approved .vg-counter__num { color: #276749; }
.vg-counter.edited .vg-counter__icon { background: #FFEDD5; color: #9A3412; }
.vg-counter.edited .vg-counter__num { color: #9A3412; }
.vg-counter.left .vg-counter__icon { background: #E5F0FC; color: var(--blue-brand); }
.vg-counter.left .vg-counter__num { color: var(--blue-brand); }

.vg-divider { width: 1px; align-self: stretch; background: var(--border-card); }

.vg-progress {
    display: flex; flex-direction: column; align-items: flex-end;
    gap: 4px; min-width: 130px;
}
.vg-progress__text { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.vg-progress__text b { color: var(--blue-brand); }
.vg-progress__text b.done { color: #276749; }
.vg-progress__bar {
    width: 130px; height: 6px; background: var(--light-grey);
    border-radius: 999px; overflow: hidden; display: flex;
}
.vg-progress__bar .approved { background: #276749; transition: width 250ms ease; }
.vg-progress__bar .edited   { background: var(--orange-brand); transition: width 250ms ease; }

.vg-header__next {
    background: var(--blue-brand); color: #fff; border: none;
    padding: 9px 14px; border-radius: 4px; cursor: pointer;
    font: 500 12px var(--font-body); white-space: nowrap;
}
.vg-header__next:disabled { background: var(--light-grey); color: var(--text-muted); cursor: default; }

/* Main split */
.vg-main { flex: 1; display: grid; grid-template-columns: 62% 38%; min-height: 0; }

.vg-viewer-col { padding: 16px 12px 16px 32px; display: flex; flex-direction: column; min-height: 0; }
.vg-viewer-col__caption {
    font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
    color: var(--text-muted); text-transform: uppercase;
    margin-bottom: 8px; display: flex; justify-content: space-between;
}

.vg-review-col {
    overflow-y: auto; min-height: 0;
    padding: 16px 32px 24px 12px;
    display: flex; flex-direction: column; gap: 16px;
}

/* Intro info banner */
.vg-intro {
    display: flex; align-items: flex-start; gap: 10px;
    background: var(--light-blue); border: 1px solid var(--light-blue-2);
    border-radius: 4px; padding: 12px 14px; color: var(--blue-brand);
    font-size: 13px; line-height: 1.5;
}
.vg-intro svg { flex-shrink: 0; margin-top: 2px; }
.vg-intro.is-approved {
    background: #DCFCE7;
    border-color: #86EFAC;
    color: #166534;
}

/* Section card */
.vg-section {
    background: #fff;
    border: 1px solid var(--light-blue-2);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0,44,108,0.04);
    overflow: clip;
}
.vg-section.is-done { border-color: #BBF7D0; }
.vg-section__header {
    position: sticky; top: 0; z-index: 5;
    display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: #F4F8FC;
    border-bottom: 1px solid var(--light-blue-2);
    border-top-left-radius: 5px; border-top-right-radius: 5px;
    cursor: pointer; user-select: none;
    box-shadow: 0 1px 0 rgba(0,44,108,0.04);
}
.vg-section.is-done .vg-section__header { background: #F6FDF8; border-bottom-color: #BBF7D0; }
.vg-section.is-collapsed .vg-section__header { border-bottom: none; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
.vg-section__chevron { transition: transform 200ms ease; }
.vg-section.is-collapsed .vg-section__chevron { transform: rotate(-90deg); }
.vg-section__title { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--blue-brand);
    text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.vg-section__count { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.vg-section.is-done .vg-section__count { color: #276749; font-weight: 600; }
.vg-section__done-pill {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
    color: #276749; text-transform: uppercase;
}
.vg-section__body { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; }
.vg-section.is-collapsed .vg-section__body { display: none; }

/* ── Dimensions + weight (own required, non-collapsible section) ── */
.vg-dims .vg-section__header { cursor: default; }
.vg-dims__icon { display: inline-flex; align-items: center; }
.vg-dims__hint {
    font-size: 12px; color: #9A3412; line-height: 1.4;
    background: #FFF7ED; border: 1px solid #FED7AA; border-radius: 4px;
    padding: 7px 10px;
}
.vg-dims__grid {
    display: grid; grid-template-columns: 84px 1fr 1fr 1fr;
    gap: 8px; align-items: end;
}
.vg-dims__grid--weight { grid-template-columns: 84px 1fr; }
.vg-dims__cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vg-dims__label {
    font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
    color: var(--text-muted); text-transform: uppercase;
}
.vg-dims__input, .vg-dims__select {
    width: 100%; padding: 7px 10px;
    border: 1px solid var(--border-card); border-radius: 4px;
    font-family: Arial; font-size: 14px; color: #222;
    background: #fff; box-sizing: border-box; outline: none;
}
.vg-dims__input:focus, .vg-dims__select:focus { border-color: var(--blue-brand); }
.vg-dims__input:disabled, .vg-dims__select:disabled { background: #F3F4F6; color: #6B7280; }

/* Footer */
.vg-footer {
    background: #fff; border-top: 1px solid var(--light-blue-2);
    padding: 14px 32px; display: flex; align-items: center; gap: 12px;
}
.vg-footer__status { flex: 1; font-size: 13px; color: var(--text-muted); }
.vg-footer__status.allDone { color: #276749; }
.vg-footer__reject {
    background: transparent; color: var(--error); border: none;
    padding: 10px 14px; border-radius: 4px; cursor: pointer;
    font: 500 13px var(--font-body);
}
.vg-footer__submit {
    background: var(--blue-brand); color: #fff; border: none;
    padding: 12px 28px; border-radius: 4px; cursor: pointer;
    font-size: 15px; font-weight: 600;
    box-shadow: 0 2px 6px rgba(0,44,108,0.25);
}
.vg-footer__submit:disabled {
    background: var(--light-blue-2); cursor: not-allowed; box-shadow: none;
}

/* ═════════════════════════════════════════════════
 * Field primitives (Tasks 11–16)
 * ═════════════════════════════════════════════════ */
.vg-tile {
    width: 30px; height: 30px; padding: 0; border-radius: 5px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background 120ms ease;
}
.vg-tile--approve { background: #DCFCE7; border: 1px solid #86EFAC; color: #166534; }
.vg-tile--approve:hover { background: #BBF7D0; }
.vg-tile--edit    { background: #FFEDD5; border: 1px solid #FDBA74; color: #9A3412; }
.vg-tile--edit:hover { background: #FED7AA; }
.vg-tile.is-disabled, .vg-tile:disabled { background: #F3F4F6; border-color: #E5E7EB; color: #9CA3AF; cursor: default; }

.vg-pill {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
    padding: 4px 10px 4px 8px; border-radius: 999px; text-transform: uppercase;
    border: 1px solid transparent;
}
.vg-pill--approved { background: #DCFCE7; border-color: #86EFAC; color: #166534; cursor: pointer; }
.vg-pill--approved:hover { background: #BBF7D0; }
.vg-pill--edited   { background: #FFEDD5; border-color: #FDBA74; color: #9A3412; }

.vg-pill-wrap { display: inline-flex; align-items: center; gap: 6px; }
.vg-undo-link {
    background: none; border: none; padding: 0;
    color: #9CA3AF; font-size: 11px; cursor: pointer; text-decoration: underline;
}
.vg-undo-link:hover { color: var(--error); }

.vg-ropill {
    padding: 7px 10px; border-radius: 4px;
    background: #F0F5FA; border: 1px solid transparent;
    font-family: Arial; font-size: 14px; line-height: 1.35; color: #222;
    white-space: normal; word-break: break-word;
}
.vg-ropill.is-multi { font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
.vg-ropill.is-mono  { font-family: var(--font-mono, 'SF Mono', Menlo, Consolas, monospace); }

.vg-edit {
    width: 100%; padding: 7px 10px;
    border: 2px solid var(--orange-brand); border-radius: 4px;
    font-family: Arial; font-size: 14px; line-height: 1.35; color: #222;
    background: #fff; box-sizing: border-box; outline: none;
}
.vg-edit.is-multi { padding: 8px 10px; font-size: 13px; line-height: 1.5; resize: vertical; }
.vg-edit.is-mono  { font-family: var(--font-mono, 'SF Mono', Menlo, Consolas, monospace); }

/* Field card */
.vg-field {
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--border-card);
    border-radius: 4px;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease;
}
.vg-field.is-active { background: #FFF4EE; border-color: var(--orange-brand); }
.vg-field--approved { background: #F6FDF8; border-color: #BBF7D0; border-left: 3px solid #276749; }
.vg-field--edited   { background: #FFFAF3; border-color: #FDBA74; border-left: 3px solid var(--orange-brand); }
.vg-field--editing  { cursor: default; }

.vg-field__header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center; gap: 8px;
    margin-bottom: 8px;
    min-height: 30px;
}
.vg-field__label {
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
    color: #6B7280; text-transform: uppercase;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    justify-self: start;
}
.vg-field__tiles { display: flex; gap: 6px; justify-self: center; }
.vg-field__pill  { justify-self: end; }

.vg-field__diff {
    margin-top: 8px; padding: 8px 10px; background: #fff;
    border: 1px dashed #FDBA74; border-radius: 3px;
    font-size: 12px; line-height: 1.5;
}
.vg-field__old { color: #6B7280; margin-bottom: 2px; }
.vg-field__reason { display: flex; gap: 8px; color: #475569; }
.vg-field__reason span:first-child { color: #9A3412; font-weight: 700; }

/* Editor block */
.vg-field__editor { display: flex; flex-direction: column; gap: 8px; margin-top: -2px; }
.vg-field__reason-label {
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
    color: #6B7280; text-transform: uppercase;
}
.vg-field__reason-label .req { color: var(--error); }
.vg-field__reason-input {
    width: 100%; padding: 8px 10px; border: 1px solid var(--border-card);
    border-radius: 4px; font-family: Arial; font-size: 13px; line-height: 1.5;
    color: #222; background: #fff; box-sizing: border-box; outline: none; resize: vertical;
    min-height: 48px;
}
.vg-field__actions {
    display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px;
}
.vg-field__hint { font-size: 11px; color: var(--error); }
.vg-field__btn-group { display: flex; gap: 6px; }
.vg-btn {
    padding: 7px 14px; border-radius: 4px; font-size: 13px; font-weight: 500;
    border: none; cursor: pointer;
}
.vg-btn--ghost   { background: #fff; color: #6B7280; border: 1px solid var(--border-card); }
.vg-btn--primary { background: var(--blue-brand); color: #fff; }
.vg-btn--primary:disabled { background: var(--light-blue-2); cursor: not-allowed; }

/* Compact field */
.vg-field--compact {
    padding: 6px 10px;
    display: grid;
    grid-template-columns: 160px 1fr auto;
    align-items: center;
    gap: 10px;
    min-height: 36px;
}
.vg-field--compact.is-indent .vg-field__c-label { padding-left: 16px; }
.vg-field__c-label {
    font-size: 12px; font-weight: 600; color: #374151; line-height: 1.35;
    word-break: break-word;
}
.vg-field--compact .vg-ropill.is-compact {
    padding: 6px 10px; text-align: left;
    font-variant-numeric: tabular-nums; white-space: normal; word-break: break-word;
    line-height: 1.35;
}
.vg-field__c-action {
    display: flex; align-items: center; gap: 6px;
    min-width: 72px; justify-content: flex-end;
}

/* Linked pair */
.vg-field--linked { padding-bottom: 12px; }
.vg-field__label--linked { display: inline-flex; align-items: center; }
.vg-field__linked-hint {
    font-size: 11px; color: #6B7280; line-height: 1.4; margin-bottom: 8px; font-style: italic;
}
.vg-field__linked-body { display: flex; flex-direction: column; gap: 8px; }
.vg-field__linked-cell { display: flex; flex-direction: column; gap: 4px; }
.vg-field__linked-sublabel {
    font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
    color: #6B7280; text-transform: uppercase;
}
.vg-field__linked-old { font-size: 11px; color: #6B7280; }

/* ═════════════════════════════════════════════════
 * Allergens (Tasks 17–18)
 * ═════════════════════════════════════════════════ */
.vg-allergen-read { display: flex; flex-direction: column; gap: 8px; }
.vg-allergen-col__h {
    font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
    color: #6B7280; text-transform: uppercase; margin-bottom: 4px;
}
.vg-allergen-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.vg-allergen-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 8px 3px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 500; border: 1px solid transparent;
    cursor: grab; user-select: none;
}
.vg-allergen-empty { font-size: 12px; color: #9CA3AF; font-style: italic; }

.vg-allergen-editor { display: flex; flex-direction: column; gap: 10px; }
.vg-allergen-editor__hint { font-size: 11px; color: #6B7280; line-height: 1.45; }
.vg-allergen-zone {
    border: 1.5px dashed var(--zone-border, var(--border-card));
    background: var(--zone-bg, #fff);
    border-radius: 4px; padding: 8px 10px;
    transition: background 120ms ease, border-color 120ms ease;
}
.vg-allergen-zone.is-over { background: #F4F8FC; border-color: var(--light-blue-3); }
.vg-allergen-zone__h {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; margin-bottom: 6px;
}
.vg-allergen-zone__h .dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }
.vg-allergen-zone__h .count { color: #9CA3AF; font-weight: 500; }
.vg-allergen-zone__pills { display: flex; flex-wrap: wrap; gap: 4px; min-height: 26px; }
.vg-allergen-dropzone-empty { font-size: 11px; color: #9CA3AF; font-style: italic; align-self: center; }

/* ═════════════════════════════════════════════════
 * E-numbers
 * ═════════════════════════════════════════════════ */
.vg-enumbers-read  { display: flex; flex-direction: column; gap: 6px; }
.vg-enumbers-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.vg-enumber-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 500; border: 1px solid transparent;
    user-select: none;
}
.vg-enumber-pill--edit { padding: 3px 4px 3px 10px; }
.vg-enumber-pill__x {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 999px;
    border: 0; background: transparent; color: inherit; opacity: 0.65;
    cursor: pointer; padding: 0;
}
.vg-enumber-pill__x:hover { background: rgba(30, 58, 138, 0.12); opacity: 1; }

.vg-enumbers-editor { display: flex; flex-direction: column; gap: 10px; }
.vg-enumbers-input-row { display: flex; gap: 6px; align-items: stretch; }
.vg-enumbers-input {
    flex: 1; font-size: 13px; padding: 6px 10px;
    border: 1px solid var(--border-card); border-radius: 4px;
    font-family: inherit;
}
.vg-enumbers-input:focus { outline: none; border-color: var(--light-blue-3); }
.vg-enumbers-add { white-space: nowrap; }
.vg-enumbers-input-error { font-size: 11px; color: var(--error, #991B1B); min-height: 14px; }

/* ── Viewer (Tasks 19–23) ── */

.vg-viewer-col { display: flex; flex-direction: column; min-height: 0; }
.vg-viewer-col__caption {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px; font-size: 12px; color: var(--text-muted);
    border-bottom: 1px solid var(--light-blue-2);
}
.vg-viewer__legend { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; }
.vg-viewer__legend .dot {
    width: 10px; height: 10px; border-radius: 50%;
    display: inline-block; vertical-align: middle;
}
.vg-viewer__legend .dot.orange { background: #F97316; }
.vg-viewer__legend .dot.navy   { background: #1E3A8A; }
.vg-viewer__legend .dot.green  { background: #16A34A; }
.vg-viewer__legend .diamond {
    width: 9px; height: 9px; background: #F97316;
    display: inline-block; transform: rotate(45deg); vertical-align: middle;
}

.vg-viewer {
    display: grid;
    grid-template-columns: 72px 1fr;
    flex: 1; min-height: 0; overflow: hidden;
}
.vg-viewer.is-single-page { grid-template-columns: 1fr; }

/* Thumbs column */
.vg-viewer__thumbs {
    padding: 10px 6px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 10px;
    background: #F9FAFB;
    border-right: 1px solid var(--light-blue-2);
}
.vg-thumb {
    position: relative;
    border: 1.5px solid transparent;
    border-radius: 4px;
    background: #fff;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    width: 60px;
    transition: border-color 120ms ease, transform 120ms ease;
}
.vg-thumb:hover { border-color: var(--light-blue-3); }
.vg-thumb.is-selected { border-color: var(--blue-brand); }
.vg-thumb img { display: block; width: 100%; height: auto; }
.vg-thumb__label {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: rgba(30, 58, 138, 0.82);
    color: #fff; font-size: 9px; text-align: center;
    padding: 2px 0; letter-spacing: 0.05em;
}
.vg-thumb__badge {
    position: absolute; top: 2px; right: 2px;
    min-width: 16px; height: 16px; padding: 0 4px;
    background: var(--blue-brand); color: #fff;
    font-size: 10px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
}
.vg-thumb__badge.done { background: #16A34A; }

/* Stage */
.vg-viewer__stage {
    position: relative; overflow: hidden;
    background: #EEF2F6;
    min-height: 0;
}
.vg-stage__wrap {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    transform-origin: 50% 50%;
    transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    cursor: grab;
    touch-action: none;
}
.vg-stage__wrap.is-dragging {
    cursor: grabbing;
    transition: none;
}
.vg-stage__img {
    display: block;
    max-width: 94%; max-height: 94%;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    background: #fff;
    user-select: none; -webkit-user-drag: none;
}
.vg-stage__pins {
    position: absolute; inset: 0;
    pointer-events: none;
}
.vg-stage__pins .vg-pin { pointer-events: auto; }

.vg-stage__label {
    position: absolute; top: 10px; left: 12px; z-index: 4;
    background: rgba(30, 58, 138, 0.88);
    color: #fff;
    font-size: 11px; font-weight: 500;
    padding: 4px 10px; border-radius: 3px;
    letter-spacing: 0.04em;
}

/* Pins */
.vg-pin {
    position: absolute;
    min-width: 24px; height: 24px; padding: 0 6px;
    background: #1E3A8A; color: #fff;
    border: 2px solid #fff;
    border-radius: 999px;
    font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
    display: inline-flex; align-items: center; justify-content: center;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 6px rgba(0,0,0,0.28);
    cursor: pointer; z-index: 3;
    transition: background 120ms ease, box-shadow 120ms ease;
}
.vg-pin:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.38); }
.vg-pin.is-active {
    background: #F97316;
    box-shadow: 0 0 0 3px rgba(249,115,22,0.35), 0 3px 10px rgba(0,0,0,0.3);
    z-index: 5;
}
.vg-pin.is-approved { background: #16A34A; }
.vg-pin.is-edited {
    background: #F97316;
    border-radius: 4px;
    transform: translate(-50%, -50%) rotate(45deg);
}
.vg-pin.is-edited { padding: 0 4px; }

/* Highlight rectangle */
.vg-stage__hilite {
    position: absolute;
    border: 2px solid #F97316;
    border-radius: 2px;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.45);
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition:
        left 600ms cubic-bezier(0.4, 0, 0.2, 1),
        top 600ms cubic-bezier(0.4, 0, 0.2, 1),
        width 600ms cubic-bezier(0.4, 0, 0.2, 1),
        height 600ms cubic-bezier(0.4, 0, 0.2, 1),
        opacity 200ms ease-out;
}

/* Toolbar */
.vg-stage__toolbar {
    position: absolute; bottom: 12px; right: 12px; z-index: 6;
    display: flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,0.94);
    border: 1px solid var(--light-blue-2);
    border-radius: 4px;
    padding: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.vg-v-btn {
    width: 28px; height: 28px; padding: 0;
    background: transparent; border: none;
    color: var(--text-color);
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 3px; cursor: pointer;
    transition: background 120ms ease;
}
.vg-v-btn:hover { background: var(--light-blue-2); }
.vg-v-showall {
    height: 28px; padding: 0 10px;
    background: #fff;
    border: 1px solid var(--light-blue-3);
    color: var(--blue-brand);
    font-size: 11px; font-weight: 500;
    border-radius: 3px; cursor: pointer; margin-left: 4px;
    transition: background 120ms ease;
}
.vg-v-showall:hover { background: var(--light-blue-2); }

/* ── Transient banner (Task 28) ── */
.vg-banner {
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 13px;
    border: 1px solid transparent;
    background: #F4F8FC; color: var(--blue-brand);
}
.vg-banner.is-success { background: #DCFCE7; border-color: #86EFAC; color: #166534; }
.vg-banner.is-error   { background: #FEE2E2; border-color: #FCA5A5; color: #991B1B; }
.vg-banner.is-info    { background: #E5F0FC; border-color: #C7DBF3; color: var(--blue-brand); }

#vg-transient-banner {
    position: fixed;
    top: 16px; left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    min-width: 260px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    animation: vg-banner-in 180ms ease-out;
}
@keyframes vg-banner-in {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Resolved banner inline in header row */
.vg-resolved-banner {
    margin-left: auto;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 12px; font-weight: 500;
}
.vg-resolved-banner.approved { background: #DCFCE7; color: #166534; }
.vg-resolved-banner.rejected { background: #FEE2E2; color: #991B1B; }

/* ── Responsive polish (Task 29) ── */
@media (max-width: 1400px) {
    .vg-viewer__legend { display: none; }
}
@media (max-width: 1280px) {
    .vg-header { padding: 10px 20px; gap: 16px; }
    .vg-main { grid-template-columns: 58% 42%; }
    .vg-section__body { padding: 10px 14px; }
    .vg-viewer__thumbs { padding: 8px 4px; }
}
.vg-field__value, .vg-ropill { word-break: break-word; overflow-wrap: anywhere; }

/* ── GS1 Vörugreind overview (dashboard tab) ───────────────────── */

.vg-yf-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    margin: 16px 0;
}

.vg-yf-status-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    background: #F3F4F6;
    padding: 4px;
    border-radius: 10px;
}
.vg-yf-status-tab {
    background: transparent;
    border: none;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #6B7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 120ms ease, color 120ms ease;
}
.vg-yf-status-tab:hover { color: #002C6C; }
.vg-yf-status-tab.is-active {
    background: #FFFFFF;
    color: #002C6C;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06);
}
.vg-yf-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #E5E7EB;
    color: #374151;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.vg-yf-status-tab.is-active .vg-yf-count {
    background: #E0E7FF;
    color: #002C6C;
}

.vg-yf-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    min-width: 260px;
    color: #6B7280;
}
.vg-yf-search input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    color: #111827;
    flex: 1;
}
.vg-yf-search:focus-within {
    border-color: #008DBD;
    box-shadow: 0 0 0 3px rgba(0, 141, 189, 0.15);
}

.vg-yf-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.vg-yf-card {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.vg-yf-card:hover {
    border-color: #002C6C;
    box-shadow: 0 4px 12px rgba(0, 44, 108, 0.08);
    transform: translateY(-1px);
}

.vg-yf-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.vg-yf-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: #F3F4F6;
    color: #6B7280;
}
.vg-yf-pill[data-tone="navy"]  { background: #E0E7FF; color: #002C6C; }
.vg-yf-pill[data-tone="blue"]  { background: #E0F2FE; color: #008DBD; }
.vg-yf-pill[data-tone="green"] { background: #F0FFF4; color: #166534; }
.vg-yf-pill[data-tone="red"]   { background: #FEF2F2; color: #B91C1C; }

.vg-yf-date {
    font-size: 11px;
    color: #6B7280;
    font-variant-numeric: tabular-nums;
}

.vg-yf-name {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vg-yf-progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.vg-yf-progress-bar {
    height: 6px;
    background: #F3F4F6;
    border-radius: 999px;
    overflow: hidden;
}
.vg-yf-progress-fill {
    height: 100%;
    background: #22C55E;
    border-radius: 999px;
    transition: width 250ms ease;
}
.vg-yf-progress-text {
    font-size: 11px;
    color: #6B7280;
    font-variant-numeric: tabular-nums;
}