/* VGo — targeted UI overrides. Loaded AFTER app.css and crm-native.css so equal-specificity rules win by cascade order (no !important needed). Keep selectors minimal and reuse the existing class names / CSS variables from app.css. */ /* ============================================================ 1a) Assignee "Assign to… / Search members…" dropdown overlap. The open dropdown must be a proper floating popover: pulled out of flow (absolute), painted above everything on the page with a solid, opaque background, border and shadow — so it never shows the task list bleeding through underneath it. ------------------------------------------------------------ */ /* The menu is portalled to by assignee-picker.js and positioned in viewport coordinates. It has to be: `.add-task-form` carries `animation: vgFade … both`, and animating `transform` gives that element a stacking context. Because the form is NOT positioned, that stacking context paints with normal flow — underneath every `position:relative` .task-row below it — so an absolutely positioned child could never win, whatever its z-index. Task rows painted over the options and swallowed their clicks. A fixed layer on has no such ancestor. */ .ap-wrap { position: relative; } .ap-dropdown.ap-portal { position: fixed; z-index: 1900; /* above page chrome; below app modals (2000+) */ min-width: 240px; background: var(--surface, #ffffff); /* solid, opaque — no bleed-through */ border: 1px solid var(--border-2, rgba(61, 46, 34, .16)); border-radius: 10px; box-shadow: 0 12px 32px -8px rgba(61, 46, 34, .28); overflow: hidden; /* clip the scrolling list to the rounded corners */ display: flex; flex-direction: column; } .ap-dropdown.ap-portal[hidden] { display: none; } /* The search box stays put; only the options scroll. */ .ap-dropdown.ap-portal .ap-search { flex: none; } .ap-dropdown.ap-portal .ap-list { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; } /* Belt and braces: keep the whole add-task card above the rows below it, so the control itself (and any future inline popover) is never painted over. */ .add-task-form { position: relative; z-index: 5; } /* ============================================================ 1b) Task-row right-side control cluster (due text, "+", avatars). Keep it a single inline flex row that never wraps the "+" (or the avatars) onto their own line. ------------------------------------------------------------ */ /* The row itself must not wrap its trailing controls. */ .task-row { flex-wrap: nowrap; } /* The actions cluster is an inline flex row: centered, gapped, no wrap. */ .task-row-actions { display: inline-flex; align-items: center; gap: 6px; flex: none; flex-wrap: nowrap; } /* The "+" / dots trigger stays inline and never shrinks or drops. */ .task-row .task-row-dots { flex: none; } /* Trailing avatar stack also stays on the same line. */ .task-row .task-avatars { flex: none; } /* ============================================================ 2) Clickable sidebar logo (goes to Home). ------------------------------------------------------------ */ .sidebar-logo-link { display: inline-flex; align-items: center; border-radius: 10px; transition: opacity .15s, transform .15s; cursor: pointer; } .sidebar-logo-link:hover { opacity: .78; transform: translateY(-1px); } .sidebar-logo-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .sidebar-logo-link img { display: block; } /* ============================================================ 3) Notification bell — larger tap target and glyph. ------------------------------------------------------------ */ .notif-btn svg { width: 24px; height: 24px; stroke-width: 2.1; } .notif-btn { min-width: 40px; min-height: 40px; } .notif-btn:hover { background: var(--gold-bg, rgba(201, 149, 32, .12)); } /* ============================================================ 4) Card action cluster (favourite / rename / delete) on workspace + project cards. ------------------------------------------------------------ */ .project-card { position: relative; } .card-actions { position: absolute; top: 8px; right: 8px; display: flex; align-items: center; gap: 2px; z-index: 2; opacity: 0; transition: opacity .15s; } .project-card:hover .card-actions, .project-card:focus-within .card-actions { opacity: 1; } /* A favourited card always shows its star, even when not hovered. */ .card-actions .fav-btn.on { opacity: 1; } .project-card .card-actions .fav-btn.on { opacity: 1; } .project-card:not(:hover) .card-actions:has(.fav-btn.on) { opacity: 1; } /* The rule above was written for the hover-revealed cluster on a workspace or project card, but its selector is unscoped — so `.card-actions` ANYWHERE in the app inherits position:absolute + opacity:0. Inside a CRM card header (which is not position:relative) that means the buttons vanish and are painted against the page's top-right corner instead. It was already doing that to the proposal builder's "+ Add Item" button. Put CRM card headers back in flow; `.crm-native` never contains a `.project-card`, so the workflow cards are untouched. */ .crm-native .card-header .card-actions, .crm-native .card-header-actions { position: static; opacity: 1; z-index: auto; } .card-icon-btn, .fav-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .card-icon-btn:hover { background: var(--surface); border-color: var(--border); color: var(--text); } .card-icon-btn.danger:hover { color: var(--barn, #B0432B); } .fav-btn:hover { background: var(--surface); border-color: var(--border); color: var(--gold); } .fav-btn.on { color: var(--gold); } /* ============================================================ 5) Favourites strip at the top of My Tasks. ------------------------------------------------------------ */ .fav-strip { margin-bottom: 22px; } .fav-strip-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .fav-strip-title { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: .06em; } .fav-strip-count { font-size: 11px; font-weight: 700; color: var(--muted); background: var(--sand, #EAE0CE); border-radius: 99px; padding: 1px 8px; } .fav-strip-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; } .fav-card { display: flex; align-items: center; gap: 10px; text-align: left; width: 100%; padding: 11px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; font-family: inherit; cursor: pointer; transition: box-shadow .15s, transform .15s, border-color .15s; } .fav-card:hover { box-shadow: 0 8px 20px -12px rgba(61,46,34,.4); transform: translateY(-1px); border-color: var(--gold); } .fav-card-dot { width: 9px; height: 9px; border-radius: 99px; flex: none; } .fav-card-body { display: flex; flex-direction: column; min-width: 0; flex: 1; } .fav-card-name { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fav-card-meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fav-card-star { color: var(--gold); flex: none; display: inline-flex; padding: 3px; border-radius: 6px; } .fav-card-star:hover { background: var(--gold-bg, rgba(201,149,32,.14)); } /* ============================================================ 6) Priorities board — one column per workspace. ------------------------------------------------------------ */ .pri-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; } .pri-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; align-items: start; } .pri-col { background: var(--sand-2, rgba(234, 224, 206, .38)); border: 1px solid var(--border); border-radius: 14px; padding: 12px; min-width: 0; } .pri-col-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 10px; border-bottom: 1px solid var(--border); margin-bottom: 10px; } .pri-col-dot { width: 10px; height: 10px; border-radius: 99px; flex: none; } .pri-col-name { font-size: 13px; font-weight: 800; color: var(--text); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; } .pri-col-count { font-size: 11px; font-weight: 700; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 99px; padding: 1px 8px; flex: none; } .pri-col-body { display: flex; flex-direction: column; gap: 9px; } .pri-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 11px 12px; transition: box-shadow .15s, border-color .15s; } .pri-card:hover { box-shadow: 0 8px 20px -14px rgba(61,46,34,.45); border-color: var(--gold); } .pri-card.done { opacity: .55; } .pri-card.done .pri-card-title { text-decoration: line-through; } .pri-card-top { display: flex; align-items: flex-start; gap: 9px; position: relative; } .pri-card-main { flex: 1; min-width: 0; } .pri-check { flex: none; margin-top: 1px; } .pri-card-title { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.35; overflow-wrap: anywhere; } .pri-card-meta { display: flex; align-items: center; gap: 7px; margin-top: 5px; flex-wrap: wrap; } .pri-kind { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; border-radius: 5px; padding: 2px 6px; background: var(--sand, #EAE0CE); color: var(--text-2); } .pri-kind-task { background: rgba(201, 149, 32, .18); color: #8E6B3A; } .pri-kind-project { background: rgba(107, 142, 90, .18); color: #4C6B3C; } .pri-trail { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; } .pri-card-desc { font-size: 12.5px; color: var(--muted); margin-top: 8px; line-height: 1.45; } .pri-card-people { display: flex; align-items: center; gap: 0; margin-top: 10px; } .pri-card-people.pri-none { font-size: 11.5px; color: var(--muted); font-style: italic; } .pri-av { margin-left: -6px; border: 2px solid var(--surface); } .pri-av:first-child { margin-left: 0; } .pri-av-more { background: var(--sand, #EAE0CE); color: var(--text-2); } @media (max-width: 720px) { .pri-board { grid-template-columns: 1fr; } .fav-strip-row { grid-template-columns: 1fr; } .card-actions { opacity: 1; } } /* ============================================================ 7) CRM form controls — international phone input, country select, fixed-lead line and the searchable lead picker. ------------------------------------------------------------ */ .crm-native .crm-phone-wrap { position: relative; display: flex; align-items: center; } .crm-native .crm-phone-flag { position: absolute; left: 10px; font-size: 17px; line-height: 1; pointer-events: none; user-select: none; } .crm-native .crm-phone-input { padding-left: 36px; } .crm-native .crm-phone-input.is-valid { border-color: #1a7f37; } .crm-native .crm-phone-input.is-invalid { border-color: #b3261e; } .crm-native .crm-phone-hint { font-size: 11.5px; color: var(--color-text-secondary); margin-top: 4px; } .crm-native .crm-phone-hint.ok { color: #1a7f37; } .crm-native .crm-phone-hint.warn { color: #b3261e; } .crm-native .form-hint.ok { color: #1a7f37; font-weight: 600; } .crm-native .crm-country-select { font-size: 14px; } /* The lead is fixed when logging from a lead page — show it, don't offer a choice. */ .crm-native .crm-fixed-lead { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-radius: 8px; background: var(--color-bg); border: 1px solid var(--color-border); } .crm-native .crm-fixed-lead-name { font-size: 14px; font-weight: 700; color: var(--color-text); } .crm-native .crm-fixed-lead-co { font-size: 12.5px; color: var(--color-text-secondary); } /* Type-to-search lead picker (Interactions screen). */ .crm-native .crm-leadpick { position: relative; } .crm-native .crm-leadpick-results { position: absolute; z-index: 40; left: 0; right: 0; top: 100%; margin-top: 4px; max-height: 260px; overflow-y: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; box-shadow: 0 12px 30px -10px rgba(61, 46, 34, .32); } .crm-native .crm-leadpick-item { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 9px 12px; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--color-border); cursor: pointer; font-family: inherit; } .crm-native .crm-leadpick-item:last-child { border-bottom: none; } .crm-native .crm-leadpick-item:hover { background: var(--color-bg); } .crm-native .crm-leadpick-name { font-size: 13.5px; font-weight: 600; color: var(--color-text); } .crm-native .crm-leadpick-meta { font-size: 11.5px; color: var(--color-text-secondary); } .crm-native .crm-leadpick-empty { padding: 12px; font-size: 12.5px; color: var(--color-text-secondary); } /* ============================================================ 8) Email campaign builder — full screen, not a modal. The visual block builder needs real width; at 860px modal width it was effectively unusable. ------------------------------------------------------------ */ .crm-native .eb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; } .crm-native .eb-main { min-width: 0; } .crm-native .eb-side { min-width: 0; } .crm-native .eb-palette { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .crm-native .eb-canvas { min-height: 320px; } .crm-native .eb-footer { display: flex; justify-content: flex-end; gap: 10px; margin: 18px 0 40px; padding-top: 16px; border-top: 1px solid var(--color-border); } @media (max-width: 1080px) { .crm-native .eb-layout { grid-template-columns: 1fr; } } /* ============================================================ 9) Automations — round-robin pool picker. ------------------------------------------------------------ */ .crm-native .ct-rr-pool { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px; max-height: 190px; overflow-y: auto; border: 1px solid var(--color-border); border-radius: 8px; padding: 8px; background: var(--color-surface); } .crm-native .ct-rr-item { display: flex; align-items: center; gap: 7px; font-size: 13px; padding: 3px 4px; cursor: pointer; border-radius: 6px; } .crm-native .ct-rr-item:hover { background: var(--color-bg); } /* ============================================================ 10) Customer purchases panel (CRM lead detail). ------------------------------------------------------------ */ .crm-native .ct-cust-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 14px; } .crm-native .ct-cust-kpis > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--color-bg); border: 1px solid var(--color-border); } .crm-native .ct-cust-kpis strong { font-size: 17px; font-weight: 700; } /* ============================================================ 11) Build/version pill at the top of Settings. ------------------------------------------------------------ */ .settings-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .app-version-pill { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 12px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; } .app-version-dot { width: 7px; height: 7px; border-radius: 99px; background: #6B8E5A; flex: none; } .app-version-build { font-weight: 400; color: var(--muted); } /* ============================================================ 12) Automation scheduler — status bar and Settings panel. ------------------------------------------------------------ */ .crm-native .ct-sched-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 16px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); font-size: 13px; } .crm-native .ct-sched-dot { width: 9px; height: 9px; border-radius: 99px; flex: none; background: #6B8E5A; } .crm-native .ct-sched-dot.warn { background: #C99520; } .crm-native .ct-sched-note { font-size: 12px; color: var(--color-text-secondary); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--color-border); } .sched-status { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); } .sched-status .sched-dot { width: 10px; height: 10px; border-radius: 99px; flex: none; background: #6B8E5A; } .sched-status.warn .sched-dot { background: #C99520; } .sched-cron-url { font-family: var(--mono, ui-monospace, monospace); font-size: 12px; } /* ============================================================ 13) Email composer — full page (replaces the compose modal) and the attachment picker. ------------------------------------------------------------ */ .crm-native .crm-email-warn { padding: 10px 12px; margin-bottom: 16px; border: 1px solid #E6C77A; border-left-width: 3px; border-radius: 8px; background: #FDF6E3; color: #7A5A11; font-size: 13px; } .crm-native .crm-attach-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .crm-native .crm-attach-bar .btn svg { margin-right: 6px; vertical-align: -2px; } .crm-native .crm-attach-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .crm-native .crm-attach-list:empty { margin-top: 0; } .crm-native .crm-attach-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 12px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); font-size: 13px; } .crm-native .crm-attach-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .crm-native .crm-attach-size { flex: none; color: var(--color-text-secondary); font-size: 12px; } .crm-native .crm-attach-x { flex: none; width: 24px; height: 24px; line-height: 1; border: 0; border-radius: 6px; cursor: pointer; background: transparent; color: var(--color-text-secondary); font-size: 18px; } .crm-native .crm-attach-x:hover { background: #FDE8E8; color: #B3261E; } /* ============================================================ 14) Per-module notification badges — a count on each nav item plus a rollup on the group header, so a collapsed group still says where the unread work is. ------------------------------------------------------------ */ .module-nav-label { flex: 1 1 auto; min-width: 0; text-align: left; } .module-nav-count { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 6px; margin-right: 2px; border-radius: 99px; background: #B0432B; color: #fff; font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: 0; } /* Inside a group's own colour block the rollup reads better tinted to match. */ .crm-group .module-nav-count { background: #8E6B3A; } .acc-group .module-nav-count { background: #3F6B32; } /* The item pill is the established unread red; keep it legible on the gold active row. */ .nav-btn.active .nav-badge { box-shadow: 0 0 0 1.5px var(--gold-bg, #fff); } /* ============================================================ 15) Record-level notification markers — the pill that says *which* lead, conversation or task the module count is about. ------------------------------------------------------------ */ .crm-notif-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 6px; margin-left: 8px; border-radius: 99px; vertical-align: 2px; background: #B0432B; color: #fff; font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: 0; } .crm-native tr.crm-row-notif > td { background: rgba(176, 67, 43, .045); } .crm-native tr.crm-row-notif > td:first-child { box-shadow: inset 3px 0 0 #B0432B; } .crm-native .crm-notif-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 16px; border: 1px solid var(--color-border); border-left: 3px solid #B0432B; border-radius: 10px; background: var(--color-surface); font-size: 13px; } .crm-native .crm-notif-bar .crm-notif-pill { margin-left: 0; } .crm-native .crm-notif-bar > span:nth-child(2) { flex: 1 1 auto; } /* ============================================================ 16) Password screens — forgot / reset on the signed-out shell, and the admin password controls on the user page. ------------------------------------------------------------ */ .login-alt-actions { margin-top: 16px; text-align: center; } .login-link { font-size: 13.5px; font-weight: 600; color: var(--gold-dark, #8E6B3A); text-decoration: none; border-bottom: 1px solid transparent; } .login-link:hover { border-bottom-color: currentColor; } .login-note { background: #F3F7F1; border: 1px solid #CFE0C7; color: #35563A; border-radius: 10px; padding: 12px 14px; font-size: 13.5px; line-height: 1.5; } .login-fineprint { margin-top: 18px; font-size: 12px; line-height: 1.5; color: var(--muted); text-align: center; } .login-remember { display: flex; align-items: center; gap: 8px; margin: -2px 0 14px; font-size: 13px; color: var(--muted); cursor: pointer; user-select: none; } .login-remember input { width: 15px; height: 15px; margin: 0; accent-color: var(--gold-dark, #8E6B3A); cursor: pointer; } .pw-admin-grid { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; margin-top: 14px; } @media (max-width: 640px) { .pw-admin-grid { grid-template-columns: 1fr; } } .pw-admin-note { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); } .pw-admin-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0 16px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .pw-admin-divider::before, .pw-admin-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } .pw-admin-result { margin-top: 12px; padding: 11px 14px; border-radius: 10px; background: #F3F7F1; border: 1px solid #CFE0C7; color: #35563A; font-size: 13.5px; line-height: 1.5; } .pw-admin-link { display: block; margin-top: 8px; padding: 8px 10px; background: #fff; border: 1px solid var(--border); border-radius: 8px; font-family: ui-monospace, monospace; font-size: 11.5px; word-break: break-all; user-select: all; } .settings-head { margin-bottom: 16px; } /* ============================================================ 17) Outgoing-mail status — states the actual delivery path, because a missing SMTP config used to fail completely silently. ------------------------------------------------------------ */ .mail-status { padding: 12px 14px; margin-bottom: 16px; border: 1px solid var(--border); border-left-width: 3px; border-radius: 10px; font-size: 13px; line-height: 1.55; } .mail-status code { font-family: ui-monospace, monospace; font-size: 12px; background: rgba(0,0,0,.04); padding: 1px 5px; border-radius: 4px; } .mail-status-ok { border-left-color: #6B8E5A; background: #F3F7F1; color: #35563A; } .mail-status-warn { border-left-color: #C99520; background: #FDF6E3; color: #7A5A11; } .mail-status-bad { border-left-color: #B0432B; background: #FDF0EE; color: #7E2F1E; } /* SMTP test row — sits under the save button in Settings. */ .smtp-test-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); } /* ============================================================ 18) Backups and code parity in Settings. ------------------------------------------------------------ */ .bk-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; } .bk-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; } .bk-pill.bk-ok { background: #E4EDE7; color: #25563F; } .bk-pill.bk-warn { background: #FDF6E3; color: #7A5A11; } .bk-pill.bk-bad { background: #FDE8E8; color: #B0432B; } .bk-version-facts { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: 13px; } .bk-version-facts > div { display: flex; flex-direction: column; gap: 3px; } .bk-version-facts code { font-family: ui-monospace, monospace; font-size: 12px; } .bk-drift { margin-top: 14px; font-size: 13px; } .bk-drift ul { margin: 6px 0 0 18px; } .bk-drift li { font-family: ui-monospace, monospace; font-size: 12px; line-height: 1.7; } .bk-drift li.bk-bad { color: #B0432B; } .bk-drift li.bk-warn { color: #7A5A11; } /* ---- AI Connections: model picker ---------------------------------------- */ .ai-model-pick { display: flex; gap: 8px; align-items: stretch; } .ai-model-pick > span { flex: 1; min-width: 0; } .ai-model-pick input, .ai-model-pick select { width: 100%; } .ai-fetch-btn { white-space: nowrap; flex: none; } .ai-model-note { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.5; } .ai-model-note.ok { color: #34602B; } .ai-model-note.bad { color: #B0432B; } .ai-model-note code { background: var(--gold-bg, #FDF6E3); padding: 1px 5px; border-radius: 4px; font-size: 11.5px; } /* ---- AI Connections: what the connection test reports ------------------- */ .ai-test-result { margin: 14px 0 0; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border); border-left-width: 3px; background: var(--bg); font-size: 13px; line-height: 1.55; } .ai-test-result.ok { border-left-color: #4A7C3F; background: #F1F7EE; color: #34602B; } .ai-test-result.warn { border-left-color: #C99520; background: #FDF6E3; color: #7A5A11; } .ai-test-result.bad { border-left-color: #B0432B; background: #FDF0EE; color: #7E2F1E; } .ai-test-line + .ai-test-line { margin-top: 7px; padding-top: 7px; border-top: 1px solid rgba(0,0,0,.07); } /* ---- Accounting tables: stop long text painting over the next column ---- .acc-row is a CSS grid. Grid items default to min-width:auto, so a long description refuses to shrink below its content width and overflows its track — which is why ledger descriptions were drawn on top of the debit and credit figures. min-width:0 lets the track win. .acc-truncate also has to be a block box to ellipsise; it was being applied to s, where overflow/text-overflow do nothing. ------------------- */ .acc-row > * { min-width: 0; } .acc-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } span.acc-truncate { display: inline-block; vertical-align: bottom; } .acc-row > *:not(.acc-num) { overflow: hidden; } .acc-row .acc-pill { overflow: visible; } /* ---- Journal entry detail modal ---------------------------------------- */ .acc-je-memo { font-size: 13px; line-height: 1.55; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; word-break: break-word; overflow-wrap: anywhere; } .acc-je-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px 16px; margin-top: 14px; } .acc-je-meta > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; } /* .acc-kv-value is right-aligned for key/value rows; here it reads as a stray indent. */ .acc-je-meta .acc-kv-label, .acc-je-meta .acc-kv-value { text-align: left; } .acc-je-balance { margin-top: 12px; padding: 8px 12px; border-radius: 8px; font-size: 12.5px; border: 1px solid var(--border); border-left-width: 3px; } .acc-je-balance.ok { border-left-color: #4A7C3F; background: #F1F7EE; color: #34602B; } .acc-je-balance.bad { border-left-color: #B0432B; background: #FDF0EE; color: #7E2F1E; } .acc-je-line { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; background: var(--bg); } .acc-je-line-top { display: flex; align-items: baseline; gap: 12px; justify-content: space-between; } .acc-je-acct { font-weight: 600; font-size: 13.5px; min-width: 0; } .acc-je-amt { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; font-size: 13.5px; } .acc-je-cr { color: var(--muted); } .acc-je-desc { margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--muted); word-break: break-word; overflow-wrap: anywhere; } /* ---- CRM lead detail: a 255-char tracking URL must not widen the page ---- .detail-item sits in a CSS grid, and grid items default to min-width:auto, so one unbreakable URL pushed its track wider than the viewport and every card on the lead page inherited the horizontal scroll. Same root cause as the accounting ledger fix above. ------------------------------------------- */ .crm-native .grid > *, .crm-native .detail-item, .crm-native .detail-value { min-width: 0; } .crm-native .detail-value, .crm-native .detail-value a { overflow-wrap: anywhere; word-break: break-word; } .crm-native .detail-value a { display: inline-block; max-width: 100%; } /* ---- Settings: per-user CRM mailbox connection ------------------------- */ .mailconn { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border); border-left-width: 3px; font-size: 13px; } .mailconn-ok { border-left-color: #4A7C3F; background: #F1F7EE; } .mailconn-warn { border-left-color: #C99520; background: #FDF6E3; } .mailconn-dot { font-size: 16px; line-height: 1; } .mailconn > div { min-width: 0; } .mailconn-sub { color: var(--muted); font-size: 12px; margin-top: 3px; line-height: 1.45; } .mailconn-btn { margin-left: auto; flex: none; padding: 6px 12px; font-size: 12px; text-decoration: none; white-space: nowrap; } /* ============================================================ Comments feed — reply in place (Messages → Quick access → Comments) Each card is a message from some project's chat thread. The reply box posts back into that same thread, so answering several comments no longer means opening several projects. Grid/flex children get min-width:0 so a long unbroken URL in a comment can't widen the column. ------------------------------------------------------------ */ .cmt-card { border: 1px solid var(--border); border-radius: 14px; padding: 16px; background: var(--surface); transition: border-color .15s; cursor: pointer; min-width: 0; } .cmt-card:hover { border-color: var(--gold); } .cmt-card.unread { border-color: var(--gold); } .cmt-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .cmt-who { font-size: 14px; font-weight: 700; } .cmt-you { font-weight: 400; color: var(--muted); font-size: 12px; } .cmt-meta { font-size: 12px; color: var(--muted); } .cmt-new { font-size: 10px; font-weight: 700; color: var(--gold); background: var(--gold-bg); border-radius: 99px; padding: 2px 8px; flex: none; } .cmt-body { font-size: 13.5px; line-height: 1.5; color: var(--text); background: var(--gold-bg); border-radius: 10px; padding: 12px 14px; border-left: 3px solid var(--gold); min-width: 0; overflow-wrap: anywhere; } .cmt-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; cursor: default; } .cmt-reply-btn, .cmt-open-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 2px 0; cursor: pointer; font-size: 12px; font-weight: 700; color: var(--gold); font-family: inherit; } .cmt-reply-btn:hover, .cmt-open-btn:hover { text-decoration: underline; } .cmt-open-btn { margin-left: auto; } .cmt-count { font-size: 12px; color: var(--muted); } .cmt-replies:empty { display: none; } .cmt-reply-sent { display: flex; gap: 10px; margin-top: 10px; padding-left: 14px; border-left: 2px solid var(--border); cursor: default; } .cmt-reply-text { font-size: 13px; line-height: 1.5; color: var(--text); margin-top: 2px; min-width: 0; overflow-wrap: anywhere; } .cmt-reply-box { margin-top: 12px; cursor: default; } .cmt-reply-input { width: 100%; box-sizing: border-box; resize: vertical; min-height: 62px; padding: 10px 12px; border: 1px solid var(--border-2); border-radius: 10px; background: var(--bg); color: var(--text); font-family: inherit; font-size: 13.5px; line-height: 1.5; } .cmt-reply-input:focus { outline: none; border-color: var(--gold); } .cmt-reply-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; } .cmt-reply-hint { font-size: 12px; color: var(--muted); flex: 1; min-width: 0; } .cmt-reply-send { flex: none; padding: 7px 14px; font-size: 13px; } /* The quoted message a reply is answering. Shown identically in the project chat thread and in the Comments feed, so a reply reads the same in both. */ .msg-quote { display: block; margin-bottom: 7px; padding: 6px 10px; border-left: 3px solid var(--gold); border-radius: 6px; background: rgba(0, 0, 0, .04); font-size: 12px; line-height: 1.45; min-width: 0; overflow-wrap: anywhere; } .msg-quote-who { display: block; font-weight: 700; color: var(--gold-dark, var(--gold)); } .msg-quote-text { display: block; color: var(--muted); } /* ===== SHARED FILES PANEL ===== The Files section on the project, workspace and task pages is one component (renderFilesPanel in projects.js). These rules replace the per-page inline styles that had each surface spacing and titling itself differently. .cat-toggle-body is a flex column, so vertical rhythm comes from ONE row gap here — children must not carry their own margins or the two compound. */ .files-panel-body { padding: 0 20px 18px 20px; gap: 12px; } .files-panel-body > * { margin-top: 0; margin-bottom: 0; } .files-panel .cat-toggle-title { font-size: 18px; font-weight: 700; color: var(--gold); font-family: var(--sans); line-height: 1.2; } .files-panel .cat-toggle-count { font-size: 13px; color: var(--muted); font-weight: 400; } /* Toolbar: New folder / Add link / Upload. Same order and alignment everywhere. */ .files-toolbar { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; } .files-toolbar .btn { flex: none; } .file-list { display: flex; flex-direction: column; gap: 8px; } .file-list:empty { display: none; } .file-list-empty { padding: 4px 0 2px; color: var(--muted); font-size: 14px; } .folder-empty { padding: 6px 0 2px 34px; color: var(--muted); font-size: 13px; } /* Folder blocks stack on the panel's own gap, not their own margins. */ .folder-block + .folder-block { margin-top: 8px; } @media (max-width: 720px) { .cat-toggle-header { padding: 14px 16px; } .files-panel-body { padding: 0 16px 16px 16px; } .files-toolbar { justify-content: stretch; } .files-toolbar .btn { flex: 1 1 auto; justify-content: center; } } /* ===== CHAT COMPOSER ATTACHMENT ===== Hidden until a file is actually picked. The old markup carried both display:none and display:flex in one style attribute, so the later declaration won and an empty strip sat under every composer. */ .chat-attachment-preview { display: none; } .chat-attachment-preview.is-visible { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); font-size: 13px; color: var(--text); } .chat-attachment-chip { display: inline-flex; color: var(--gold); flex: none; } #chat-attachment-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-attachment-clear { flex: none; border: none; background: none; cursor: pointer; color: var(--muted); font-size: 13px; line-height: 1; padding: 4px 6px; border-radius: 6px; transition: all .15s; } .chat-attachment-clear:hover { background: var(--gold-bg); color: var(--gold-dark); } /* ═══════════════════════════════════════════════════════════════════════════ MULTI-LINE TEXT ENTRY Every free-form prose box is a