/* ============================================================ CRM application shell + page styling. Builds on the themeable --tcc-* component classes (teamcore-components.css) and the --crm-* / --tcc-* palette (theme.css). No inline styles in the Razor markup — everything reads from here so light / dark theming is a single attribute flip on . ============================================================ */ html, body { margin: 0; height: 100%; /* The shell fixes itself to the viewport: the body never scrolls, so there is exactly one scrollbar on any page — .crm-main below is the single scroll region (and on a grid page the grid fills it, keeping its header pinned). */ overflow: hidden; font-family: var(--crm-font); background: var(--crm-bg); color: var(--crm-text); -webkit-font-smoothing: antialiased; } body { transition: background-color .2s ease, color .2s ease; } a { color: var(--crm-accent); text-decoration: none; } a:hover { text-decoration: underline; } * { box-sizing: border-box; } /* ------------------------------- App bar + side nav ------------------------------- The nav links live in a collapsible left drawer (team.core's : a mini icon-rail when collapsed, expanding to show labels). The app bar (brand + tools) stays across the top; the drawer is pinned below it via --tcc-drawer-top, and the page content clears the rail via .crm-main's left margin. The --tcc-drawer-* / --tcc-nav-* tokens map the generic drawer onto the CRM palette so it themes with the single data-theme flip. */ :root { --crm-appbar-height: 3.25rem; --tcc-drawer-top: var(--crm-appbar-height); --tcc-drawer-bg: var(--crm-nav-bg); --tcc-drawer-mini-width: 3.5rem; --tcc-drawer-width: 15rem; --tcc-nav-fg: var(--crm-text-muted); --tcc-nav-hover-bg: rgba(127, 127, 127, .1); --tcc-nav-divider: var(--crm-nav-border); } .crm-appbar { position: sticky; top: 0; /* Above the drawer (1100) and its backdrop (1099) so the brand + tools stay usable while the menu is open. */ z-index: 1101; display: flex; align-items: center; gap: .35rem; height: var(--crm-appbar-height); padding: 0 1.25rem 0 .5rem; background: var(--crm-nav-bg); border-bottom: 1px solid var(--crm-nav-border); box-shadow: var(--crm-shadow-nav); } .crm-appbar__menu { color: var(--crm-text-muted); flex: none; } .crm-appbar__menu:hover { color: var(--crm-accent); } .crm-appbar__brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; font-size: 1.05rem; letter-spacing: .01em; color: var(--crm-text); } .crm-appbar__brand:hover { text-decoration: none; } .crm-appbar__mark { width: 1.5rem; height: 1.5rem; flex: none; color: var(--crm-accent); } .crm-appbar__brand-em { color: var(--crm-accent); } .crm-appbar__spacer { margin-left: auto; } .crm-appbar__tools { display: inline-flex; align-items: center; gap: .9rem; } /* The nav menu inside the drawer: give each link a little breathing room and a fixed icon box so the collapsed rail is a tidy column of centred icons. */ .crm-navmenu { padding-top: .25rem; } /* The nav icons are stroke/outline SVGs; override .tcc-icon's fill:currentColor (which would fill the closed shapes into solid blobs) and size them for the rail. */ .crm-navmenu .tcc-navlink__icon { width: 1.35rem; height: 1.35rem; fill: none; } /* Review has items waiting: gently pulse the link red so it's noticed without shouting. Honours reduced-motion. */ .crm-navlink--alert { animation: crm-review-pulse 2s ease-in-out infinite; border-radius: var(--crm-radius, .5rem); } .crm-navlink--alert.tcc-navlink--active { animation: none; } @keyframes crm-review-pulse { 0%, 100% { color: inherit; background-color: transparent; } 50% { color: #f87171; background-color: rgba(220, 38, 38, .14); } } @media (prefers-reduced-motion: reduce) { .crm-navlink--alert { animation: none; color: #f87171; } } /* Theme toggle: one button, shows the icon for the theme you'd switch TO. CSS swaps the glyph off [data-theme]. */ .crm-theme-toggle { color: var(--crm-text-muted); } .crm-theme-toggle:hover { color: var(--crm-accent); } .crm-theme-toggle .crm-icon-sun { display: none; } .crm-theme-toggle .crm-icon-moon { display: inline-flex; } :root[data-theme="dark"] .crm-theme-toggle .crm-icon-sun { display: inline-flex; } :root[data-theme="dark"] .crm-theme-toggle .crm-icon-moon { display: none; } /* ------------------------------- Page ------------------------------- */ /* Left margin clears the collapsed icon-rail; the drawer expands OVER the content (with a backdrop) so opening it never reflows the page. The app bar is fixed height at the top, so main takes the rest of the viewport and is the single scroll region: a normal (flowing) page scrolls here; a grid page (see .crm-page--fill) hands the scroll to the grid so its header stays pinned. Either way there is one scrollbar, never two. */ .crm-main { max-width: 100%; margin-left: var(--tcc-drawer-mini-width); padding: 1.75rem 1.5rem 3rem; height: calc(100dvh - var(--crm-appbar-height)); overflow-y: auto; display: flex; flex-direction: column; } /* A grid/list page that should fill the viewport and let its grid be the sole scroll region. The page's title, intro and toolbar stay pinned at the top; the DataGrid (with Fill="true") grows to fill the rest and scrolls. */ .crm-page--fill { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .crm-page__title { margin: 0 0 .25rem; font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; } .crm-page__intro { margin: 0 0 1.5rem; color: var(--crm-text-muted); max-width: 70ch; line-height: 1.5; } .crm-section-title { margin: 0 0 .75rem; font-size: 1.15rem; font-weight: 700; } /* Toolbar: the row of inputs / actions above a list. */ .crm-toolbar { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.25rem; } /* The action cluster (New deal / Refresh …) sits at the right, split from the filters by a divider so a filter toggle is never mistaken for a command. */ .crm-toolbar__actions { display: inline-flex; align-items: center; gap: .6rem; margin-left: auto; padding-left: .85rem; border-left: 1px solid var(--crm-border); } /* A filter chip is a toggle, not a command: a dashed pill when off, a solid gold pill when on — deliberately unlike the rectangular .tcc-btn action buttons. */ .crm-chip { display: inline-flex; align-items: center; gap: .35rem; font: inherit; font-size: .82rem; line-height: 1; padding: .38rem .72rem; border: 1px dashed var(--crm-border); border-radius: 999px; background: transparent; color: var(--crm-text-muted); cursor: pointer; transition: background .12s ease, border-color .12s ease, color .12s ease; } .crm-chip:hover:not(:disabled) { background: var(--crm-surface-2); color: var(--crm-text, inherit); } .crm-chip--active { border-style: solid; border-color: #b8860b; background: rgba(184, 134, 11, .16); color: var(--crm-text, inherit); font-weight: 600; } .crm-chip:disabled { opacity: .6; cursor: not-allowed; } /* Phones: keep the app bar to essentials (the brand label collapses to just the mark) and tighten the gutters. The nav stays the same collapsible rail + drawer as desktop. Grids and the pipeline board keep their own scroll. */ @media (max-width: 768px) { .crm-appbar { padding: 0 .6rem; } .crm-appbar__brand span { display: none; } .crm-appbar__tools { gap: .55rem; } .crm-main { padding: 1rem .85rem 2.5rem; margin-left: var(--tcc-drawer-mini-width); } .crm-page__title { font-size: 1.35rem; } .crm-toolbar { gap: .5rem; } } /* ------------------------------- Inputs ------------------------------- */ /* Standalone field chrome (the .tcc-field__* set is built for the full label+control component; these mirror its look for the bare inputs the CRM screens use, reading the same --tcc-field-* tokens so they theme identically). */ .crm-input, .crm-select, .crm-textarea { font: inherit; font-size: .92rem; color: var(--tcc-field-fg); background: var(--tcc-field-bg); border: 1px solid transparent; border-bottom: 1px solid var(--tcc-field-line); border-radius: var(--tcc-radius-s) var(--tcc-radius-s) 0 0; padding: .5rem .7rem; outline: none; color-scheme: var(--tcc-field-scheme, light); transition: background-color .15s ease, border-color .15s ease; } .crm-input::placeholder, .crm-textarea::placeholder { color: var(--tcc-field-placeholder); } .crm-input:hover:not(:disabled), .crm-select:hover:not(:disabled), .crm-textarea:hover:not(:disabled) { background: var(--tcc-field-bg-hover); } .crm-input:focus, .crm-select:focus, .crm-textarea:focus { border-bottom: 2px solid var(--tcc-field-accent); padding-bottom: calc(.5rem - 1px); } .crm-input:disabled, .crm-select:disabled, .crm-textarea:disabled { opacity: .6; cursor: not-allowed; } .crm-select { cursor: pointer; } .crm-textarea { resize: vertical; min-height: 5rem; width: 100%; } .crm-field-label { display: block; margin-bottom: 1.1rem; font-size: .9rem; } .crm-field-label > span { display: block; margin-bottom: .3rem; color: var(--crm-text-muted); font-size: .8rem; } /* Content dialogs (create/edit Product, Deal, Workspace) — wider and roomier than the team.core 440px default, to use the available screen space in this dense app. team.core's base .tcc-dialog stays generic; this overrides only here (app.css loads after the component stylesheet). Hosted/confirm dialogs keep their own width:auto/fullscreen. */ .tcc-dialog { width: min(760px, 100%); padding: 1.85rem 2.25rem; } .tcc-dialog__title { font-size: 1.4rem; margin-bottom: 1.1rem; } .tcc-dialog__body { font-size: .95rem; } .tcc-dialog__actions { margin-top: 1.75rem; } /* Detail / edit dialogs that replace the old right-hand drawers: use the available screen width (the drawer was a cramped 28rem). The team.core base caps height and scrolls the body, so a long detail dialog stays on screen. */ /* Detail dialogs are the app's primary way to inspect an entity and its relationships, so they are wide and grow with their content (a rich entity's people/deals/activity). The team.core base caps height at the viewport and scrolls the body only when content genuinely overflows — so a sparse entity stays compact with no scroll, a rich one fills the screen, and neither shows a scrollbar next to empty space. */ .tcc-dialog.crm-dialog--wide { width: min(1280px, 94vw); } /* A compact metadata header inside a detail dialog: the entity's key facts (email, current org, parties) under the title, before the activity timeline. Rendered at the top of the dialog body. */ .crm-detail-head { margin: -.25rem 0 1rem; color: var(--crm-text-muted); font-size: .92rem; display: flex; flex-wrap: wrap; gap: .15rem 1rem; } .crm-detail-head__item { display: inline-flex; gap: .35rem; } .crm-detail-head__label { color: var(--crm-text-muted); } /* Detail dialog body: the entity's title, then a two-column layout — its fields + relationships on the left, the activity timeline on the right — so a dense entity shows at a glance. Collapses to one column on a narrow dialog. */ .crm-detail-title { font-size: 1.4rem; font-weight: 700; margin: 0 0 .1rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .crm-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.75rem; align-items: start; } @media (max-width: 900px) { .crm-detail { grid-template-columns: 1fr; } } .crm-detail__main { min-width: 0; } .crm-detail__side { min-width: 0; } .crm-detail__section { margin-bottom: 1.25rem; } .crm-detail__section:last-child { margin-bottom: 0; } /* Definition-list of an entity's stored fields. */ .crm-facts { display: grid; grid-template-columns: max-content 1fr; gap: .25rem .75rem; margin: .35rem 0 0; font-size: .9rem; } .crm-facts dt { color: var(--crm-text-muted); } .crm-facts dd { margin: 0; overflow-wrap: anywhere; } /* A list of related entities (people in an org, an org's deals, …): a name link + a small trailing note. */ .crm-rel-list { list-style: none; margin: .35rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; } .crm-rel-list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .35rem .55rem; border: 1px solid var(--crm-border); border-radius: var(--tcc-radius-s); background: var(--crm-surface-2); font-size: .9rem; } /* ------------------------------- Cards ------------------------------- */ .crm-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; } /* Quick-link / summary card with a hover lift. */ .crm-tile { display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem 1.25rem; background: var(--crm-surface); border: 1px solid var(--crm-border); border-radius: var(--tcc-radius); color: var(--crm-text); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } a.crm-tile:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--tcc-shadow-s); border-color: var(--crm-accent); } .crm-tile__title { font-weight: 700; font-size: 1.05rem; } .crm-tile__desc { color: var(--crm-text-muted); font-size: .88rem; line-height: 1.45; } /* Plain bordered panel (Dynamics import "last run"). */ .crm-card { background: var(--crm-surface); border: 1px solid var(--crm-border); border-radius: var(--tcc-radius); padding: 1rem 1.25rem; } .crm-card__title { font-weight: 600; font-size: 1rem; margin: 1.5rem 0 .6rem; } /* One candidate row in the Dynamics dedup review: name on the left, "Link to this" on the right. */ .crm-dyn-candidate { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .2rem 0; } /* The Dynamics review cells hold multi-line decision UIs (a stacked candidate list, a pair of action buttons), so override the DataGrid's default single-line nowrap: let them wrap and top-align against the tallest cell in the row. */ .crm-dyn .tcc-grid__table td { white-space: normal; vertical-align: top; } .crm-dyn-actions { display: flex; gap: .4rem; } /* Stat figure (Usage). */ .crm-stats { display: flex; gap: 1.25rem; flex-wrap: wrap; margin: 1rem 0 1.5rem; } .crm-stat { min-width: 11rem; padding: 1.1rem 1.25rem; background: var(--crm-surface); border: 1px solid var(--crm-border); border-radius: var(--tcc-radius); } .crm-stat__value { font-size: 2.1rem; font-weight: 700; line-height: 1; color: var(--crm-accent); } .crm-stat__label { margin-top: .4rem; color: var(--crm-text-muted); font-size: .85rem; } /* ------------------------------- Tables ------------------------------- */ .crm-table-wrap { overflow-x: auto; border: 1px solid var(--crm-border); border-radius: var(--tcc-radius-s); background: var(--crm-surface); } .crm-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .92rem; } .crm-table thead th { text-align: left; padding: .7rem .9rem; background: var(--tcc-grid-head-bg); color: var(--tcc-grid-muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; border-bottom: 1px solid var(--crm-border); } .crm-table tbody td { padding: .65rem .9rem; border-bottom: 1px solid var(--crm-border); vertical-align: top; } .crm-table tbody tr:last-child td { border-bottom: 0; } .crm-table tbody tr:nth-child(even) { background: var(--tcc-grid-stripe); } .crm-table tbody tr:hover { background: var(--tcc-grid-hover); } .crm-table code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .85em; color: var(--crm-text-muted); } .crm-cell-num { text-align: right; font-variant-numeric: tabular-nums; } /* ------------------------------- Misc ------------------------------- */ .crm-muted { color: var(--crm-text-muted); } /* Optimistic-row status pills (OptimisticStatus). Reuse the themed banner tokens so they read in light + dark. */ .crm-badge { display: inline-block; margin-left: .5rem; padding: .05rem .45rem; border-radius: 999px; font-size: .7rem; font-weight: 600; vertical-align: middle; } .crm-badge--pending { background: var(--crm-accent-soft); color: var(--crm-accent); } .crm-badge--unconfirmed { background: var(--tcc-banner-warning-bg); color: var(--tcc-banner-warning-fg); } .crm-badge--failed { background: var(--tcc-banner-urgent-bg); color: var(--tcc-banner-urgent-fg); } /* Connectivity pill in the app bar (offline / syncing queued changes). */ .crm-conn { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; } .crm-conn::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; } .crm-conn--offline { background: var(--tcc-banner-urgent-bg); color: var(--tcc-banner-urgent-fg); } .crm-conn--syncing { background: var(--crm-accent-soft); color: var(--crm-accent); } /* Inconspicuous app-bar icon link (e.g. the Sync & offline page). */ .crm-appbar__icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 7px; color: var(--crm-text-muted); } .crm-appbar__icon:hover { color: var(--crm-accent); background: rgba(127, 127, 127, .1); text-decoration: none; } .crm-appbar__icon.active { color: var(--crm-accent); } .crm-appbar__icon .tcc-icon { width: 1.2rem; height: 1.2rem; } .crm-empty { color: var(--crm-text-muted); padding: 1.5rem 0; } .crm-loading { color: var(--crm-text-muted); } .crm-stack { display: flex; flex-direction: column; gap: 1rem; } /* Banner spacing when stacked above content. */ .crm-banner-gap { margin-bottom: 1rem; } /* ------------------------- Deals pipeline board ------------------------- */ .crm-board { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 1rem; align-items: flex-start; } .crm-board__col { flex: 1 1 15rem; min-width: 14rem; max-width: 22rem; background: var(--crm-surface-2); border: 1px solid var(--crm-border); border-radius: var(--tcc-radius-s); } .crm-board__head { padding: .55rem .8rem; border-top: 4px solid var(--crm-accent); border-radius: var(--tcc-radius-s) var(--tcc-radius-s) 0 0; font-weight: 700; font-size: .95rem; } .crm-board__count { color: var(--crm-text-muted); font-weight: 500; } .crm-board__body { display: flex; flex-direction: column; gap: .5rem; padding: .55rem; min-height: 3.5rem; } .crm-deal-card { background: var(--crm-surface); border: 1px solid var(--crm-border); border-radius: 6px; padding: .65rem .7rem; cursor: grab; transition: box-shadow .12s ease, border-color .12s ease; } .crm-deal-card:hover { box-shadow: var(--tcc-shadow-s); border-color: var(--crm-accent); } .crm-deal-card__title { font-weight: 600; } .crm-deal-card__value { font-size: .85rem; margin-top: .2rem; } .crm-deal-card__meta { font-size: .8rem; color: var(--crm-text-muted); } /* Inline labelled field (e.g. the Pipeline date-range inputs in the toolbar). */ .crm-inline-field { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--crm-text-muted); } .crm-inline-field .crm-input { width: auto; } /* Pipeline aggregate stats strip (deal count + ARR/TCV/Year-1 across the shown deals). */ .crm-pipeline-stats { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin: 0 0 1rem; padding: .6rem .8rem; background: var(--crm-surface-2); border: 1px solid var(--crm-border); border-radius: var(--tcc-radius-s); } .crm-pipeline-stats__count { font-weight: 700; } /* ------------------------- Revenue streams ------------------------- */ .crm-revenue { display: flex; flex-direction: column; gap: .6rem; } .crm-revenue__stream { border: 1px solid var(--crm-border); border-radius: var(--tcc-radius-s); padding: .5rem .55rem; background: var(--crm-surface-2); } .crm-revenue__stream-head { display: flex; gap: .4rem; align-items: center; margin-bottom: .4rem; } .crm-revenue__segments { width: 100%; border-collapse: collapse; font-size: .82rem; table-layout: fixed; } .crm-revenue__segments th { text-align: left; font-weight: 600; color: var(--crm-text-muted); font-size: .72rem; padding: 0 .3rem .2rem; } .crm-revenue__segments td { padding: .12rem .3rem; } .crm-revenue__segments .crm-input, .crm-revenue__segments .crm-select { width: 100%; padding: .2rem .35rem; } /* Fixed columns so the "Type" select always fits "Recurring"/"One-off" and the row never overflows the dialog. */ .crm-revenue__segments th:nth-child(1), .crm-revenue__segments td:nth-child(1), .crm-revenue__segments th:nth-child(2), .crm-revenue__segments td:nth-child(2) { width: 4rem; } .crm-revenue__segments th:nth-child(4), .crm-revenue__segments td:nth-child(4) { width: 7rem; } .crm-revenue__segments th:nth-child(5), .crm-revenue__segments td:nth-child(5) { width: 1.8rem; } .crm-revenue__foot { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; justify-content: space-between; } .crm-revenue__preview { font-size: .82rem; color: var(--crm-text-muted); } .crm-revenue__preview strong { color: var(--crm-accent); } /* Read-only headline badges (deal cards, product rows). */ .crm-revenue-badge { display: inline-block; margin: .1rem .3rem .1rem 0; padding: .05rem .45rem; border-radius: 999px; font-size: .72rem; font-weight: 600; background: var(--crm-surface-2); border: 1px solid var(--crm-border); color: var(--crm-text-muted); } .crm-revenue-badge--arr { background: var(--crm-accent-soft); color: var(--crm-accent); border-color: transparent; } .crm-revenue-badge--muted { font-weight: 500; } /* Per-stream breakdown (Products grid, where a product can hold several named streams) — one row per stream, with an "All streams" total row when there is more than one. */ .crm-revenue-breakdown { display: flex; flex-direction: column; gap: .25rem; } .crm-revenue-breakdown__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .5rem; } .crm-revenue-breakdown__row--total { margin-top: .15rem; padding-top: .25rem; border-top: 1px dashed var(--crm-border); } .crm-revenue-breakdown__name { min-width: 7rem; font-size: .8rem; font-weight: 600; color: var(--crm-text); } .crm-revenue-breakdown__row--total .crm-revenue-breakdown__name { color: var(--crm-text-muted); font-weight: 700; } /* Deal revenue-streams editor: linked-to-product rows + an add-from-product picker, above the inline (custom) editor. */ .crm-deal-revenue { display: flex; flex-direction: column; gap: .5rem; } .crm-deal-revenue__row { padding: .4rem .5rem; border: 1px solid var(--crm-border); border-radius: var(--tcc-radius-s); background: var(--crm-surface-2); } .crm-deal-revenue__row-head { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; } .crm-deal-revenue__name { font-weight: 600; } .crm-deal-revenue__row-actions { display: inline-flex; gap: .3rem; margin-left: auto; } .crm-deal-revenue__add { padding: .5rem; border: 1px dashed var(--crm-border); border-radius: var(--tcc-radius-s); } .crm-deal-revenue__picker { width: 100%; margin-top: .4rem; border-collapse: collapse; } .crm-deal-revenue__picker td { padding: .25rem .35rem; border-top: 1px solid var(--crm-border); vertical-align: middle; } .crm-deal-revenue__picker td.crm-deal-revenue__row-actions { white-space: nowrap; } /* Owner picker (deal create dialog + drawer) and the ownerless-deal warning on a board card. */ .crm-owner-picker { display: flex; flex-wrap: wrap; gap: .35rem .75rem; } .crm-owner-option { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; } .crm-deal-card__owners { font-weight: 600; } .crm-deal-card--warning { border-left: 3px solid var(--tcc-banner-warning-border, #f59e0b); } /* Per-stage ARR/TCV totals under each board column header. */ .crm-board__totals { font-size: .72rem; font-weight: 600; color: var(--crm-text-muted); margin-top: .2rem; } /* The full imported body on the Review item details page — scrollable, preserving line breaks, text-only (safe). */ .crm-import-body { max-height: 28rem; overflow: auto; white-space: pre-wrap; word-break: break-word; padding: .6rem .8rem; background: var(--crm-surface-2); border: 1px solid var(--crm-border); border-radius: var(--tcc-radius-s); font-size: .85rem; } /* Scrollable checkbox list for picking organisations/people to link a Review item to. */ .crm-link-picker { max-height: 14rem; overflow: auto; display: flex; flex-direction: column; gap: .2rem; margin-top: .35rem; } /* ------------------------- Deal detail drawer ------------------------- */ .crm-drawer-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 40; } .crm-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(28rem, 100vw); background: var(--crm-surface); border-left: 1px solid var(--crm-border); box-shadow: var(--tcc-shadow-s); z-index: 41; display: flex; flex-direction: column; } .crm-drawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--crm-border); } .crm-drawer__title { margin: 0; font-size: 1.15rem; font-weight: 700; } .crm-drawer__sub { color: var(--crm-text-muted); font-size: .85rem; margin-top: .15rem; } .crm-drawer__body { padding: 1rem 1.25rem; overflow-y: auto; } .crm-drawer__row { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; font-size: .92rem; } .crm-drawer__label { color: var(--crm-text-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; } .crm-drawer__sep { border: 0; border-top: 1px solid var(--crm-border); margin: 1rem 0; } .crm-drawer__field { margin-bottom: 1rem; } .crm-drawer__edit { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; } .crm-drawer__actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; } .crm-drawer__people { list-style: none; margin: .25rem 0 0; padding: 0; } .crm-drawer__people li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .25rem 0; font-size: .9rem; } .crm-drawer__footnote { font-size: .78rem; margin-top: 1rem; } /* Activity timeline (notes + logged calls) inside the drawer. */ .crm-timeline { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; } .crm-timeline__item { border: 1px solid var(--crm-border); border-radius: var(--tcc-radius-s); padding: .55rem .65rem; background: var(--crm-surface-2); } .crm-timeline__head { display: flex; align-items: center; gap: .5rem; } .crm-timeline__kind { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--crm-accent); } .crm-timeline__meta { flex: 1; font-size: .78rem; color: var(--crm-text-muted); } .crm-timeline__body { margin-top: .35rem; font-size: .9rem; white-space: pre-wrap; } /* Sanitised imported HTML (email / meeting notes): render as rich text that reads in the app theme and never overflows its container. Author colours/fonts were already stripped by the sanitiser; here we normalise flow and wrapping so a pasted mail body wraps instead of forcing a horizontal scroll. */ .crm-richtext { margin-top: .35rem; font-size: .9rem; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; } .crm-richtext p, .crm-richtext ul, .crm-richtext ol, .crm-richtext blockquote, .crm-richtext table { margin: 0 0 .5rem; max-width: 100%; } .crm-richtext :last-child { margin-bottom: 0; } .crm-richtext img { max-width: 100%; height: auto; } .crm-richtext a { color: var(--crm-accent); } .crm-richtext table { display: block; overflow-x: auto; border-collapse: collapse; } .crm-richtext td, .crm-richtext th { border: 1px solid var(--crm-border); padding: .2rem .4rem; } .crm-richtext blockquote { border-left: 3px solid var(--crm-border); padding-left: .6rem; color: var(--crm-text-muted); } /* Tasks list inside the drawer. */ .crm-tasklist { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; } .crm-tasklist__item { display: flex; align-items: center; gap: .55rem; border: 1px solid var(--crm-border); border-radius: var(--tcc-radius-s); padding: .4rem .55rem; background: var(--crm-surface-2); } .crm-tasklist__main { flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; } .crm-tasklist__title { font-size: .9rem; } .crm-tasklist__meta { font-size: .78rem; color: var(--crm-text-muted); } .crm-tasklist__item--done .crm-tasklist__title { text-decoration: line-through; color: var(--crm-text-muted); } /* ------------------------- Login gate (index.html) ------------------------- */ /* The markup sets these inline too (so the splash looks right even if this file fails to load); kept here so the gate honours the active theme once the CSS is in. */ #login-gate { background: var(--crm-bg) !important; color: var(--crm-text); } #login-button { background: var(--crm-accent) !important; }