/* Invoice-match window + Main-grid chips. Cards inside .emma-invoice-scope share --im-cap-w so
   caption columns line up across cards and comparison rows. */

.emma-invoice-scope {
    --im-cap-w: 108px;
    --im-fs-cap: 0.68rem;   /* uppercase captions */
    --im-fs-body: 0.85rem;  /* field values, notes are one step down */
    --im-fs-num: 0.9rem;    /* compared amounts */
    --im-fs-id: 1rem;       /* an identifier: invoice no., customs ID */
}

.im-subcards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
    gap: 10px;
    align-items: stretch;
}

.im-subcard {
    display: flex;
    flex-direction: column;
    padding: 8px 12px 10px;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-left: 4px solid rgba(var(--bs-primary-rgb), 0.35);
    border-radius: 6px;
}

.im-subcard-title {
    font-size: var(--im-fs-cap);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-secondary-color);
    margin-bottom: 0.4rem;
}

.im-card-note {
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--bs-secondary-color);
    margin-top: 0.4rem;
}

.im-card-note:first-child {
    margin-top: 0;
    margin-bottom: 0.45rem;
}

/* ---------- key/value pairs ---------- */

.im-kv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 2px 20px;
}

.im-kv-grid--stack {
    grid-template-columns: 1fr;
}

.im-kv {
    display: grid;
    grid-template-columns: var(--im-cap-w) minmax(0, 1fr);
    align-items: baseline;
    gap: 8px;
    font-size: var(--im-fs-body);
    min-width: 0;
}

.im-kv-cap {
    font-size: var(--im-fs-cap);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
}

.im-kv-val {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.im-kv-val--num {
    font-variant-numeric: tabular-nums;
}

.im-kv-unit {
    color: var(--bs-body-color);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-left: 0.3rem;
}

/* ---------- record head (invoice / declaration) ---------- */

.im-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}

.im-head-cap {
    font-size: var(--im-fs-cap);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bs-secondary-color);
}

.im-head-id {
    font-size: var(--im-fs-id);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.im-head-date {
    color: var(--bs-secondary-color);
    font-size: var(--im-fs-body);
}

.im-head-actions {
    margin-left: auto;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.im-head-sub {
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
    margin: -0.15rem 0 0.4rem;
}

/* ---------- declaration cards ---------- */

.im-decl-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.im-decl-card {
    padding: 8px 12px 10px;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-left: 4px solid rgba(var(--bs-primary-rgb), 0.35);
    border-radius: 6px;
}

.im-decl-card.is-primary {
    border-left-color: var(--bs-primary);
}

/* ---------- invoice vs declaration comparison ---------- */

.im-compare {
    margin-top: 0.6rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    overflow: hidden;
}

/* First column matches .im-kv so captions align with the summary above. */
.im-compare-row {
    display: grid;
    grid-template-columns: var(--im-cap-w) minmax(0, 1fr) 34px minmax(0, 1fr) 116px;
    align-items: stretch;
    font-size: var(--im-fs-num);
    border-top: 1px solid var(--bs-border-color);
}

.im-compare-row:first-child {
    border-top: 0;
}

.im-compare-row--head {
    background: var(--emma-surface-subtle, var(--bs-tertiary-bg));
    font-size: var(--im-fs-cap);
}

.im-compare-row--info {
    grid-template-columns: var(--im-cap-w) minmax(0, 1fr);
    font-size: 0.78rem;
    font-style: italic;
}

.im-compare-cap[title] {
    cursor: help;
    text-decoration: underline dotted var(--bs-border-color);
    text-underline-offset: 3px;
}

.im-compare-cap {
    display: flex;
    align-items: center;
    padding: 7px 10px;
    font-size: var(--im-fs-cap);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
}

.im-compare-val {
    display: flex;
    align-items: center;
    padding: 7px 10px;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.im-compare-val.is-invoice-side,
.im-compare-cap.is-invoice-side {
    justify-content: flex-end;
    background: rgba(var(--bs-info-rgb), 0.07);
}

.im-compare-val.is-decl-side,
.im-compare-cap.is-decl-side {
    justify-content: flex-start;
    background: rgba(var(--bs-primary-rgb), 0.05);
}

.im-compare-val .im-kv-unit {
    font-weight: 400;
}

.im-compare-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color);
    font-size: 1rem;
    border-left: 1px solid var(--bs-border-color);
    border-right: 1px solid var(--bs-border-color);
}

.im-compare-verdict {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 5px 8px 5px 10px;
}

/* ---------- the declaration's invoice list ---------- */

.im-inv-head,
.im-inv-row,
.im-inv-total {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px minmax(150px, auto);
    gap: 10px;
    align-items: center;
    padding: 4px 10px;
}

.im-inv-head {
    padding-bottom: 2px;
    font-size: var(--im-fs-cap);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
}

.im-inv-list {
    max-height: 190px;
    overflow-y: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: 5px;
}

.im-inv-row {
    font-size: var(--im-fs-body);
    border-top: 1px solid var(--bs-border-color);
}

.im-inv-row:first-child {
    border-top: 0;
}

.im-inv-row.is-clickable {
    cursor: pointer;
}

.im-inv-row.is-clickable:hover {
    background: var(--emma-surface-subtle, var(--bs-tertiary-bg));
}

.im-inv-row.is-focused {
    background: rgba(var(--bs-info-rgb), 0.08);
    box-shadow: inset 3px 0 0 var(--bs-info);
}

/* Stated on the declaration but never imported. */
.im-inv-row.is-missing {
    background: rgba(var(--bs-warning-rgb), 0.07);
    box-shadow: inset 3px 0 0 var(--bs-warning);
}

.im-inv-nr {
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.im-inv-amt {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.im-inv-flag {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

/* Outside the scroll area, so the sum stays visible. */
.im-inv-total {
    margin-top: 6px;
    padding-top: 7px;
    padding-bottom: 3px;
    border-top: 2px solid var(--bs-border-color);
    font-size: var(--im-fs-num);
    font-weight: 600;
}

.im-inv-total .im-inv-nr {
    font-size: var(--im-fs-cap);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
}

.im-inv-vs {
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.im-verdict {
    padding: 7px 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    border-left: 3px solid var(--bs-border-color);
    background: var(--emma-surface-subtle, var(--bs-tertiary-bg));
    font-size: var(--im-fs-body);
    line-height: 1.45;
}

.im-verdict--warn {
    border-left-color: var(--bs-warning);
    background: rgba(var(--bs-warning-rgb), 0.08);
}

.im-verdict--ok {
    border-left-color: var(--bs-success);
    background: rgba(var(--bs-success-rgb), 0.07);
}

.im-verdict-cap {
    display: inline-block;
    margin-right: 0.45rem;
    font-size: var(--im-fs-cap);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-secondary-color);
}

.im-mark {
    padding: 0 3px;
    border-radius: 3px;
    background: rgba(var(--bs-success-rgb), 0.18);
    box-shadow: inset 0 0 0 1px rgba(var(--bs-success-rgb), 0.35);
    font-weight: 700;
}

.im-stated {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: 4px;
    flex-wrap: wrap;
    max-height: 62px;
    overflow-y: auto;
    font-size: var(--im-fs-body);
    line-height: 1.5;
}

/* ---------- notes ---------- */

.im-note {
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
    margin-top: 0.6rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--bs-border-color);
}

.im-empty {
    font-size: var(--im-fs-body);
    color: var(--bs-secondary-color);
    padding: 0.4rem 0;
}

/* ---------- Main-grid invoice-number chips ---------- */

.im-ref-chips {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-wrap: nowrap;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.im-ref-text {
    display: inline;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}