/* ============================================================================
VRYNO ACTIVITY TABLE
============================================================================
One table pattern for every related-record section in the product --
Notes, Emails, Calls, Tasks, Meetings, Quotes and anything added after
them. Replaces the stacked-card lists the inline panels used to render.
Mounted by two engines, which is why the panel chrome lives here too:
vryno-lead-inline.js expands it under a list row (every list view in
the product, configured or auto-discovered), and vryno-card-inline.js
expands it under a Grid or Kanban card. Same markup from both.
Why a table: the cards were fine at two records and unusable at twenty --
one screen-height per item, no sorting, no way to compare two records
side by side, and a different layout for every record type. The shape
here is the same on every tab:
Tabs -> Toolbar -> Table -> Row actions -> Detail / modal
Nothing in this file introduces a new colour, radius, shadow or font
size. Every value is either an existing theme variable (--primary,
--light, --gray-600, --heading-color, --border-color, the status
accents) or matched to the numbers the surrounding panel already uses:
the panel card is 15px radius, its tabs are 20px pills, its buttons are
Bootstrap .btn-sm. The table sits inside that card, so it reads as the
same surface, not an embedded widget.
============================================================================ */
/* Local aliases so every rule below can be read without knowing which of
the theme's two variable families (--x or --bs-x) happens to be defined
on a given page. Both are; these just pick a winner once.
Declared on every root this component owns, not only .vr-at: the emoji
picker and both modals are appended to so they are never clipped
by the table's own horizontal scroller, which puts them outside .vr-at
and therefore outside a variable block scoped to it. Without this, a
button in the reply modal resolved every colour to nothing and rendered
as unstyled text. */
.vr-at,
.vr-at-modal,
.vr-at-emoji-pop {
--vr-at-border: var(--border-color, var(--bs-border-color, #e9edf5));
--vr-at-surface: var(--white, var(--bs-body-bg, #fff));
--vr-at-wash: var(--light, #f8f9fc);
--vr-at-text: var(--heading-color, var(--bs-body-color, #344054));
--vr-at-muted: var(--gray-600, var(--bs-secondary-color, #667085));
--vr-at-faint: var(--gray-500, #98a2b3);
--vr-at-accent: var(--primary, #6c5ce7);
--vr-at-accent-soft: var(--primary-transparent, rgba(108, 92, 231, .1));
}
/* Layout for the component root only -- the detached surfaces above share
the palette, not the stacking. */
.vr-at {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
min-width: 0;
color: var(--vr-at-text);
}
/* ============================================================ 1. Toolbar ==
[+ Add] .................... [search] [filter] [columns]
Add is always leftmost and always the only filled button, on every tab,
so the primary action never moves when the tab changes. */
.vr-at-toolbar {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
min-width: 0;
/* flex-flow: row-reverse; */
}
.vr-at-toolbar-spacer {
flex: 1 1 auto;
min-width: 8px;
}
.vr-at-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 32px;
padding: 0 12px;
border-radius: 9px;
border: 1px solid var(--vr-at-border);
background: var(--vr-at-surface);
color: var(--vr-at-text);
font-size: 12.5px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.vr-at-btn i {
font-size: 15px;
line-height: 1;
}
.vr-at-btn:hover {
border-color: var(--vr-at-accent);
color: var(--vr-at-accent);
}
.vr-at-btn.is-on {
background: var(--vr-at-accent-soft);
border-color: var(--vr-at-accent);
color: var(--vr-at-accent);
}
.vr-at-btn-primary,
.vr-at-btn-primary:hover {
background: var(--vr-at-accent);
border-color: var(--vr-at-accent);
color: #fff;
}
.vr-at-btn-primary:hover {
filter: brightness(1.06);
}
.vr-at-btn-icon {
width: 32px;
padding: 0;
}
/* Count sitting on a toolbar button (active filter count). */
.vr-at-btn-badge {
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 8px;
background: var(--vr-at-accent);
color: #fff;
font-size: 10px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
.vr-at-btn.is-on .vr-at-btn-badge {
background: var(--vr-at-accent);
color: #fff;
}
/* --- search ------------------------------------------------------------ */
.vr-at-search {
position: relative;
flex: 0 1 240px;
min-width: 150px;
}
.vr-at-search i {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 15px;
color: var(--vr-at-faint);
pointer-events: none;
}
.vr-at-search input {
width: 100%;
height: 32px;
padding: 0 28px 0 30px;
border-radius: 9px;
border: 1px solid var(--vr-at-border);
background: var(--vr-at-surface);
color: var(--vr-at-text);
font-size: 12.5px;
}
.vr-at-search input::placeholder {
color: var(--vr-at-faint);
}
.vr-at-search input:focus {
outline: none;
border-color: var(--vr-at-accent);
box-shadow: 0 0 0 3px var(--vr-at-accent-soft);
}
.vr-at-search-clear {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--vr-at-faint);
display: none;
align-items: center;
justify-content: center;
cursor: pointer;
}
.vr-at-search.has-value .vr-at-search-clear {
display: inline-flex;
}
.vr-at-search-clear:hover {
background: rgba(0, 0, 0, .06);
color: var(--vr-at-text);
}
/* ========================================================== 2. Popovers ==
Filter and Manage Fields share one shell, matched to the theme's
.dropdown-menu (white, hairline border, soft shadow, 12px radius, 13px
labels) so they are the same object the rest of the page uses. */
.vr-at-pop-anchor {
position: relative;
}
.vr-at-pop {
position: absolute;
z-index: 1055;
top: calc(100% + 6px);
right: 0;
width: 258px;
max-height: 340px;
display: none;
flex-direction: column;
border: 1px solid var(--vr-at-border);
border-radius: 12px;
background: var(--vr-at-surface);
box-shadow: 0 12px 28px rgba(15, 23, 42, .12);
overflow: hidden;
}
.vr-at-pop.is-open {
display: flex;
animation: vrAtPop .13s ease-out;
}
@keyframes vrAtPop {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.vr-at-pop-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 10px 12px;
border-bottom: 1px solid var(--vr-at-border);
font-size: 12.5px;
font-weight: 600;
}
.vr-at-pop-body {
padding: 6px;
overflow-y: auto;
flex: 1 1 auto;
}
.vr-at-pop-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 10px;
border-top: 1px solid var(--vr-at-border);
}
.vr-at-pop-link {
border: 0;
background: transparent;
padding: 0;
font-size: 12px;
font-weight: 600;
color: var(--vr-at-accent);
cursor: pointer;
}
.vr-at-pop-link:hover {
text-decoration: underline;
}
.vr-at-pop-group {
padding: 6px 8px 2px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--vr-at-faint);
}
/* One row in either popover: a checkbox, a label, and (Manage Fields only)
a drag handle on the right. */
.vr-at-pop-row {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
border-radius: 8px;
font-size: 12.5px;
cursor: pointer;
user-select: none;
}
.vr-at-pop-row:hover {
background: var(--vr-at-wash);
}
.vr-at-pop-row input[type="checkbox"] {
width: 14px;
height: 14px;
accent-color: var(--vr-at-accent);
flex: 0 0 auto;
cursor: pointer;
}
.vr-at-pop-row span {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.vr-at-pop-row .vr-at-grip {
flex: 0 0 auto;
color: var(--vr-at-faint);
font-size: 15px;
cursor: grab;
opacity: 0;
}
.vr-at-pop-row:hover .vr-at-grip {
opacity: 1;
}
/* A locked column (the record's own primary field) can be reordered but
never hidden -- the checkbox is disabled rather than absent, so the
reason is visible instead of the row just behaving differently. */
.vr-at-pop-row.is-locked {
cursor: default;
}
.vr-at-pop-row.is-locked input[type="checkbox"] {
cursor: not-allowed;
opacity: .5;
}
.vr-at-pop-row.is-dragging {
opacity: .45;
}
.vr-at-pop-row.is-drop-before {
box-shadow: inset 0 2px 0 var(--vr-at-accent);
}
.vr-at-pop-row.is-drop-after {
box-shadow: inset 0 -2px 0 var(--vr-at-accent);
}
/* ============================================================= 3. Table ==
The scroller is the only thing allowed to scroll sideways. The panel it
sits in must not, which is why the wrapper carries its own max-width and
the table its own min-width rather than the columns being squeezed. */
.vr-at-scroll {
width: 100%;
max-width: 100%;
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
border: 1px solid var(--vr-at-border);
border-radius: 12px;
background: var(--vr-at-surface);
}
.vr-at-table {
width: 100%;
min-width: 560px;
border-collapse: separate;
border-spacing: 0;
font-size: 12.5px;
}
/* Child combinators, not descendants, and deliberately long.
This table is mounted inside a | of the page's own list table, which
carries class="table" -- so style.css's ".table:not(.vryno-data-table)
tbody tr td" (0,2,3) matches these cells too, as a descendant. A plain
".vr-at-table td" (0,2,0) loses to it and the rows inherit the outer
table's padding and borders. Spelling the path out with > raises this
to 0,2,5 and settles it without !important. */
.vr-at .vr-at-table > thead > tr > th,
.vr-at .vr-at-table > tbody > tr > td {
/* The panel's own cell resets inherited nowrap; these set their own
per-cell wrapping instead of relying on that reset reaching here. */
white-space: nowrap;
text-align: left;
vertical-align: middle;
padding: 0 12px;
border: 0;
border-bottom: 1px solid var(--vr-at-border);
}
.vr-at .vr-at-table > thead > tr > th {
height: 38px;
background: var(--vr-at-wash);
font-size: 11px;
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
color: var(--vr-at-muted);
position: sticky;
top: 0;
z-index: 2;
}
.vr-at .vr-at-table > thead > tr > th:first-child {
border-top-left-radius: 12px;
}
.vr-at .vr-at-table > thead > tr > th:last-child {
border-top-right-radius: 12px;
}
.vr-at .vr-at-table > tbody > tr:last-child > td {
border-bottom: 0;
}
.vr-at .vr-at-table > tbody > tr {
background: var(--vr-at-surface);
transition: background-color .12s ease;
}
.vr-at .vr-at-table > tbody > tr:hover {
background: var(--vr-at-wash);
}
.vr-at .vr-at-table > tbody > tr.is-selected {
background: var(--vr-at-accent-soft);
}
.vr-at .vr-at-table > tbody > tr > td {
height: 42px;
color: var(--vr-at-text);
}
/* --- sortable header --------------------------------------------------- */
.vr-at-th-sort {
display: inline-flex;
align-items: center;
gap: 4px;
cursor: pointer;
border: 0;
background: transparent;
padding: 0;
font: inherit;
color: inherit;
letter-spacing: inherit;
text-transform: inherit;
}
.vr-at-th-sort:hover {
color: var(--vr-at-accent);
}
.vr-at-th-sort i {
font-size: 13px;
opacity: .35;
}
.vr-at-th-sort.is-sorted i {
opacity: 1;
color: var(--vr-at-accent);
}
/* --- select column ----------------------------------------------------- */
.vr-at .vr-at-col-select {
width: 38px;
padding-left: 12px !important;
padding-right: 0 !important;
}
.vr-at-col-select input[type="checkbox"] {
width: 14px;
height: 14px;
accent-color: var(--vr-at-accent);
cursor: pointer;
vertical-align: middle;
}
/* --- cells ------------------------------------------------------------- */
/* Every cell's content is a fixed-width truncating block. The width comes
from the column's own schema so a Note gets room and a Status does not,
and long text ends in an ellipsis with the full value on the title
attribute rather than pushing the table wider. */
.vr-at-cell {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.vr-at-cell-primary {
font-weight: 600;
color: var(--vr-at-text);
}
.vr-at-cell-muted {
color: var(--vr-at-muted);
}
/* An editable cell shows it on hover only -- a faint field outline, the
same gesture the list view's own inline row edit uses. A read-only cell
never does, which is the whole visual difference between the two. */
.vr-at-cell-edit {
margin: 0 -6px;
padding: 3px 6px;
border: 1px solid transparent;
border-radius: 7px;
cursor: text;
transition: border-color .12s ease, background-color .12s ease;
}
tr:hover .vr-at-cell-edit {
border-color: var(--vr-at-border);
background: var(--vr-at-surface);
}
.vr-at-cell-edit:hover {
border-color: var(--vr-at-accent) !important;
}
.vr-at-cell-ro {
cursor: default;
}
/* The input that replaces a cell while it is being edited. Sized to the
cell so the row height never jumps mid-edit. */
.vr-at-input {
width: 100%;
min-width: 90px;
height: 28px;
padding: 0 8px;
border: 1px solid var(--vr-at-accent);
border-radius: 7px;
background: var(--vr-at-surface);
color: var(--vr-at-text);
font-size: 12.5px;
font-family: inherit;
}
.vr-at-input:focus {
outline: none;
box-shadow: 0 0 0 3px var(--vr-at-accent-soft);
}
textarea.vr-at-input {
height: auto;
min-height: 56px;
padding: 6px 8px;
line-height: 1.45;
resize: vertical;
}
/* --- badges ------------------------------------------------------------ */
/* Status/type/priority values, using the dot-badge shape the list view's
own Status column already uses so a Status here and a Status one row up
in the main table are the same object. */
.vr-at-badge {
display: inline-flex;
align-items: center;
gap: 5px;
height: 21px;
padding: 0 8px;
border-radius: 20px;
font-size: 11.5px;
font-weight: 600;
background: var(--vr-at-wash);
color: var(--vr-at-muted);
max-width: 100%;
overflow: hidden;
}
.vr-at-badge .vr-at-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
flex: 0 0 auto;
}
.vr-at-badge.is-success {
background: rgba(16, 185, 129, .12);
color: var(--success, #10b981);
}
.vr-at-badge.is-info {
background: rgba(59, 130, 246, .12);
color: var(--info, #3b82f6);
}
.vr-at-badge.is-warning {
background: rgba(245, 158, 11, .14);
color: var(--warning, #d97706);
}
.vr-at-badge.is-danger {
background: rgba(239, 68, 68, .12);
color: var(--danger, #ef4444);
}
.vr-at-badge.is-accent {
background: var(--vr-at-accent-soft);
color: var(--vr-at-accent);
}
.vr-at-badge.is-neutral {
background: var(--vr-at-wash);
color: var(--vr-at-muted);
}
/* Monospace for codes and quote numbers -- they are identifiers, scanned
character by character, not read as words. */
.vr-at-mono {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
font-size: 11.5px;
letter-spacing: -.01em;
}
/* Reply count / attachment count shown beside a note's text. */
.vr-at-chip {
display: inline-flex;
align-items: center;
gap: 3px;
height: 18px;
padding: 0 6px;
margin-left: 6px;
border-radius: 20px;
background: var(--vr-at-accent-soft);
color: var(--vr-at-accent);
font-size: 10.5px;
font-weight: 700;
vertical-align: 1px;
}
.vr-at-chip i {
font-size: 11px;
}
/* --- row actions ------------------------------------------------------- */
/* The actions column shrinks to its icons and pins right. Its width never
changes with row state, so the table does not reflow as the pointer
moves down it. */
.vr-at .vr-at-col-actions {
width: 1%;
text-align: right !important;
padding-right: 10px !important;
}
/* Always visible, never hover-revealed. Hidden-until-hover actions cost a
pass of the pointer to discover on every row, do not exist at all for
keyboard and touch, and make the column read as empty. The icons are
quiet enough at rest (muted, no chrome) to sit there permanently and
only colour in on hover. */
.vr-at-actions {
display: inline-flex;
align-items: center;
gap: 2px;
}
.vr-at-act {
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 7px;
background: transparent;
color: var(--vr-at-muted);
cursor: pointer;
}
.vr-at-act i {
font-size: 15px;
}
.vr-at-act:hover {
background: var(--vr-at-accent-soft);
color: var(--vr-at-accent);
}
.vr-at-act.is-danger:hover {
background: rgba(239, 68, 68, .12);
color: var(--danger, #ef4444);
}
/* No ⋮ menu: every action a row supports is a visible icon, so nothing a
user needs is one click deeper than the rest. Two icons on most record
types (Duplicate, Delete), three on Notes (Reply first). Edit is not
among them -- clicking a cell edits it in place. */
/* ======================================================== 4. Empty state ==
Same card, one row tall, so switching to an empty tab does not collapse
the panel's height to nothing. */
.vr-at-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 30px 16px;
text-align: center;
}
.vr-at-empty-ico {
width: 38px;
height: 38px;
border-radius: 11px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--vr-at-accent-soft);
color: var(--vr-at-accent);
}
.vr-at-empty-ico i {
font-size: 18px;
}
.vr-at-empty-title {
font-size: 13px;
font-weight: 600;
color: var(--vr-at-text);
}
.vr-at-empty-sub {
font-size: 12px;
color: var(--vr-at-muted);
max-width: 340px;
}
/* ========================================================== 5. Footer bar ==
Row count on the left, pager on the right. Hidden entirely when there is
only one page of records, so a two-note record shows no chrome it does
not need. */
.vr-at-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
font-size: 12px;
color: var(--vr-at-muted);
}
.vr-at-pager {
display: inline-flex;
align-items: center;
gap: 3px;
}
.vr-at-page {
min-width: 26px;
height: 26px;
padding: 0 6px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--vr-at-border);
border-radius: 7px;
background: var(--vr-at-surface);
color: var(--vr-at-text);
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
.vr-at-page:hover:not(:disabled) {
border-color: var(--vr-at-accent);
color: var(--vr-at-accent);
}
.vr-at-page.is-current {
background: var(--vr-at-accent);
border-color: var(--vr-at-accent);
color: #fff;
}
.vr-at-page:disabled {
opacity: .4;
cursor: not-allowed;
}
/* ======================================================= 6. Bulk actions ==
Replaces the toolbar in place when anything is selected, rather than
appearing as an extra bar that shifts the table down. */
.vr-at-bulk {
display: none;
align-items: center;
gap: 8px;
flex-wrap: wrap;
padding: 6px 8px 6px 12px;
border: 1px solid var(--vr-at-accent);
border-radius: 10px;
background: var(--vr-at-accent-soft);
}
.vr-at-bulk.is-on {
display: flex;
}
.vr-at-bulk-count {
font-size: 12.5px;
font-weight: 700;
color: var(--vr-at-accent);
}
/* ======================================================= 7. Add composer ==
The quick composer the + button reveals above the table. Collapsed by
default: the table is what the tab is for, and the composer is one click
away rather than permanently occupying the top third of the panel. */
.vr-at-composer {
/* display: none; */
flex-direction: column;
gap: 9px;
padding: 12px;
border: 1px solid var(--vr-at-border);
border-radius: 12px;
background: var(--vr-at-wash);
}
.vr-at-composer.is-open {
display: flex;
animation: vrAtPop .14s ease-out;
}
.vr-at-composer textarea,
.vr-at-composer input,
.vr-at-composer select {
width: 100%;
border: 1px solid var(--vr-at-border);
border-radius: 9px;
background: var(--vr-at-surface);
color: var(--vr-at-text);
font-size: 12.5px;
font-family: inherit;
padding: 7px 10px;
}
.vr-at-composer textarea {
min-height: 64px;
resize: vertical;
line-height: 1.5;
}
.vr-at-composer textarea:focus,
.vr-at-composer input:focus,
.vr-at-composer select:focus {
outline: none;
border-color: var(--vr-at-accent);
box-shadow: 0 0 0 3px var(--vr-at-accent-soft);
}
/* Capped: on a wide list view the panel is well over 1500px, and a
four-field composer stretched across all of it puts a 350px input
under a one-word label. */
.vr-at-composer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
gap: 9px;
max-width: 940px;
}
.vr-at-field {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.vr-at-field > label {
font-size: 11px;
font-weight: 600;
color: var(--vr-at-muted);
}
.vr-at-composer-foot {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.vr-at-composer-foot .vr-at-toolbar-spacer {
min-width: 4px;
}
/* Attach / mention / emoji, carried over from the card composer so the
affordances the panel already offered are not lost in the move. */
.vr-at-tool {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--vr-at-border);
border-radius: 8px;
background: var(--vr-at-surface);
color: var(--vr-at-muted);
cursor: pointer;
}
.vr-at-tool:hover {
border-color: var(--vr-at-accent);
color: var(--vr-at-accent);
}
.vr-at-emoji-pop {
position: absolute;
z-index: 1056;
display: none;
gap: 2px;
padding: 5px;
border: 1px solid var(--vr-at-border);
border-radius: 10px;
background: var(--vr-at-surface);
box-shadow: 0 10px 24px rgba(15, 23, 42, .14);
}
.vr-at-emoji-pop.is-open {
display: flex;
}
.vr-at-emoji-pop button {
width: 26px;
height: 26px;
border: 0;
border-radius: 7px;
background: transparent;
font-size: 15px;
line-height: 1;
cursor: pointer;
}
.vr-at-emoji-pop button:hover {
background: var(--vr-at-wash);
}
/* ====================================================== 8. Modal (shared) ==
Reply and Details use one shell. Built here rather than on Bootstrap's
modal because this component mounts inside a | in a table that is
itself inside a Bootstrap modal on some pages, and nesting .modal inside
.modal fights over the backdrop and the scroll lock. */
.vr-at-modal {
position: fixed;
inset: 0;
z-index: 1080;
display: none;
align-items: flex-start;
justify-content: center;
padding: 40px 16px;
overflow-y: auto;
background: rgba(15, 23, 42, .45);
}
.vr-at-modal.is-open {
display: flex;
}
.vr-at-modal-card {
width: 100%;
max-width: 560px;
border-radius: 15px;
background: var(--vr-at-surface, #fff);
box-shadow: 0 24px 60px rgba(15, 23, 42, .25);
overflow: hidden;
animation: vrAtModal .16s ease-out;
}
@keyframes vrAtModal {
from {
opacity: 0;
transform: translateY(-10px) scale(.99);
}
to {
opacity: 1;
transform: none;
}
}
.vr-at-modal-head {
display: flex;
align-items: center;
gap: 10px;
padding: 15px 18px;
border-bottom: 1px solid var(--vr-at-border, #e9edf5);
}
.vr-at-modal-title {
flex: 1 1 auto;
min-width: 0;
font-size: 14.5px;
font-weight: 600;
color: var(--vr-at-text, #344054);
}
.vr-at-modal-sub {
display: block;
font-size: 12px;
font-weight: 500;
color: var(--vr-at-muted, #667085);
margin-top: 1px;
}
.vr-at-modal-close {
width: 28px;
height: 28px;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--vr-at-border, #e9edf5);
border-radius: 50%;
background: transparent;
color: var(--vr-at-muted, #667085);
cursor: pointer;
}
.vr-at-modal-close:hover {
background: var(--vr-at-wash, #f8f9fc);
color: var(--vr-at-text, #344054);
}
.vr-at-modal-body {
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 14px;
max-height: 62vh;
overflow-y: auto;
}
.vr-at-modal-foot {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
padding: 12px 18px;
border-top: 1px solid var(--vr-at-border, #e9edf5);
}
/* --- reply modal: original note as context ----------------------------- */
.vr-at-quote {
display: flex;
gap: 10px;
padding: 12px;
border-radius: 12px;
border: 1px solid var(--vr-at-border, #e9edf5);
background: var(--vr-at-wash, #f8f9fc);
}
.vr-at-quote-ico {
width: 28px;
height: 28px;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 9px;
background: var(--vr-at-accent-soft, rgba(108, 92, 231, .1));
color: var(--vr-at-accent, #6c5ce7);
}
.vr-at-quote-body {
min-width: 0;
flex: 1 1 auto;
}
.vr-at-quote-text {
margin: 0 0 3px;
font-size: 13px;
line-height: 1.55;
color: var(--vr-at-text, #344054);
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.vr-at-quote-meta {
font-size: 11.5px;
color: var(--vr-at-muted, #667085);
}
/* --- reply thread ------------------------------------------------------ */
.vr-at-thread-label {
font-size: 11px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--vr-at-faint, #98a2b3);
}
.vr-at-thread {
display: flex;
flex-direction: column;
gap: 10px;
/* The rail: replies read as hanging off the original rather than as a
second flat list of notes. */
padding-left: 14px;
border-left: 2px solid var(--vr-at-border, #e9edf5);
margin-left: 13px;
}
.vr-at-reply {
display: flex;
gap: 9px;
}
.vr-at-avatar {
width: 26px;
height: 26px;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--vr-at-accent-soft, rgba(108, 92, 231, .1));
color: var(--vr-at-accent, #6c5ce7);
font-size: 10.5px;
font-weight: 700;
}
.vr-at-reply-body {
flex: 1 1 auto;
min-width: 0;
}
.vr-at-reply-head {
display: flex;
align-items: baseline;
gap: 7px;
flex-wrap: wrap;
}
.vr-at-reply-who {
font-size: 12.5px;
font-weight: 600;
color: var(--vr-at-text, #344054);
}
.vr-at-reply-when {
font-size: 11px;
color: var(--vr-at-faint, #98a2b3);
}
.vr-at-reply-text {
margin: 2px 0 0;
font-size: 12.5px;
line-height: 1.55;
color: var(--vr-at-muted, #667085);
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.vr-at-thread-empty {
font-size: 12.5px;
color: var(--vr-at-faint, #98a2b3);
}
/* --- detail modal: field list ------------------------------------------ */
.vr-at-dl {
display: grid;
/* Wide enough for the longest term plus its read-only marker, so a
two-word label does not wrap under its own tag. */
grid-template-columns: 168px 1fr;
gap: 9px 14px;
margin: 0;
font-size: 12.5px;
}
.vr-at-dl dt {
color: var(--vr-at-muted, #667085);
font-weight: 500;
}
.vr-at-dl dd {
margin: 0;
color: var(--vr-at-text, #344054);
font-weight: 500;
overflow-wrap: anywhere;
}
.vr-at-dl dd.is-empty {
color: var(--vr-at-faint, #98a2b3);
}
/* Read-only marker in the detail modal, so "cannot be edited" is stated
rather than inferred from a field that simply does not respond. */
.vr-at-ro-tag {
display: inline-flex;
align-items: center;
gap: 3px;
margin-left: 6px;
font-size: 10.5px;
font-weight: 600;
color: var(--vr-at-faint, #98a2b3);
}
.vr-at-ro-tag i {
font-size: 12px;
}
/* ========================================================= 9. Responsive ==
Low-priority columns drop out as the viewport narrows; everything they
held is still reachable through the row's Details view, which always
lists every field regardless of what the table is showing. */
@media (max-width: 1399.98px) {
.vr-at-prio-4 {
display: none !important;
}
}
@media (max-width: 1199.98px) {
.vr-at-prio-3 {
display: none !important;
}
}
@media (max-width: 767.98px) {
.vr-at-prio-2 {
display: none !important;
}
.vr-at-search {
flex: 1 1 100%;
order: 5;
}
.vr-at-table {
min-width: 420px;
}
.vr-at-dl {
grid-template-columns: 1fr;
gap: 2px 0;
}
.vr-at-dl dd {
margin-bottom: 8px;
}
}
/* No hover to reveal actions on a touch device, so they stay visible. */
/* No hover to reveal the editable-field outline on a touch device, so it
stays drawn. (Row actions need no such exception -- they are always
visible everywhere.) */
@media (hover: none) {
.vr-at-cell-edit {
border-color: var(--vr-at-border);
}
}
/* ============================================================ 10. Dark ====
The theme flips these variables itself; the only things needing a hand
are the three places above that use a literal rgba shadow or wash. */
[data-bs-theme="dark"] .vr-at-scroll,
[data-theme="dark"] .vr-at-scroll {
box-shadow: none;
}
[data-bs-theme="dark"] .vr-at-pop,
[data-theme="dark"] .vr-at-pop,
[data-bs-theme="dark"] .vr-at-modal-card,
[data-theme="dark"] .vr-at-modal-card {
box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
}
[data-bs-theme="dark"] .vr-at-modal,
[data-theme="dark"] .vr-at-modal {
background: rgba(0, 0, 0, .6);
}
/* ==================================================== 11. Panel tab row ==
The row of pills above the table -- Note / Email / Call / Task /
Meeting / Quote, each with its count -- and the card the selected tab's
table sits in.
These live here, not injected from JS, because two engines render this
exact structure now: vryno-lead-inline.js under a list row, and
vryno-card-inline.js under a Grid or Kanban card. A stylesheet both
load is the only place that serves both; a |