/* Fields and buttons everywhere: the compact size (first used in the VAI Sales deal popup) instead of
   Pico's (padding .75rem 1rem, font 1rem). The spacing variables are set on the elements,
   not :root, so Pico's dropdown menus that also use them keep their spacing. */
button, [type=submit], [type=button], [type=reset], [role=button],
input:not([type=checkbox], [type=radio], [type=range]), select, textarea {
  --pico-form-element-spacing-vertical: .25rem;
  --pico-form-element-spacing-horizontal: .75rem;
  font-size: .9rem;
}
input:not([type=checkbox], [type=radio], [type=range]) { height: auto; }
.table-wrap { overflow-x: auto; }
.section-gap { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--pico-muted-border-color); }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.15rem; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--pico-primary-focus); }
td, th { white-space: nowrap; font-size: calc(0.9rem - 2px); }
article.ok { border-left: 4px solid #2e7d32; }
article.warn { border-left: 4px solid #c62828; }
dl.record { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; }
dl.record dd { margin: 0; word-break: break-all; }
td.num, th.num { text-align: right; }
/* Fixed-width columns; longer text wraps */
td.col-org_name, th.col-org_name,
td.col-account, th.col-account,
td.col-participants, th.col-participants,
.gidni-apps td.col-vacancy_id, .gidni-apps th.col-vacancy_id {
  white-space: normal; overflow-wrap: anywhere;
  width: var(--col-w); min-width: var(--col-w); max-width: var(--col-w);
}
/* "Viktoriia Beznosenko - Independent" fits on one line */
.col-org_name { --col-w: calc(31ch + 2 * var(--pico-spacing)); }
/* VAI user page, Organizations table: company column half as wide */
.user-orgs .col-org_name { --col-w: calc(15.5ch + 2 * var(--pico-spacing)); }
/* "ПрАТ Авіакомпанія Українські вертольоти" fits on one line (CleverStaff cloud clients) */
.col-account { --col-w: calc(33ch + 2 * var(--pico-spacing)); }
/* "Владислав Ніколаєнко, Evgeniy Izotov, Anastasiya Kolpakova" fits on one line */
.col-participants { --col-w: calc(54ch + 2 * var(--pico-spacing)); }
/* Gidni Відгуки: "Директор Департаменту цифрових трансформацій" fits on one line */
.gidni-apps .col-vacancy_id { --col-w: calc(40ch + 2 * var(--pico-spacing)); }
.st-ok { color: #2e7d32; font-weight: 600; }
.st-bad { color: #c62828; font-weight: 600; }
.st-muted { color: var(--pico-muted-color); }
table.payments tr.details td { white-space: normal; background: var(--pico-card-background-color); }
table.payments pre { font-size: 0.75rem; max-height: 24rem; overflow: auto; }
table.sortable th.sort { cursor: pointer; user-select: none; }
table.sortable th.sort:hover { color: var(--pico-primary); }
table.sortable th.sort::after { content: ' ↕'; opacity: .3; }
table.sortable th[aria-sort="ascending"]::after { content: ' ▲'; opacity: 1; }
table.sortable th[aria-sort="descending"]::after { content: ' ▼'; opacity: 1; }
/* Same width as one column of the 3-column form grid above, centered; full width on phones where the grid stacks */
button[type=submit].topup-submit { display: block; width: 100%; margin-inline: auto; }
@media (min-width: 768px) {
  button[type=submit].topup-submit { width: calc((100% - 2 * var(--pico-grid-column-gap)) / 3); }
}
/* Users page: one tag per role with an inline remove button, compact add form */
table.roles td { vertical-align: middle; }
form.role-tag { display: inline-flex; align-items: center; gap: .25rem; margin: 0 .35rem .25rem 0;
  padding: .1rem .5rem; border: 1px solid var(--pico-muted-border-color); border-radius: 1rem; }
form.role-tag button { padding: 0 .3rem; margin: 0; border: 0; background: none; color: var(--pico-muted-color); line-height: 1; width: auto; }
form.role-tag button:hover { color: #c62828; }
/* Remove (×) shows only on the hovered user's row, or when reached with the keyboard;
   it keeps its place so the tags don't move. */
table.roles tr:not(:hover) form.role-tag button:not(:focus-visible) { visibility: hidden; }
form.role-ip { display: flex; gap: .35rem; margin: 0; }
form.role-ip input, form.role-ip button { margin: 0; padding-block: .15rem; width: auto; font-size: .875rem; height: auto; }
form.role-ip input { width: 14rem; }
/* Save shows only while the mask field (or Save itself) has focus; it keeps its place
   so the field doesn't move. Hiding is delayed a little: a click on Save first takes
   focus off the field (Safari doesn't focus buttons), and it must still land. */
form.role-ip button { visibility: hidden; transition: visibility 0s .3s; }
form.role-ip:focus-within button { visibility: visible; transition: none; }
small.role-ip, small.user-email { color: var(--pico-muted-color); }
form.role-add { display: flex; gap: .5rem; margin: 0; }
form.role-add select, form.role-add button { margin: 0; padding-block: .25rem; width: auto; font-size: inherit; }
/* Add shows once a role is picked: the select is required and starts on the empty
   "Select role" option, so it's :invalid until then. */
form.role-add select:invalid + button { visibility: hidden; }
/* User search above the clients table (CleverStaff cloud and VAI) */
form.user-search { display: flex; gap: .5rem; max-width: 36rem; }
form.user-search input, form.user-search button { margin: 0; width: auto; }
form.user-search input { flex: 1; }
/* VAI Sales deal search: Search only as wide as its text (Pico's search group stretches it) */
form.kanban-search button { flex: none; padding-inline: 1.25rem; }
/* Same height as a table row: td font-size × line-height + td vertical padding + borders */
form.user-search input, form.user-search button {
  height: calc((0.9rem - 2px) * var(--pico-line-height) + var(--pico-spacing) + 2 * var(--pico-border-width));
  padding-block: 0; font-size: calc(0.9rem - 2px);
}
/* CleverStaff cloud client page: status note next to the client name (block = Y / N) */
h2 small.cs-inactive, h2 small.cs-active { margin-left: .75rem; font-size: 1rem; font-weight: normal; }
h2 small.cs-inactive { color: #e57373; }
h2 small.cs-active { color: #66bb6a; }
strong.cs-inactive { color: #e57373; }
strong.cs-active { color: #66bb6a; }
/* Compact button in a page heading: "Manage" next to a CS client's status, "Add Role"
   next to a VAI user's id; the Manage dialog has one line per change */
h2 button.manage-btn, h2 button.add-role-btn { margin-left: 1.5rem; padding: .1rem .6rem; font-size: .875rem; width: auto; vertical-align: baseline; }
#manage-dialog .manage-row { display: flex; align-items: center; gap: .75rem; margin: 0 0 1rem; }
#manage-dialog .manage-row:last-child { margin-bottom: 0; }
#manage-dialog .manage-row label { margin: 0; white-space: nowrap; }
#manage-dialog .manage-row input[type=date] { margin: 0; width: 11rem; }
/* Title centred over the whole header: the close button is taken out of the flow
   (Pico floats it right, which would push the title left of centre). */
#manage-dialog header { position: relative; text-align: center; }
#manage-dialog header button[rel=prev] { position: absolute; right: var(--pico-block-spacing-horizontal); top: 50%; margin: 0; transform: translateY(-50%); }
#manage-dialog textarea { margin: 0; resize: vertical; }
#manage-dialog footer { text-align: center; }
#manage-dialog footer button { width: 11rem; margin: 0; padding-block: .25rem; }
#manage-dialog .manage-row button { margin: 0 0 0 auto; width: auto; padding-block: .25rem; }
#manage-dialog .status-old.struck { text-decoration: line-through; opacity: .6; }
#manage-dialog .status-new { margin-left: .4rem; }
/* Client pages: field groups (Payments / Reg params / ...), two per row on wide screens */
.field-groups { display: grid; gap: 0 2rem; }
@media (min-width: 768px) { .field-groups { grid-template-columns: 1fr 1fr; } }
.field-groups h4 { font-size: 1rem; margin-bottom: .5rem; }
.field-groups .group-note { margin-bottom: .5rem; }
.field-groups dl.record dt { color: var(--pico-muted-color); }
/* Inactive users (status N) / blocked clients (block Y) in CleverStaff cloud tables: grey name link */
tr.inactive a { color: var(--pico-muted-color); }
/* Voithos AI clients list: zero balance on a CleverStaff (sys cs / cs-test) org */
tr.cs-free a { color: #f3dd8a; }
/* Page heading in the top nav (header partial's navTitle), content pulled up under it */
nav h2.nav-title { margin: 0; }
nav h2.nav-title + a.nav-help { margin-left: .75rem; font-size: .8rem; color: var(--pico-muted-color); }
nav h2.nav-title + a.nav-help:hover { color: var(--pico-primary); }
nav li:has(> h2.nav-title + a.nav-help) { display: flex; align-items: baseline; }
header:has(h2.nav-title), header:has(a.nav-back) { padding-bottom: 0; }
/* ~, not +: the nav script sits between the header and main */
header:has(h2.nav-title) ~ main, header:has(a.nav-back) ~ main { padding-top: 0; }
/* Counts line under the "CleverStaff cloud clients" heading */
p.cs-counts { margin-top: 0; }
/* Table header pinned to the top of the viewport while the page scrolls.
   position: sticky only works if no ancestor scrolls, so the wrapper drops its
   horizontal scroll on screens wide enough for the table; on narrow screens the
   table scrolls sideways as usual and the header isn't pinned. */
@media (min-width: 1024px) {
  .table-wrap.sticky-head { overflow-x: visible; }
  .table-wrap.sticky-head thead th { position: sticky; top: 0; z-index: 2; background: var(--pico-background-color); }
}
/* "Add Role" next to the user's email (CleverStaff Main user page): set apart from the email, compact */
/* Log out as an icon in the top nav; nudged down to sit on the same line as the
   neighbouring link text (a block svg in Pico's nav ends up a bit too high); sized in em to match the text */
nav a.nav-icon svg { display: block; width: 1em; height: 1em; position: relative; top: .12em; }
/* VAI user page: user id after the name in the heading */
h2 small.user-id { margin-left: .5rem; font-size: 1rem; font-weight: normal; color: var(--pico-muted-color); }
/* role=button would get Pico's button look; keep it plain text. */
.copy-cell[role=button] { all: unset; cursor: copy; border-bottom: 1px dotted var(--pico-muted-color); }
.copy-cell[role=button]:focus-visible { outline: 2px solid var(--pico-primary-focus); }
.copy-tip { position: fixed; z-index: 10; padding: .2rem .5rem; border-radius: .3rem; font-size: .8rem; pointer-events: none;
  background: var(--pico-contrast); color: var(--pico-contrast-inverse); transform: translate(-50%, -100%); }
/* Heading of a collapsible block (lazy-block.js): plain heading text, not a Pico button. */
button.lazy-toggle { all: unset; cursor: pointer; }
button.lazy-toggle:focus-visible { outline: 2px solid var(--pico-primary-focus); }
.lazy-icon { margin-left: .4rem; font-size: .8em; color: var(--pico-muted-color); }
/* Top-up confirm page: Cancel / Confirm, each half of a two-column grid cell, same height
   (Pico gives a form's button a bottom margin that stretched the Cancel link next to it) */
.confirm-actions { display: flex; justify-content: center; gap: var(--pico-grid-column-gap); }
div.confirm-actions > * { margin: 0; width: calc((100% - var(--pico-grid-column-gap)) / 4); }
@media (max-width: 767px) { div.confirm-actions > * { flex: 1; width: auto; } }

/* Page tabs (links to ?tab=..., e.g. /gidni/users): the current one underlined. */
nav.tabs { margin-bottom: 1rem; border-bottom: 1px solid var(--pico-muted-border-color); }
nav.tabs ul { margin: 0; gap: 0; }
nav.tabs li { padding: 0; }
nav.tabs a { display: block; margin: 0; padding: .5rem 1rem; border-radius: 0; color: var(--pico-muted-color); border-bottom: 2px solid transparent; text-decoration: none; }
nav.tabs a[aria-current="page"] { color: var(--pico-primary); border-bottom-color: var(--pico-primary); }

/* Top nav product dropdowns (header partial): product names muted like the other
   nav links, the current product in the primary colour, the current section bold */
nav details.dropdown.nav-product > summary:not([role]) { height: auto; padding: var(--pico-nav-link-spacing-vertical) var(--pico-nav-link-spacing-horizontal); border: none; background: none; box-shadow: none; color: var(--pico-secondary); }
nav details.dropdown.nav-product > summary:not([role]).current { color: var(--pico-primary); }
nav details.nav-product ul li a { text-align: left; }
nav details.nav-product a[aria-current="page"] { font-weight: 600; }

/* Payments "Всі / Тільки успішні" switch on the CS client page (cs-payments.js) */
label.pay-filter { display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 0 1.5rem; font-size: 1rem; font-weight: normal; color: var(--pico-muted-color); }
label.pay-filter input[role=switch] { margin: 0; }
.lazy-block.only-ok tbody tr:not(.pay-ok) { display: none; }
/* shown only while the Payments block is open */
button.lazy-toggle[aria-expanded="false"] ~ label.pay-filter { display: none; }

/* CS client page: "Mark for deletion" / "Cancel deletion" next to Manage — barely
   noticeable on purpose (no background, thin border, grey text) — and its Yes / No popup */
h2 form.inline-form { display: inline; margin: 0; }
h2 button.delete-mark-btn { margin-left: .75rem; padding: .1rem .6rem; width: auto; font-size: .875rem; vertical-align: baseline;
  background: none; border: 1px solid var(--pico-muted-border-color); color: var(--pico-muted-color); box-shadow: none; font-weight: normal; }
h2 button.delete-mark-btn:hover { border-color: var(--pico-muted-color); }
#delete-dialog footer form { display: flex; justify-content: center; gap: .75rem; margin: 0; }
#delete-dialog footer button { width: 6rem; margin: 0; padding-block: .25rem; }

/* Gidni Vacancies: long titles / company names wrap */
.gidni-vacancies td.col-title { white-space: normal; min-width: 30ch; }
.gidni-vacancies td.col-company { white-space: normal; min-width: 18ch; }

/* Segmented control (the deal page's History all / files / emails filter) */
nav.view-toggle { display: inline-flex; margin: 0 0 1rem; border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); overflow: hidden; }
nav.view-toggle a { white-space: nowrap; padding: .25rem 1rem; font-size: .875rem; color: var(--pico-muted-color); text-decoration: none; }
nav.view-toggle a + a { border-left: 1px solid var(--pico-muted-border-color); }
nav.view-toggle a[aria-current="page"] { background: var(--pico-primary-background); color: var(--pico-primary-inverse); }

/* VAI Sales kanban (public/kanban.js): columns side by side, scrolled sideways */
.kanban { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: 1rem; align-items: flex-start; }
.kanban-col { flex: 0 0 14rem; min-width: 0; background: var(--pico-card-sectioning-background-color); border-radius: var(--pico-border-radius); padding: .5rem; }
.kanban-col.drop-target { outline: 2px dashed var(--pico-primary); }
.kanban-col > header { font-weight: 600; font-size: .9rem; margin-bottom: .5rem; text-align: right; }
.kanban-col > header small { font-weight: normal; color: var(--pico-muted-color); }
.kanban-col > header .kanban-note { display: block; font-size: .75rem; }
.kanban-cards { display: flex; flex-direction: column; gap: .4rem; min-height: 3rem; }
.kanban-card { border: 1px solid color-mix(in srgb, var(--pico-muted-color) 50%, transparent); background: var(--pico-card-background-color); box-shadow: var(--pico-card-box-shadow); border-radius: var(--pico-border-radius); padding: .4rem .6rem; cursor: pointer; font-size: .85rem; }
.kanban-card:hover, .kanban-card:focus-visible { outline: 1px solid var(--pico-primary); }
.kanban-card[draggable="true"] { cursor: grab; }
.kanban-card.dragging { opacity: .4; }
/* client from CleverStaff (sys cs / cs-test), yellow like in the table */
.kanban-card.kanban-cs { border-color: #f3dd8a; }
/* a long name wraps (the card gets taller), the column keeps its width */
.kanban-card strong { display: block; white-space: normal; overflow-wrap: anywhere; }
.kanban-card small { color: var(--pico-muted-color); }

/* Deal page (views/vai-sales/deal.ejs): the deal and its form left, history right; one column on narrow screens */
h2.deal-heading { margin: 0 0 .25rem; }
h2.deal-heading small { margin-right: .35rem; font-size: 1rem; font-weight: normal; color: var(--pico-muted-color); }
.deal-meta { color: var(--pico-muted-color); font-size: .875rem; }
.deal-page { display: grid; grid-template-columns: minmax(0, 32rem) minmax(0, 1fr); gap: 1rem 3rem; align-items: start; }
@media (max-width: 768px) { .deal-page { grid-template-columns: minmax(0, 1fr); } }
.deal-page h4 { font-size: 1rem; margin-bottom: .5rem; }
.deal-page ul.deal-users { padding-left: 0; font-size: .9rem; }
.deal-page ul.deal-users li { list-style: none; margin-bottom: .2rem; }
.deal-page .deal-payment { font-size: .9rem; }
/* Take, right of the SM dropdown */
.deal-page button.deal-take { width: auto; margin: 0; }
.deal-page textarea { resize: vertical; }
/* Stage / SM / Users / Amount: name and a compact control on one line */
.deal-page .deal-field { display: flex; align-items: center; gap: .75rem; margin-bottom: .6rem; }
.deal-page .deal-field > span, .deal-page .deal-field > label { flex: 0 0 7rem; margin: 0; }
.deal-page .deal-field select, .deal-page .deal-field input { width: 12rem; margin: 0; }
.deal-page .deal-form > button[type=submit] { width: 11rem; }
.deal-page ul.deal-history { padding-left: 0; font-size: .875rem; }
.deal-page ul.deal-history li { list-style: none; margin-bottom: .5rem; }
.deal-page ul.deal-history small { color: var(--pico-muted-color); }
/* Card title: a link (opens in a new tab with Ctrl/Cmd), looks like the rest of the card */
.kanban-card strong a { color: inherit; text-decoration: none; }

/* VAI client page: "Test account" mark */
/* the mark / unmark button at the right end of the heading */
h2.client-head { display: flex; align-items: baseline; flex-wrap: wrap; }
h2.client-head form.test-org-form { margin-left: auto; }
h2 small.test-org { margin-left: .75rem; font-size: 1rem; font-weight: normal; color: #f3dd8a; }
.kanban-card .kanban-amount { color: #66bb6a; }
table.payments tr.target-payment td { background: var(--pico-primary-focus); }
/* CS client page, Payments: a manual balance adjustment (status "manual"), not an online payment */
tr.pay-manual td { font-style: italic; }
/* Profile page: mailbox buttons side by side, narrow connect form */
.profile-mail-actions { display: flex; gap: .5rem; }
.profile-mail-actions button { width: auto; }
.profile-mail-form { max-width: 28rem; }
.profile-mail-form small { display: block; margin-bottom: 1rem; }
.profile-mail-form button[type=submit] { width: 11rem; }
/* Profile, My actions: comments and details wrap instead of widening the table */
.profile-actions td.col-comment, .profile-actions td.col-details { white-space: normal; min-width: 20ch; }
/* Profile, "Change mailbox or password" / "Signature", email's "Cc colleagues":
   Pico's chevron moved in front of the text, pointing down while closed and up while open */
details.profile-mail-change > summary::after, details.deal-email-cc > summary::after, details.deal-company > summary::after { display: none; }
details.profile-mail-change > summary::before, details.deal-email-cc > summary::before, details.deal-company > summary::before {
  content: ""; display: inline-block; width: 1rem; height: 1rem; margin-inline-end: .5rem; vertical-align: -.125rem;
  background: var(--pico-icon-chevron) center / 1rem auto no-repeat; transition: transform var(--pico-transition);
}
details.profile-mail-change[open] > summary::before, details.deal-email-cc[open] > summary::before, details.deal-company[open] > summary::before { transform: rotate(180deg); }
/* Profile, first tab: the avatar (or the name's first letter) with its upload form */
.profile-avatar { display: flex; gap: 1.25rem; align-items: flex-start; margin-bottom: 1.5rem; }
.profile-avatar img, .profile-avatar-empty { flex: 0 0 96px; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.profile-avatar-empty { display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: var(--pico-muted-color); background: var(--pico-card-sectioning-background-color); }
.profile-avatar form { display: flex; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.profile-avatar input[type=file], .profile-avatar button { width: auto; margin: 0; }
/* Deal page, History: the all / files switch next to the heading; files under their comment */
.deal-history-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; margin-bottom: .5rem; }
.deal-history-head h4 { margin: 0; }
.deal-history-head nav.view-toggle { margin: 0; }
.deal-history.only-files > li:not(.has-files) { display: none; }
.deal-page ul.deal-files { margin: .25rem 0 0; padding-left: 0; }
.deal-page ul.deal-files li { list-style: none; margin: 0; }
.deal-page ul.deal-files li::before { content: "📎 "; }
.deal-page ul.deal-files small { color: var(--pico-muted-color); }
/* Deal page: × after a file the user attached (deletes it), shown on hover like the role tags on /users */
.deal-page form.deal-file-delete { display: inline; margin: 0; }
.deal-page form.deal-file-delete button { padding: 0 .3rem; margin: 0; border: 0; background: none; color: var(--pico-muted-color); line-height: 1; width: auto; }
.deal-page form.deal-file-delete button:hover { color: #c62828; }
.deal-page ul.deal-files li:not(:hover) form.deal-file-delete button:not(:focus-visible) { visibility: hidden; }
/* Email text editor (views/partials/rich-editor.ejs): looks like a textarea, a small toolbar on top */
.rich-editor { margin-bottom: var(--pico-spacing); }
.rich-toolbar { display: flex; gap: .25rem; margin-bottom: .25rem; }
.rich-toolbar button { width: auto; margin: 0; padding: .1rem .6rem; font-size: .8rem; }
.rich-area { min-height: 6rem; padding: var(--pico-form-element-spacing-vertical) .75rem; border: var(--pico-border-width) solid var(--pico-form-element-border-color);
  border-radius: var(--pico-border-radius); background: var(--pico-form-element-background-color); font-size: .9rem; overflow-wrap: anywhere; }
.rich-area:focus { outline: none; border-color: var(--pico-form-element-focus-color); }
.rich-editor.is-empty .rich-area::before { content: attr(data-placeholder); color: var(--pico-muted-color); pointer-events: none; }
.rich-area p, .rich-area div { margin: 0; }
/* Profile, Email integration: the note under the heading, the signature form */
.profile-mail-note { color: var(--pico-muted-color); }
.profile-signature { max-width: 36rem; }
.profile-signature button[type=submit] { width: 11rem; }
/* Deal page: email form (SM / AM) and emails in History */
.deal-email-form fieldset { margin-bottom: .75rem; }
.deal-email-form fieldset label { font-size: .9rem; }
.deal-email-form fieldset label small, .deal-email-cc label small { color: var(--pico-muted-color); }
.deal-email-cc summary { font-size: .9rem; color: var(--pico-muted-color); }
.deal-email-cc label { font-size: .9rem; }
.deal-email-form legend { font-size: .9rem; color: var(--pico-muted-color); }
.deal-email-form button[type=submit] { width: 11rem; }
.deal-email-meta { display: flex; align-items: baseline; gap: 1rem; margin-bottom: .75rem; }
.deal-email-meta .deal-email-cc { flex: 1; margin: 0; }
.deal-email-from { margin-left: auto; color: var(--pico-muted-color); white-space: nowrap; }
.deal-email-signature { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin: -.5rem 0 var(--pico-spacing); font-size: .9rem; color: var(--pico-muted-color); }
.deal-email-signature-edit { flex: none; color: var(--pico-muted-color); }
.deal-email-signature-edit:hover { color: var(--pico-primary); }
.deal-history.only-emails > li:not(.has-email) { display: none; }
.deal-email-to { color: var(--pico-muted-color); }
.deal-page .deal-email details { margin: .25rem 0; }
/* the email's subject opens it: plain text, Pico's chevron right after it (not at the far right), up when open */
.deal-page .deal-email summary { color: inherit; }
.deal-page .deal-email summary::after { float: none; display: inline-block; vertical-align: -.15rem; margin-inline-start: .35rem; background-position: center; }
.deal-email-body { padding: .5rem .75rem; border-left: 2px solid var(--pico-muted-border-color); overflow-wrap: anywhere; }
.deal-email-body p, .deal-email-body div { margin: 0; }
.deal-email-att { display: block; color: var(--pico-muted-color); }
/* Deal page: paperclip that opens the (hidden) file input, chosen file names next to it */
.deal-attach { display: flex; align-items: center; gap: .5rem; margin-bottom: var(--pico-spacing); }
.deal-attach-btn { position: relative; display: inline-flex; margin: 0; padding: .25rem; border-radius: var(--pico-border-radius); color: var(--pico-muted-color); cursor: pointer; }
.deal-attach-btn:hover, .deal-attach-btn:focus-within { color: var(--pico-primary); }
.deal-attach-btn:focus-within { outline: 2px solid var(--pico-primary-focus); }
.deal-attach-btn input[type=file] { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; opacity: 0; }
.deal-attach-names { color: var(--pico-muted-color); overflow-wrap: anywhere; }
.deal-attach-names { display: flex; flex-wrap: wrap; gap: .25rem .75rem; }
.deal-attach-name { white-space: nowrap; }
.deal-attach-name button { margin: 0 0 0 .2rem; padding: 0 .2rem; width: auto; border: 0; background: none; color: var(--pico-muted-color); line-height: 1; }
.deal-attach-name button:hover { color: #c62828; }
/* Deal page: "Send email" by a contact, and the email popup it opens */
.deal-page ul.deal-users button.deal-send-email { width: auto; margin: 0 0 0 .5rem; padding: 0 .5rem; font-size: .8rem; vertical-align: baseline; }
#email-dialog article { width: min(44rem, 100%); max-width: none; }
#email-dialog header.email-dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
#email-dialog .email-dialog-title { overflow-wrap: anywhere; }
#email-dialog header button[rel=prev] { margin: 0; }
/* Email popup: Send with its status on the right — an error, or a green tick once sent */
.deal-email-send { display: flex; align-items: center; gap: 1rem; }
.deal-email-send button[type=submit] { flex: none; margin: 0; }
.deal-email-status.is-error { color: #e57373; font-size: .9rem; }
.deal-email-status.is-sent { color: #66bb6a; font-size: 1.5rem; line-height: 1; }
#email-dialog .email-dialog-addr { font-weight: normal; }
.deal-page ul.deal-history .deal-history-body { padding-left: 2ch; }
/* VAI Sales kanban: "New deal" above the board, and its popup */
.kanban-bar { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.kanban-bar button.kanban-new { width: auto; margin: 0; padding: .25rem 1rem; font-size: .875rem; }
#deal-new-dialog article { width: min(28rem, 100%); }
#deal-new-dialog button[type=submit] { width: 11rem; }
#deal-new-dialog header, #contact-dialog header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
#deal-new-dialog header button[rel=prev], #contact-dialog header button[rel=prev] { margin: 0; }
/* Deal page: contacts staff added (sql/035), "Add contact" by the heading, and their popup */
.deal-contacts-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: .5rem; }
.deal-contacts-head h4 { margin: 0; }
.deal-page button.deal-contact-add { width: auto; margin: 0; padding: 0 .5rem; font-size: .8rem; }
.deal-page ul.deal-contacts { padding-left: 0; font-size: .9rem; }
.deal-page ul.deal-contacts > li { list-style: none; margin-bottom: .6rem; }
.deal-page ul.deal-contacts small { color: var(--pico-muted-color); }
.deal-page ul.deal-contacts button.deal-send-email { width: auto; margin: 0 0 0 .5rem; padding: 0 .5rem; font-size: .8rem; vertical-align: baseline; }
.deal-contact-name { display: flex; align-items: baseline; gap: .35rem; }
.deal-page button.deal-contact-edit { width: auto; margin: 0 0 0 auto; padding: 0 .2rem; border: 0; background: none; color: var(--pico-muted-color); line-height: 1; }
.deal-page button.deal-contact-edit:hover { color: var(--pico-primary); }
.deal-contact-links { display: flex; flex-wrap: wrap; gap: 0 .75rem; overflow-wrap: anywhere; }
.deal-contact-note { color: var(--pico-muted-color); font-style: italic; white-space: pre-line; }
.deal-contacts-empty { color: var(--pico-muted-color); font-size: .9rem; }
#contact-dialog article { width: min(40rem, 100%); max-width: none; }
#contact-dialog textarea { resize: vertical; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 576px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-search { margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--pico-muted-border-color); }
.contact-search input { margin-bottom: .5rem; }
ul.contact-search-results { padding-left: 0; margin: 0; font-size: .9rem; }
ul.contact-search-results li { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .3rem; }
ul.contact-search-results small { color: var(--pico-muted-color); }
ul.contact-search-results button { width: auto; flex: none; margin: 0; padding: 0 .75rem; font-size: .8rem; }
.contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.contact-actions button { width: auto; margin: 0; }
.contact-actions button[type=submit]:first-child { width: 11rem; }
.contact-actions button.contact-delete { margin-left: auto; }
/* Deal page: "Link to client" (a deal without org_id) after "added", and its search popup */
.deal-meta button.deal-link-client { width: auto; margin: 0 0 0 .5rem; padding: 0 .5rem; font-size: .8rem; vertical-align: baseline; }
#client-dialog article { width: min(36rem, 100%); max-width: none; }
#client-dialog header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
#client-dialog header button[rel=prev] { margin: 0; }
ul.client-search-results { padding-left: 0; margin: 0; font-size: .9rem; }
ul.client-search-results li { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .3rem; }
ul.client-search-results small { color: var(--pico-muted-color); }
ul.client-search-results button { width: auto; flex: none; margin: 0; padding: 0 .75rem; font-size: .8rem; }
ul.client-search-results a { flex: none; font-size: .85rem; }
ul.client-search-results li > span { margin-right: auto; }
/* VAI Sales kanban: "Found N deals for …" right of "New deal" */
.kanban-found { margin: 0; color: var(--pico-muted-color); }
/* VAI Sales "How it works" popup */
#help-dialog article { width: min(44rem, 100%); max-width: none; }
#help-dialog header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
#help-dialog header button[rel=prev] { margin: 0; }
#help-dialog h5 { margin: 1rem 0 .35rem; font-size: 1rem; }
#help-dialog h5:first-of-type { margin-top: 0; }
#help-dialog p { font-size: .9rem; margin-bottom: .6rem; }
/* Data table: small link after a cell's content (e.g. "Deal" by a VAI client's name) */
td a.cell-after { margin-left: .35rem; font-size: calc(.75rem - 4px); color: var(--pico-muted-color); }
td a.cell-after:hover { color: var(--pico-primary); }
/* Deal page: the name, renamed in place (admins, the deal's SM and Leadgen) */
.deal-title.is-editable { cursor: pointer; }
form.deal-rename { display: inline-flex; align-items: center; gap: .25rem; margin: 0; vertical-align: middle; }
form.deal-rename[hidden] { display: none; }
form.deal-rename input[type=text] { width: 20rem; max-width: 60vw; margin: 0; font-size: 1.1rem; font-weight: 600; }
form.deal-rename button { width: auto; margin: 0; padding: .2rem; border: 0; background: none; line-height: 0; }
form.deal-rename .deal-rename-save { color: #66bb6a; }
form.deal-rename .deal-rename-save:hover { color: #43a047; }
form.deal-rename .deal-rename-cancel { color: var(--pico-muted-color); }
form.deal-rename .deal-rename-cancel:hover { color: var(--pico-color); }
.deal-contacts-head:has(.deal-contacts-empty) { margin-bottom: 1.25rem; }
/* VAI Sales kanban: new emails from clients — the notice above the board, the badge on a card */
.kanban-new-emails { margin: 0 0 1rem; padding: .5rem .75rem; border-left: 3px solid var(--pico-primary); background: var(--pico-card-sectioning-background-color); font-size: .9rem; }
.kanban-card .kanban-mail { float: right; margin-left: .35rem; padding: 0 .35rem; border-radius: 1rem; background: var(--pico-primary-background); color: var(--pico-primary-inverse); font-size: .75rem; line-height: 1.4; }
/* Deal History: an incoming (synced) email */
.deal-email-in { color: var(--pico-primary); }
/* Profile, Email integration: "· N in the last 30 days" after the email counts */
dl.record dd small { color: var(--pico-muted-color); }
/* Deal History: the email a "New emails" link opened, outlined green for 3 seconds (public/deal.js) */
.deal-page ul.deal-history > li { border-radius: var(--pico-border-radius); outline: 2px solid transparent; outline-offset: 4px; transition: outline-color .3s; }
.deal-page ul.deal-history > li.is-flash { outline-color: #66bb6a; }
/* VAI Sales kanban: a card whose deal page is loading — Pico's spinner, the card dimmed */
.kanban-card[aria-busy="true"] { opacity: .6; pointer-events: none; }
.kanban-card[aria-busy="true"]::before { float: right; margin: .1rem 0 0 .35rem; }
/* Deal page: about the company (company_info.js) — the note, its facts, sources and Refresh */
.deal-company { margin: 0 0 1rem; font-size: .9rem; }
/* "About client" as a heading like History's, the note under it */
details.deal-company > summary, details.deal-company[open] > summary:not([role]):not(:focus) { font-size: 1rem; font-weight: 600; color: var(--pico-color); margin-bottom: .5rem; }
.deal-company-body { padding-left: .75rem; border-left: 3px solid var(--pico-muted-border-color); }
.deal-company p { margin-bottom: .35rem; }
.deal-company-facts, .deal-company-wait { color: var(--pico-muted-color); }
.deal-company-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; margin: 0; }
.deal-company-foot small { color: var(--pico-muted-color); overflow-wrap: anywhere; }
.deal-company-foot button { width: auto; margin: 0; padding: 0 .5rem; font-size: .8rem; }
/* Deal page: "Source: google / cpc / campaign" (signup UTM marks) under the added / closed line */
.deal-source { margin-top: -.75rem; color: var(--pico-muted-color); font-size: .875rem; }
.deal-source span[title] { border-bottom: 1px dotted var(--pico-muted-color); cursor: help; }