/*
 * ProQuantic CRM branding override.
 * Loaded after the active theme's stylesheet (see app.client.cssList in
 * custom/ProQ/Custom/Resources/metadata/app/client.json), so these rules
 * win the cascade without editing or duplicating the core theme CSS.
 *
 * IMPORTANT (read before changing colors again): proq.css reuses a single
 * CSS variable for more than one visual state:
 *   - `--navbar-inverse-link-hover-color` styles BOTH the hover-state text of
 *     ordinary items AND the permanent text of the active/selected item
 *     (see `.navbar-inverse .navbar-nav>.active>a` in proq.css). There is no
 *     separate "active text color" variable.
 *   - `--navbar-inverse-link-icon-hover-color` likewise styles BOTH the
 *     hover-state icon/short-label AND the active item's icon/short-label
 *     (`.tabs>li.active>a .short-label`).
 * Both states are deliberately styled the same here (light pill + dark
 * text/icon) to sidestep that constraint rather than fight it.
 */
:root {
    /* Left navigation panel (see .navbar-left-container override below,
       which decouples the sidebar from the shell's own background so the
       shell can be white while the sidebar stays blue). */
    --navbar-inverse-bg: #2955A0;
    --navbar-inverse-border: #1F4988;
    --navbar-inverse-color: #C9D9F0;

    /* Idle (non-hover, non-active) item: light text/icon on the blue bg. */
    --navbar-inverse-link-color: #E4ECF9;
    --navbar-inverse-link-icon-color: #B7CCE9;

    /* Hover preview AND the active/selected item share these two variables
       in proq.css -- make both states a light pill with dark text so
       neither combination goes text-on-matching-background invisible. */
    --navbar-inverse-link-hover-bg: #EDF3FC;
    --navbar-inverse-link-hover-color: #1F3B66;
    --navbar-inverse-link-active-bg: #FFFFFF;
    --navbar-inverse-link-icon-hover-color: #1F3B66;

    --navbar-inverse-link-disabled-color: #7A93BE;
    --navbar-inverse-toggle-hover-bg: #1F4988;

    /* Non-inverse navbar link variants -- kept in sync in case any other
       layout path renders a plain (non "-inverse") navbar. */
    --navbar-bg: #FFFFFF;
    --navbar-link-color: #E4ECF9;
    --navbar-link-icon-color: #B7CCE9;
    --navbar-link-hover-bg: #EDF3FC;
    --navbar-link-hover-color: #1F3B66;
    --navbar-link-active-bg: #FFFFFF;
}

/*
 * Top strip vs. sidebar.
 *
 * client/res/templates/site/navbar.tpl:
 *   .navbar.navbar-inverse                     <- the whole shell
 *     .navbar-header                           <- logo + toggle (left)
 *     .navbar-collapse.navbar-body
 *       .navbar-left-container                 <- the actual tab list (sidebar)
 *       .navbar-right-container                <- notifications/user menu (right)
 *
 * The shell defaults white, .navbar-right-container (notifications/user
 * menu) stays white, but .navbar-header (the logo section) is put back to
 * the same blue as the sidebar -- the logo is now plain text using the same
 * light color as the sidebar's idle menu text (--navbar-inverse-link-color),
 * which only reads clearly against a matching blue background (that's why
 * it isn't used on the white .navbar-right-container).
 */
/*
 * Login page logo: #login .panel-heading defaults to white
 * (--login-panel-heading-bg in proq.css). client/custom/img/logo.svg is a
 * light-on-transparent mark made for the navbar's dark blue header, so on
 * that default white panel it was nearly invisible. Match the panel heading
 * to the same blue used for the navbar header instead of re-coloring the SVG,
 * so one logo asset stays legible in both places.
 */
#login.panel > .panel-heading {
    background-color: #2955A0;
}

.navbar.navbar-inverse {
    background-color: #FFFFFF;
}

.navbar.navbar-inverse .navbar-left-container,
.navbar.navbar-inverse .navbar-header {
    background-color: #2955A0;
}

.navbar.navbar-inverse .navbar-header .navbar-toggle,
.navbar.navbar-inverse .navbar-header .side-menu-button {
    color: #E4ECF9;
}

.navbar.navbar-inverse .navbar-header .navbar-toggle:hover,
.navbar.navbar-inverse .navbar-header .side-menu-button:hover {
    color: #FFFFFF;
    background-color: #1F4988;
}

.navbar.navbar-inverse .navbar-right-container,
.navbar.navbar-inverse .navbar-right-container * {
    color: #2955A0;
}

.navbar.navbar-inverse .navbar-right-container .nav > li > a:hover,
.navbar.navbar-inverse .navbar-right-container .nav > li.open > a {
    color: #1F3B66;
    background-color: #EEF3FB;
}

/* List-view table header and row hover: proq.css has no variable for these
   (the stock table header has no background color and rows have no hover
   state at all), so these are plain rule additions rather than variable
   overrides, scoped to .list-container to avoid affecting unrelated tables
   (e.g. inside modals). Header text color matches the sidebar's idle text
   color (--navbar-inverse-link-color) rather than plain white, so the two
   blue-background surfaces read as one consistent palette.

   Most column headers are sortable, and record/list.tpl renders a sortable
   label as `<a class="sort">{{label}}</a>` INSIDE the <th> -- proq.css has
   a low-specificity but element-targeting `a{color:var(--link-color)}` rule
   that applies directly to that anchor and is NOT overridden by a color set
   on the parent <th> (a child element's own explicit color rule always
   wins over an inherited one, regardless of the parent rule's specificity).
   That was the actual cause of the header text still looking wrong/muddy --
   most headers were quietly rendering in the default link color, not the
   one set below. Fixed by targeting the <a> and the sort-direction icon
   explicitly, not just the <th>. */
.list-container table > thead > tr > th {
    background-color: #2955A0;
    border-bottom-color: #1F4988;
}

.list-container table > thead > tr > th,
.list-container table > thead > tr > th > a.sort,
.list-container table > thead > tr > th > .fas {
    color: #E4ECF9;
    font-weight: 600;
}

.list-container table > thead > tr > th > a.sort:hover {
    color: #FFFFFF;
}

.list-container .list-row:hover {
    background-color: #EEF3FB;
}

/*
 * "Contacts" nav children (Lists, Segments) -- permanently visible,
 * indented rows directly beneath the Contacts tab (added as real sibling
 * <li> elements in views/site/navbar's setupContactChildrenMenu(),
 * client/lib/proq-main.js), not a dropdown/flyout and not a second
 * "Contacts" tab. Being real siblings means they inherit the standard tab
 * row styling (height, hover, active-state) for free -- the only override
 * needed is extra left padding on the label text, past the standard
 * --navbar-tab-text-left-padding every tab already uses, so they read as
 * nested under Contacts rather than as peer top-level items.
 *
 * The icon (span.short-label) is `position:absolute` with no explicit
 * `left` in proq.css, so it sits at its normal static-flow position (the
 * same left edge every top-level tab's icon uses) by default -- moved in
 * here to sit right before the now-indented text instead, at the same
 * left offset the label text itself normally starts from
 * (--navbar-tab-text-left-padding), so the icon-to-text gap matches the
 * gap every other tab already uses.
 */
#navbar .navbar ul.tabs > li.nav-child-of-contact > a.nav-link > span.full-label {
    padding-left: calc(var(--navbar-tab-text-left-padding) + var(--20px));
}

#navbar .navbar ul.tabs > li.nav-child-of-contact > a.nav-link > span.short-label {
    left: var(--navbar-tab-text-left-padding);
}

/* Same nesting treatment as .nav-child-of-contact above, for the
   "Proposals" and "Statements of Work" rows under "Deals"
   (setupChildTabsMenu() in client/lib/proq-main.js — itemClass is
   derived from the parent scope, so any future parent added to its
   childTabMap needs its own block here). */
#navbar .navbar ul.tabs > li.nav-child-of-opportunity > a.nav-link > span.full-label {
    padding-left: calc(var(--navbar-tab-text-left-padding) + var(--20px));
}

#navbar .navbar ul.tabs > li.nav-child-of-opportunity > a.nav-link > span.short-label {
    left: var(--navbar-tab-text-left-padding);
}

/*
 * Segment filter builder (crm:views/segment/fields/filter-data,
 * client/lib/proq-crm.js) -- each AND-block is a card, condition rows
 * inside it lay out inline (attribute/operator/value, or event/comparator/
 * count/window/campaign) rather than one control per line. The field
 * view builds these rows via plain jQuery (no framework layout helper for
 * this), so the flex/spacing rules live here rather than as inline styles
 * on every row.
 */
.filter-block {
    margin-bottom: 12px;
    padding: 12px 14px;
}

.filter-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.filter-block-title {
    font-weight: 600;
}

.filter-block-or-divider {
    text-align: center;
    margin: 4px 0 12px;
    color: #9ca3af;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
}

/* Per-block AND/OR combinator between condition blocks -- a visible
   segmented toggle (not a plain <select>, which hides the active choice
   until opened) plus a one-line label, so it's obvious at a glance how a
   block combines with everything above it. */
.filter-block-combinator-divider {
    text-align: center;
    margin: 4px 0 12px;
}

.filter-block-combinator-label {
    display: block;
    color: #6b7280;
    font-size: 12px;
    margin-bottom: 4px;
}

.filter-block-combinator-segmented {
    display: inline-flex;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    overflow: hidden;
}

.filter-block-combinator-btn {
    border: none;
    background: #fff;
    padding: 4px 16px;
    font-weight: 600;
    font-size: 12px;
    color: #4b5563;
    cursor: pointer;
}

.filter-block-combinator-btn + .filter-block-combinator-btn {
    border-left: 1px solid #d1d5db;
}

.filter-block-combinator-btn.active {
    background: #2955A0;
    color: #fff;
}

.filter-condition-campaign-field {
    flex: 1 1 180px;
    min-width: 160px;
}

.filter-block-conditions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.filter-condition {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    border-top: 1px solid #eef0f2;
}

.filter-block-conditions .filter-condition:first-child {
    border-top: none;
    padding-top: 0;
}

.filter-condition-field {
    flex: 1 1 160px;
    min-width: 140px;
}

.filter-condition-value {
    flex: 1 1 160px;
    min-width: 140px;
}

.filter-condition select,
.filter-condition input {
    width: 100%;
}

.filter-condition-count {
    flex: 0 0 70px;
    width: 70px;
}

.filter-condition-unit {
    flex: 0 0 100px;
    width: 100px;
}

.filter-condition-label {
    flex: 0 0 auto;
    white-space: nowrap;
    color: #6b7280;
    font-size: 13px;
}

.filter-condition-any-time {
    flex: 0 0 auto;
    white-space: nowrap;
    margin: 0;
}

.filter-condition-campaign {
    flex: 1 1 180px;
    min-width: 160px;
}

.filter-condition-remove {
    flex: 0 0 auto;
    margin-left: auto;
}

.filter-block-add {
    display: flex;
    gap: 6px;
}

.filter-block-summary {
    margin-bottom: 6px;
}

.filter-block-summary-or {
    text-align: center;
    color: #9ca3af;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    margin: 4px 0;
}

.filter-and-label {
    color: #9ca3af;
    font-size: 12px;
    text-transform: uppercase;
}

/*
 * Segment v4 additions: event condition rows grew a 3rd scope dropdown, a
 * 6-option comparator, an 8-mode timeline picker with conditional date
 * inputs, and an optional "Choose which emails" sub-filter row underneath.
 * Reuses the existing .filter-condition-field/.filter-condition-count flex
 * rules above; these are only the new element-specific widths/spacing.
 */
.filter-condition-date {
    flex: 0 0 150px;
    width: 150px;
}

.filter-condition-timeline-mode {
    flex: 1 1 140px;
    min-width: 130px;
}

.filter-choose-which-emails-toggle {
    flex: 0 0 100%;
    margin-top: 2px;
}

.filter-choose-which-emails-link {
    font-size: 12px;
    color: #6b7280;
}

.filter-choose-which-emails-link:hover {
    color: #374151;
}

.filter-condition-choose-which-emails {
    flex: 0 0 100%;
    margin-left: 18px;
    width: calc(100% - 18px);
    padding-top: 4px;
    border-top: none;
}

/*
 * Segment v5 UX pass: a short usage hint + live "N contacts match" badge
 * above the blocks, a one-line reminder of what a block's own conditions
 * mean (all-AND) under each block's title, and a labeled-row-group layout
 * for Engagement Event conditions (Event / Frequency / Timeline each on
 * their own line) so a condition reads top-to-bottom like a sentence
 * instead of one long wrapped row of controls.
 */
.filter-builder-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

.filter-builder-helper {
    color: #6b7280;
    font-size: 12px;
    max-width: 560px;
}

.filter-live-count {
    flex: 0 0 auto;
    white-space: nowrap;
    background: #EDF3FC;
    color: #1F3B66;
    border-radius: 14px;
    padding: 4px 12px;
    font-weight: 600;
    font-size: 13px;
}

.filter-live-count-icon {
    margin-right: 2px;
}

.filter-block-subtitle {
    color: #9ca3af;
    font-size: 12px;
    font-style: italic;
    margin: -4px 0 10px;
}

/* Condition "cards" -- a bordered box per condition, replacing the plain
   inline row every condition used to be. Attribute conditions keep a
   single line inside their card (they only ever have 3 controls); event
   conditions get their own header (title + remove) and stack their
   Event/Frequency/Timeline row-groups underneath it. */
.filter-condition-attribute-card,
.filter-condition-event-card {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 8px 10px;
    background: #fafbfc;
}

.filter-condition-attribute-card .filter-condition {
    border-top: none;
    padding: 0;
}

.filter-condition-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.filter-condition-card-title {
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    color: #6b7280;
}

.filter-condition-card-header .filter-condition-remove {
    margin-left: 0;
}

.filter-condition-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 0;
}

.filter-condition-group-label {
    flex: 0 0 84px;
    width: 84px;
    color: #6b7280;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.filter-condition-group-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
}

.filter-condition-field-narrow {
    flex: 1 1 120px;
    min-width: 110px;
}

/*
 * SOW public signing page (crm:views/proposal/sign, rendered full-page via
 * Controller.entire() -- no app navbar/sidebar chrome at all, see
 * EntryPoints/SowSign.php) -- a plain centered card, since this page is the
 * one place in the app a non-logged-in client actually lands.
 */
body:has(> .sow-sign-page) {
    padding-top: 0;
}

.sow-sign-page {
    min-height: 100vh;
    background: #f4f6f9;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
}

.sow-sign-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, .08);
    max-width: 640px;
    width: 100%;
    padding: 32px 36px;
}

.sow-sign-error,
.sow-sign-done {
    text-align: center;
    max-width: 480px;
}

.sow-sign-header h1 {
    margin: 0 0 4px;
    font-size: 22px;
}

.sow-sign-subtitle {
    color: #6b7280;
    margin: 0 0 20px;
}

.sow-sign-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 20px;
}

.sow-sign-tab {
    border: none;
    background: none;
    padding: 8px 14px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.sow-sign-tab.active {
    color: #2955A0;
    border-bottom-color: #2955A0;
}

.sow-sign-personal-message {
    margin-bottom: 16px;
}

.sow-sign-line-items {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.sow-sign-line-items th,
.sow-sign-line-items td {
    text-align: left;
    padding: 8px 6px;
    border-bottom: 1px solid #eef0f2;
    font-size: 13px;
}

.sow-sign-terms {
    font-size: 13px;
    color: #374151;
    max-height: 320px;
    overflow-y: auto;
}

.sow-sign-sign-panel {
    border-top: 1px solid #e5e7eb;
    margin-top: 24px;
    padding-top: 20px;
}

.sow-sign-field {
    margin-bottom: 14px;
}

.sow-sign-field label {
    display: block;
    font-weight: 600;
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 4px;
}

.sow-sign-canvas {
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    width: 100%;
    max-width: 500px;
    height: 140px;
    touch-action: none;
    cursor: crosshair;
}

.sow-sign-canvas-actions {
    margin-top: 4px;
}

.sow-sign-error-message {
    color: #b91c1c;
    font-size: 13px;
    margin-bottom: 12px;
}

.sow-sign-submit {
    width: 100%;
}

.sow-sign-success {
    text-align: center;
    padding: 20px 0;
}

/*
 * Deal "Qualification" stage: a light-blue variant distinct from
 * "Proposal" (the built-in "primary" style, --brand-primary #5589ca on the
 * kanban board / --state-primary-bg #e5f3ff as a label) -- there's no
 * stock Bootstrap-style name lighter than "primary" already themed here,
 * so this adds one ("sky") via the same style-name -> CSS-class-suffix
 * mechanism proq.css itself uses (.label-state.label-{style} in fields/
 * enum's templates, .group-header.group-header-{style} in kanban.tpl).
 * .group-header's own base rule sets white text
 * (--text-white-color) for the medium/dark stage colors -- overridden
 * here to a dark navy, since white-on-pale-blue would be unreadable.
 */
.label-state.label-sky {
    color: #1F3B66;
    background-color: #DCEBFA;
}

.group-header.group-header-sky {
    color: #1F3B66;
}

/* proq.css's own per-style kanban background rules (group-header-danger,
   group-header-info, etc.) are all scoped as
   `div.list-kanban>div>table th.group-header.group-header-{style}>div` --
   a plain `.group-header.group-header-sky > div` here loses that
   specificity fight (proq.css's chain has more element selectors, which
   still outweighs matching class-count), so this has to mirror the same
   prefix to actually win the cascade. */
div.list-kanban > div > table th.group-header.group-header-sky > div {
    background-color: #AACBEA;
}

/*
 * Collapsible left-nav groups -- see client/custom/js/nav-groups.js for the
 * behavior (toggles .nav-group-collapsed on the divider; animates each
 * owned tab's max-height via inline style, set from the JS's own
 * scrollHeight measurement, so the collapse/expand is a real height
 * animation rather than an instant display:none -- CSS alone can't
 * transition to/from `auto`).  A tab whose own dropdown can pop out (an
 * `isGroup` tab, `.dropdown-menu` child) still gets .nav-group-item-hidden
 * (a plain display:none, no animated overflow:hidden) instead, so a later
 * addition of one to a group can't have its popup clipped mid-animation --
 * see nav-groups.js's per-item branch for that.
 *
 * Visually: an uppercase, letter-spaced section-header treatment (the
 * "modern SaaS sidebar" look -- Linear/Notion/Slack-style group labels)
 * rather than the plain static divider text this replaced, a caret that
 * rotates AND brightens on hover/expanded state, and a left accent bar on
 * hover so the whole row reads as one clickable unit, not just text.
 */
#navbar .navbar ul.tabs > li.tab-divider {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

#navbar .navbar ul.tabs > li.tab-divider:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* proq.css itself sets `display:block` (plus its own padding) on this
   exact div via `body[data-navbar=side] #navbar .navbar ul.tabs>
   li.tab-divider>div` -- one MORE element selector (the leading `body`)
   than a same-class-count rule scoped from `#navbar` down, which wins
   ties by class-count first. Matching that same `body[data-navbar=side]`
   prefix is the only way `display:flex` (and this rule's other
   properties) actually take effect instead of silently losing the
   cascade -- exactly the same trap already hit once for the Kanban
   "sky" column color earlier in this file. */
body[data-navbar=side] #navbar .navbar ul.tabs > li.tab-divider > div.nav-group-header {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 4px;
    margin: 0 6px;
    padding: 4px 8px 4px 0;
    position: relative;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

#navbar .navbar ul.tabs > li.tab-divider > div.nav-group-header .label-text {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--navbar-inverse-link-icon-color);
    transition: color 0.15s ease;
}

#navbar .navbar ul.tabs > li.tab-divider > div.nav-group-header:hover {
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.55);
}

#navbar .navbar ul.tabs > li.tab-divider > div.nav-group-header:hover .label-text {
    color: #FFFFFF;
}

/* Explicit color -- without one this inherits the header div's own
   (much dimmer) default text color instead of the sidebar's dedicated
   icon color, reading as low-contrast/washed-out against the blue
   background. */
#navbar .navbar ul.tabs > li.tab-divider .nav-group-caret {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--navbar-inverse-link-icon-color);
    opacity: 0.9;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s ease, opacity 0.15s ease;
}

#navbar .navbar ul.tabs > li.tab-divider > div.nav-group-header:hover .nav-group-caret {
    color: #FFFFFF;
    opacity: 1;
}

#navbar .navbar ul.tabs > li.tab-divider.nav-group-collapsed .nav-group-caret {
    transform: rotate(-90deg);
}

/*
 * Animated variant -- a fixed max-height ceiling (every grouped row is a
 * single-line tab, comfortably under this) transitioned purely via the
 * .nav-group-item-collapsed class, not JS-measured scrollHeight/rAF/
 * transitionend bookkeeping (an earlier version of this did that; see the
 * comment on setCollapsed() in nav-groups.js for why it was replaced --
 * that approach breaks under rapid repeated clicking, leaving rows stuck
 * at the wrong height). A CSS transition reverses cleanly on its own
 * however fast the class is toggled, with no JS timing involved.
 */
#navbar .navbar ul.tabs > li.nav-group-item-animated {
    max-height: 60px;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.22s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s ease;
}

#navbar .navbar ul.tabs > li.nav-group-item-animated.nav-group-item-collapsed {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

/* Non-animated variant -- isGroup tabs (own dropdown-menu popup); see
   comment above. */
#navbar .navbar ul.tabs > li.nav-group-item-hidden {
    display: none;
}

/* Minimized (icon-only) sidebar already hides the divider's own label text
   (proq.css: body[data-navbar=side].minimized:not(.side-menu-opened) ...
   .tab-divider>div>.label-text{display:none}) -- hide the caret alongside
   it rather than leaving it floating with nothing to label. */
body[data-navbar=side].minimized:not(.side-menu-opened) #navbar ul.tabs > li.tab-divider > div > .nav-group-caret {
    display: none;
}

/*
 * Segment "Members" side panel -- a compact stacked list (name, then a
 * muted icon+text line per email/phone) instead of a fixed 3-column table.
 * The panel column is narrow (a detail-page side panel, not the main
 * content area) and real values -- especially phone numbers with a country
 * code, or longer email addresses -- don't fit three rigid table columns
 * at that width; the table pushed its last column past the panel's own
 * border rather than wrapping. A stacked row has only one width constraint
 * to satisfy (the panel's own), and overflow-wrap below makes sure even a
 * single very long unbroken value (an email with a long local-part) wraps
 * instead of overflowing.
 */
.members-list {
    display: flex;
    flex-direction: column;
}

.member-row {
    padding: 8px 2px;
    border-bottom: 1px solid #eef0f2;
}

.member-row:first-child {
    padding-top: 0;
}

.member-row:last-child {
    border-bottom: none;
}

.member-row-name {
    display: block;
    font-weight: 600;
    margin-bottom: 2px;
}

.member-row-detail {
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: #6b7280;
    font-size: 12px;
    line-height: 1.5;
}

.member-row-icon {
    flex: 0 0 auto;
    width: 12px;
    text-align: center;
    opacity: 0.7;
}

.member-row-detail-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

/*
 * Left nav: "Deals" group tab (data/config.php tabList) puts Proposals and
 * Statements of Work on the same row instead of stacked — EspoCRM's own
 * group-tab schema (`itemList: [...]`) has no "same row" option; the
 * dropdown just renders one <li data-name="..."> per item, one per line,
 * confirmed by inspecting the rendered menu live. Targeting these two by
 * their stable `data-name` (not the dropdown's own generated
 * aria-labelledby id, which isn't guaranteed stable across rebuilds) so
 * only these two items are affected, not Opportunity ("Deals" itself,
 * the group's first/self item) or any other group's dropdown elsewhere.
 */
.dropdown-menu li.in-group.tab[data-name="Proposal"],
.dropdown-menu li.in-group.tab[data-name="StatementOfWork"] {
    display: inline-block;
    width: 50%;
    box-sizing: border-box;
    vertical-align: top;
}

.dropdown-menu li.in-group.tab[data-name="StatementOfWork"] {
    margin-left: -4px; /* cancels the whitespace gap between adjacent inline-block <li>s */
}