/* ========================================================================== Invoice Editor — Table + Inline Edit Styles ========================================================================== */ /* ── Layout ── */ /* Defined on :root (not just .invoice-editor) because the message popover (editor.js) is appended directly to to escape the scrollable table wrapper — it isn't a descendant of .invoice-editor, so scoping these vars there would leave it with no --ed-* values. */ :root { --ed-bg: var(--inv-bg, #f8f5f2); --ed-accent: var(--inv-accent, #e73801); --ed-text: var(--inv-text, #1c1c1c); --ed-muted: var(--inv-muted, #6b6b6b); --ed-border: var(--inv-border, #ccc9c5); --ed-radius: 4px; --ed-success: var(--inv-success, #2a6e3a); --ed-success-bg: var(--inv-success-bg, #edf7f0); --ed-error-bg: var(--inv-error-bg, #fdf0ec); } .invoice-editor { font-size: 0.875rem; color: var(--ed-text); } /* ── Toolbar ── */ .invoice-editor__toolbar { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 0.75rem; padding: 0.75rem 0; margin-bottom: 0.75rem; border-bottom: 1px solid var(--ed-border); } .invoice-editor__filters { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; flex: 1; } .invoice-editor__filter-group { display: flex; align-items: center; gap: 0.3rem; white-space: nowrap; } .invoice-editor__filter-group label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; color: var(--ed-muted); } .invoice-editor__filter-group input[type="date"], .invoice-editor__filter-group select { padding: 0.3em 0.5em; border: 1px solid var(--ed-border); border-radius: var(--ed-radius); font-size: 0.8rem; background: #fff; color: var(--ed-text); } .invoice-editor__toolbar-right { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; } .invoice-editor__count { font-size: 0.8rem; color: var(--ed-muted); } /* ── "Submit for Review" / "Finish Directly" actions (toolbar) ── */ .invoice-editor__status-action { display: flex; align-items: center; gap: 0.5rem; } /* Small auto-dismissing message, appended to and positioned under whichever button triggered it (see showToast() in editor.js) — kept out of the table markup so .table-wrap's overflow-x:auto can never clip it. */ .invoice-editor__toast { position: absolute; z-index: 9999; max-width: 280px; padding: 0.5em 0.8em; border-radius: var(--ed-radius); background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.15); font-size: 0.78rem; font-weight: 600; line-height: 1.35; } .invoice-editor__toast--success { color: var(--ed-success); border: 1px solid var(--ed-success); } .invoice-editor__toast--error { color: var(--ed-accent); border: 1px solid var(--ed-accent); } /* ── Buttons ── */ .invoice-editor__btn { padding: 0.35em 1em; background: var(--ed-accent); color: #fff; border: none; border-radius: 4em; font-size: 0.8em; font-weight: 600; cursor: pointer; white-space: nowrap; transition: opacity 0.15s; text-decoration: none; display: inline-flex; align-items: center; } .invoice-editor__btn:hover { opacity: 0.85; } .invoice-editor__btn:disabled { opacity: 0.4; cursor: not-allowed; } .invoice-editor__btn--ghost { background: transparent; color: var(--ed-text); border: 1px solid var(--ed-border); } /* ── Column toggle panel ── */ .invoice-editor__col-toggle-wrap { position: relative; } .invoice-editor__col-toggle-panel { position: absolute; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid var(--ed-border); border-radius: var(--ed-radius); padding: 0.5rem 0.75rem; z-index: 100; min-width: 160px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .invoice-editor__col-checkbox { display: flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0; cursor: pointer; font-size: 0.82rem; white-space: nowrap; } /* ── Bulk bar ── */ .invoice-editor__bulk-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; padding: 0.6rem 0.75rem; background: #fff8e6; border: 1px solid #e8c840; border-radius: var(--ed-radius); margin-bottom: 0.75rem; } .invoice-editor__bulk-info { font-weight: 600; font-size: 0.82rem; } .invoice-editor__bulk-bar select { padding: 0.3em 0.5em; border: 1px solid var(--ed-border); border-radius: var(--ed-radius); font-size: 0.8rem; } .invoice-editor__bulk-msg { font-size: 0.8rem; font-weight: 600; } .invoice-editor__bulk-msg--success { color: var(--ed-success); } .invoice-editor__bulk-msg--error { color: var(--ed-accent); } /* ── Table wrapper (horizontal scroll) ── */ .invoice-editor__table-wrap { overflow-x: auto; border: 1px solid var(--ed-border); border-radius: var(--ed-radius); } /* ── Table ── */ /* table-layout:fixed locks each column to the width declared on its (see .invoice-editor__th inline style) — content (incl. the edit-mode input) can no longer widen a column, so cells never shift width either. */ .invoice-editor__table { width: 100%; border-collapse: collapse; font-size: 0.82rem; table-layout: fixed; } .invoice-editor__th { position: sticky; top: 0; background: var(--ed-bg); border-bottom: 2px solid var(--ed-border); padding: 0.5rem 0.6rem; text-align: left; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ed-muted); white-space: nowrap; z-index: 1; } .invoice-editor__th--check, .invoice-editor__td--check { width: 28px; padding: 0.4rem 0.4rem 0.4rem 0.6rem; } .invoice-editor__th--id, .invoice-editor__td--id { width: 78px; color: var(--ed-muted); font-size: 0.72rem; white-space: nowrap; } /* Admin-only PDF preview link, shown next to the ID (see typo_invoice_pdf_preview_url()) */ .invoice-editor__pdf-link { display: inline-flex; align-items: center; margin-left: 0.35em; padding: 0.1em 0.4em; background: var(--ed-accent); color: #fff; border-radius: 3px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.02em; text-decoration: none; vertical-align: middle; } .invoice-editor__pdf-link:hover { opacity: 0.85; } /* ── Per-row "In Review →" / "Finish →" action column ── */ .invoice-editor__th--action, .invoice-editor__td--action { width: 215px; } /*.invoice-editor__td--action { display: flex; align-items: center; gap: 0.3rem; }*/ /* Rejection note (typo_message, set via the Release page's "Nicht freigeben") — click/Enter opens a popover with the full text (editor.js); title attribute is kept as a native hover fallback. */ .invoice-editor__msg-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.3rem; height: 1.3rem; margin-right: 0.3rem; border-radius: 50%; background: var(--ed-error-bg, #fdf0ec); color: var(--ed-accent); font-size: 0.95rem; line-height: 1; cursor: pointer; vertical-align: middle; } /* Appended to and positioned under the icon by editor.js — kept out of .table-wrap so overflow-x:auto can never clip it. */ .invoice-editor__msg-popover { position: absolute; z-index: 9999; max-width: 280px; padding: 0.6rem 0.75rem; background: #fff; border: 1px solid var(--ed-border); border-radius: calc(var(--ed-radius) * 2); box-shadow: 0 6px 20px rgba(0,0,0,0.18); font-size: 0.82rem; line-height: 1.4; white-space: pre-wrap; color: var(--ed-text); } .invoice-editor__row-review-btn, .invoice-editor__row-finish-btn { /* border-box on purpose: table-layout:fixed relies on the column width staying exact — content-box would add the padding on top of that width and push the row's right edge outside the table. */ height: 1.9rem; padding: 0 0.7em; border: none; border-radius: 4em; font-size: 0.72rem; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; transition: opacity 0.15s, background 0.15s; } .invoice-editor__row-review-btn { background: var(--ed-accent); color: #fff; } /* Finish skips the review chain entirely — ghost style keeps it visually secondary */ .invoice-editor__row-finish-btn { background: transparent; color: var(--ed-text); border: 1px solid var(--ed-border); } .invoice-editor__row-review-btn:hover, .invoice-editor__row-finish-btn:hover { opacity: 0.85; } .invoice-editor__row-review-btn:disabled, .invoice-editor__row-finish-btn:disabled { opacity: 0.6; cursor: default; } .invoice-editor__td { height: 2.3rem; padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--ed-border); vertical-align: middle; max-width: 260px; box-sizing: border-box; } .invoice-editor__row:last-child .invoice-editor__td { border-bottom: none; } .invoice-editor__row:hover .invoice-editor__td { background: rgba(231, 56, 1, 0.03); } .invoice-editor__row--selected .invoice-editor__td { background: rgba(231, 56, 1, 0.07); } /* ── Editable cell ── */ .invoice-editor__cell { cursor: pointer; position: relative; outline: none; transition: background 0.8s ease-out; } /* Hover (mouse-over) — subtle cue */ .invoice-editor__cell:hover { background: rgba(231, 56, 1, 0.04); } /* Navigation focus (keyboard Tab / Arrow keys) */ .invoice-editor__cell:focus { outline: 2px solid var(--ed-accent); outline-offset: -2px; background: rgba(231, 56, 1, 0.07); } /* ── Readonly cell (editable=false or editable=not_if_imported + imported) ── */ .invoice-editor__cell--readonly { cursor: default; color: var(--ed-muted); } .invoice-editor__cell--readonly:hover { background: none; } /* Imported row: subtle tint on readonly cells */ .invoice-editor__row--imported .invoice-editor__cell--readonly { background: repeating-linear-gradient( -45deg, transparent, transparent 6px, rgba(0, 0, 0, 0.015) 6px, rgba(0, 0, 0, 0.015) 12px ); } /* ── typo_receipt one-time PDF upload cell (not a generic editable cell — see typo_editor_render_row()'s 'file_upload' branch) ── */ .invoice-editor__td--file { white-space: nowrap; } .invoice-editor__file-name { color: var(--ed-text); overflow: hidden; text-overflow: ellipsis; } .invoice-editor__file-empty { color: var(--ed-muted); } .invoice-editor__file-upload-btn { height: 1.9rem; padding: 0 0.7em; background: transparent; color: var(--ed-text); border: 1px solid var(--ed-border); border-radius: 4em; font-size: 0.72rem; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap; box-sizing: border-box; transition: opacity 0.15s, border-color 0.15s; } .invoice-editor__file-upload-btn:hover { border-color: var(--ed-accent); color: var(--ed-accent); } .invoice-editor__file-upload-btn:disabled { opacity: 0.6; cursor: default; } /* Success flash */ .invoice-editor__cell--saved { background: var(--ed-success-bg, #edf7f0) !important; transition: none; } /* Edit mode */ .invoice-editor__cell--editing { outline: none; cursor: default; } .invoice-editor__cell--editing .invoice-editor__cell-display { display: none; } /* Wrap: input + save button side by side — hard-capped to the same height as .invoice-editor__cell-display so opening the editor never grows the row. overflow:hidden guards against native control chrome (e.g. number-input spinners) trying to force extra height. */ .invoice-editor__cell-edit-wrap { display: flex; align-items: center; gap: 3px; height: 1.6rem; max-height: 1.6rem; overflow: hidden; } /* Save button */ .invoice-editor__cell-save-btn { flex-shrink: 0; width: 1.6rem; height: 1.6rem; padding: 0; background: var(--ed-success, #2a6e3a); color: #fff; border: none; border-radius: 3px; font-size: 0.85rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity 0.15s; } .invoice-editor__cell-save-btn:hover { opacity: 0.85; } .invoice-editor__cell-save-btn:disabled { opacity: 0.4; cursor: not-allowed; } .invoice-editor__cell-display { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; height: 1.6rem; line-height: 1.6rem; padding: 0 2px; } /* textarea cells: allow wrapping (row height still varies with content here — only the display <-> edit-mode switch is height-locked) */ .invoice-editor__cell[data-type="textarea"] .invoice-editor__cell-display { white-space: pre-line; height: auto; line-height: 1.2em; max-height: 3.6em; overflow: hidden; } /* ── Inline input/select ── */ .invoice-editor__cell-input { width: 100%; min-width: 80px; height: 1.6rem; max-height: 1.6rem; padding: 0 0.35em; border: 2px solid var(--ed-accent); border-radius: 2px; font-size: inherit; font-family: inherit; background: #fff; color: var(--ed-text); outline: none; box-sizing: border-box; } /* Chrome/Safari number-input spinner can otherwise force extra height */ .invoice-editor__cell-input[type="number"] { -moz-appearance: textfield; appearance: textfield; } .invoice-editor__cell-input[type="number"]::-webkit-outer-spin-button, .invoice-editor__cell-input[type="number"]::-webkit-inner-spin-button { margin: 0; } .invoice-editor__cell-input[type="date"] { min-width: 130px; } .invoice-editor__cell-input[type="number"] { min-width: 80px; } .invoice-editor__cell-input--select { cursor: pointer; } textarea.invoice-editor__cell-input { resize: vertical; min-height: 3.5em; } /* ── Cell error ── */ /* Floats below the cell instead of adding to its box, so a validation message never pushes the row taller (see .invoice-editor__cell position:relative) */ .invoice-editor__cell-error { display: block; position: absolute; left: 0.6rem; right: 0.6rem; top: 100%; margin-top: 2px; padding: 2px 4px; background: #fff; border-radius: var(--ed-radius); box-shadow: 0 2px 6px rgba(0,0,0,0.12); font-size: 0.7rem; color: var(--ed-accent); z-index: 6; } .invoice-editor__cell-error:empty { display: none; } .invoice-editor__cell--error .invoice-editor__cell-input { border-color: var(--ed-accent); } /* ── Cell spinner ── */ .invoice-editor__cell-spinner, .invoice-editor__spinner { width: 0.8rem; height: 0.8rem; border: 2px solid var(--ed-border); border-top-color: var(--ed-accent); border-radius: 50%; animation: inv-spin 0.7s linear infinite; vertical-align: middle; flex-shrink: 0; display: inline-block; } .invoice-editor__cell-spinner[hidden], .invoice-editor__spinner[hidden] { display: none; } /* ── Locked state (during AJAX) ── */ .invoice-editor--locked .invoice-editor__cell { pointer-events: none; } .invoice-editor--locked .invoice-editor__table-wrap { opacity: 0.65; cursor: wait; } /* ── Empty state ── */ .invoice-editor__empty { text-align: center; padding: 2rem; color: var(--ed-muted); } /* ── Pagination ── */ .invoice-editor__pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 0.75rem 0; margin-top: 0.5rem; } .invoice-editor__page-btn { padding: 0.35em 1em; border: 1px solid var(--ed-border); border-radius: 4em; text-decoration: none; color: var(--ed-text); font-size: 0.82rem; transition: border-color 0.15s; } .invoice-editor__page-btn:hover { border-color: var(--ed-accent); color: var(--ed-accent); } .invoice-editor__page-info { font-size: 0.82rem; color: var(--ed-muted); } /* ── post_search autocomplete dropdown ── */ .invoice-editor__search-dropdown { position: absolute; z-index: 9999; list-style: none; margin: 2px 0 0; padding: 0.25rem 0; background: #fff; border: 1px solid var(--ed-border); border-radius: var(--ed-radius); box-shadow: 0 4px 14px rgba(0,0,0,0.12); max-height: 220px; overflow-y: auto; } .invoice-editor__search-result { padding: 0.35em 0.75em; font-size: 0.82rem; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .invoice-editor__search-result:hover, .invoice-editor__search-result--active { background: rgba(231, 56, 1, 0.07); color: var(--ed-accent); } .invoice-editor__search-result--active { background: rgba(231, 56, 1, 0.13); } /* ── Access denied ── */ .invoice-editor__access-denied { font-size: 0.9rem; color: var(--ed-muted); }