or .
*
* SOLUTION: scope by overview link (URL hash anchor) plus .
* Drawback: if column order changes, this nth-child needs to be re-indexed.
* Mitigation: the comment block at the top of this file documents the
* canonical column order so a future reader knows to update.
*
* The previous attempt used [title*="URGENT"] on td, but td.title is the
* COLUMN header display name (constant per column = "Category"), not the
* cell value - so it never matched. Those selectors are removed.
* ============================================================================ */
/* Section 4 rules removed 2026-05-18: targeted td:nth-child(5) when that
* position was bca_category. Position 5 is now customer (iteration 2). All
* column-position styling lives in Section 14 below. */
/* ============================================================================
* SECTION 5 - Tags cell polish
*
* EMPIRICAL CONSTRAINT: Zammad renders tags as comma-separated TEXT inside the
* (see App.viewPrintItem -> the `result += ', '` joiner at index.coffee
* line ~225). There is no per-tag or data-name attribute. Therefore
* the previous rule `[data-column-key="tags"] span:contains("paying-member")`
* was triple-broken: (a) :contains is jQuery-only, not CSS; (b) tags is not
* rendered as ; (c) td has no data-column-key. Removed.
*
* What we CAN do CSS-only: style the whole tags column (italic muted small)
* so it reads as metadata. Future enhancement: a JS companion file could
* wrap each comma-tag in a styled on render - tracked in backlog.
* ============================================================================ */
/* Section 5 rule removed 2026-05-18: italic muted on td:nth-child(6) was for
* the tags column. Position 6 is now title (iteration 2). Style in Section 14. */
/* ============================================================================
* SECTION 6 - Misc aesthetic polish (light touch, info-density first)
* ============================================================================ */
/* Section 6 per-position rules removed 2026-05-18: each one targeted a
* column position that has since shifted. Authoritative styling in Section 14. */
/* Empty cells (Zammad renders `-` via viewPrintItem when value is empty).
* Dim them so populated rows pop. */
.table-overview .table > tbody > tr > td {
/* No direct way to target text `-` via CSS; left as documentation only. */
}
/* ============================================================================
* SECTION 7 - Known limitations / future JS-companion backlog
*
* These would each require a small JS file injected the same way custom-bca.css
* is (nginx sub_filter), or a Zammad ticket-overview callbackAttributes hook
* registered via a Zammad package. Tracked here so the next maintainer knows
* what's NOT possible CSS-only:
*
* - Per-value bca_category tint (URGENT=orange, ESCALATE=red, etc.) needs JS
* to read cell text and inject a data-value="..." attribute, then CSS can
* target [data-value="MEMBER_SUPPORT_URGENT"].
*
* - Paying-member tag gold chip needs JS to split comma-tag-text into
* wrappers, then CSS targets [data-name="paying-member"].
*
* - "NEW" badge for article_count == 1 needs JS to read cell value and
* toggle a class on or | .
*
* - Per-row category background (whole row tints) needs the same JS data-
* value injection.
*
* Until then, this CSS focuses on what is reliably achievable: density,
* column widths, hover affordance, typographic hierarchy.
* ============================================================================ */
/* ============================================================================
* SECTION 7 โ Paying-member row tint (column is_paying_member position 3)
*
* Overview columns now ordered:
* 1=checkbox 2=icon 3=is_paying_member 4=customer 5=title 6=bca_preview
* 7=bca_category 8=tags 9=article_count 10=last_contact_customer_at
* 11=state
*
* The is_paying_member column renders the Zammad-default boolean glyph
* ("yes"/"no") which we restyle into a gold ๐ chip. The row containing
* it (when value=true) gets a subtle gold tint so paying members visually
* stand out without competing with category tints.
* ============================================================================ */
/* Section 7 rules removed 2026-05-18: targeted is_paying_member at td:nth-child(3)
* (now created_at) and used broken :has(.value-yes) selectors. Paying-member
* row tint now driven by .bca-row-paying class added by JS (Section 11 below). */
/* ============================================================================
* SECTION 8 โ Article-count badge (rendered by custom-bca.js)
* ============================================================================ */
.bca-count-badge {
display: inline-block;
min-width: 26px;
padding: 2px 6px;
border-radius: 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.4;
text-align: center;
}
.bca-count-new { background: #2563EB; color: #fff; } /* blue, attention */
.bca-count-low { background: rgba(148, 163, 184, 0.18); color: #475569; } /* gray, normal */
.bca-count-mid { background: rgba(249, 115, 22, 0.18); color: #9A3412; } /* orange */
.bca-count-high { background: rgba(220, 38, 38, 0.22); color: #991B1B; } /* red */
/* ============================================================================
* SECTION 9 โ Empirically-retargeted category color tints
*
* Earlier sections tried to match the cell's title attr (= column display
* name, not value โ failed). Now we match cell TEXT CONTENT after the
* data_option labels were shortened (NORMAL / URGENT / ESCALATE / etc).
*
* Strategy: use :has() to select | where a specific | position's
* text-content equals the category code. Column position 6 = bca_category
* given the current overview order: is_paying_member, customer, title,
* bca_preview, bca_category, tags, last_contact (+ leading checkbox+icon
* for agent role makes | positions shift by 2).
*
* Final | positional index for an agent user (1-indexed):
* 1=checkbox 2=icon 3=is_paying_member 4=customer 5=title 6=bca_preview
* 7=bca_category 8=tags 9=last_contact
*
* We target the bca_category | (position 7) via attribute selectors on
* the rendered text. Zammad renders the value of a select attribute as
* literal text inside the | .
* ============================================================================ */
/* Section 9 rule removed 2026-05-18: bold-center on td:nth-child(7) was for
* category. Position 7 is now preview (Section 14). */
/* CSS attr-equality tricks won't match cell text content (CSS can't read
* textContent). Use sibling :has() to target rows by category โ but :has()
* still doesn't have text-content matching either. Compromise: render the
* category as a styled span via a small JS hook (in custom-bca.js, see
* decorateCategoryCells). Until JS attaches, the plain text is visible
* but uncolored โ degraded gracefully. */
.bca-cat-chip {
display: inline-block;
padding: 2px 8px;
border-radius: 11px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.05em;
}
.bca-cat-NORMAL { background: rgba(37, 99, 235, 0.18); color: #1E40AF; }
.bca-cat-URGENT { background: rgba(249, 115, 22, 0.22); color: #9A3412; }
.bca-cat-ESCALATE { background: rgba(220, 38, 38, 0.22); color: #991B1B; }
.bca-cat-UNKNOWN { background: rgba(234, 179, 8, 0.22); color: #854D0E; }
.bca-cat-PROSPECT { background: rgba(147, 51, 234, 0.22); color: #6B21A8; }
.bca-cat-SPAM { background: rgba(148, 163, 184, 0.18); color: #475569; }
.bca-cat-IGNORE { background: rgba(148, 163, 184, 0.18); color: #475569; }
.bca-cat-AI { background: rgba(20, 184, 166, 0.18); color: #0F766E; }
/* Iteration-3 topic taxonomy (8 buckets, Task F empirical sampling) */
.bca-cat-access { background: rgba(37, 99, 235, 0.18); color: #1E40AF; } /* blue */
.bca-cat-counseling { background: rgba(22, 163, 74, 0.18); color: #166534; } /* green */
.bca-cat-forms-docs { background: rgba(79, 70, 229, 0.18); color: #3730A3; } /* indigo */
.bca-cat-prospect { background: rgba(147, 51, 234, 0.22); color: #6B21A8; } /* purple */
.bca-cat-feedback { background: rgba(100, 116, 139, 0.18); color: #475569; } /* slate */
.bca-cat-schedule { background: rgba(234, 88, 12, 0.20); color: #9A3412; } /* orange */
.bca-cat-admin { background: rgba(13, 148, 136, 0.18); color: #115E59; } /* teal */
.bca-cat-cancel { background: rgba(220, 38, 38, 0.20); color: #991B1B; } /* red */
/* ============================================================================
* SECTION 10 โ Age-based color cues on last_contact column
* Position 9 (after leading checkbox+icon).
* ============================================================================ */
.bca-age-warm { color: #92400E; background: rgba(234, 179, 8, 0.10); } /* 24-72h: yellow */
.bca-age-hot { color: #9A3412; background: rgba(249, 115, 22, 0.14); } /* 72-168h: orange */
.bca-age-cold { color: #7F1D1D; background: rgba(220, 38, 38, 0.16); font-weight: 600; } /* >168h: red */
/* ============================================================================
* SECTION 11 โ Paying-member full-row gold tint
*
* Promoted from boolean-cell-only tint to FULL ROW gold accent so paying
* members visually stand out from the rest of the open queue. The is_paying_member
* | is position 3. Use :has() to apply gradient to the entire | .
* ============================================================================ */
/* Section 11 stale rules removed 2026-05-18: is_paying_member column is no
* longer rendered (iteration 2 moved signal to emoji prefix on customer). */
/* Row tint when JS detects paying-member via hidden is_paying_member cell. */
.table-overview .table > tbody > tr.bca-row-paying {
background: linear-gradient(90deg, rgba(234, 179, 8, 0.13), rgba(234, 179, 8, 0.02) 50%) !important;
border-left: 3px solid #EAB308 !important;
}
.table-overview .table-hover > tbody > tr.bca-row-paying:hover {
background: linear-gradient(90deg, rgba(234, 179, 8, 0.20), rgba(234, 179, 8, 0.05) 50%) !important;
}
/* ============================================================================
* SECTION 12 โ Title-cell article-count inline badge (JS-injected)
*
* Replaces the old standalone article_count column (removed from overview
* view config). JS inserts a at the
* end of each title cell.
* ============================================================================ */
.bca-count-inline {
display: inline-block;
margin-left: 6px;
padding: 1px 7px;
border-radius: 9px;
font-size: 10px;
font-weight: 700;
vertical-align: middle;
letter-spacing: 0.04em;
}
/* article_count column hidden via Section 14 (correct position). Stale Section 12
* hide rule for td:nth-child(8) removed 2026-05-18 โ position 8 is now category. */
/* Section 13 deleted 2026-05-18: referenced the prior is_paying_member-at-pos-5
* layout. Section 14 below is the authoritative positional ruleset. */
/* ============================================================================
* SECTION 14 โ Post-iteration-2 layout (2026-05-18)
*
* Member + Tags columns removed. Member signal moves to emoji prefix in
* Customer cell via JS. Preview column restored. Customer + Title left-aligned.
*
* Final | positional indices for AGENT user (leading checkbox + icon):
* 1=checkbox 2=icon 3=created_at 4=last_contact_customer_at
* 5=customer 6=title 7=bca_preview 8=bca_category 9=article_count(hidden)
*
* This section OVERRIDES Section 13 wholesale (later wins on equal specificity).
* ============================================================================ */
/* Timestamp columns (positions 3, 4) โ accommodate full "May 12, 2026 7:50pm (EDT)" format */
.table-overview .table th[data-column-key="created_at"],
.table-overview .table th[data-column-key="last_contact_customer_at"] {
width: 165px !important;
min-width: 150px;
max-width: 175px;
}
.table-overview .table > tbody > tr.item > td:nth-child(3),
.table-overview .table > tbody > tr.item > td:nth-child(4) {
font-variant-numeric: tabular-nums;
font-size: 11px;
color: #475569; /* slate-600: a step darker than preview slate-500 so dates read as time-meta, preview reads as content-meta */
white-space: nowrap;
text-align: left;
padding-left: 8px !important;
}
/* Reset Section 13 rules that referenced position 5 (was is_paying_member) */
.table-overview .table > tbody > tr.item > td:nth-child(5) {
text-align: left;
font-size: 13px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Customer column header โ tight default, no !important so Zammad's column
* resize handles still work (drag the header border to widen on demand). */
.table-overview .table th[data-column-key="customer"],
.table-overview .table th[data-column-key="customer_id"] {
width: 110px;
min-width: 90px;
text-align: left;
}
/* Title column (position 6) โ tight width, ellipsis truncation, badge at right.
* Use position:relative on the cell + absolute on the badge so the title text
* ellipsis-truncates naturally without breaking | table-cell layout. */
.table-overview .table th[data-column-key="title"] {
text-align: left;
width: 120px !important;
min-width: 100px;
max-width: 140px;
}
.table-overview .table > tbody > tr.item > td:nth-child(6) {
text-align: left;
font-weight: 500;
font-size: 13px;
max-width: 140px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
padding-right: 8px !important;
}
/* Conditional: only reserve badge slot on rows where JS injected a badge */
.table-overview .table > tbody > tr.item > td:nth-child(6).has-badge {
padding-right: 44px !important;
}
.table-overview .table > tbody > tr.item > td:nth-child(6) .bca-count-inline {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
margin: 0;
}
/* Preview column (position 7) โ restored, muted gray italic, single-line */
.table-overview .table th[data-column-key="bca_preview"] {
width: 280px !important;
min-width: 200px;
max-width: 320px;
text-align: left;
}
.table-overview .table > tbody > tr.item > td:nth-child(7) {
text-align: left;
color: #64748B;
font-size: 12px;
font-style: italic;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 320px;
}
/* Category column (position 8) โ chip styling via JS, header narrow */
.table-overview .table th[data-column-key="bca_category"] {
width: 100px !important;
min-width: 80px;
text-align: center;
}
.table-overview .table > tbody > tr.item > td:nth-child(8) {
text-align: center;
padding: 4px 6px !important;
font-size: 11px;
}
/* Hidden helper columns โ kept in overview config so JS can read their values,
* but visually hidden (both th and td).
* article_count โ injected as inline badge in title
* is_paying_member โ boolean gate
* bca_product_tier โ drives the Basic/Premium/Bootcamp badge text + color */
.table-overview .table th[data-column-key="article_count"],
.table-overview .table th[data-column-key="is_paying_member"],
.table-overview .table th[data-column-key="bca_product_tier"],
.table-overview .table > tbody > tr.item > td:nth-child(9),
.table-overview .table > tbody > tr.item > td:nth-child(10),
.table-overview .table > tbody > tr.item > td:nth-child(11),
.table-overview .table > tbody > tr.item > td:nth-child(12) {
display: none !important;
}
/* Product tier badge โ right-floated chip inside the customer cell.
* Uses float instead of position:absolute so it works reliably across
* Zammad's | rendering. Shows the customer's purchased tier:
* Basic / Premium / Bootcamp. Iteration-3 Francisco request 2026-05-18. */
.table-overview .table .bca-member-badge {
float: right;
margin-left: 4px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 1px 6px;
border-radius: 8px;
line-height: 1.5;
pointer-events: none;
}
.bca-member-badge.tier-premium {
background: rgba(147, 51, 234, 0.20);
color: #6B21A8;
}
.bca-member-badge.tier-bootcamp {
background: rgba(20, 184, 166, 0.20);
color: #115E59;
}
.bca-member-badge.tier-basic {
background: rgba(234, 179, 8, 0.20);
color: #92400E;
}
.bca-member-badge.tier-unknown {
background: rgba(148, 163, 184, 0.20);
color: #475569;
}
/* Dial back the row gold tint now that the badge carries the signal */
.table-overview .table > tbody > tr.bca-row-paying {
background: none !important;
border-left: none !important;
}
.table-overview .table-hover > tbody > tr.bca-row-paying:hover {
background: rgba(234, 179, 8, 0.06) !important;
}
/* ============================================================================
* SECTION 15 โ Column-resize drag handles (JS-injected by enableColumnResize)
* ============================================================================ */
/* Allow stored widths from localStorage to override our default rules.
* The JS sets inline width/min-width/max-width which beat any CSS without !important. */
.bca-col-resize-handle {
position: absolute;
top: 0;
right: 0;
width: 6px;
height: 100%;
cursor: col-resize;
user-select: none;
z-index: 5;
}
.bca-col-resize-handle:hover {
background: rgba(37, 99, 235, 0.30);
}
.bca-col-resize-handle:active {
background: rgba(37, 99, 235, 0.50);
}
/* ============================================================================
* Regenerate AI draft widget (2026-05-20) โ appears at the top of the
* ticket-zoom right sidebar (above all attribute rows). See custom-bca.js ยง5.
* ============================================================================ */
.bca-regen-widget {
margin: 0 0 14px 0;
padding: 10px 0 12px 0;
border-bottom: 1px solid #e5e7eb;
}
.bca-regen-toggle {
width: 100%;
padding: 6px 10px;
font-size: 12px;
font-weight: 600;
background: #f3f4f6;
border: 1px solid #d1d5db;
border-radius: 4px;
cursor: pointer;
color: #2563eb;
}
.bca-regen-toggle:hover {
background: #e5e7eb;
border-color: #9ca3af;
}
.bca-regen-panel {
margin-top: 8px;
padding: 8px;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 4px;
}
.bca-regen-label {
display: block;
font-size: 11px;
font-weight: 600;
color: #4b5563;
margin-bottom: 4px;
}
.bca-regen-feedback {
width: 100%;
font-size: 12px;
padding: 6px;
border: 1px solid #d1d5db;
border-radius: 3px;
resize: vertical;
font-family: inherit;
box-sizing: border-box;
}
.bca-regen-actions {
display: flex;
gap: 6px;
margin-top: 6px;
justify-content: flex-end;
}
.bca-regen-cancel, .bca-regen-submit {
padding: 4px 10px;
font-size: 12px;
border-radius: 3px;
cursor: pointer;
border: 1px solid;
}
.bca-regen-cancel {
background: #fff;
border-color: #d1d5db;
color: #4b5563;
}
.bca-regen-submit {
background: #2563eb;
border-color: #2563eb;
color: #fff;
font-weight: 600;
}
.bca-regen-submit:hover { background: #1d4ed8; }
.bca-regen-submit:disabled, .bca-regen-cancel:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.bca-regen-status {
font-size: 11px;
color: #4b5563;
margin-top: 6px;
min-height: 14px;
}
.bca-regen-refresh {
font-size: 11px;
padding: 2px 8px;
margin-left: 6px;
background: #2563eb;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
/* ============================================================================
* Sidebar cleanup (2026-05-20) โ collapse empty fields + truncate tag lists.
* See custom-bca.js ยง6.
* ============================================================================ */
/* Empty form-group rows are hidden by default; revealed when the parent
fieldset has .bca-show-empty (toggle expanded). */
fieldset .form-group.bca-empty { display: none; }
fieldset.bca-show-empty .form-group.bca-empty { display: block; }
.bca-show-empty-toggle {
margin: 8px 0 4px 0;
padding: 4px 8px;
font-size: 11px;
color: #6b7280;
cursor: pointer;
user-select: none;
border-top: 1px dashed #e5e7eb;
padding-top: 8px;
}
.bca-show-empty-toggle:hover { color: #2563eb; }
/* Tags list: hide past first N until expanded. */
.js-tags li.list-item.bca-tag-hidden,
.sidebar .tags li.list-item.bca-tag-hidden { display: none; }
.js-tags ul.bca-tags-expanded li.list-item.bca-tag-hidden,
.sidebar .tags ul.bca-tags-expanded li.list-item.bca-tag-hidden { display: list-item; }
.bca-tags-toggle {
font-size: 11px;
color: #6b7280;
cursor: pointer;
user-select: none;
margin-top: 4px;
padding: 2px 0;
}
.bca-tags-toggle:hover { color: #2563eb; }
/* ============================================================================
* SECTION 10 โ Default-hide internal articles in the main thread (2026-05-26)
* ============================================================================
*
* Zammad's "eye" toggle at the top of the conversation lets you show/hide
* internal articles. Default state is SHOW. Per Francisco's 2026-05-26
* directive (Phase B follow-up), default state should be HIDE so the main
* thread only displays real customer โ agent email exchanges.
*
* Fail-safe: if Zammad changes its class names on upgrade, these rules
* stop matching and Zammad's default visibility resumes. No platform break.
*
* Selectors below cover both Zammad 7.x legacy desktop (.ticket-article-item)
* and Vue desktop (.article-bubble) for forward-compatibility.
*/
/* Legacy desktop UI โ primary target as of 2026-05-26 */
.ticket-article-item.internal,
.ticket-article-item[data-internal="true"],
article.ticket-article-item.internal {
display: none !important;
}
/* Vue desktop UI โ defensive for forward-compatibility */
.article-bubble.internal,
.article-bubble[data-internal="true"],
[data-test-id^="article-bubble"][data-internal="true"] {
display: none !important;
}
/* The "hide internal" toggle in the conversation header โ when the agent
* clicks it to show internal articles, Zammad typically adds a wrapper class
* like .show-internal or removes .hide-internal. Re-show internal articles
* when either of those state classes is present on an ancestor. */
.ticketZoom-controls.show-internal .ticket-article-item.internal,
.ticketZoom-controls.show-internal .ticket-article-item[data-internal="true"],
.article-list.show-internal .ticket-article-item.internal,
.article-list.show-internal .article-bubble.internal {
display: block !important;
}
/* ============================================================================
* SECTION 11 โ Sidebar consolidation: single flat panel (2026-05-26)
* ============================================================================
*
* Default: Zammad splits the right sidebar into Ticket / Customer /
* Organization sub-panels with separate header strips for each. Per
* Francisco's 2026-05-26 directive, collapse into one flat list of
* attributes โ name, email, tags, factual bca_* fields, GHL Contact link.
*
* Approach: hide section dividers + section headers; let the underlying
* attribute rows flow together. Vue/legacy templates still emit them as
* separate sections, but visually they look like one panel.
*
* Fail-safe: if these selectors stop matching after a Zammad upgrade, the
* sidebar reverts to its native sectioned layout. Zammad keeps working.
*/
/* Hide section header strips (the gray bars that say "Ticket", "Customer",
* "Organization", etc.) Selector covers common Zammad 7.x patterns. */
.sidebar .accordion-content > .sidebar-block-title,
.sidebar h3.accordion-title,
.sidebar .sidebar-block > h2,
.sidebar .userInfo h2,
.sidebar .ticketInfo h2,
.sidebar .organizationInfo h2,
.sidebar .sidebar-header-row,
.sidebar > .panel-heading {
display: none !important;
}
/* Remove the dividing whitespace + borders between sections */
.sidebar .sidebar-block,
.sidebar > .accordion-item,
.sidebar > section {
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
}
/* Tighten spacing between attribute rows in the consolidated view */
.sidebar .sidebar-block + .sidebar-block,
.sidebar > section + section {
border-top: 1px solid rgba(0,0,0,0.04) !important;
margin-top: 4px !important;
padding-top: 4px !important;
}
/* The GHL Contact link should stand out visually โ give it a subtle
* highlight so David's eye finds it quickly. */
.sidebar [data-attribute-name="bca_ghl_contact_url"] a,
.sidebar .bca_ghl_contact_url a,
.sidebar a[href*="app.gohighlevel.com"] {
color: #0d6efd !important;
font-weight: 500;
}
.sidebar [data-attribute-name="bca_ghl_contact_url"] a::before,
.sidebar a[href*="app.gohighlevel.com"]::before {
content: "๐ ";
}
/* ============================================================================
* END Phase B additions (2026-05-26)
* ============================================================================ */
| | |