.hp-receipt-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 1rem;
    align-items: start;
}

.hp-left-work {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.hp-data-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
    gap: 1rem;
}

.hp-panel {
    background: white;
    border: 1px solid var(--hp-border);
    border-radius: .45rem;
    overflow: hidden;
}

.hp-panel h2 {
    margin: 0;
    padding: .55rem .8rem;
    background: var(--hp-green-soft);
    color: var(--hp-green-dark);
    font-size: 1rem;
    border-bottom: 1px solid var(--hp-border);
}

.hp-panel-body {
    padding: .8rem;
}

.hp-form-grid {
    display: grid;
    grid-template-columns: 135px minmax(0, 1fr);
    gap: .55rem .75rem;
    align-items: center;
}

.hp-form-grid label {
    margin: 0;
    font-weight: 700;
    color: #303632;
}

.hp-form-grid input,
.hp-form-grid select,
.hp-summary-grid input,
.hp-summary-grid select {
    margin: 0;
    padding: .52rem .65rem;
    border: 1px solid var(--hp-border);
    border-radius: .25rem;
    width: 100%;
}

.hp-supplier-combo {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr);
    gap: .45rem;
}

.hp-position-panel {
    overflow: hidden;
}

.hp-position-toolbar {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    align-items: center;
    padding: .7rem .8rem;
    border-top: 1px solid var(--hp-border);
}

.hp-position-actions {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
}

.hp-table-wrap {
    overflow-x: auto;
}

.hp-positions-table {
    width: 100%;
    min-width: 1040px;
    border-collapse: collapse;
    font-size: .86rem;
}

.hp-positions-table th,
.hp-positions-table td {
    border-bottom: 1px solid #e8ece7;
    padding: .3rem .45rem;
    vertical-align: middle;
}

.hp-positions-table th {
    background: #eef3ef;
    color: #1d1d1d;
    font-size: .8rem;
}

.hp-positions-table input,
.hp-positions-table select {
    border: 1px solid #d7ddd6;
    border-radius: .2rem;
    padding: .32rem .4rem;
    width: 100%;
    margin: 0;
}

.hp-positions-table td:nth-child(1) {
    width: 70px;
}

.hp-positions-table td:nth-child(2) {
    width: 260px;
}

.hp-positions-table td:nth-child(7) {
    width: 230px;
}

.hp-category-row td {
    background: #8d928e;
    color: white;
    font-weight: 800;
    padding: .25rem .55rem;
}

.hp-category-row .cat-title {
    display: inline-block;
    min-width: 240px;
}

.hp-category-row .cat-sum {
    float: right;
}

.hp-row-actions {
    display: flex;
    gap: .3rem;
    justify-content: center;
}

.hp-icon-btn,
.remove-row {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: .25rem;
    background: transparent;
    color: #334;
    cursor: pointer;
}

.remove-row {
    color: var(--hp-red);
}

.hp-sums {
    display: grid;
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    gap: .7rem;
    padding: .8rem;
    border-top: 1px solid var(--hp-border);
    background: #fbfcfa;
}

.hp-sums div {
    text-align: center;
}

.hp-sums span {
    display: block;
    color: var(--hp-muted);
    font-size: .82rem;
}

.hp-sums strong {
    display: block;
    margin-top: .25rem;
}

.good {
    color: var(--hp-green-dark);
}

.bad {
    color: var(--hp-red);
}

.hp-pdf-side {
    display: grid;
    gap: .8rem;
}

.hp-pdf-panel {
    background: white;
    border: 1px solid var(--hp-border);
    border-radius: .45rem;
    overflow: hidden;
    position: sticky;
    top: 82px;
}

.hp-pdf-panel h2 {
    margin: 0;
    padding: .55rem .8rem;
    background: var(--hp-green-soft);
    color: var(--hp-green-dark);
    font-size: 1rem;
    border-bottom: 1px solid var(--hp-border);
}

.hp-upload-box {
    display: block;
    padding: .75rem;
    border-bottom: 1px solid var(--hp-border);
    font-weight: 700;
}

.hp-upload-box input {
    display: block;
    margin-top: .45rem;
    width: 100%;
}

.hp-pdf-frame {
    height: 650px;
    background: #f8f8f8;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--hp-border);
}

.hp-pdf-frame object,
.hp-pdf-frame img {
    width: 100%;
    height: 100%;
    border: 0;
    background: white;
}

.hp-pdf-frame img {
    object-fit: contain;
}

#pdfPlaceholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--hp-muted);
    text-align: center;
    padding: 1rem;
}

.hp-preview-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .45rem;
    padding: .7rem;
}

.hp-preview-actions button {
    background: white;
    color: var(--hp-green-dark);
    border: 1px solid var(--hp-border);
    padding: .52rem;
    border-radius: .3rem;
    font-weight: 700;
}

.hp-legend {
    display: flex;
    gap: .8rem;
    flex-wrap: wrap;
    font-size: .82rem;
    padding: .2rem .75rem .75rem;
}

.dot {
    width: 9px;
    height: 9px;
    display: inline-block;
    border-radius: 50%;
    margin-right: .3rem;
}

.dot.green { background: var(--hp-green); }
.dot.blue { background: var(--hp-blue); }
.dot.red { background: var(--hp-red); }

.hp-next-box {
    background: var(--hp-yellow-soft);
    border: 1px solid #eadc83;
    border-radius: .45rem;
    padding: .75rem;
}

.hp-next-box h3 {
    margin: 0 0 .6rem;
    color: var(--hp-green-dark);
}

.hp-next-box div {
    margin: .4rem 0;
}

.hp-summary {
    margin-top: 1rem;
}

.hp-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr 1fr;
    gap: .8rem;
    padding: .8rem;
}

.hp-summary-grid label {
    font-weight: 700;
}

.hidden {
    display: none !important;
}

@media (max-width: 1350px) {
    .hp-receipt-layout {
        grid-template-columns: 1fr;
    }

    .hp-pdf-panel {
        position: static;
    }

    .hp-pdf-frame {
        height: 560px;
    }
}

@media (max-width: 900px) {
    .hp-data-grid,
    .hp-form-grid,
    .hp-summary-grid,
    .hp-sums,
    .hp-supplier-combo {
        grid-template-columns: 1fr;
    }
}


/* rev0011: Berechnung, Plausibilität, Markierungen */

.hp-positions-table {
    min-width: 1180px;
}

.hp-positions-table td:nth-child(1) {
    width: 92px;
}

.hp-positions-table td:nth-child(2) {
    width: 70px;
}

.hp-positions-table td:nth-child(3) {
    width: 260px;
}

.hp-positions-table td:nth-child(8) {
    width: 230px;
}

.recognition-select {
    font-size: .75rem;
    padding: .25rem;
}

.position-row.recognized td {
    background: #f4fbf5;
}

.position-row.manual td {
    background: #f5f9ff;
}

.position-row.unrecognized td {
    background: #fff5f4;
}

.position-row.invalid td {
    outline: 2px solid rgba(198, 40, 40, .35);
    outline-offset: -2px;
}

.position-row.active-marker-row td {
    box-shadow: inset 0 0 0 2px var(--hp-blue);
}

.hp-plausibility {
    margin: .8rem;
    border: 1px solid var(--hp-border);
    border-radius: .4rem;
    padding: .65rem;
    background: #fbfcfa;
}

.hp-plausibility.ok {
    border-color: #99d1a4;
    background: #edf8ef;
}

.hp-plausibility.warn {
    border-color: #eadc83;
    background: #fff8cc;
}

.hp-plausibility.error {
    border-color: #f0aaa1;
    background: #fff0ee;
}

.hp-plausibility ul {
    margin: .4rem 0 0 1rem;
    padding: 0;
}

.hp-marker-toolbar {
    padding: .55rem .75rem;
    border-bottom: 1px solid var(--hp-border);
    background: #fbfcfa;
    font-size: .85rem;
}

#markerLayer {
    position: absolute;
    inset: 0;
    pointer-events: auto;
}

.hp-marker {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid white;
    box-shadow: 0 0 0 2px rgba(0,0,0,.25);
    display: grid;
    place-items: center;
    font-size: .65rem;
    font-weight: 800;
    color: white;
}

.hp-marker.recognized {
    background: var(--hp-green);
}

.hp-marker.manual {
    background: var(--hp-blue);
}

.hp-marker.unrecognized {
    background: var(--hp-red);
}

.amount-input.autocalculated {
    background: #f6fff7;
}

.amount-input.manual-override {
    background: #fff8cc;
}


/* rev0012: Belege in Bearbeitung */

.hp-draft-status {
    margin: 0 0 .75rem;
    padding: .55rem .75rem;
    border: 1px solid var(--hp-border);
    border-radius: .4rem;
    background: #fbfcfa;
    color: var(--hp-muted);
    font-size: .9rem;
}

.hp-draft-status.saved {
    background: #edf8ef;
    color: var(--hp-green-dark);
    border-color: #99d1a4;
}

.hp-draft-status.error {
    background: #fff0ee;
    color: var(--hp-red);
    border-color: #f0aaa1;
}


/* rev0016: PDF-Scroll-Fix */
#markerLayer {
    pointer-events: none;
}

#markerLayer.marker-active {
    pointer-events: auto;
    cursor: crosshair;
}

#markerLayer .hp-marker {
    pointer-events: auto;
}


/* rev0018: automatische Positionsmarker */
.hp-marker.auto {
    width: 26px;
    height: 26px;
    font-size: .72rem;
    z-index: 8;
}

.hp-marker-line {
    position: absolute;
    left: 14%;
    right: 14%;
    height: 2.2%;
    min-height: 11px;
    border: 2px solid rgba(15, 107, 59, .72);
    background: rgba(15, 107, 59, .10);
    border-radius: 4px;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 7;
}

.hp-marker-line.manual {
    border-color: rgba(43, 123, 187, .72);
    background: rgba(43, 123, 187, .10);
}

.hp-marker-line.unrecognized {
    border-color: rgba(198, 40, 40, .72);
    background: rgba(198, 40, 40, .10);
}


/* rev0021: Marker exakter im Positionsbereich */
.hp-marker-line {
    left: 9%;
    right: 9%;
    height: 2.0%;
    min-height: 9px;
    opacity: .92;
}

.hp-marker.auto {
    left: 8% !important;
    width: 22px;
    height: 22px;
    font-size: .68rem;
}

/* rev0062: verdichtete Belegnachbearbeitung */
.hp-field-hint {
    font-size: .82rem;
    color: #6b7280;
    margin-top: .25rem;
}
.hp-position-total-inline {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    padding: .45rem .65rem;
    border: 1px solid #d1d5db;
    border-radius: .5rem;
    background: #f9fafb;
}
.hp-sums-compact {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.vehicle-select {
    min-width: 150px;
}
.vehicle-select:disabled {
    opacity: .45;
}
.vehicle-required-cell .vehicle-select {
    border-color: #ca8a04;
    background: #fff7ed;
}
.hp-upload-box-existing {
    cursor: default;
    background: #f9fafb;
    border-style: solid;
    color: #374151;
}

/* rev0062 FIX3: Belegnachbearbeitung entschlackt, sticky Vorschau, Markersteuerung */
.hp-receipt-layout {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
}

.hp-pdf-side {
    position: sticky;
    top: 72px;
    align-self: start;
    max-height: calc(100vh - 84px);
    overflow: auto;
}

.hp-pdf-panel {
    position: relative;
    top: auto;
}

.hp-marker-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .45rem;
}

.hp-marker-toolbar .checkbox-row {
    font-weight: 600;
    color: #374151;
}

.hp-preview-zoom {
    display: flex;
    gap: .35rem;
}

.hp-preview-zoom button {
    border: 1px solid var(--hp-border);
    background: #fff;
    color: var(--hp-green-dark);
    border-radius: .3rem;
    padding: .25rem .55rem;
    font-weight: 700;
    cursor: pointer;
}

.hp-pdf-frame {
    overflow: auto;
}

.hp-preview-canvas {
    position: relative;
    width: 100%;
    min-height: 100%;
    transform-origin: top left;
    background: #fff;
}

.hp-preview-canvas.pdf-mode {
    min-height: 960px;
}

.hp-preview-canvas.image-mode {
    min-height: 100%;
    display: grid;
    place-items: center;
}

.hp-pdf-frame object,
.hp-pdf-frame img {
    display: block;
    position: relative;
    z-index: 1;
}

.hp-preview-canvas.pdf-mode object {
    height: 960px;
}

.hp-preview-canvas.image-mode img {
    max-width: 100%;
    max-height: none;
    height: auto;
}

#markerLayer {
    z-index: 5;
}

.row-number-cell {
    text-align: center;
    font-weight: 800;
    color: var(--hp-green-dark);
}

.row-number {
    display: inline-grid;
    place-items: center;
    min-width: 1.65rem;
    height: 1.65rem;
    border-radius: 999px;
    background: #edf8ef;
    border: 1px solid #99d1a4;
}

.hp-category-cell {
    display: grid;
    gap: .25rem;
}

.vehicle-inline {
    display: none;
    margin-top: .2rem !important;
}

.vehicle-inline.vehicle-needed {
    display: block;
}

.vehicle-hint {
    font-size: .76rem;
    color: #92400e;
}

.vehicle-hint.vehicle-ok {
    color: var(--hp-green-dark);
}

.hp-collapsible-panel summary {
    cursor: pointer;
    padding: .55rem .8rem;
    background: var(--hp-green-soft);
    color: var(--hp-green-dark);
    font-weight: 800;
    border-bottom: 1px solid var(--hp-border);
}

.hp-btn.small {
    padding: .25rem .5rem;
    font-size: .78rem;
}

.hp-position-total-inline {
    flex-wrap: wrap;
}

.hp-positions-table {
    min-width: 1060px;
}

.hp-positions-table th:nth-child(1),
.hp-positions-table td:nth-child(1) {
    width: 48px;
}

.hp-positions-table th:nth-child(2),
.hp-positions-table td:nth-child(2) {
    width: 80px;
}

.hp-positions-table th:nth-child(3),
.hp-positions-table td:nth-child(3) {
    width: 270px;
}

.hp-positions-table th:nth-child(8),
.hp-positions-table td:nth-child(8) {
    width: 320px;
}

@media (max-width: 1350px) {
    .hp-pdf-side {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

.hp-viewer-actions-inline {
    display: grid;
    gap: .45rem;
    padding: .75rem;
    border-top: 1px solid var(--hp-border);
}

.hp-viewer-actions-inline .hp-btn {
    text-align: center;
}

.position-row.active-marker-row {
    outline: 2px solid #f1b61d;
    outline-offset: -2px;
    background: #fff8df;
}

/* rev0069: Belegnachbearbeitung - Konto-Autocomplete, Live-Vorschläge und verschiebbare Feldmarker */
.hp-field-marker-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .35rem;
    align-items: center;
}

.hp-category-cell .account-search {
    margin-bottom: .2rem;
}

.hp-category-cell .account-search.account-search-miss {
    border-color: #ca8a04;
    background: #fff7ed;
}

.account-suggestion-hint {
    min-height: 1.1rem;
}

.account-suggestion-hint.has-suggestion {
    color: var(--hp-green-dark);
    font-weight: 600;
}

.account-suggestion-hint button {
    border: 1px solid #99d1a4;
    background: #edf8ef;
    color: var(--hp-green-dark);
    border-radius: .3rem;
    padding: .12rem .35rem;
    font-weight: 700;
    cursor: pointer;
}

.account-search.autocalculated,
.unit-price-input.autocalculated {
    background: #f6fff7;
}

.hp-receipt-field-marker {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    transform: translate(-50%, -50%);
    border: 2px solid white;
    box-shadow: 0 0 0 2px rgba(126, 76, 0, .42);
    background: #f1b61d;
    color: #1f2937;
    display: grid;
    place-items: center;
    font-size: .72rem;
    font-weight: 900;
    cursor: grab;
    z-index: 10;
    pointer-events: auto;
}

.hp-receipt-field-marker:active,
.hp-marker.auto:active {
    cursor: grabbing;
}

.hp-marker.auto {
    cursor: grab;
}

.hp-marker-toolbar .hp-field-hint {
    line-height: 1.25;
}

.hp-sums-compact .mark-field {
    margin-top: .35rem;
}

/* rev0069_FIX1: Externer Belegviewer als führende Markierungsfläche */
.hp-pdf-panel.viewer-window-open .hp-pdf-frame,
.hp-pdf-panel.viewer-window-open .hp-legend,
.hp-pdf-panel.viewer-window-open .hp-preview-zoom,
.hp-pdf-panel.viewer-window-open .hp-marker-toggle {
    display: none;
}

.hp-pdf-panel.viewer-window-open .hp-marker-toolbar {
    border: 1px dashed #d4a017;
    background: #fff8df;
    border-radius: .45rem;
    margin-bottom: .75rem;
}

.hp-pdf-panel.viewer-window-open .hp-marker-toolbar::after {
    content: "Die eingebettete Vorschau ist ausgeblendet, weil der externe Belegviewer geöffnet ist. Markierungen bitte im Viewer setzen oder verschieben.";
    display: block;
    color: #725200;
    font-weight: 700;
    margin-top: .45rem;
}

/* 0048: Kontoauswahl über Suchfeld + Kontextsuchfenster */
.hp-category-cell .account-select {
    display: none !important;
}
.hp-account-picker-modal[hidden] { display: none !important; }
.hp-account-picker-modal {
    position: fixed;
    inset: 0;
    z-index: 2500;
    background: rgba(15, 23, 42, .42);
    display: grid;
    place-items: center;
    padding: 1rem;
}
.hp-account-picker-box {
    width: min(760px, calc(100vw - 2rem));
    max-height: min(760px, calc(100vh - 2rem));
    overflow: hidden;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: .7rem;
    padding: 1rem;
}
.hp-account-picker-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
}
.hp-account-picker-head button {
    border: 0;
    background: transparent;
    font-size: 1.6rem;
    cursor: pointer;
}
.hp-account-picker-list {
    overflow: auto;
    display: grid;
    gap: .45rem;
}
.hp-account-picker-item {
    text-align: left;
    border: 1px solid rgba(15, 23, 42, .12);
    background: #fbfaf1;
    border-radius: .65rem;
    padding: .6rem .75rem;
    cursor: pointer;
}
.hp-account-picker-item:hover,
.hp-account-picker-item:focus {
    outline: 2px solid #e4c700;
    background: #fff8cc;
}
.hp-account-picker-item strong,
.hp-account-picker-item span,
.hp-account-picker-item small {
    display: block;
}
.hp-account-picker-item small {
    margin-top: .25rem;
    color: #475569;
    line-height: 1.35;
}


.hp-account-search-inline {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .35rem;
    align-items: center;
}
.hp-account-picker-button {
    padding: .55rem .7rem;
    border-radius: .6rem;
    border: 1px solid rgba(15,23,42,.18);
    background: #f8fafc;
    cursor: pointer;
    white-space: nowrap;
}
.hp-account-picker-button:hover,
.hp-account-picker-button:focus {
    background: #ecfccb;
    border-color: #a3e635;
}
@media (max-width: 760px) {
    .hp-account-search-inline {
        grid-template-columns: 1fr;
    }
}

/* 0056 zentrale Sachkonto-Suche */
.hp-account-picker-modal {
    color: #10210f;
}
.hp-account-picker-box {
    color: #10210f;
}
.hp-account-picker-box input[data-filter] {
    color: #10210f;
    background: #fff;
}
.hp-account-picker-group {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: .45rem .65rem;
    margin-top: .3rem;
    border-radius: .55rem;
    background: #e8f2d6;
    color: #183414;
    font-weight: 800;
    border: 1px solid #cfe2aa;
}
.hp-account-picker-item {
    color: #10210f !important;
    background: #fffef5;
}
.hp-account-picker-item strong {
    color: #10210f !important;
    font-weight: 800;
}
.hp-account-picker-item span {
    color: #50624b !important;
    font-size: .9rem;
}
.hp-account-picker-item small {
    color: #42503f !important;
    font-size: .82rem;
}
.hp-account-picker-item small b {
    color: #25351f;
}
.hp-account-picker-empty {
    padding: .8rem;
    border: 1px dashed #cbd5b1;
    border-radius: .65rem;
    color: #50624b;
    background: #fffef5;
}
.account-select,
.hp-bank-account-select {
    display: none !important;
}

/* 0058 finale Kontoauswahl: einheitliche Lupe, Ausrichtung und Gruppierung */
.hp-account-search-inline,
.hp-account-search-wrap {
    display: flex;
    align-items: center;
    gap: .35rem;
}
.hp-account-search-inline .account-search,
.hp-account-search-wrap .account-search,
.hp-account-search-wrap .hp-bank-account-search {
    min-height: 2.35rem;
    line-height: 1.25;
}
.hp-account-picker-button,
.hp-bank-account-picker-button.hp-account-picker-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.35rem;
    min-width: 2.35rem;
    height: 2.35rem;
    padding: 0 !important;
    border-radius: .55rem;
    font-size: 1rem;
    line-height: 1;
    text-align: center;
}
.hp-account-picker-group {
    margin: .65rem 0 .25rem;
    border-radius: .55rem;
    background: #e8f2d6;
    color: #183414;
    font-weight: 800;
}
.hp-account-picker-item + .hp-account-picker-item {
    margin-top: .25rem;
}
@media (max-width: 760px) {
    .hp-account-search-inline,
    .hp-account-search-wrap {
        display: flex;
        grid-template-columns: none;
    }
}