/* ============================================================================
   Plush74 Collections 2026 — STAFF OVERVIEW + CLIENT DASHBOARD surface
   Surface file for /account/collections/ (dashboard_wishlists.php).
   Prefix: .p74co-*  ·  Root wrapper: .p74co-root (also carries .p74c for tokens).
   Depends on the shared kit (collections-2026.css). Never redeclares a .p74c__*
   rule; only adds .p74co-* layout + scoped overrides under .p74co-root.

   WAVE 3 — ROUND 2 (CORRECTED). Owner rejected round 1: "random lines", grey,
   "clunky old buttons", "dark + yellow", "money a mess", "2021 Excel print
   report". The staff ledger collapsed (DataTables responsive) into a STACK OF
   EMPTY HAIRLINES — the literal "random lines everywhere" complaint.

   THE FIX (mirrors the approved flagship editor): the staff DataTable is
   NEUTRALIZED into a clean CARD LIST. We KEEP the <table>/<tr>/<td> DOM intact
   (every DataTables column, the AJAX contract, delete confirm()+POST, the scope
   tabs and the responsive `details` engine all bind verbatim) and only override
   the LAYOUT with display:grid so each collection row reads as ONE clean card —
   thumb + name + status + DEBOXED readiness + meta + ONE universal button
   cluster. No table columns => no detached values, no responsive-collapse to a
   pile of lines, no boxed pills. Pure paper, square, flat. Clients (VISITOR) get
   the card grid (bottom block). No dark element with yellow/lime TEXT.
   ========================================================================= */

/* ---- Shell / page chrome -------------------------------------------------- */
.p74co-root {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 16px 80px;
  color: var(--p74c-ink);
}
.p74co-head {
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--p74c-line);
}
.p74co-root .p74co-head .p74c__h1 { margin: 6px 0 6px; }
.p74co-sub { margin: 0; }

/* Tame nested bootstrap wrappers + legacy boxes so they don't add chrome. */
.p74co-root .bootstrap-wrapper { margin: 0; padding: 0; }
.p74co-root .box,
.p74co-root .box-without-bottom-padding { box-shadow: none; border: 0; padding: 0; margin: 0; }
/* The top-level Bootstrap `.row` wrapping the tab panes carries the standard
   -15px side margins; with the surface's own 12–16px padding that bled the whole
   ledger a few px past the left edge on mobile (row x=-3 at vw=390). Zero its
   side margins so everything sits flush inside .p74co-root. */
.p74co-root > .row { margin-left: 0; margin-right: 0; }

/* ---- Panel — quiet, frame-less ------------------------------------------- */
.p74co-root .panel.panel-default {
  background: var(--p74c-paper);
  border: 0; border-radius: 0; box-shadow: none; margin: 0;
}
.p74co-root .panel-heading {
  border: 0; border-radius: 0; box-shadow: none; background: transparent;
  padding: 0 0 14px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.p74co-root .panel-title { margin: 0; }
.p74co-root .panel-body { padding: 0; background: transparent; }

/* ==========================================================================
   STAFF COMMAND-LIST — light bar + card list
   ========================================================================== */

/* OV-5: the ledger head (H1 + subtitle) draws NO rule of its own — the command
   bar below carries the ONE hairline for the whole header zone (head rule + bar
   rule used to run as two parallel lines). Client card grid keeps its head rule. */
.p74co-root .p74co-head--ledger {
  margin-bottom: 14px;
  padding-bottom: 0;
  border-bottom: 0;
}

/* ---- Bar: scope tabs + actions on one calm LIGHT line (OV-3: no repeated
   title/eyebrow in here — the page H1 above is the one "Collections").
   OV-5: this border is THE one hairline of the header zone (kit hair token). --- */
.p74co-root .p74co-bar {
  padding: 0 0 14px; gap: 16px;
  border-bottom: 1px solid var(--p74c-hair);
  margin-bottom: 4px; background: transparent;
}
/* OV-5: tabs sit borderless in the bar — no box competing with the bar rule and
   the buttons; the lime fill alone marks the active scope (kit is-on). One
   baseline: tabs match the 38px kit button height. */
.p74co-root .p74c__tabs { border-left: 0; gap: 2px; }
.p74co-root .p74c__tab { border: 0; height: 38px; padding: 0 16px; }
/* OV-11 pending state: the clicked tab dims until its data arrives (is-on only
   flips on success — see the view JS). */
.p74co-root .p74c__tab.is-loading { opacity: .55; cursor: progress; }
/* OV-1: live row count on the tab (filled from the ajax response) */
.p74co-root .p74c__tab .p74c__tab-count { font-variant-numeric: tabular-nums; }
/* CRITICAL un-hide: the theme's account template carries a blanket
   `.page-template-template-account .panel-default > .panel-heading{display:none}`
   (custom.css) that hides EVERY panel heading on the dashboard — it was swallowing
   THIS command-grid bar, taking the staff My/All scope tabs + the New-collection /
   Make-with-AI cluster with it (the tabs have no other home in the markup, so they
   were completely unreachable). Re-show ONLY this bar with a matching-or-higher
   specificity selector (template class + the .p74co-bar hook) so the staff scope
   switch is visible again. Display-only; no markup/JS/scope-logic change. */
.page-template-template-account .panel-default > .panel-heading.p74co-bar,
.p74co-root .panel-default > .panel-heading.p74co-bar {
  display: flex !important;
}
.p74co-bar-actions {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin: 0 !important; padding: 0;
}
.p74co-bar-actions .page-title-action {
  float: none !important; margin: 0 !important; border-radius: 0 !important;
}
/* OV-5/OV-9: the bar-actions wrapper no longer carries the theme's
   `.pl_bottom_nav` class (its #000 top+bottom rules stuck out past the buttons
   as bare stubs, and it repainted every `.btn` lime, flattening the
   primary/secondary pairing). These re-asserts stay as a belt against any other
   theme `.btn` repaint: one lime GO action + a transparent outline secondary,
   matching the editor top bar (SAVE vs SHARE). */
.p74co-root .p74co-bar-actions .p74c__btn--ghost {
  background: transparent;
}
.p74co-root .p74co-bar-actions .p74c__btn--ghost:hover {
  background: var(--p74c-lime);
}
.p74co-root .p74co-bar-actions .p74c__btn--go {
  background: var(--p74c-lime);
}
/* OV-8: monochrome inline-SVG sparkle in "Make with AI" (currentColor) */
.p74co-root .p74co-sparkle { display: inline-block; flex: 0 0 auto; }

/* (OV-7: the legacy bottom Add New / Make with AI strip is deleted from the
   markup — its .pl_bottom_nav layout rules left with it.) */

/* ---- Search + length toolbar (OV-2) ---------------------------------------
   The theme hides the whole first DataTables row on account pages:
   custom.css:11398 `.page-template-template-account .dataTable
   .dataTables_wrapper > div:first-child { display:none !important }` (0,3,1).
   With 909 rows that meant 19 pages of blind paging. Re-show it at (0,4,1) +
   !important (wins on specificity regardless of order) and lay it out as ONE
   quiet toolbar line: search left (flexes), page-length right. Underline-only
   fields per owner rule #2 — no boxes. */
.page-template-template-account .p74co-root .dataTable .dataTables_wrapper > div:first-child,
.p74co-root .dataTable .dataTables_wrapper > div:first-child {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding: 10px 4px 0;
}
.p74co-root .dataTables_wrapper .dataTables_filter,
.p74co-root .dataTables_wrapper .dataTables_length {
  padding: 0 !important; float: none; width: auto;
}
.p74co-root .dataTables_wrapper .dataTables_filter { flex: 1 1 auto; text-align: left; }
.p74co-root .dataTables_wrapper .dataTables_length { flex: 0 0 auto; margin-left: auto; }
.p74co-root .dataTables_wrapper .dataTables_filter input,
.p74co-root .dataTables_wrapper .dataTables_length select {
  border: 0 !important; border-bottom: 1px solid var(--p74c-hair) !important;
  border-radius: 0 !important; box-shadow: none !important;
  height: 34px; padding: 4px 2px; background: transparent !important;
  font-size: 13px; color: var(--p74c-ink); text-transform: none; letter-spacing: 0;
}
.p74co-root .dataTables_wrapper .dataTables_filter input:hover,
.p74co-root .dataTables_wrapper .dataTables_length select:hover {
  border-bottom-color: var(--p74c-hair-hover) !important;
}
.p74co-root .dataTables_wrapper .dataTables_filter input:focus,
.p74co-root .dataTables_wrapper .dataTables_length select:focus {
  border-bottom: 1px solid var(--p74c-ink) !important; outline: none;
}
/* quiet sentence-case placeholder (DL: no SHOUTING) */
.p74co-root .dataTables_wrapper .dataTables_filter input::placeholder {
  color: var(--p74c-muted); text-transform: none; letter-spacing: 0; opacity: 1;
}
/* search input flexes wide inside its label (kills the theme's 65% + 10px margins) */
.p74co-root .dataTables_wrapper .dataTables_filter label {
  display: flex; align-items: center; gap: 0;
  width: 100% !important; max-width: 460px; margin: 0; padding: 0 !important;
}
.p74co-root .dataTables_wrapper div.dataTables_filter input {
  display: block; width: 100% !important; margin: 0 !important;
}
/* page-length: micro small-caps label around a quiet select */
.p74co-root .dataTables_wrapper .dataTables_length label {
  display: flex; align-items: center; gap: 8px;
  width: auto !important; margin: 0; padding: 0 !important;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--p74c-muted); white-space: nowrap;
}
.p74co-root .dataTables_wrapper div.dataTables_length select {
  display: block; width: 64px !important; margin: 0 !important; height: 30px;
}
/* OV-11: quiet failure line (inserted by the view JS on error.dt) */
.p74co-root .p74co-scope-error {
  margin: 12px 4px 0; font-size: 12.5px; line-height: 1.5;
  color: var(--p74c-ink); background: transparent;
}

/* OV-12: at <=1280 the wp-admin-bar user item ("Hi, <user>") no longer fits the
   32px bar, wraps onto a phantom second admin-bar row and paints over the theme
   header icons. Hide the greeting TEXT (font-size 0) but keep the avatar image
   clickable/visible; the shrunken item then fits on the first row again. Scoped
   to the account template — nothing changes elsewhere. */
@media (max-width: 1280px) {
  .page-template-template-account #wpadminbar #wp-admin-bar-my-account > .ab-item,
  .page-template-template-account #wpadminbar #wp-admin-bar-my-account > .ab-item .display-name,
  .page-template-template-account #wpadminbar #wp-admin-bar-my-account > .ab-item span {
    font-size: 0 !important;
  }
  .page-template-template-account #wpadminbar #wp-admin-bar-my-account > .ab-item img.avatar {
    width: 26px; height: 26px;
  }
  .page-template-template-account #wpadminbar #wp-admin-bar-my-account > .ab-item .ab-icon::before {
    font-size: 20px !important;
  }
}
/* DataTables info + pagination — quiet, flat */
.p74co-root .dataTables_wrapper .dataTables_info {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--p74c-muted); padding-top: 16px;
}
.p74co-root .dataTables_wrapper .dataTables_paginate { padding-top: 12px; }
.p74co-root .dataTables_wrapper .dataTables_paginate .paginate_button {
  border: 0 !important; border-radius: 0 !important; background: transparent !important;
  color: var(--p74c-ink) !important; box-shadow: none !important;
  min-width: 30px; padding: 6px 10px !important; font-size: 12px; font-weight: 700; margin: 0 1px;
}
.p74co-root .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--p74c-lime) !important; color: var(--p74c-ink) !important;
}
.p74co-root .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--p74c-soft) !important; color: var(--p74c-ink) !important;
}
.p74co-root .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.p74co-root .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: var(--p74c-faint) !important; background: transparent !important; cursor: default;
}
/* DataTables processing chrome — quiet */
.p74co-root .dataTables_processing {
  border: 0 !important; background: var(--p74c-paper) !important; box-shadow: none !important;
  color: var(--p74c-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
}

/* ==========================================================================
   THE CARD LIST — neutralize the DataTable into clean paper cards.
   Keep every <table>/<tr>/<td> + DataTables hook; override LAYOUT only.
   This is the core "kill the lines / kill the Excel grid" fix.
   ========================================================================== */

/* outer wrappers flat + transparent (no frame, no scroll box) */
.p74co-root .tableWrap,
.p74co-root .dataTable,
.p74co-root .dataTables_wrapper,
.p74co-root .table-responsive {
  border: 0 !important; background: transparent !important; overflow: visible !important;
}
/* The DataTables-generated inner Bootstrap `.row` (dom: <'row'...'tr'>) carries
   Bootstrap's negative side margins, which bled the table ~5–6px past the
   surface edge (table x=-5 / right=396 at vw=390). Zero them so the card list
   aligns flush to the surface — no off-edge cell, no negative offset. */
.p74co-root .dataTables_wrapper .row { margin-left: 0 !important; margin-right: 0 !important; }

/* the table itself = a flowing list of card rows (no outer frame box) */
.p74co-root #din-table.p74c__ledger,
.p74co-root .table.p74c__ledger {
  display: block; width: 100%; border: 0 !important; background: transparent !important;
  margin: 0; table-layout: auto; box-sizing: border-box;
}
.p74co-root #din-table.p74c__ledger > thead { display: none; }   /* cards have no column headers */
.p74co-root #din-table.p74c__ledger > tbody { display: block; }

/* each data row = a CARD: thumb | content | meta | actions on ONE flex line,
   divided by ONE faint hairline (no full box, no vertical column rules) —
   owner rule #1. Flex lays the cells out in DOM order, each sized to content;
   the body flexes to fill, meta + actions sit tight on the right. NO grid auto-
   placement surprises (the directive's stretch / column-1-inflation traps). */
.p74co-root #din-table.p74c__ledger > tbody > tr {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 4px;
  border: 0 !important;
  border-bottom: 1px solid var(--p74c-hair) !important;   /* DL hairline token */
  background: var(--p74c-paper) !important;
}
.p74co-root #din-table.p74c__ledger > tbody > tr:last-child { border-bottom: 0 !important; }
/* faintest hover tint only (owner rule #1) */
.p74co-root #din-table.p74c__ledger > tbody > tr:hover { background: var(--p74c-soft) !important; }
/* selection state — lime accent (lime-bg + ink, allowed combo) */
.p74co-root #din-table.p74c__ledger > tbody > tr.selected { background: var(--p74c-lime) !important; }

/* all cells: flat, no borders, no per-cell box, no gradient dividers */
.p74co-root #din-table.p74c__ledger > tbody > tr > td {
  display: block; border: 0 !important; box-shadow: none !important;
  background: transparent !important; background-image: none !important;
  padding: 0; vertical-align: middle; min-width: 0; flex: 0 0 auto;
}
.p74co-root #din-table.p74c__ledger th::after,
.p74co-root #din-table.p74c__ledger td::after { display: none !important; }

/* DataTables responsive: with cards every cell is already on the flex line,
   so the collapse "+" control + child row must NEVER show (that is the pile of
   empty lines the owner saw). Hide the control column + any child rows. */
.p74co-root #din-table.p74c__ledger td.details-control { display: none !important; }
.p74co-root #din-table.p74c__ledger > tbody > tr.child { display: none !important; }

/* --- cell roles (by DataTables column order) ------------------------------
   STAFF col order: [1]details-control [2]idwishlist [3]image(.box_image)
   [4]wishlist_name [5]user_id [6]listings_count [7]date_submit [8]edit [9]delete.
   (VISITOR never renders this table — they get the card grid below.) We size
   by class + nth so each card row reads thumb | name+readiness | meta | actions. */

/* idwishlist cell — redundant (#id already in the thumb link); hide it */
.p74co-root #din-table.p74c__ledger > tbody > tr > td:nth-child(2) { display: none; }

/* thumb */
.p74co-root #din-table.p74c__ledger td.box_image { flex: 0 0 56px; padding: 0 !important; }

/* NAME cell = the card body — flexes to fill, packs the name + readiness left */
.p74co-root #din-table.p74c__ledger td:nth-child(4) { flex: 1 1 auto; min-width: 0; }

/* user / listings / date = a quiet RIGHT-aligned meta block (NOT detached
   columns with big gaps). Targeted by nth-LAST-child so they stay stable
   whether or not the optional User column is present (staff vs PRODUCER):
   delete=last1, edit=last2, date=last3, listings=last4, user=last5(staff). */
.p74co-root #din-table.p74c__ledger td:nth-last-child(3):not(:nth-child(4)),   /* date */
.p74co-root #din-table.p74c__ledger td:nth-last-child(4):not(:nth-child(4)),   /* listings */
.p74co-root #din-table.p74c__ledger td:nth-last-child(5):not(:nth-child(4)) {  /* user (staff) */
  flex: 0 0 auto; text-align: right; white-space: nowrap;
  font-size: 10.5px; color: var(--p74c-muted); text-transform: uppercase; letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
/* listings count is already shown as the "N LOC" readiness pill — hide the
   detached duplicate column so the card isn't redundant (guard: never the name) */
.p74co-root #din-table.p74c__ledger td:nth-last-child(4):not(:nth-child(4)) { display: none; }
/* user column ("who owns it") — OV-4: NEVER mid-name truncation. The old
   160px/nowrap/ellipsis cap cut names ("ROBIN SEBASTIA…") while the name cell
   held ~200px of dead space. Let the owner name WRAP inside a sane column
   instead: full name always readable, tight leading. R3 polish: a FIXED-width,
   LEFT-aligned column (was content-sized + right-anchored → the shared grouped
   rule above set text-align:right, which pinned the right edge clean but left a
   ragged LEFT edge as names varied in length). Fixed 220px basis + text-align
   left give a clean left column edge; 220px keeps every current one-liner
   (incl. the wpadmin@… email) on one line and only wraps genuinely long full
   names — byte-identical wrap behavior to OV-4. */
.p74co-root #din-table.p74c__ledger td:nth-last-child(5):not(:nth-child(4)) {
  flex: 0 0 220px; max-width: 220px; text-align: left;
  white-space: normal; overflow: visible; text-overflow: clip;
  color: var(--p74c-ink); font-weight: 700; line-height: 1.35;
}
/* date — tidy slot ("Created DD.MM.YY" via the view's display render) */
.p74co-root #din-table.p74c__ledger td:nth-last-child(3):not(:nth-child(4)) {
  min-width: 78px;
}
/* OV-17: the small "Created" prefix the date render adds — fainter than the date */
.p74co-root .p74co-datelbl {
  color: var(--p74c-faint); font-weight: 700; letter-spacing: 0.05em;
}
/* OVS-1: REMOVE the raw numeric user-id prefix in the User column (was
   "1 WLLADMIN" — looked like leftover db/Excel output). Greying it out left it
   faintly but plainly legible at 1:1, so hide the prefix span entirely; the
   display name stays as the ink-weight label. The id remains in the DOM (column
   is orderable:false and no JS reads its text), just visually removed. Also
   hide it via the lower-specificity scope so it's gone on every staff row. */
.p74co-root #din-table.p74c__ledger td:nth-last-child(5):not(:nth-child(4)) .p74co-uid,
.p74co-root #din-table.p74c__ledger .p74co-uid {
  display: none;
}

/* Empty-state cell (sEmptyTable/sZeroRecords): a LONE td in the flex row —
   without this it inherits the action cell's nowrap + right-align (it clipped
   off both edges) and the theme's uppercase (DL: no all-caps helper text).
   Quiet sentence-case line, wrapped, left-aligned. */
.p74co-root #din-table.p74c__ledger > tbody > tr > td.dataTables_empty {
  flex: 1 1 100%;
  white-space: normal !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--p74c-ink);
  padding: 22px 4px;
  max-width: 720px;
  margin: 0 !important;
}

/* edit (Open + duplicate) + delete = the right ACTIONS cluster, packed tight.
   The edit cell already groups Open+duplicate as one segment; pull delete in
   close so the trio reads as ONE action zone (not three detached buttons). */
.p74co-root #din-table.p74c__ledger td:nth-last-child(2),
.p74co-root #din-table.p74c__ledger td:nth-last-child(1) {
  flex: 0 0 auto; white-space: nowrap; text-align: right;
}
.p74co-root #din-table.p74c__ledger td:nth-last-child(1) { margin-left: -8px; }

/* ---- thumbnail -----------------------------------------------------------
   NB: theme custom.css forces `.page-template-template-account .dataTables_wrapper
   img { min-height:132px!important; height:150px!important; min-width:194px!important;
   width:calc(100% - 30px)!important; margin:15px }` (the old big-thumb ledger look,
   the reason round-1 thumbs ballooned into tall grey blocks). Override it with an
   equal-specificity (.p74co-root + .dataTables_wrapper + .collection_thumbnail + img)
   !important rule so the card thumb is a tidy 56px square. */
.p74co-root .collection_thumbnail { position: relative; display: block; line-height: 0; }
.p74co-root .dataTables_wrapper .collection_thumbnail img,
.p74co-root .collection_thumbnail img {
  display: block;
  width: 56px !important; height: 56px !important;
  min-width: 56px !important; min-height: 56px !important; max-width: 56px !important;
  object-fit: cover !important; border: 0; margin: 0 !important; background: var(--p74c-soft2);
  transition: none !important;
}
.p74co-root .dataTables_wrapper .collection_thumbnail img:hover,
.p74co-root .collection_thumbnail img:hover { transform: none !important; }
/* POLISH FIX (round 1): suppress the response-count overlay on overview cover
   thumbnails. On the only row with responses it read as a stray corner badge
   (looked like the in-editor listing rail's order-index badge), not a
   deliberate signal. Request/response presence is already surfaced calmly in
   the readiness row, so the thumbnail stays a clean image. Display-only; the
   $row->requests_count value is untouched server-side. */
.p74co-root .collection_thumbnail .requests_count { display: none !important; }

/* ---- name + readiness (the card body) ------------------------------------ */
.p74co-root .p74c__cname {
  font-family: var(--p74c-font-disp);
  font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em;
  color: var(--p74c-ink); text-decoration: none; line-height: 1.2;
}
.p74co-root .p74c__cname:hover { color: #444; text-decoration: underline; }

/* readiness line: status chip + DEBOXED count pills + meta, one calm row */
.p74co-root .p74co-readiness,
.p74co-root .p74c__cw.p74co-readiness {
  display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-top: 6px;
}
/* OV-13: the count pills stay ONE nowrap unit — when space runs out the whole
   pills block drops below the status chip as a unit (readiness row wraps),
   instead of pills scattering one per line and inflating row heights. */
.p74co-pills { display: inline-flex; gap: 6px 12px; flex-wrap: nowrap; align-items: center; }

/* DEBOXED readiness pill — NO border, NO box (owner rule #2). A quiet
   uppercase micro-stat: a tiny lime dot + the figure + the label, inline. */
.p74co-root .p74co-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0; border: 0; border-radius: 0; background: transparent;
  color: var(--p74c-muted); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.4;
  white-space: nowrap; text-decoration: none;
}
.p74co-root .p74co-pill::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--p74c-line-2); display: inline-block; flex: 0 0 auto;
}
/* the CHECKED-OUT / Request pill: the ONE lime accent — a quiet lime-tinted
   text link (lime dot + ink text), NOT a boxed dark chip (owner rules #2 #5) */
.p74co-root a.p74co-pill--req {
  color: var(--p74c-ink); background: transparent; border: 0; cursor: pointer;
}
.p74co-root a.p74co-pill--req::before { background: var(--p74c-lime-d); width: 6px; height: 6px; }
.p74co-root a.p74co-pill--req:hover { color: var(--p74c-ink); text-decoration: underline; }

/* status chip stays a real chip (the kit .p74c__st owns the look). */
.p74co-root .p74co-readiness .p74c__st { flex: 0 0 auto; }

/* POLISH FIX (round 1) — ONE chip/pill family shared with the editor.
   The kit ships BOOKED as a solid lime-FILLED chip while ACTIVE / CHECKED OUT
   are outline chips, so the status column mixed two fill treatments (and
   diverged from the editor master rail, where BOOKED is an outline row with a
   green status dot). Normalize inside this surface: ACTIVE / BOOKED / CHECKED
   OUT all share the SAME outline geometry (paper fill, ink hairline, ink text)
   and differ ONLY by the leading dot + label, reusing the editor's dot map
   (booked = #3aa86b green, available = lime-d). DRAFT keeps its muted grey
   de-emphasis. Scoped to .p74co-root only — the kit chip is untouched. */
.p74co-root .p74c__st,
.p74co-root .p74c__st--booked,
.p74co-root .p74c__st--available {
  background: var(--p74c-paper);
  color: var(--p74c-ink);
  border-color: var(--p74c-ink);
}
/* booked = the editor's green status dot (the confirmed/"go" state) */
.p74co-root .p74c__st--booked::before { background: #3aa86b; }
/* active + checked-out = the editor's lime-d dot */
.p74co-root .p74c__st--available::before { background: var(--p74c-lime-d); }

/* ---- ACTION buttons inside the card (Open / duplicate / Delete) ----------
   The DataTable AJAX emits Bootstrap btn-success (Open + duplicate) + a
   btn-danger.delete_button (the confirm()+POST stays bound in fnDrawCallback).
   Re-skin ALL of them to ONE universal family: SECONDARY = white + ink + 1px
   hairline (hover->lime); the row PRIMARY 'Open' = lime-bg + ink text. Cluster
   them as ONE segment so they don't read as separate boxes (owner rule #3). */
.p74co-root #din-table.p74c__ledger td .btn.btn-xs {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: 32px; padding: 0 12px; border-radius: 0 !important;
  border: 1px solid var(--p74c-line) !important; background: var(--p74c-paper) !important;
  color: var(--p74c-ink) !important; margin: 0 0 0 -1px !important;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  box-shadow: none !important; line-height: 1; text-decoration: none; white-space: nowrap;
  transition: background .15s, color .15s;
}
/* collapse adjacent borders so the trio reads as ONE clean control */
.p74co-root #din-table.p74c__ledger td:nth-last-child(2) .btn.btn-xs:first-child { margin-left: 0 !important; }
.p74co-root #din-table.p74c__ledger td .btn.btn-xs:hover {
  background: var(--p74c-lime) !important; color: var(--p74c-ink) !important; position: relative; z-index: 1;
}
/* 'Open' = the primary row action — lime GO fill, ink text */
.p74co-root #din-table.p74c__ledger td .btn.btn-edit-primary {
  background: var(--p74c-lime) !important; color: var(--p74c-btn-on-lime) !important; border-color: var(--p74c-line) !important;
}
.p74co-root #din-table.p74c__ledger td .btn.btn-edit-primary:hover {
  background: var(--p74c-lime-d) !important; color: var(--p74c-btn-on-lime) !important;
}
/* Delete: strip the danger red entirely — same universal secondary; hover→soft red text */
.p74co-root #din-table.p74c__ledger td .btn.btn-danger,
.p74co-root #din-table.p74c__ledger td .btn.btn-danger.delete_button {
  background: var(--p74c-paper) !important; color: var(--p74c-ink) !important;
  border: 1px solid var(--p74c-line) !important;
}
.p74co-root #din-table.p74c__ledger td .btn.btn-danger:hover,
.p74co-root #din-table.p74c__ledger td .btn.btn-danger.delete_button:hover {
  background: var(--p74c-paper) !important; color: var(--p74c-red) !important; border-color: var(--p74c-red) !important;
}
.p74co-root #din-table.p74c__ledger td .btn.btn-xs .glyphicon,
.p74co-root #din-table.p74c__ledger td .btn.btn-xs .fa { font-size: 11px; }

/* ---- VISITOR bundle-pricing note (kit .p74c__note) — flat, left-aligned --- */
.p74co-root .header-page-text.border-solid { margin: 0 0 18px; text-align: left; }

/* ---- Staff ledger footer CTA (OV empty-state polish, round 2) --------------
   The bottom "Search locations" link used to be a legacy `.btn btn-loadmore btop`
   sitting OUTSIDE .p74co-root as a viewport-wide sibling (after the page helper
   <script>/<style> nodes), so the earlier `.p74co-root + div .btn-loadmore`
   skins never matched it and it kept the theme's full-bleed look: a 100%-width,
   24px, edge-to-edge lime bar (custom.css:10004 `.btn-loadmore{width:100%}`). On
   the empty MY-collections state that band dominated the view and drew a hard
   line across the natural footer whitespace (the footer is pinned to the viewport
   bottom by the theme's .yordy-full-height min-height:100vh on short pages).
   The markup now emits ONE kit `.p74c__btn` (secondary) inside a `.p74co-foot`
   wrapper that lives INSIDE .p74co-root; this rule only lays that footer out —
   one editorial hairline above it, the button left-aligned in the content
   column. No lime band, no stray line, no dead full-bleed void. */
.p74co-root .p74co-foot {
  display: flex;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--p74c-hair);
}

/* ==========================================================================
   CLIENT (VISITOR) CARD GRID  —  C3
   A clean grid of the client's own + assigned collections. Reuses the kit
   .p74c__grid / .p74c__card with a background-image cover variant.
   ========================================================================== */
.p74co-client { margin: 0; }
.p74co-clienthead {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 16px;
}
.p74co-clienteyebrow { margin: 0; }
.p74co-newbtn { margin-left: auto; }

/* DC-2: close the orphan last grid row. The kit `.p74c__grid` draws border-top +
   border-left on the container and each `.p74c__card` draws its own border-right +
   border-bottom — so when the final row is partial (e.g. 55 cards = 18 full rows +
   1 orphan) the empty cells beside the orphan draw nothing and the grid's bottom +
   right edges stop short, reading as unfinished. Give the container its own
   border-right + border-bottom so the rectangle always closes, whatever the count. */
.p74co-grid {
  margin: 0;
  border-right: 1px solid var(--p74c-line);
  border-bottom: 1px solid var(--p74c-line);
}
.p74co-root .p74co-card { cursor: pointer; }
.p74co-root .p74co-card-img {
  display: block; width: 100%; aspect-ratio: 528/309;
  background-color: var(--p74c-soft2); background-size: cover;
  background-position: center; background-repeat: no-repeat;
}
.p74co-card-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Card name: align the VISITOR card with the staff ledger `.p74c__cname` AND the
   Master/Detail editor master rows (`.p74cmd__lrow-name`) — both render the
   collection name in the EXTENDED DISPLAY font. The kit `.p74c__card-name` base
   is uppercase/700 but in the body font; switch the alias to var(--p74c-font-disp)
   so all three collection surfaces read with one voice. (Scoped to the alias —
   no shared `.p74c__*` rule is redeclared.) */
.p74co-root .p74co-card-name {
  margin: 0;
  font-family: var(--p74c-font-disp);
  letter-spacing: 0.01em;
}
.p74co-card-meta { margin: 0; }

/* empty + footer */
.p74co-empty { margin: 0; }
.p74co-emptycta { margin-top: 16px; }
.p74co-clientfoot { margin-top: 22px; display: flex; }

/* ---- Mobile --------------------------------------------------------------
   At <=720px the single flex line cannot hold thumb + body + user + date +
   Open/Duplicate/Delete (the trio was clipping off the right edge — DUPLICATE
   and DELETE were unreachable). Switch the row from flex to a real GRID with
   named areas and assign grid-area to EVERY visible cell, so the action cluster
   wraps onto its own full-width row below the body and nothing exceeds the
   viewport. Columns are `auto 1fr` (thumb sized to content, body fills) — NOT
   minmax(0,1fr) on the thumb, which would stretch it. */
@media (max-width: 720px) {
  .p74co-root { padding: 0 12px 60px; }

  .p74co-root #din-table.p74c__ledger > tbody > tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "thumb body"
      "thumb meta"
      "actions actions";
    column-gap: 14px;
    row-gap: 6px;
    align-items: start;
    gap: 6px 14px;          /* override the desktop 18px flex gap */
  }

  /* thumb keeps its top-left slot, sized to content */
  .p74co-root #din-table.p74c__ledger td.box_image {
    grid-area: thumb; flex: none; align-self: start;
  }
  /* name body */
  .p74co-root #din-table.p74c__ledger td:nth-child(4) {
    grid-area: body; flex: none; min-width: 0; align-self: start;
  }
  /* user (staff) + date = the META line, packed LEFT under the name (no longer
     right-aligned, so they can't collide with / overlap the name) */
  .p74co-root #din-table.p74c__ledger td:nth-last-child(5):not(:nth-child(4)),
  .p74co-root #din-table.p74c__ledger td:nth-last-child(3):not(:nth-child(4)) {
    grid-area: meta; flex: none; text-align: left; align-self: start;
    display: inline-flex; align-items: center; max-width: 100%;
  }
  /* keep user + date side by side on the same meta row */
  .p74co-root #din-table.p74c__ledger td:nth-last-child(5):not(:nth-child(4)) {
    grid-column: 2; grid-row: 2; justify-self: start; margin-right: 12px;
  }
  .p74co-root #din-table.p74c__ledger td:nth-last-child(3):not(:nth-child(4)) {
    grid-column: 2; grid-row: 2; justify-self: end;
  }

  /* ACTIONS: the edit (Open + Duplicate) cell and the Delete cell both drop to
     the full-width row below the body and cluster LEFT, fully tappable. */
  .p74co-root #din-table.p74c__ledger td:nth-last-child(2),
  .p74co-root #din-table.p74c__ledger td:nth-last-child(1) {
    grid-area: actions; flex: none; text-align: left; white-space: normal;
  }
  .p74co-root #din-table.p74c__ledger td:nth-last-child(2) {
    grid-column: 1 / -1; grid-row: 3; justify-self: start;
  }
  .p74co-root #din-table.p74c__ledger td:nth-last-child(1) {
    grid-column: 1 / -1; grid-row: 4; justify-self: start; margin-left: 0;
  }
  /* let the action buttons wrap if they ever exceed the row */
  .p74co-root #din-table.p74c__ledger td:nth-last-child(2),
  .p74co-root #din-table.p74c__ledger td:nth-last-child(1) {
    display: flex; flex-wrap: wrap; gap: 8px;
  }
  .p74co-root #din-table.p74c__ledger td .btn.btn-xs { margin: 0 !important; }

  .p74co-root .collection_thumbnail img { width: 48px !important; height: 48px !important; }
  .p74co-clienthead .p74co-newbtn { margin-left: 0; }
}

/* ==========================================================================
   CD visitor — FINAL PUSH 2026-07-02
   Client dashboard /account/collections/ (VISITOR card grid). Append-only
   block owned by the client-dashboard agent; overrides the earlier CLIENT
   (VISITOR) CARD GRID section where the DL changed (CD-5 frameless grid,
   CD-7 quiet notice, CD-9 pinned meta row, CD-12 empty state, 390px pass).
   ========================================================================== */

/* CD-5: kill the collapsed black table-box. The kit .p74c__grid draws
   border-top/left, each .p74c__card draws right/bottom, and the earlier
   .p74co-grid section added close-the-rectangle borders — all of it made
   every card a fully boxed #111 cell (and outlined empty cells on partial
   rows). Replace with whitespace gaps + ONE editorial hairline under each
   card (DL two-line vocabulary; nothing encloses an empty cell). */
.p74co-root .p74co-grid {
  border: 0 !important;
  gap: 32px 24px;
}
.p74co-root .p74co-grid .p74co-card {
  border: 0 !important;
  border-bottom: 1px solid var(--p74c-hair) !important;
  padding-bottom: 14px;
}

/* frameless cards read best with the text flush to the image's left edge */
.p74co-root .p74co-card .p74c__card-body { padding: 12px 0 0; flex: 1 1 auto; }

/* CD-9: pin the chip/meta row to the card bottom so chips align across a
   grid row even when a neighbouring title wraps to two lines. */
.p74co-root .p74co-card .p74co-card-row { margin-top: auto; padding-top: 8px; }

/* CD-4: the cover is now a real <img> (object-fit cover) inside the
   aspect-ratio span — kit .p74c__card-img img already covers; just make sure
   no legacy background painting competes and the img can never overflow. */
.p74co-root .p74co-card-img { background-image: none !important; }
.p74co-root .p74co-card-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border: 0; margin: 0; padding: 0;
}

/* CD-7 / XC-9: bundle-charge notice = one quiet sentence-case line, muted
   ink, THE lime token as a small left accent. No caps, no shouting. */
.p74co-root .p74co-note {
  margin: 0 0 20px; padding: 5px 0 5px 12px;
  border-left: 3px solid var(--p74c-lime);
  background: transparent;
  font-size: 12px; line-height: 1.5; color: var(--p74c-muted);
  text-transform: none; letter-spacing: 0; text-align: left;
}
.p74co-root .p74co-note a {
  color: var(--p74c-ink); text-decoration: underline; text-underline-offset: 2px;
}
.p74co-root .p74co-note a:hover { background: var(--p74c-lime); text-decoration: none; }

/* CD-12: designed zero-collections empty state — body-size ink message +
   ONE CTA (eyebrow + notice are suppressed in the markup). */
.p74co-root .p74co-empty2 { padding: 48px 0 64px; max-width: 560px; text-align: left; }
.p74co-root .p74co-empty2-head {
  margin: 0 0 10px;
  font-family: var(--p74c-font-disp);
  font-size: 20px; font-weight: 700; line-height: 1.2;
  text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--p74c-ink);
}
.p74co-root .p74co-empty2-sub {
  margin: 0 0 24px;
  font-size: 14px; line-height: 1.65; color: var(--p74c-ink);
}

/* 390px pass: kit collapses .p74c__grid to 1 column at <=560px; text-size-
   adjust already lives on .p74c (XC-13). Here: full-bleed single column
   rhythm + >=44px tap targets on every button on this surface. */
@media (max-width: 560px) {
  .p74co-root .p74co-grid { gap: 28px 0; }
  .p74co-root .p74co-clienthead { margin-bottom: 12px; }
  .p74co-root .p74co-clienthead .p74c__btn,
  .p74co-root .p74co-clientfoot .p74c__btn,
  .p74co-root .p74co-empty2 .p74c__btn {
    min-height: 44px; padding-top: 0; padding-bottom: 0;
    display: inline-flex; align-items: center;
  }
  .p74co-root .p74co-clientfoot .p74c__btn { width: 100%; justify-content: center; }
  .p74co-root .p74co-empty2 { padding: 32px 0 48px; }
}

/* CD-8 REAL root cause (not Chrome font-boosting): theme custom-media.css:236
   ships `@media (max-width:991px) { p { font-size: inherit !important } }`,
   which flattens EVERY styled <p> to the 17px body size — that is what
   inflated the 11px eyebrow at 390 (kit text-size-adjust was already right).
   Counter it with equal !important + higher specificity for the <p>s this
   surface styles (covers the client eyebrow AND the staff bar eyebrow). */
@media (max-width: 991px) {
  .p74co-root p.p74c__sub { font-size: 11px !important; }
  .p74co-root p.p74co-empty2-head { font-size: 20px !important; }
  .p74co-root p.p74co-empty2-sub { font-size: 14px !important; }
}