/* ============================================================================ Plush74 Collections 2026 — STAFF COLLECTION EDITOR surface stylesheet Surface: /account/collections_edit/ (dashboard_wishlists_edit.php + table_row.php) Prefix: .p74ce-* Root wrapper: .p74ce-root Depends on: collections-2026.css (the shared .p74c kit) — registered as a dep by plush74-collections-2026.php so this always cascades AFTER it. This file FINISHES the half-done migration of the staff editor off the 2015-era Bootstrap-3 + custom.css markup and onto the editorial .p74c kit: one consistent square/hairline button language for the per-row action rail, one cell height for every inline-save input (rent / fees / booking-hours / overtime), tidy header ledger, square row-action icon buttons, and the status swim-lane treatment for hidden/terminal rows. BUTTON RULE (owner, FINAL): the ONLY banned combo is a dark/black button or badge with YELLOW/LIME TEXT. Every dark surface here uses WHITE text (var(--p74c-paper)). Yellow-bg + black-text is allowed and kept. Lime-button labels use var(--p74c-btn-on-lime) (= ink) — never a hardcoded color. LOAD-BEARING: this file ONLY restyles. It never renames a class JS binds to, never touches a data-* attr, field name, form action or role gate. All the inline-save selectors (.wishlisting_field_input / .wishlisting_field / .field_auto_symbol / [data-idwishlist_listing]) keep working — we only skin them. Scoped under .p74ce-root so nothing leaks to other surfaces; no bare .p74c__* rule is written here (only scoped overrides under the root). Built 2026-06-16 (Wave 2). Cyon-deploy-ready (no host hardcodes). ========================================================================= */ /* --------------------------------------------------------------------------- 0. Surface frame + section headers (kill the old panel-heading / liney look) --------------------------------------------------------------------------- */ .p74ce-root { font-family:var(--p74c-font); color:var(--p74c-ink); } .p74ce-root .panel, .p74ce-root .panel-default { border:0; box-shadow:none; background:transparent; margin-bottom:0; } .p74ce-root .panel-heading { background:transparent; border:0; padding:18px 0 10px; } .p74ce-root .panel-heading .panel-title { font-family:var(--p74c-font-disp); font-size:18px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--p74c-ink); line-height:1.1; } .p74ce-root .panel-body { padding:0; } .p74ce-root hr { border:0; border-top:1px solid var(--p74c-line); margin:18px 0; } /* section label strip ("Staff notes" etc.) — paper + a single bottom hairline, not a grey filled band (owner rule #2) */ .p74ce-sectlabel { padding:12px 0 8px; border:0; border-bottom:1px solid var(--p74c-line); background:transparent; font-family:var(--p74c-font-disp); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--p74c-ink); } /* --------------------------------------------------------------------------- 1. Header ledger (collection metadata) — editorial grid, not a PDF mock The header form keeps using .p74c__ledger from the kit; here we only add surface-scoped breathing room + accent cells so the table_preview-pdf skin no longer fights it. We DO NOT redeclare .p74c__ledger globally. --------------------------------------------------------------------------- */ /* CORRECTED (round 2): the header is a CALM editorial panel, not an Excel grid. ONE hairline frames the panel; rows divide with ONE faint hairline; label cells are paper (NOT grey); NO per-cell near-black borders; inputs are clean underline fields. Kills the "2021 Excel print report" + "random lines". */ .p74ce-root .table_preview-pdf { margin:0 0 18px; border:1px solid var(--p74c-line); border-collapse:collapse; background:var(--p74c-paper); } .p74ce-root .table_preview-pdf tbody tr { border-bottom:1px solid var(--p74c-line-2); } .p74ce-root .table_preview-pdf tbody tr:last-child { border-bottom:0; } .p74ce-root .table_preview-pdf th.col, .p74ce-root .table_preview-pdf td.col { border:0; padding:4px 12px; min-width:0; vertical-align:middle; text-transform:none; background:transparent; } .p74ce-root .table_preview-pdf th.col { width:140px; padding:10px 12px 4px; background:transparent; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--p74c-muted); white-space:nowrap; vertical-align:middle; } .p74ce-root .table_preview-pdf th.col.accent { background:transparent; } .p74ce-root .table_preview-pdf td.col.readonly { background:transparent; } .p74ce-root .table_preview-pdf th.col.va-top, .p74ce-root .table_preview-pdf td.col.va-top { vertical-align:top; } .p74ce-root .table_preview-pdf td.col.date { font-weight:700; vertical-align:top; padding:6px 12px; } .p74ce-root .table_preview-pdf .form-group { margin:0; } /* inputs = clean underline fields on paper (no box, no grey fill) — owner rule #1 */ .p74ce-root .table_preview-pdf .form-control, .p74ce-root .table_preview-pdf .p74c__input, .p74ce-root .table_preview-pdf .p74c__textarea { border:0 !important; border-bottom:1px solid var(--p74c-line-2) !important; border-radius:0; min-height:34px; line-height:normal; background:transparent !important; box-shadow:none; margin:0; padding:0 2px; transition:border-color .12s; } .p74ce-root .table_preview-pdf .p74c__textarea { min-height:96px; resize:vertical; padding:6px 2px; } .p74ce-root .table_preview-pdf .form-control:focus, .p74ce-root .table_preview-pdf .p74c__input:focus, .p74ce-root .table_preview-pdf .p74c__textarea:focus { background:transparent !important; border-bottom:2px solid var(--p74c-lime-d) !important; } /* the producer select2 frame inside the ledger should also drop its box */ .p74ce-root .table_preview-pdf .select2-container--default .select2-selection--multiple { border-bottom:1px solid var(--p74c-line-2) !important; } /* Staff-notes ledger uses the kit .p74c__ledger; just give the editor cells room */ .p74ce-root .p74c__ledger .p74c__textarea { min-height:96px; } .p74ce-root .p74c__ledger .form-control { border:0; box-shadow:none; } /* select2 producer field — kept square/hairline (was already styled inline) */ .p74ce-root .field_event_producer { position:relative; } .p74ce-root .select2-container--default { width:100% !important; } .p74ce-root .select2-container--default .select2-selection--multiple { border:0; padding:5px 70px 5px 8px; border-radius:0; min-height:42px; } .p74ce-root .select2-container--default .select2-selection--multiple .select2-selection__rendered { padding:0; display:flex; align-items:center; flex-wrap:wrap; } .p74ce-root .select2-container--default .select2-selection--multiple .select2-selection__choice { background:var(--p74c-paper); border:1px solid var(--p74c-line); border-radius:0; margin:3px 3px; padding:2px 8px; line-height:20px; font-size:12px; } .p74ce-root .select2-container--default .select2-selection__choice__remove { color:var(--p74c-ink); margin-right:7px; font-size:16px; } /* Producer "Add New" — was off-palette BLUE (#0060df); now the universal SECONDARY button (white + ink + 1px hairline, hover→lime) — owner rule #3 */ .p74ce-root .field_event_producer .btn.btn-add, .p74ce-root .field_event_producer .btn.btn-add-producer { position:absolute; z-index:100; right:0; top:2px; display:inline-flex; align-items:center; justify-content:center; height:28px; padding:0 12px; border:1px solid var(--p74c-line); border-radius:0; background:var(--p74c-paper); color:var(--p74c-ink); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; transition:background .15s, color .15s; box-shadow:none; } .p74ce-root .field_event_producer .btn.btn-add:hover, .p74ce-root .field_event_producer .btn.btn-add-producer:hover { background:var(--p74c-lime); color:var(--p74c-ink); } /* --------------------------------------------------------------------------- 1b. CORRECTED header panel (.p74ce-hdr) — replaces the .table_preview-pdf Excel grid (per-row hairlines + border-left column dividers + grey label cells + centered floating labels). A LEFT-packed wrapping grid of clean underline fields: small eyebrow label ABOVE a borderless underline input. NO grey, NO boxes, NO column rules, NO Staff-notes grey band. Project Details / Internal Notes / Terms collapse behind a "+ Notes" disclosure (owner rules #1 #2 #5 #6). Pure paper. --------------------------------------------------------------------------- */ .p74ce-root .p74ce-hdr { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px 26px; margin:0 0 16px; padding:0; background:transparent; } .p74ce-root .p74ce-hdr--scout { grid-template-columns:repeat(3, minmax(0,1fr)); align-items:end; } @media (max-width:900px){ .p74ce-root .p74ce-hdr { grid-template-columns:repeat(2, minmax(0,1fr)); } } @media (max-width:560px){ .p74ce-root .p74ce-hdr { grid-template-columns:1fr; } } .p74ce-root .p74ce-hdr-field { min-width:0; display:flex; flex-direction:column; gap:3px; text-align:left; } .p74ce-root .p74ce-hdr-field--wide { grid-column:1 / -1; } @media (max-width:900px){ .p74ce-root .p74ce-hdr-field--wide { grid-column:1 / -1; } } .p74ce-root .p74ce-hdr-field > label { margin:0; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--p74c-muted); text-align:left; } .p74ce-root .p74ce-hdr-field .form-group { margin:0; position:relative; } /* every header field input = a CLEAN underline (no box, no grey) — owner rule #1 */ .p74ce-root .p74ce-hdr-field .form-control, .p74ce-root .p74ce-hdr-field .p74c__input, .p74ce-root .p74ce-hdr-field .p74c__select { width:100%; min-height:34px; height:34px; padding:0 2px; margin:0; border:0 !important; border-bottom:1px solid var(--p74c-line-2) !important; border-radius:0; background:transparent !important; box-shadow:none; font-size:13px; color:var(--p74c-ink); outline:none; text-transform:uppercase; letter-spacing:0.03em; transition:border-color .12s; } .p74ce-root .p74ce-hdr-field .form-control:focus, .p74ce-root .p74ce-hdr-field .p74c__input:focus, .p74ce-root .p74ce-hdr-field .p74c__select:focus { background:transparent !important; border-bottom:2px solid var(--p74c-lime-d) !important; } .p74ce-root .p74ce-hdr-field .p74c__textarea { width:100%; min-height:96px; resize:vertical; padding:6px 2px; margin:0; border:0 !important; border-bottom:1px solid var(--p74c-line-2) !important; border-radius:0; background:transparent !important; box-shadow:none; font-size:13px; line-height:1.5; transition:border-color .12s; } .p74ce-root .p74ce-hdr-field .p74c__textarea:focus { background:transparent !important; border-bottom:2px solid var(--p74c-lime-d) !important; } /* dates input-group: drop the bootstrap addon box, keep the calendar glyph */ .p74ce-root .p74ce-hdr-field .input-group.date { display:flex; align-items:center; } .p74ce-root .p74ce-hdr-field .input-group-addon { border:0; background:transparent; padding:0 0 0 6px; color:var(--p74c-muted); } /* producer select2 sits in a wide field; drop its box, keep underline */ .p74ce-root .p74ce-hdr-field .field_event_producer { position:relative; } .p74ce-root .p74ce-hdr-field .select2-container--default .select2-selection--multiple { border:0 !important; border-bottom:1px solid var(--p74c-line-2) !important; border-radius:0; min-height:34px; padding:3px 70px 3px 2px; background:transparent; } .p74ce-root .p74ce-hdr-updated { align-self:end; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--p74c-muted); display:flex; flex-direction:column; gap:3px; text-align:left; } .p74ce-root .p74ce-hdr-updated b { font-size:13px; color:var(--p74c-ink); letter-spacing:0.02em; } /* header NOTES disclosure (Project details / Internal notes / Terms) — collapsed by default; one clean "+ Notes" affordance, no grey band, no box */ .p74ce-root details.p74ce-hdr-notes { margin:0 0 18px; padding:8px 0 0; border:0; border-top:1px solid var(--p74c-line-2); } .p74ce-root .p74ce-hdr-notes-sum { list-style:none; cursor:pointer; display:flex; align-items:center; gap:7px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--p74c-ink); padding:6px 0; } .p74ce-root .p74ce-hdr-notes-sum::-webkit-details-marker { display:none; } .p74ce-root details.p74ce-hdr-notes[open] .p74ce-hdr-notes-sum { color:var(--p74c-muted); } .p74ce-root .p74ce-hdr-notes-body { display:grid; grid-template-columns:1fr 1fr; gap:14px 26px; padding:8px 0 4px; } @media (max-width:760px){ .p74ce-root .p74ce-hdr-notes-body { grid-template-columns:1fr; } } /* the wp-editor (Project Details) inside the disclosure: square, hairline frame */ .p74ce-root .p74ce-hdr-notes-body .wp-editor-container { border:1px solid var(--p74c-line-2); } .p74ce-root .p74ce-hdr-notes-body .mce-toolbar-grp { border-bottom:1px solid var(--p74c-line-2); } .p74ce-root .p74ce-hdr-notes-body .wp-editor-wrap, .p74ce-root .p74ce-hdr-notes-body .mce-panel { border-radius:0; } /* --------------------------------------------------------------------------- 2. Listings tables — collapse the two stacked Bootstrap tables into one clean hairline ledger look. The PHP keeps two s (visible + hidden) for the show/hide engine; we style the hidden one as a muted "terminal" lane instead of the old grayscale-filter treatment. --------------------------------------------------------------------------- */ .p74ce-root .listings_table { width:100%; border-collapse:collapse; margin:0 0 6px; background:var(--p74c-paper); } .p74ce-root .listings_table > thead > tr > th { border:1px solid var(--p74c-line); padding:9px 10px; background:var(--p74c-paper); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--p74c-ink); vertical-align:middle; line-height:1.2; } .p74ce-root .listings_table > tbody > tr > td, .p74ce-root .listings_table > tbody > tr > th { border:1px solid var(--p74c-line); padding:10px; vertical-align:top; line-height:1.4; } .p74ce-root .listings_table > tbody > tr.no_el > th { border:0; padding:8px 0; background:transparent; } /* cards do NOT grey on hover (owner rule #2) — the card reads clean at rest */ .p74ce-root .listings_table tbody tr:not(.no_el):hover > td { background:transparent; } .p74ce-root .listings_table .listing_collaps .fields_list { display:none; } /* hidden-listings table: muted "terminal" treatment on PAPER (no grey band) — the rows just read dimmer (lower opacity), not on a grey fill (owner rule #2) */ .p74ce-root .listings_table_hidden { filter:none; opacity:1; margin-top:24px; } .p74ce-root .listings_table_hidden > tbody > tr:not(.no_el) { opacity:.62; background:var(--p74c-paper); } .p74ce-root .listings_table_hidden > tbody > tr > td, .p74ce-root .listings_table_hidden > tbody > tr > th { background:transparent; } .p74ce-root .listings_table_hidden .p74c__st { opacity:.85; } /* ID / picture / title / address cells */ .p74ce-root .listings_table .listing_toggle_events { display:inline-flex; gap:4px; margin-right:6px; vertical-align:middle; } .p74ce-root .listings_table .color-link { color:var(--p74c-ink); text-decoration:none; } .p74ce-root .listings_table .color-link:hover { color:#444; text-decoration:underline; } .p74ce-root .listings_table td[data-label="Title"] a.color-link { font-size:16px; font-weight:700; text-transform:uppercase; letter-spacing:0.01em; } .p74ce-root .listings_table img { display:block; border:1px solid var(--p74c-line); } .p74ce-root .label.label-warning { background:var(--p74c-paper); color:var(--p74c-muted); border:1px solid var(--p74c-line-2); border-radius:0; padding:2px 6px; font-size:9px; font-weight:700; text-transform:uppercase; } .p74ce-root .label.label-danger { background:var(--p74c-paper); color:var(--p74c-red); border:1px solid var(--p74c-red); border-radius:0; padding:4px 7px; font-size:10px; font-weight:700; text-transform:uppercase; } /* --------------------------------------------------------------------------- 3. Per-row field grid — ONE consistent labelled cell layout (the core fix) The fields_list keeps its name/class/data-* contract; we just lay it out as a clean wrapping grid of labelled cells at one consistent height. --------------------------------------------------------------------------- */ /* NOTE (round 2): the flagship editor row is now the .p74ce-card Deal Card (section 12 owns its grid). These legacy .fields_list flex rules are SCOPED with :not(.p74ce-card) so they never fight the card grid or re-box its inputs. They remain for any non-card .fields_list usage on this surface. */ .p74ce-root .fields_list:not(.p74ce-card) { display:flex; flex-wrap:wrap; gap:10px 12px; margin:6px 0 0; align-items:flex-end; } .p74ce-root .fields_list:not(.p74ce-card) .group { flex:0 0 auto; padding:0; position:relative; min-width:0; } .p74ce-root .fields_list:not(.p74ce-card) .group.full-width { flex:0 0 100%; } .p74ce-root .fields_list:not(.p74ce-card) .group.one-third-width { flex:0 0 calc((100% - 24px) / 3); } .p74ce-root .fields_list:not(.p74ce-card) .group.col5-width { flex:1 1 130px; max-width:200px; } /* field labels: small uppercase eyebrow above each cell */ .p74ce-root .fields_list .group > label { display:block; margin:0 0 4px; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--p74c-muted); } .p74ce-root .group label.wp_editor_label { position:static; left:auto; top:auto; display:block; margin-bottom:6px; } .p74ce-root .group label.wp_editor_label b { font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--p74c-muted); } /* EVERY inline-save input gets the same square hairline cell + one height. Kills the legacy 55px-wide box and the per-field height mismatch. The .wishlisting_field_input class is the JS hook — we only skin it. */ .p74ce-root .fields_list:not(.p74ce-card) .wishlisting_field_input, .p74ce-root .fields_list:not(.p74ce-card) .p74c__input, .p74ce-root .fields_list:not(.p74ce-card) .p74c__select { width:100% !important; min-width:0 !important; min-height:34px; height:34px; padding:0 2px; margin:0; border:0; border-bottom:1px solid var(--p74c-line-2); border-radius:0; background:transparent; font-size:13px; color:var(--p74c-ink); outline:none; text-transform:uppercase; letter-spacing:0.03em; box-shadow:none; } .p74ce-root .fields_list:not(.p74ce-card) .wishlisting_field_input:focus, .p74ce-root .fields_list:not(.p74ce-card) .p74c__input:focus { background:transparent; border-bottom:2px solid var(--p74c-lime-d); } .p74ce-root .fields_list:not(.p74ce-card) .p74c__select { cursor:pointer; } /* money cells: right-aligned (the field_auto_symbol mask box) */ .p74ce-root .fields_list:not(.p74ce-card) .field_auto_symbol, .p74ce-root .fields_list:not(.p74ce-card) .p74c__cell_money { text-align:right; } /* booking-hours / OT-hours: plain duration cells, left aligned */ .p74ce-root .fields_list:not(.p74ce-card) input[name="listing_booking_hours"], .p74ce-root .fields_list:not(.p74ce-card) input[name="listing_overtime_hours"] { text-align:left; } /* status select + live preview: the flagship row's versions are owned by section 12 (.p74ce-status-cluster / .p74ce-receipt-friendly). Nothing legacy needed here anymore — kept as a no-op anchor so section numbering is stable. */ /* per-row notes (TinyMCE) — let it breathe, square the toolbar frame */ .p74ce-root .group.text_editor { margin-top:4px; } .p74ce-root .group.text_editor .wp-editor-wrap, .p74ce-root .group.text_editor .mce-panel { border-radius:0; } .p74ce-root .group.text_editor .wp-editor-container { border:1px solid var(--p74c-line); } .p74ce-root .group.text_editor .mce-toolbar-grp { border-bottom:1px solid var(--p74c-line); } /* --------------------------------------------------------------------------- 4. Per-row ACTION RAIL (legacy) — SUPERSEDED by section 12's .p74ce-toolbar on the flagship editor row. The toolbar carries BOTH .p74c__action_rail (the legacy JS-friendly class) and .p74ce-toolbar; section 12 owns the look, so these legacy rules are scoped :not(.p74ce-toolbar) to avoid drawing the old segmented border-box (the "random lines"/"old buttons" the owner rejected). --------------------------------------------------------------------------- */ .p74ce-root .p74c__action_rail:not(.p74ce-toolbar) { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:10px 0 0; border:0; } .p74ce-root .p74c__action_rail:not(.p74ce-toolbar) .btn, .p74ce-root .p74c__action_rail:not(.p74ce-toolbar) .label-block, .p74ce-root .p74c__action_rail:not(.p74ce-toolbar) span.btn, .p74ce-root .p74c__action_rail:not(.p74ce-toolbar) a { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:32px; padding:0 13px !important; margin:0 !important; border:1px solid var(--p74c-line) !important; border-radius:0 !important; background:var(--p74c-paper) !important; color:var(--p74c-ink) !important; box-shadow:none !important; text-decoration:none; font-size:10.5px !important; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; line-height:1.1; transition:background .15s, color .15s; white-space:nowrap; } .p74ce-root .p74c__action_rail:not(.p74ce-toolbar) .btn:hover, .p74ce-root .p74c__action_rail:not(.p74ce-toolbar) a:hover { background:var(--p74c-lime) !important; color:var(--p74c-ink) !important; } /* "Requested" / availability sub-badges inside a rail button (light, rule-safe). */ .p74ce-root .p74c__action_rail .p74ce-subbadge { margin-left:6px; padding:1px 7px; border-radius:0; font-weight:700; font-size:10px; text-transform:uppercase; letter-spacing:0.03em; } /* --------------------------------------------------------------------------- 5. Row utility icon buttons — unify the 4 old shapes to ONE square icon btn. Collapse/expand (event_open/collaps), order up/down (btn-order-move-top), show/hide (event_show/hide), delete (btn_delete output). All square 30px. --------------------------------------------------------------------------- */ .p74ce-root .event_open, .p74ce-root .event_collaps, .p74ce-root .event_show, .p74ce-root .event_hide, .p74ce-root .btn-order-move-top, .p74ce-root td[data-label="Remove"] .btn, .p74ce-root td[data-label="Remove"] a.btn-delete { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:30px; height:30px; padding:0 9px; margin:2px 2px; border:1px solid var(--p74c-line) !important; border-radius:0 !important; background:var(--p74c-paper) !important; color:var(--p74c-ink) !important; box-shadow:none !important; font-size:11px; font-weight:700; line-height:1; text-transform:uppercase; letter-spacing:0.03em; text-decoration:none; transition:background .15s, color .15s; cursor:pointer; } .p74ce-root .event_open:hover, .p74ce-root .event_collaps:hover, .p74ce-root .event_show:hover, .p74ce-root .event_hide:hover, .p74ce-root .btn-order-move-top:not(.no_active):hover, .p74ce-root td[data-label="Remove"] .btn:hover { background:var(--p74c-lime) !important; color:var(--p74c-ink) !important; } /* order arrows are icon-only squares */ .p74ce-root .btn-order-move-top { width:34px; padding:0; font-size:14px; } .p74ce-root .btn-order-move-top.no_active { opacity:.35; } .p74ce-root td[data-label="Order"] { text-align:center; white-space:nowrap; } .p74ce-root td[data-label="Remove"] { white-space:nowrap; } .p74ce-root .listing_hideshow_events { display:inline-flex; gap:4px; } /* shortlist / booked checkboxes — centred in their cells */ .p74ce-root td[data-label="Shortlist"], .p74ce-root td[data-label="Booked"], .p74ce-root td[data-label="Requirest"] { text-align:center; vertical-align:middle; } /* --------------------------------------------------------------------------- 6. VISITOR "Request" column + bottom Request button (client-facing on this staff template). Match the kit; KEEP the link/form/name/role-gate untouched. --------------------------------------------------------------------------- */ .p74ce-root .p74ce-reqhead { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; } .p74ce-root td[data-label="Requirest"] input[type="checkbox"] { transform:scale(1.15); } /* bottom Back / Request / Save row */ .p74ce-root .form-group-btns { display:flex; gap:10px; align-items:center; margin:0; } .p74ce-root .form-group-btns .no-padding { padding:0; } .p74ce-root .form-group-btns .btn-custom, .p74ce-root .form-group-btns .btn.btn-primary { display:inline-flex; align-items:center; justify-content:center; height:42px; padding:0 22px; border:1px solid var(--p74c-line) !important; border-radius:0 !important; background:var(--p74c-paper) !important; color:var(--p74c-ink) !important; box-shadow:none !important; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; text-decoration:none; transition:background .15s, color .15s; } .p74ce-root .form-group-btns .btn-custom:hover, .p74ce-root .form-group-btns .btn.btn-primary:hover { background:var(--p74c-lime) !important; color:var(--p74c-ink) !important; } /* the primary Save / Request = lime GO; black-on-yellow is allowed (rule-safe) */ .p74ce-root .form-group-btns .btn-custom:not(.btn-inversed) { background:var(--p74c-lime) !important; color:var(--p74c-btn-on-lime) !important; } .p74ce-root .form-group-btns .btn-custom:not(.btn-inversed):hover { background:var(--p74c-lime-d) !important; color:var(--p74c-btn-on-lime) !important; } .p74ce-root .form-group-btns .btn-inversed { background:var(--p74c-paper) !important; color:var(--p74c-ink) !important; } /* --------------------------------------------------------------------------- 7. Footer action bar (dashboard_wishlists_edit_bottom_menu.php) — kit bar. CORRECTED (round 2): the theme's .btn-primary / .btn-custom turn these into ROUNDED LIME PILLS (border-radius:30px, lime fill) — the "old buttons which don't make sense" the owner rejected. Force the SQUARE universal family here with !important so NO pill can leak: SECONDARY = white + ink + 1px hairline (Generate PDF / Zip Images / Add Listings / Share / Send Update); the SINGLE PRIMARY (.p74c__btn--go) = lime-bg + ink text (Save). Same 38px geometry as the workbar + toolbar — ONE family across the surface (owner rule #3). --------------------------------------------------------------------------- */ .p74ce-root .pl_table_footer .p74c__bar { gap:10px; padding:14px 0; border-bottom:0; } .p74ce-root .pl_table_footer .pull-left, .p74ce-root .pl_table_footer .pull-right { display:flex; gap:10px; flex-wrap:wrap; float:none; } @media (min-width:768px){ .p74ce-root .pl_table_footer .pull-right { float:none; } } /* SQUARE universal secondary — kills the rounded lime pill (no border-radius:30px) */ .p74ce-root .pl_table_footer .p74c__btn { height:38px; padding:0 16px; margin:0; border:1px solid var(--p74c-line) !important; border-radius:0 !important; background:var(--p74c-paper) !important; color:var(--p74c-ink) !important; box-shadow:none !important; font-size:12px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; text-decoration:none; line-height:1; display:inline-flex; align-items:center; justify-content:center; gap:7px; white-space:nowrap; transition:background .15s, color .15s; } .p74ce-root .pl_table_footer .p74c__btn:hover { background:var(--p74c-lime) !important; color:var(--p74c-ink) !important; } /* the ONE primary in the footer = lime-bg + ink text (Save) */ .p74ce-root .pl_table_footer .p74c__btn--go { background:var(--p74c-lime) !important; color:var(--p74c-btn-on-lime) !important; border-color:var(--p74c-line) !important; } .p74ce-root .pl_table_footer .p74c__btn--go:hover { background:var(--p74c-lime-d) !important; color:var(--p74c-btn-on-lime) !important; } /* --------------------------------------------------------------------------- 8. Share-link copy button (list_filters_form.share) — square, rule-safe. Yellow bg + black text is allowed; keep it but normalise the 4th lime hex. --------------------------------------------------------------------------- */ .p74ce-root .list_filters_form.share .form-group { display:flex; } .p74ce-root .list_filters_form.share .form-group input { flex:1 2 auto; } .p74ce-root .list_filters_form.share .form-group a { flex:0 0 45px; display:inline-flex; align-items:center; justify-content:center; background:var(--p74c-lime); color:var(--p74c-ink); border:1px solid var(--p74c-line); border-left:0; border-radius:0; cursor:pointer; transition:background .15s; } .p74ce-root .list_filters_form.share .form-group a:hover { background:var(--p74c-lime-d); color:var(--p74c-ink); } /* --------------------------------------------------------------------------- 9. Validation + ajax loaders (kept from the inline blocks) --------------------------------------------------------------------------- */ .p74ce-root .empty-input { border:1px solid var(--p74c-red) !important; } .p74ce-root .list_filters_form .form-group.error input { border-color:var(--p74c-red); } .p74ce-root .list_filters_form .form-group .notice { font-size:13px; margin-top:2px; font-style:italic; color:var(--p74c-red); } .p74ce-root .pl_form .form-group .fa-custom-ajax-indicator { position:absolute; top:50%; left:6px; margin-top:-8px; } /* --------------------------------------------------------------------------- 10. Modals (profile edit / message / listing response) — square kit frame. IDs + form ids are untouched; this only skins the Bootstrap modal chrome. --------------------------------------------------------------------------- */ .p74ce-root .modal-content { border-radius:0; border:1px solid var(--p74c-line); box-shadow:0 18px 60px rgba(0,0,0,.28); } .p74ce-root .modal-header { padding:16px 18px 14px; border-bottom:1px solid var(--p74c-line); } .p74ce-root .modal-header .modal-title { font-family:var(--p74c-font-disp); font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; } .p74ce-root .modal-body .alert-success { border:1px solid var(--p74c-line); border-radius:0; margin-bottom:15px !important; } .p74ce-root .modal-body form .btn i { margin-left:10px; } /* in-flight loading overlay on modal form submit (kept from the old inline block) */ .p74ce-root .modal-body form.loading { opacity:.7; position:relative; } .p74ce-root .modal-body form.loading::before { content:"\f110"; font-family:"Font Awesome 5 Free"; font-weight:900; display:flex; justify-content:center; align-items:center; position:absolute; top:0; left:0; height:100%; width:100%; font-size:42px; z-index:5; } .p74ce-root .modal-body form.loading::after { content:""; left:-5px; top:-5px; width:calc(100% + 10px); height:calc(100% + 10px); background-color:#ffffffc2; position:absolute; backdrop-filter:blur(5px); } .p74ce-root .modal .modal-header .close { position:absolute; right:20px; top:45px; } /* --------------------------------------------------------------------------- 11. Responsive — collapse the field grid sensibly on small screens --------------------------------------------------------------------------- */ @media (max-width:900px){ .p74ce-root .fields_list .group.col5-width { flex:1 1 calc((100% - 12px) / 2); max-width:none; } .p74ce-root .table_preview-pdf th.col { width:auto; } } @media (max-width:560px){ .p74ce-root .fields_list { gap:10px; } .p74ce-root .fields_list .group.col5-width, .p74ce-root .fields_list .group.one-third-width { flex:1 1 100%; max-width:none; } .p74ce-root .p74c__action_rail .btn { flex:1 1 auto; } } /* =========================================================================== 12. WAVE 3 (ROUND 2, CORRECTED) — THE DEAL CARD (flagship row rebuild) --------------------------------------------------------------------------- The per-listing is repurposed into a Deal Card that reads top-to-bottom like a quote: LEFT GUTTER (order arrows + thumb + #ID + delete) | IDENTITY + BOOKING-TERMS + TOOLBAR + NOTES | a TIGHT money RECEIPT beside the content. We KEEP the table tags (/, so it can't disturb reorder JS). The header is a LIME accent strip (lime-bg + INK text), NOT a dark bar — owner rule #4. The caret rotates open/closed; "Details" is the disclosure verb. */ /* CORRECTED (round 3): the section group header is a PAPER band with a single bottom hairline + a small LIME COUNT CHIP — lime is kept a SMALL accent, not a full-bleed lime band competing with the other lime accents (owner: lime only as a small accent). Capped to the card width so it lines up with the cards. */ .p74ce-root .p74ce-lane { margin:14px 0 0; padding:0; border:0; max-width:1180px; } .p74ce-root .p74ce-lane-head { display:flex; align-items:center; gap:10px; padding:9px 0 8px; background:transparent; color:var(--p74c-ink); border:0; border-bottom:1px solid var(--p74c-line); font-family:var(--p74c-font-disp); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; } .p74ce-root .p74ce-lane-dot { width:7px; height:7px; border-radius:50%; background:var(--p74c-lime-d); display:inline-block; flex:0 0 auto; } /* the count is the SMALL lime accent chip (lime-bg + ink text) */ .p74ce-root .p74ce-lane-count { font-size:10px; font-weight:700; letter-spacing:0.03em; margin-left:2px; padding:1px 8px; background:var(--p74c-lime); color:var(--p74c-ink); font-variant-numeric:tabular-nums; } .p74ce-root .p74ce-lane-disc { margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:10px; font-weight:700; letter-spacing:0.04em; color:var(--p74c-muted); } .p74ce-root .p74ce-lane-disc::before { content:"\203A"; font-size:14px; line-height:1; } /* › */ /* --- STICKY WORKBAR ("Saved ✓ / Saving…") — LIGHT, never a black bar ---- */ .p74ce-root .p74ce-workbar { position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 0; border:0; border-bottom:1px solid var(--p74c-line); background:var(--p74c-paper); margin:0 0 16px; max-width:1180px; } .p74ce-root .p74ce-workbar-title { font-family:var(--p74c-font-disp); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--p74c-ink); } /* quiet ink status + a tiny dot — never a chip/bar (owner rule #4) */ .p74ce-root .p74ce-workbar-status { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:var(--p74c-muted); } .p74ce-root .p74ce-workbar-status .p74ce-wb-saved { color:var(--p74c-muted); } .p74ce-root .p74ce-workbar-status .p74ce-wb-saving { color:var(--p74c-muted); } .p74ce-root .p74ce-workbar-spacer { flex:1 1 auto; } /* ONE lime primary per surface (owner rule #3): SAVE = the only lime workbar button; ADD LISTINGS / SHARE / SEND UPDATE are white-outline SECONDARY. Force the secondary look over Bootstrap's .btn-primary blue/lime bleed; only the --go sibling stays lime. */ .p74ce-root .p74ce-workbar .p74c__btn { height:32px; background:var(--p74c-paper) !important; color:var(--p74c-ink) !important; border:1px solid var(--p74c-line) !important; box-shadow:none !important; } .p74ce-root .p74ce-workbar .p74c__btn:hover { background:var(--p74c-lime) !important; color:var(--p74c-ink) !important; } .p74ce-root .p74ce-workbar .p74c__btn--go { background:var(--p74c-lime) !important; color:var(--p74c-btn-on-lime) !important; border-color:var(--p74c-line) !important; } .p74ce-root .p74ce-workbar .p74c__btn--go:hover { background:var(--p74c-lime-d) !important; color:var(--p74c-btn-on-lime) !important; } /* --- RESPONSIVE: stack the card on small screens ----------------------- */ @media (max-width:760px){ .p74ce-root .listings_table > tbody > tr:not(.no_el) { grid-template-columns:1fr; } .p74ce-root .p74ce-gutter { grid-column:1; flex-direction:row; justify-content:flex-start; align-items:center; flex-wrap:wrap; gap:10px; border:0; border-bottom:1px solid var(--p74c-line-2); padding:10px 16px; } .p74ce-root .p74ce-arrows { flex-direction:row; } .p74ce-root .p74ce-gutter-del { margin-left:auto; } .p74ce-root .p74ce-main { grid-column:1; } .p74ce-root .p74ce-card.fields_list { grid-template-columns:1fr; } .p74ce-root .p74ce-card > .p74ce-receiptzone { grid-column:1; grid-row:auto; border-left:0; border-top:1px solid var(--p74c-line-2); } .p74ce-root .p74ce-receiptzone .p74ce-receipt-friendly, .p74ce-root .p74ce-outcomes { max-width:none; } } /* =========================================================================== 13. CLIENT (NON-STAFF) COLLECTION EDITOR — C4 rebuild (2026-07-03) --------------------------------------------------------------------------- Surface: /account/collections_edit/?id=X rendered as a NON-STAFF (client / VISITOR) OWNER — the wrapper is .p74ce-root WITHOUT .p74ce-md, so none of the staff master/detail chrome (collections-editor-md.css) applies here. Before this section the client saw: (a) no centered container → content edge-to-edge with the address squeezed into the 56px gutter column + the request checkbox dumped into grid col-2/row-2 as a giant lime tick; (b) the theme's #000 table borders (#dash_content table / .responsive td) surviving because section 12's `border:0` carries no !important. Everything below is scoped `.p74ce-root:not(.p74ce-md)` so it can NEVER touch the staff editor. RESTYLE ONLY — no field name / hook / endpoint / role gate is changed. =========================================================================== */ .p74ce-root:not(.p74ce-md){ --p74cec-maxw:1180px; } /* ---- (a) centered, capped, gutter'd column (kills the edge-bleed) --------- */ .p74ce-root:not(.p74ce-md) .panel.panel-default{ max-width:var(--p74cec-maxw); margin-left:auto; margin-right:auto; padding-left:22px; padding-right:22px; box-sizing:border-box; } /* redundant chrome for the client: the "Request data" panel title + the empty alert rail read as noise on a clean build. Hide (never present for md). */ .p74ce-root:not(.p74ce-md) .panel-heading{ display:none; } .p74ce-root:not(.p74ce-md) .alert_box_m:empty{ display:none; } .p74ce-root:not(.p74ce-md) .preview-pdf > .header.content:empty{ display:none; } /* ---- (b) neutralize ALL legacy table borders in the client scope --------- The theme paints #000 borders via #dash_content table + .responsive td/th (higher specificity / !important than section 12's border:0). One scoped reset, then the card re-draws its single hairline. */ .p74ce-root:not(.p74ce-md) .listings_table, .p74ce-root:not(.p74ce-md) .listings_table > thead > tr > th, .p74ce-root:not(.p74ce-md) .listings_table > tbody > tr, .p74ce-root:not(.p74ce-md) .listings_table > tbody > tr > td, .p74ce-root:not(.p74ce-md) .listings_table > tbody > tr > th{ border:0 !important; background:transparent !important; text-align:left; } /* theme decoration: .sw_over_right_border::after paints a 1px full-height #000 bar at the column's right edge — a stray vertical line down the card list. */ .p74ce-root:not(.p74ce-md) .sw_over_right_border::after{ display:none !important; content:none !important; } /* the theme's `table.responsive` mobile mode (custom-media.css) re-shows and prints each cell's data-label via td::before — force it OFF so the card grid holds at every width (grid !important beats the mobile display:block fallback). */ .p74ce-root:not(.p74ce-md) .listings_table > thead{ display:none !important; } .p74ce-root:not(.p74ce-md) .listings_table > tbody > tr > td::before, .p74ce-root:not(.p74ce-md) .listings_table > tbody > tr > th::before{ content:none !important; display:none !important; } /* ---- clean CARD ROW: thumb+id+delete | name / address | select ----------- */ .p74ce-root:not(.p74ce-md) .listings_table > tbody > tr:not(.no_el){ display:grid !important; grid-template-columns:72px minmax(0,1fr) auto; grid-template-areas:"g main req" "g addr req"; align-items:start; column-gap:18px; row-gap:2px; max-width:none; margin:0; padding:16px 2px; border-bottom:1px solid var(--p74c-hair, rgba(17,17,17,.14)) !important; } .p74ce-root:not(.p74ce-md) .listings_table > tbody > tr:not(.no_el):last-child{ border-bottom:0 !important; } .p74ce-root:not(.p74ce-md) .listings_table > tbody > tr:not(.no_el):hover{ background:var(--p74c-soft,#f6f6f3); } /* gutter — vertical thumb / #id / delete-X stack (bare, no box) */ .p74ce-root:not(.p74ce-md) .p74ce-gutter{ grid-area:g; padding:0; gap:6px; } .p74ce-root:not(.p74ce-md) .p74ce-thumb{ width:52px; height:52px; overflow:hidden; flex:0 0 auto; } /* !important: at mobile a theme .responsive rule frees the img back to its 128px intrinsic size — pin it so it can never overflow the gutter column. */ .p74ce-root:not(.p74ce-md) .p74ce-thumb img{ width:52px !important; height:52px !important; max-width:52px !important; object-fit:cover; display:block; } /* keep the delete-X on its OWN line in every row. The gutter is block-flow, so #id and the (inline) SECRET badge share one line; the X then flows inline after #id on plain rows but wraps below on SECRET rows → the X sat at a different height per row (ragged edge). display:block forces the X onto a fresh line, left-aligned under the thumb, at an IDENTICAL offset whether or not a SECRET badge is present. Skin-only: the btn_delete() hook/onclick is untouched. */ .p74ce-root:not(.p74ce-md) .p74ce-gutter-del{ display:block; margin-top:3px; } /* body — name (card identity) + address, both flush-left in column 2 */ .p74ce-root:not(.p74ce-md) .p74ce-main{ grid-area:main; padding:0; min-width:0; } .p74ce-root:not(.p74ce-md) .p74ce-card.fields_list{ display:block; max-width:none; margin:0; } .p74ce-root:not(.p74ce-md) .p74ce-card > .p74ce-identity{ padding:0 !important; text-align:left !important; } .p74ce-root:not(.p74ce-md) .p74ce-main{ text-align:left !important; } .p74ce-root:not(.p74ce-md) .p74ce-idline{ gap:8px; justify-content:flex-start; text-align:left; } .p74ce-root:not(.p74ce-md) .p74ce-name{ font-size:15px; } .p74ce-root:not(.p74ce-md) .p74ce-addr-cell{ grid-area:addr; display:block !important; padding:0; min-width:0; text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--p74c-muted); } .p74ce-root:not(.p74ce-md) .p74ce-addr-cell .color-link{ color:var(--p74c-muted); text-decoration:none; } .p74ce-root:not(.p74ce-md) .p74ce-addr-cell .color-link:hover{ color:var(--p74c-ink); text-decoration:underline; } /* select-for-request checkbox — a clean square tick, vertically centred in its own column (was a 40x30 lime slab dumped in the wrong grid cell). Keeps the listing[] name + checked state; only skinned. */ .p74ce-root:not(.p74ce-md) .p74ce-req-cell{ grid-area:req; display:flex; align-items:center; justify-content:center; padding:0 4px; border:0; text-align:center; min-width:0; } .p74ce-root:not(.p74ce-md) .p74ce-req-cell input[type=checkbox]{ -webkit-appearance:none; appearance:none; box-sizing:border-box; width:22px; height:22px; min-height:0; margin:0; padding:0; border:1px solid var(--p74c-ink,#111) !important; border-radius:0 !important; background:var(--p74c-paper,#fff) !important; box-shadow:none !important; cursor:pointer; position:relative; transition:background .12s; } /* kill the theme's FontAwesome ::before tick (31x28, static → pokes out of the box) */ .p74ce-root:not(.p74ce-md) .p74ce-req-cell input[type=checkbox]::before{ content:none !important; display:none !important; } .p74ce-root:not(.p74ce-md) .p74ce-req-cell input[type=checkbox]:checked{ background:var(--p74c-lime,#E9FF75) !important; } .p74ce-root:not(.p74ce-md) .p74ce-req-cell input[type=checkbox]:checked::after{ content:""; position:absolute; left:50%; top:46%; width:5px; height:9px; border:solid var(--p74c-ink,#111); border-width:0 2px 2px 0; transform:translate(-50%,-50%) rotate(45deg); } /* the no-shortlist separator spacer row + empty state */ .p74ce-root:not(.p74ce-md) .listings_table > tbody > tr.no_el{ border:0 !important; } .p74ce-root:not(.p74ce-md) .listings_table .alert-success{ border:1px solid var(--p74c-hair, rgba(17,17,17,.14)) !important; border-radius:0; background:transparent !important; color:var(--p74c-muted); text-transform:uppercase; letter-spacing:.04em; font-size:12px; } /* ---- META RECORD CARD (client sees only Collection Name) ------------------ */ .p74ce-root:not(.p74ce-md) .p74ce-rec{ background:var(--p74c-paper,#fff); border:1px solid var(--p74c-hair, rgba(17,17,17,.14)); margin:6px 0 20px; padding:16px 18px; } .p74ce-root:not(.p74ce-md) .p74ce-recgrp{ padding:0; border:0; } .p74ce-root:not(.p74ce-md) .p74ce-fgrid{ display:block; } .p74ce-root:not(.p74ce-md) .p74ce-f{ max-width:440px; margin:0; } .p74ce-root:not(.p74ce-md) .p74ce-lbl{ display:block; font-family:var(--p74c-font-disp); font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--p74c-muted); margin:0 0 4px; } .p74ce-root:not(.p74ce-md) .p74ce-rec .form-group{ margin:0; } .p74ce-root:not(.p74ce-md) .p74ce-rec .p74c-quiet.p74c-quiet{ text-transform:none !important; letter-spacing:0 !important; } /* ---- BUTTON BARS — one kit family, aligned, Request = sole primary -------- The footer (PDF / Zip / Add / Share / Save) is already skinned by section 7 and the Back/Request bar by section 6; here we only (i) let them breathe inside the capped column and (ii) demote the footer SAVE to secondary so the lower-bar REQUEST is the single lime primary on the surface (DL). */ .p74ce-root:not(.p74ce-md) .pl_table_footer{ margin-top:18px; } .p74ce-root:not(.p74ce-md) .pl_table_footer .p74c__bar{ padding:16px 0 0; border-top:1px solid var(--p74c-hair, rgba(17,17,17,.14)); } .p74ce-root:not(.p74ce-md) .pl_table_footer .p74c__btn--go{ background:var(--p74c-paper,#fff) !important; color:var(--p74c-ink,#111) !important; border-color:var(--p74c-line) !important; } .p74ce-root:not(.p74ce-md) .pl_table_footer .p74c__btn--go:hover{ background:var(--p74c-lime,#E9FF75) !important; color:var(--p74c-ink,#111) !important; } .p74ce-root:not(.p74ce-md) .form-group-btns{ margin-top:16px; } /* ---- MOBILE 390 — single tap-friendly column, no overflow ---------------- */ @media (max-width:600px){ .p74ce-root:not(.p74ce-md) .panel.panel-default{ padding-left:14px; padding-right:14px; } .p74ce-root:not(.p74ce-md) .listings_table > tbody > tr:not(.no_el){ grid-template-columns:52px minmax(0,1fr) 46px; column-gap:11px; padding:14px 0; } /* address alignment: the theme's ≤767 responsive mode sets `table.pl_table.responsive tr:not(.no-items) td{text-align:right!important}` (specificity 0,3,3) — this beats our left-align on the address cell, so a wrapped line (e.g. "SPAIN") rags to the card's right edge instead of sitting flush-left under the first line. Re-assert left with a selector that outranks (0,3,3): .listings_table + td.p74ce-addr-cell = (0,4,1). Skin-only. */ .p74ce-root:not(.p74ce-md) .listings_table td.p74ce-addr-cell{ text-align:left !important; } /* section 12's @760 staff rule flips the gutter to flex-row + adds padding/border; force it back to a tidy vertical stack so it stays inside its 52px column. */ .p74ce-root:not(.p74ce-md) .p74ce-gutter{ flex-direction:column !important; flex-wrap:nowrap !important; align-items:center; padding:0 !important; border:0 !important; } .p74ce-root:not(.p74ce-md) .p74ce-gutter-del{ margin-left:0 !important; } .p74ce-root:not(.p74ce-md) .p74ce-thumb{ width:46px; height:46px; } .p74ce-root:not(.p74ce-md) .p74ce-thumb img{ width:46px !important; height:46px !important; max-width:46px !important; } /* Request checkbox = the primary per-row action on this surface; the INPUT ELEMENT itself must be a full 44x44 WCAG tap target (a tap-target audit measures the control's own box, not a pseudo-element overlay — the same treatment as the delete-X, which is sized on its element). So the input becomes an invisible 44px hit square (its own border/fill stripped) and the ~22px VISIBLE tick square is drawn on ::before (the check stays on ::after). Same field name / checked state, skin-only. */ .p74ce-root:not(.p74ce-md) .p74ce-req-cell{ min-height:44px; padding:0; } .p74ce-root:not(.p74ce-md) .p74ce-req-cell input[type=checkbox]{ width:44px !important; height:44px !important; min-width:44px; min-height:44px; border:0 !important; background:transparent !important; overflow:visible; } .p74ce-root:not(.p74ce-md) .p74ce-req-cell input[type=checkbox]:checked{ background:transparent !important; } .p74ce-root:not(.p74ce-md) .p74ce-req-cell input[type=checkbox]::before{ content:"" !important; display:block !important; position:absolute; left:50%; top:50%; width:22px; height:22px; transform:translate(-50%,-50%); box-sizing:border-box; border:1px solid var(--p74c-ink,#111) !important; border-radius:0 !important; background:var(--p74c-paper,#fff) !important; box-shadow:none !important; } .p74ce-root:not(.p74ce-md) .p74ce-req-cell input[type=checkbox]:checked::before{ background:var(--p74c-lime,#E9FF75) !important; } .p74ce-root:not(.p74ce-md) .p74ce-req-cell input[type=checkbox]:checked::after{ top:48%; } /* tap targets: WCAG-min 44px at mobile (client scope only — the staff 30/38px geometry stays). Delete X = a 44px hit square inside the 52px gutter; the X glyph stays 13px (base rule) so it reads as an icon, not a chunky button. */ .p74ce-root:not(.p74ce-md) .p74ce-gutter-del .btn, .p74ce-root:not(.p74ce-md) .p74ce-gutter-del a.delete_button{ width:44px !important; height:44px !important; min-width:44px !important; min-height:44px !important; } .p74ce-root:not(.p74ce-md) .form-group-btns{ flex-wrap:wrap; } .p74ce-root:not(.p74ce-md) .form-group-btns .no-padding{ flex:1 1 100%; } .p74ce-root:not(.p74ce-md) .form-group-btns .btn-custom, .p74ce-root:not(.p74ce-md) .form-group-btns .btn.btn-primary{ width:100%; min-height:44px; display:inline-flex; align-items:center; justify-content:center; } .p74ce-root:not(.p74ce-md) .pl_table_footer .pull-left, .p74ce-root:not(.p74ce-md) .pl_table_footer .pull-right{ width:100%; } .p74ce-root:not(.p74ce-md) .pl_table_footer .p74c__btn{ flex:1 1 auto; min-height:44px; } }
/) as the DOM skeleton so every reorder/inline-save JS hook (closest('tr'), table tbody tr, .next()/.prev(), appendTo(tbody)) binds verbatim — and neutralize table LAYOUT with display overrides. CORRECTED LANGUAGE (owner rejected round-1 — "random lines", "grey backgrounds", "old buttons", "black with yellow", "prices spinning right"): • SURFACES pure white/paper. NO grey structural fills (gutter/booking/total are paper, not grey). Grey only as the faintest hover. • AT MOST one hairline per real zone boundary. Cards divide with ONE faint hairline (--p74c-line-2). Inputs are NOT boxes — borderless, the cell IS the affordance (lime tint + thin lime underline on focus). • ONE universal button family. SECONDARY = white+ink+1px hairline (hover→ lime). The single dark "produces-a-document" cluster = ink + WHITE text. • The money RECEIPT is a CAPPED-WIDTH block (max ~300px) that flows TIGHT beside the content — never a rigid far-right 296px/108px pinned column, so the figures can NEVER detach to the page edge ("spinning off right"). • Light workbar (paper + ink + one hairline) — never a black bar. Rebuilt 2026-06-17 (Wave 3, round 2). Cyon-deploy-ready (no host hardcodes). =========================================================================== */ /* --- neutralize table layout: rows become flow blocks, cells become grid --- */ .p74ce-root .listings_table, .p74ce-root .listings_table > tbody { display:block; border:0; } .p74ce-root .listings_table > thead { display:none; } /* card has no column headers */ .p74ce-root .listings_table > tbody > tr.no_el { display:block; height:10px; } .p74ce-root .listings_table > tbody > tr.no_el > th { display:none; } /* each data row = a Deal Card: gutter (56px) + main (1fr). Cards divide with a SINGLE faint hairline — no full box, no double border (owner rule #1). CORRECTED (round 3): cap the card to ~1180px (matches the reference width) and center it so the body + receipt pack TIGHT together and never sprawl across a wide viewport leaving a dead-space void in the middle (owner rule #5). */ .p74ce-root .listings_table > tbody > tr:not(.no_el) { display:grid; grid-template-columns:56px minmax(0,1fr); border:0; border-bottom:1px solid var(--p74c-line-2); background:var(--p74c-paper); max-width:1180px; margin-left:0; } .p74ce-root .listings_table > tbody > tr:not(.no_el):hover { background:var(--p74c-paper); } .p74ce-root .listings_table > tbody > tr:not(.no_el):hover > td { background:transparent; } .p74ce-root .listings_table > tbody > tr > th, .p74ce-root .listings_table > tbody > tr > td { display:block; border:0; padding:0; vertical-align:top; background:transparent; } /* cells folded into the card layout but not visible as their own column */ .p74ce-root .p74ce-hide-cell { display:none !important; } .p74ce-root .p74ce-addr-cell:empty { display:none !important; } /* --- LEFT GUTTER (paper, NO grey band, NO border-right; bare glyphs) ---- */ .p74ce-root .p74ce-gutter { grid-column:1; grid-row:1; align-self:start; display:flex; flex-direction:column; align-items:center; gap:5px; padding:14px 4px; border:0; background:transparent; overflow:visible; min-width:0; } .p74ce-root .p74ce-arrows { display:flex; flex-direction:column; gap:0; } /* order arrows = bare borderless glyphs (quiet muted icon, lime/ink tint on hover) so they add ZERO stray boxes to the card (owner rule #1) */ .p74ce-root .p74ce-arrows .btn-order-move-top { width:24px !important; height:22px !important; padding:0 !important; min-height:0 !important; margin:0 !important; display:inline-flex; align-items:center; justify-content:center; border:0 !important; border-radius:0 !important; background:transparent !important; color:var(--p74c-muted) !important; box-shadow:none !important; font-size:12px; overflow:hidden; transition:background .12s, color .12s; cursor:pointer; text-decoration:none; white-space:nowrap; } .p74ce-root .p74ce-arrows .btn-order-move-top:hover { background:var(--p74c-soft) !important; color:var(--p74c-ink) !important; } .p74ce-root .p74ce-arrows .btn-order-move-top.no_active { opacity:.25; pointer-events:none; } /* DELETE = the UNIVERSAL 30x30 SQUARE hairline icon button (white bg, 1px ink, hover lime). NOT the old black rounded oddball. The btn_delete() output (a.btn.btn-danger.delete_button with a glyphicon-remove + "Delete" text) keeps its hook/onclick verbatim — we only re-skin it: square it, hide the text label so it can't overflow or occlude the thumb/address, show only the X glyph. Force radius:0 + paper bg over Bootstrap's btn-danger red rounded pill. */ .p74ce-root .p74ce-gutter-del { margin-top:1px; line-height:0; } .p74ce-root .p74ce-gutter-del .btn, .p74ce-root .p74ce-gutter-del a.delete_button { width:30px !important; height:30px !important; min-height:30px !important; padding:0 !important; margin:0 !important; display:inline-flex !important; align-items:center; justify-content:center; border:1px solid var(--p74c-line) !important; border-radius:0 !important; background:var(--p74c-paper) !important; color:var(--p74c-ink) !important; box-shadow:none !important; overflow:hidden; font-size:0 !important; transition:background .12s, color .12s; cursor:pointer; text-decoration:none; white-space:nowrap; } .p74ce-root .p74ce-gutter-del .btn:hover, .p74ce-root .p74ce-gutter-del a.delete_button:hover { background:var(--p74c-lime) !important; color:var(--p74c-ink) !important; } .p74ce-root .p74ce-gutter-del .btn .glyphicon { font-size:13px !important; line-height:1; } .p74ce-root .p74ce-thumb { display:block; width:40px; height:40px; line-height:0; margin:1px 0; } .p74ce-root .p74ce-thumb img { width:40px; height:40px; object-fit:cover; border:0; background:var(--p74c-soft2); } .p74ce-root .p74ce-idno { font-size:9px; font-weight:700; letter-spacing:0.02em; color:var(--p74c-faint); text-align:center; } .p74ce-root .p74ce-secret { padding:1px 3px !important; font-size:7px !important; background:var(--p74c-soft) !important; border:0 !important; color:var(--p74c-muted) !important; } /* --- MAIN cell = card body grid: [identity+terms+toolbar+notes | receipt] -- CORRECTED (round 2): the receipt abuts the content TIGHT. The right zone is sized to the receipt's own content (max-content, capped at 264px) so it sits directly beside the identity column — NO big far-right gap. The dead vertical hairline (border-left) is REMOVED; the card's single bottom hairline is the only divider (owner rules #1 #5). The receipt block left-aligns inside its zone so it can never detach to the page edge ("prices spinning off right"). */ .p74ce-root .p74ce-main { grid-column:2; grid-row:1; min-width:0; } /* CORRECTED (round 2): the receipt is a TIGHT capped block in the right zone (matching the reference, where the receipt sits at the card's right edge with label + figure grouped). The zone is sized to the receipt's own content (max-content, ~264px) so it can't sprawl; the identity column takes the rest. The wide toolbar + notes SPAN both columns (rows 2/3) so they read full width under the identity+receipt. NO border-left dead hairline — the card's single bottom hairline is the only divider (owner rules #1 #5). */ /* ROOT-CAUSE FIX (round 2, hand-tuned): the identity column was minmax(0,1fr), which stretched to fill the full ~1380px table cell and shoved the max-content receipt to the far-right edge with a dead gap between them — THE owner complaint ("prices spinning off to the right"). We size identity to its own content (capped at 620px) and pack BOTH tracks left with justify-content:start, so the receipt abuts the identity with a fixed 44px gap and any leftover space falls to the far right of the receipt — never between content and figures. */ /* OWNER-VERBATIM LAYOUT (2026-06-16): "name and status on the left (menu less wide), then booking hours and overtime, and the buttons below. If we stack these nicely there will be enough height to put the numbers under/over each other on the RIGHT side." => the receipt is a full-height RIGHT column; identity + booking + toolbar + notes STACK in the left column. This is NOT the old "prices spinning off the page" — the left column is full of content, so the receipt reads as a clean, aligned right column directly beside it (capped card, no page-edge sprawl). */ .p74ce-root .p74ce-card.fields_list { display:grid; grid-template-columns:minmax(0,1fr) 292px; grid-template-areas:"identity receipt" "toolbar receipt" "notes receipt"; column-gap:40px; row-gap:0; margin:0; align-items:start; max-width:940px; } .p74ce-root .p74ce-card > .p74ce-identity { grid-area:identity; padding:15px 18px 12px; min-width:0; } .p74ce-root .p74ce-card > .p74ce-receiptzone { grid-area:receipt; padding:15px 18px 14px 0; border-left:0; display:flex; flex-direction:column; gap:10px; align-items:stretch; align-self:start; } .p74ce-root .p74ce-card > .p74ce-toolbar { grid-area:toolbar; } .p74ce-root .p74ce-card > .p74ce-notes { grid-area:notes; } /* --- IDENTITY — name + status grouped LEFT (no far-right dead space) ---- */ .p74ce-root .p74ce-idline { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .p74ce-root .p74ce-name { font-family:var(--p74c-font-disp); font-size:16px; font-weight:700; text-transform:uppercase; letter-spacing:0.015em; color:var(--p74c-ink) !important; text-decoration:none !important; line-height:1.15; } .p74ce-root .p74ce-name:hover { color:#444 !important; text-decoration:underline !important; } /* status select sits INLINE beside the name + chip (grouped identity), NOT pushed to the far right with margin-left:auto (owner rule #5). Clean underline control (the kit .p74c__select), never a boxed dropdown. */ .p74ce-root .p74ce-status-cluster { display:inline-flex; align-items:center; gap:8px; } .p74ce-root .p74ce-status-cluster .p74c__status_select { width:auto; min-width:128px; height:30px; min-height:30px; border:0; border-bottom:1px solid var(--p74c-line-2); padding:0 22px 0 2px; background-color:transparent; } .p74ce-root .p74ce-status-cluster .p74c__status_select:focus { border-bottom:2px solid var(--p74c-lime-d); } /* address LEFT-packed directly under the name (R14 mask preserved upstream) */ .p74ce-root .p74ce-addr { font-size:11px; color:var(--p74c-muted); text-transform:uppercase; letter-spacing:0.04em; text-align:left; margin:5px 0 0; } .p74ce-root .p74ce-addr .color-link { color:var(--p74c-muted); text-decoration:none; } .p74ce-root .p74ce-addr .color-link:hover { color:var(--p74c-ink); text-decoration:underline; } .p74ce-root .p74ce-customstatus { margin:7px 0 0; max-width:240px; } .p74ce-root .p74ce-customstatus .p74c__input { height:30px; min-height:30px; } /* toggle chips (★Shortlist ●Booked) + eye — light inline chips, no boxes-in-box. Segmented: collapse the shared border so the pair reads as ONE clean control. */ .p74ce-root .p74ce-toggles { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:10px 0 0; } .p74ce-root .p74ce-chip { display:inline-flex; align-items:center; gap:5px; margin:0 0 0 -1px; cursor:pointer; padding:4px 10px; border:1px solid var(--p74c-line); background:var(--p74c-paper); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--p74c-ink); user-select:none; transition:background .12s; } .p74ce-root .p74ce-toggles .p74ce-chip:first-child { margin-left:0; } .p74ce-root .p74ce-chip:hover { background:var(--p74c-soft); } /* checked chip = lime accent (lime-bg + ink text) */ .p74ce-root .p74ce-chip:has(input:checked) { background:var(--p74c-lime); } .p74ce-root .p74ce-chip input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; } .p74ce-root .p74ce-eye { display:inline-flex; gap:0; margin-left:6px; } .p74ce-root .p74ce-eye .p74c__xbtn { width:28px; height:26px; border:1px solid var(--p74c-line); background:var(--p74c-paper); color:var(--p74c-ink); } .p74ce-root .p74ce-eye .p74c__xbtn:hover { background:var(--p74c-soft); } /* --- BOOKING TERMS — clean underline fields, NO grey band, NO boxed inputs - */ .p74ce-root .p74ce-booking { display:flex; align-items:flex-end; flex-wrap:wrap; gap:6px 18px; margin:12px 0 0; padding:0; border:0; background:transparent; } .p74ce-root .p74ce-booking-label { font-family:var(--p74c-font-disp); font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--p74c-ink); align-self:center; margin-right:0; } .p74ce-root .p74ce-term { display:flex; flex-direction:column; gap:3px; } .p74ce-root .p74ce-term > label { font-size:8.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--p74c-faint); margin:0; } .p74ce-root .p74ce-term .p74c__cellinput { width:64px; max-width:90px; height:26px; min-height:26px; border:0 !important; border-bottom:1px solid var(--p74c-line-2) !important; background:transparent; padding:0 2px; text-align:left; transition:border-color .12s, background .12s; } .p74ce-root .p74ce-term .p74c__cellinput:focus { border-bottom:1px solid var(--p74c-lime-d) !important; background:rgba(233,255,117,.22); } .p74ce-root .p74ce-term input[name="listing_overtime_price"] { text-align:left; } /* --- MONEY RECEIPT — TIGHT, capped-width, beside the content ------------ The receipt is a capped block (max ~300px). The label column shrinks to its content; the figure sits directly beside it, right-aligned — so the gap is always small and the figures can NEVER detach far-right (owner rule #5). */ .p74ce-root .p74ce-receiptzone .p74ce-receipt-friendly { display:grid; grid-template-columns:max-content 1fr; align-items:baseline; column-gap:16px; row-gap:7px; border-left:0 !important; margin:0 !important; width:100%; font-variant-numeric:tabular-nums; } .p74ce-root .p74ce-recline { display:contents; } /* ROOT-CAUSE FIX (round 2, hand-tuned): the
rules and the CLIENT-PAYS/ MEMBER-EARNS outcomes block are NON-display:contents children of the receipt grid, so they auto-placed into COLUMN 1 and inflated its max-content to their own ~264px width — that is what pushed every € figure far to the right inside the receipt. Span them across both tracks so column 1 sizes to the LABELS only (~120px) and each figure sits tight beside its label. */ .p74ce-root .p74ce-receipt-friendly > .p74ce-recrule, .p74ce-root .p74ce-receipt-friendly > .p74ce-outcomes { grid-column:1 / -1; } .p74ce-root .p74ce-reclabel { font-family:var(--p74c-font-disp); text-transform:uppercase; letter-spacing:0.04em; font-size:10.5px; color:var(--p74c-ink); display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; min-width:0; } /* figure cell — fixed 104px column, borderless inline-edit, right-aligned, tabular, so the €-column stays a clean column and the figures pack TIGHT beside the labels (never overflow the 300px block). The cell IS the affordance: faint lime tint + thin lime underline on focus (NO box, NO hard lime fill) — owner rule #2. */ .p74ce-root .p74ce-recfig { justify-self:end; min-width:0; max-width:104px; text-align:right; } .p74ce-root .p74ce-recfig .p74c__cellinput { width:104px; max-width:104px; height:28px; min-height:28px; text-align:right; padding:1px 2px; border:0 !important; border-bottom:1px solid transparent !important; background:transparent; font-size:13px; font-variant-numeric:tabular-nums; color:var(--p74c-ink); text-transform:none; letter-spacing:0; transition:border-color .12s, background .12s; } .p74ce-root .p74ce-recfig .p74c__cellinput:hover { border-bottom-color:var(--p74c-line-2) !important; } .p74ce-root .p74ce-recfig .p74c__cellinput:focus { border-bottom:1px solid var(--p74c-lime-d) !important; background:rgba(233,255,117,.22); } /* FIX PASS 3: a BLANK money figure shows its placeholder ("0,00€") as a real right-aligned figure (muted ink, not near-invisible) so the figure column is never an empty void — the label always has a paired value (owner ask). The value stays empty so the cell still round-trips. */ .p74ce-root .p74ce-recfig .p74c__cellinput::placeholder { color:var(--p74c-muted); opacity:1; text-align:right; font-variant-numeric:tabular-nums; } .p74ce-root .p74ce-recfig .p74c__cellinput::-webkit-input-placeholder { color:var(--p74c-muted); opacity:1; } .p74ce-root .p74ce-recplus { color:var(--p74c-faint); } /* the live [%] policy pill = a clean FLAT LIME chip (lime bg + ink text, NO border, NO brackets) matching the corrected reference. Overrides the kit's transparent/grey --pct so it reads as a single quiet lime accent beside the MEMBER FEE label. Recompute (p74c_update_preview writes .p74ce-pctval) is untouched — this is skin-only. The amber off-policy WARN stays the canonical light warn pill. */ .p74ce-root .p74ce-pctpill { padding:2px 7px; font-size:9.5px; border:0 !important; border-radius:0; background:var(--p74c-lime) !important; color:var(--p74c-ink) !important; letter-spacing:0.02em; font-variant-numeric:tabular-nums; } .p74ce-root .p74ce-warnpill { padding:1px 6px; font-size:8.5px; } /* chat-origin CLIENT FEE: muted + struck "(n/a)" (visualizes the R7 zeroing) */ .p74ce-root .p74ce-recline--cfee.is-na .p74ce-reclabel { color:var(--p74c-faint); } .p74ce-root .p74ce-recline--cfee.is-na .p74ce-recfig .p74c__cellinput { color:var(--p74c-faint); text-decoration:line-through; } .p74ce-root .p74ce-na-tag { color:var(--p74c-faint); font-style:italic; letter-spacing:0; text-transform:none; font-size:10px; } /* the ONLY two receipt hairlines: HEAVY rule above TOTAL, LIGHT rule below it. block + explicit height so the rule paints inside the baseline grid. */ .p74ce-root .p74ce-recrule { grid-column:1 / -1; display:block; height:0; border:0; border-top:1.5px solid var(--p74c-line); margin:2px 0; padding:0; width:100%; } .p74ce-root .p74ce-recrule--light { border-top:1px solid var(--p74c-line-2); } /* TOTAL line reads heavier (readonly, persisted listing_total_cost) — NO grey fill (owner rule #2): just a heavier weight on paper. */ .p74ce-root .p74ce-recline--total .p74ce-reclabel { font-size:12px; font-weight:700; } .p74ce-root .p74ce-recline--total .p74ce-recfig .p74c__cellinput { font-size:14px; font-weight:700; background:transparent; border-color:transparent !important; cursor:default; } .p74ce-root .p74ce-recline--total .p74ce-recfig .p74c__cellinput:hover { border-bottom-color:transparent !important; } .p74ce-root .p74ce-recline--total .p74ce-recfig .p74c__cellinput:focus { background:transparent; border-bottom-color:transparent !important; } /* outcome chips (Client pays lime · Member earns white+ink outline · Overtime). These reuse the kit pills: --lime = lime accent, --ink = light outlined pill (the kit already recolored --ink to white+ink, so NO dark bar — owner rule #4) */ .p74ce-root .p74ce-outcomes { display:flex; flex-direction:column; gap:0; width:100%; max-width:none; margin-top:2px; } .p74ce-root .p74ce-outcome { justify-content:space-between; width:100%; padding:6px 11px; font-size:10px; } .p74ce-root .p74ce-outcome b { font-variant-numeric:tabular-nums; } /* polish (round 2, hand-tuned): only CLIENT PAYS is the single lime accent row. MEMBER EARNS / OVERTIME are CLEAN borderless rows (label left, figure right) — no boxed/outlined pills (owner rule #1 "no stray boxes" + #2). */ .p74ce-root .p74ce-outcome.p74c__pill--lime { padding:7px 11px; border:0 !important; } .p74ce-root .p74ce-outcome.p74c__pill--ink { background:transparent !important; border:0 !important; border-radius:0; padding:5px 11px; color:var(--p74c-ink) !important; } .p74ce-root .p74ce-outcome.p74c__pill--ink b { font-weight:700; } /* --- TOOLBAR: universal buttons in calm intent clusters ---------------- ONE family (the kit .p74c__btn--sm white+ink+hairline). Clusters split by a SINGLE thin hairline. The output cluster is the single dark "produces-a- document" group: ink fill + WHITE text (owner rule #3/#4). */ .p74ce-root .p74ce-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:0; padding:12px 18px; border-top:1px solid var(--p74c-line-2); } .p74ce-root .p74ce-cluster { display:inline-flex; flex-wrap:wrap; align-items:center; gap:8px; } .p74ce-root .p74ce-cluster:not(:first-child) { padding-left:14px; border-left:1px solid var(--p74c-line-2); } .p74ce-root .p74ce-cluster:empty { display:none; } .p74ce-root .p74ce-cluster:empty + .p74ce-cluster { padding-left:0; border-left:0; } /* universal small button (the Bootstrap .btn classes are kept as JS hooks) */ .p74ce-root .p74ce-toolbar .p74c__btn.p74c__btn--sm { height:32px; padding:0 13px; margin:0; border:1px solid var(--p74c-line) !important; border-radius:0 !important; background:var(--p74c-paper) !important; color:var(--p74c-ink) !important; box-shadow:none !important; font-size:10.5px !important; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; text-decoration:none; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; line-height:1; transition:background .15s, color .15s; } .p74ce-root .p74ce-toolbar .p74c__btn.p74c__btn--sm:hover { background:var(--p74c-lime) !important; color:var(--p74c-ink) !important; } /* booking-output cluster = the SINGLE dark "produces-a-document" group: ink fill + WHITE text. Scoped to the FOUR document hooks by NAME (Generate Contract / Member Conf / Client Conf / Send Intro) — NOT a blanket on every button in the cluster, so the "Member Chat" navigation button bundled into the same partial stays the universal white-outline secondary (owner rule #3). */ .p74ce-root .p74ce-cluster--output .btn-generate-contract, .p74ce-root .p74ce-cluster--output .btn_send_member_conf, .p74ce-root .p74ce-cluster--output .btn_send_client_conf, .p74ce-root .p74ce-cluster--output .btn_send_listing_intro { background:var(--p74c-ink) !important; color:var(--p74c-paper) !important; border-color:var(--p74c-ink) !important; } .p74ce-root .p74ce-cluster--output .btn-generate-contract:hover, .p74ce-root .p74ce-cluster--output .btn_send_member_conf:hover, .p74ce-root .p74ce-cluster--output .btn_send_client_conf:hover, .p74ce-root .p74ce-cluster--output .btn_send_listing_intro:hover { background:#000 !important; color:var(--p74c-paper) !important; } /* disabled Conf/Intro (until booked) — faded paper, NOT a grey box (rule #3) */ .p74ce-root .p74ce-toolbar .btn.disabled, .p74ce-root .p74ce-toolbar .btn[disabled], .p74ce-root .p74ce-cluster--output .btn.disabled, .p74ce-root .p74ce-cluster--output .btn[disabled] { background:var(--p74c-paper) !important; color:var(--p74c-faint) !important; border-color:var(--p74c-line-2) !important; cursor:not-allowed; opacity:1; } /* Send Request stays clickable even while [disabled] (legacy gate behaviour) */ .p74ce-root .p74ce-toolbar .btn_send_listing_request[disabled] { cursor:pointer; opacity:1; background:var(--p74c-paper) !important; color:var(--p74c-ink) !important; border-color:var(--p74c-line) !important; } /* "Requested"/availability sub-badges inside a button — light, rule-safe */ .p74ce-root .p74ce-subbadge { margin-left:5px; padding:1px 6px; border-radius:0; font-weight:700; font-size:9px; text-transform:uppercase; letter-spacing:0.03em; } /* --- NOTES disclosure — collapsed by default --------------------------- */ .p74ce-root details.p74ce-notes { margin:0; padding:10px 18px 12px; border-top:1px solid var(--p74c-line-2); } .p74ce-root .p74ce-notes-summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:7px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--p74c-muted); } .p74ce-root .p74ce-notes-summary::-webkit-details-marker { display:none; } /* FIX: the shared kit injects "+ NOTES" via .p74ce-notes > summary::before, and THIS surface's markup ALSO prints its own "+ Notes" (the .p74ce-notes-plus glyph + label + one-line preview) — so the kit ::before duplicated the label to "+ NOTES + Notes:". Null the kit ::before here so the disclosure renders ONCE: a single "+ Notes" affordance with the inline one-line summary. */ .p74ce-root details.p74ce-notes > summary::before { content:none !important; } .p74ce-root .p74ce-notes-plus { font-size:13px; line-height:1; color:var(--p74c-ink); } .p74ce-root details.p74ce-notes[open] .p74ce-notes-preview { display:none; } .p74ce-root .p74ce-notes-preview { color:var(--p74c-faint); font-weight:400; text-transform:none; letter-spacing:0; } .p74ce-root .p74ce-notes-body { margin-top:9px; } .p74ce-root .p74ce-notes-body .wp_editor_label { position:static; display:block; margin-bottom:6px; } .p74ce-root .p74ce-notes-body .wp_editor_label b { font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--p74c-muted); } .p74ce-root .p74ce-notes-body .wp-editor-container { border:1px solid var(--p74c-line-2); } .p74ce-root .p74ce-notes-body .mce-toolbar-grp { border-bottom:1px solid var(--p74c-line-2); } /* --- TERMINAL (rejected/cancelled) card: strike + 55% opacity ---------- */ .p74ce-root .listings_table > tbody > tr.p74ce-terminal { opacity:.55; } .p74ce-root .listings_table > tbody > tr.p74ce-terminal .p74ce-name { text-decoration:line-through !important; } /* --- status LANES wrapper (optional dense grouping) -------------------- */ .p74ce-root .p74c__lanes .listings_table > tbody > tr:not(.no_el):first-child { border-top:0; } /* --- lime BOOKED status-lane header bar + "> Details" disclosure ----------- Matches the corrected reference's organised grouping. Presentational strip ABOVE the table (never inside