/* =========================================================================
   views/clients.css — Clients — folders grid, client detail, inline editing, Edit Company modal
   Split from the old monolithic styles/views.css. LOAD ORDER MATTERS:
   the <link> order in Magnet CRM.html / Client App.html reproduces the
   original file order, so the cascade is unchanged — add new rules to the
   matching feature file, not the end of the list.
   ========================================================================= */
/* ---- Projects (client folders) ------------------------------------- */
.crumb-badge { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--primary-600); background: color-mix(in srgb, var(--primary-600) 14%, var(--surface)); padding: 3px 9px; border-radius: var(--radius-full); }
.projects-page { padding: var(--space-5) var(--space-6) var(--space-6); }
.proj-filterseg button { display: inline-flex; align-items: center; gap: var(--space-1-5); white-space: nowrap; }
.proj-filterseg .pf-ico svg { width: 13px; height: 13px; }
.proj-filterseg .pf-count { font-size: var(--text-2xs); font-weight: var(--fw-semibold); padding: 1px 6px; border-radius: var(--radius-full); background: var(--gray-100); color: var(--text-soft); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.proj-filterseg button.active .pf-count { background: var(--primary-50); color: var(--primary-700); }

/* responsive tab overflow ("+N more") */
.main-toolbar > *:not(.spacer) { flex-shrink: 0; }
.segmented.responsive-tabs { flex-wrap: nowrap; min-width: 0; overflow: hidden; }
.rt-more {
  height: 31px; padding: 0 var(--space-2-5); display: inline-flex; align-items: center; gap: var(--space-1);
  border: none; border-radius: var(--radius-sm); background: transparent; cursor: pointer;
  font-family: inherit; font-size: var(--text-md); font-weight: var(--fw-medium); color: var(--text-muted);
  white-space: nowrap; flex-shrink: 0;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .rt-more:hover { color: var(--text); background: var(--seg-active); box-shadow: var(--seg-active-shadow); }
}
.rt-more svg { width: 14px; height: 14px; }
.rt-menu { z-index: var(--z-popover); min-width: 180px; }
.rt-opt { justify-content: flex-start; gap: var(--space-2); }
/* the base .filter-opt svg is right-aligned (margin-left: auto) — here the
   icon leads the label, so pin it left or the icon+label pair centers */
.rt-opt svg { width: 15px; height: 15px; margin-left: 0; }
.rt-opt > span:nth-child(2) { margin-right: auto; }
.rt-opt .pf-count { margin-left: auto; }

.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }
/* When the only content is the empty state, drop the grid/column layout so it
   centres across the full width instead of sitting in the first track. */
.proj-grid:has(> .empty-state), .proj-list:has(> .empty-state) { display: flex; align-items: center; justify-content: center; }
.proj-card { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xs); transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .proj-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--border-strong); }
}
.proj-card--new { animation: projCardNew 2.6s var(--ease); }
@keyframes projCardNew {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary-600) 55%, transparent); border-color: var(--primary-500); }
  12% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-600) 30%, transparent); border-color: var(--primary-500); }
  70% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-600) 22%, transparent); border-color: var(--primary-500); }
  100% { box-shadow: 0 0 0 0 transparent; border-color: var(--border); }
}
.proj-card-top { display: flex; align-items: flex-start; gap: var(--space-3); }
.proj-logo { flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius-lg); display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-lg); font-weight: var(--fw-bold); color: #fff; background: var(--lc, var(--primary-600)); }
.proj-logo.sm { width: 34px; height: 34px; font-size: var(--text-md); border-radius: var(--radius-md); }
.proj-logo.xs { width: 20px; height: 20px; font-size: var(--text-2xs); border-radius: var(--radius-xs); }
/* client folder/card logo showing the uploaded photo (same as their portal pfp) */
/* A client's logo (--logo: the image). A transparent logo is shown WHOLE on a white
   well with a little air round it — cover used to crop a wide mark to the tile and the
   client colour bled through the see-through parts. logoTone (shared/lib) reads each
   image once and marks the tile: "opaque" (a photo or a square graphic: fill the tile
   as before), "light" (a white-on-transparent mark: a dark well so it can be seen). */
.proj-logo--photo { position: relative; overflow: hidden; background: var(--logo-well); box-shadow: inset 0 0 0 1px var(--border-faint); }
.proj-logo--photo::after { content: ""; position: absolute; inset: 11%; background: var(--logo) center / contain no-repeat; }
.proj-logo--photo[data-tone="light"] { background: var(--logo-well-dark); box-shadow: none; }
.proj-logo--photo[data-tone="opaque"] { background: var(--lc, var(--primary-600)); box-shadow: none; }
.proj-logo--photo[data-tone="opaque"]::after { inset: 0; background-size: cover; }
/* a wide / tall graphic with its own ground: whole, on that ground's colour (sampled) */
.proj-logo--photo[data-tone="opaque-wide"] { background: var(--logo-well-auto, var(--logo-well)); box-shadow: none; }
.proj-logo--photo[data-tone="opaque-wide"]::after { inset: 6%; }
.crumb-client { display: inline-flex; align-items: center; gap: 7px; }
.proj-card-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1-5); }
.proj-card-id .badge { align-self: flex-start; }   /* status pill hugs its text, not the card width */
/* display:block + nowrap/ellipsis so long names like "Jim's Window and Pressure
   Cleaning QLD" clip to "Jim's Window an…" instead of wrapping to two lines.
   The pin icon is rendered as a child <span class="proj-pin"> so it inlines
   beside the truncated text when there's room (and clips out when there isn't). */
.proj-name {
  display: block; max-width: 100%; min-width: 0;
  font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--text-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.proj-name .proj-pin { display: inline-flex; vertical-align: middle; margin-left: var(--space-1-5); }
.proj-pin svg { width: 13px; height: 13px; color: var(--primary-600); }
.proj-kebab { flex-shrink: 0; }
.proj-progress { display: flex; flex-direction: column; gap: 7px; }
.proj-progress-top { display: flex; align-items: center; justify-content: space-between; }
.pp-label { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-muted); }
.pp-pct { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.proj-bar { display: block; height: 6px; border-radius: var(--radius-full); background: var(--gray-100); overflow: hidden; }
.proj-bar span { display: block; height: 100%; border-radius: var(--radius-full); background: var(--primary-600); }
.proj-meta { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.proj-meta-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 26px; }
.proj-avatars { display: flex; align-items: center; }
.proj-avatars .avatar { width: 26px; height: 26px; font-size: var(--text-3xs); margin-left: -7px; border: 2px solid var(--surface); }
.proj-avatars .avatar:first-child { margin-left: 0; }
.proj-av-more { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-left: -7px; border-radius: 50%; background: var(--gray-100); color: var(--text-muted); font-size: var(--text-3xs); font-weight: var(--fw-semibold); border: 2px solid var(--surface); }
.proj-assign { display: inline-flex; align-items: center; gap: var(--space-1); height: 26px; padding: 0 10px 0 7px; border-radius: var(--radius-full); border: 1px dashed var(--border-strong); color: var(--text-muted); font-size: var(--text-sm); font-weight: var(--fw-medium); cursor: pointer; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease); }
.proj-assign svg { width: 13px; height: 13px; }
@media (hover: hover) and (pointer: fine) {
  .proj-assign:hover { border-color: var(--primary-400); border-style: solid; color: var(--primary-600); background: color-mix(in srgb, var(--primary-500) 7%, transparent); }
}

.proj-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-xl); overflow-x: auto; background: var(--surface); box-shadow: var(--shadow-xs); }
.proj-row { display: grid; grid-template-columns: 34px 190px 130px minmax(140px, 1fr) auto 40px; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--border); transition: background var(--dur) var(--ease); min-width: 720px; }
.proj-row:last-child { border-bottom: none; }
@media (hover: hover) and (pointer: fine) {
  .proj-row:hover { background: var(--gray-25); }
}
.proj-row-name {
  display: block; max-width: 100%; min-width: 0;
  font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--text-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.proj-row-name .proj-pin { display: inline-flex; vertical-align: middle; margin-left: var(--space-1-5); }
.proj-row-prog { display: flex; align-items: center; gap: var(--space-2); }
.proj-row-prog .proj-bar { flex: 1; }
.proj-viewseg button svg { width: 16px; height: 16px; }

/* ---- Client folder detail ------------------------------------------ */
.crumb-link { display: inline-flex; align-items: center; gap: var(--space-1-5); color: var(--text-muted); font-weight: var(--fw-medium); transition: color var(--dur) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .crumb-link:hover { color: var(--text-strong); }
}
.crumb-link .ico svg { width: 17px; height: 17px; }
.crumb-sep { color: var(--text-soft); margin: 0 var(--space-0-5); }
.proj-avatars.inline { margin-right: var(--space-0-5); }
.proj-avatars.inline .avatar { width: 22px; height: 22px; font-size: 9px; }

.client-detail { padding: 20px var(--space-6) var(--space-6); }
/* first-load skeletons (viewProjects) — page shimmer for a refresh-restored
   client profile + card-shaped grid placeholders */
.cd-skel { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); max-width: 880px; }
.cd-skel-hero { display: flex; align-items: center; gap: var(--space-5); }
.cd-skel-lines { flex: 1; display: flex; flex-direction: column; gap: var(--space-2-5); }
.cd-skel .cd-skel-row { display: block; width: 100%; height: 44px; margin-top: var(--space-3); border-radius: var(--radius-md); }
.proj-card--skel { pointer-events: none; padding: var(--space-4); }
/* let Notes/Files fill the viewport height so drag-select has empty space to grab */
.client-detail:has(#cdNotesSlot), .client-detail:has(#cdFilesSlot) { display: flex; flex-direction: column; min-height: 100%; }
.client-detail:has(#cdNotesSlot) .cd-body, .client-detail:has(#cdFilesSlot) .cd-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#cdNotesSlot, #cdFilesSlot { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#cdNotesSlot > .cnotes, #cdFilesSlot > .cfiles { flex: 1; min-height: 0; }
#cdFilesSlot .cfiles-grid { flex: 1; }
/* Content tab: bounded full-height column, flush like the old Content Hub page —
   the ch-bar + the sharing/scheduling surfaces carry their own padding and
   scroll internally (.cs-list / .sched-body) */
.client-detail:has(#cdContentSlot) { display: flex; flex-direction: column; min-height: 100%; padding: 0; }
.client-detail:has(#cdContentSlot) .cd-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#cdContentSlot { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#cdContentSlot > .content-hub { flex: 1 1 auto; min-height: 0; height: auto; }
/* embedded in the profile's scrolling page the week/month grid has no flex
   ancestor to fill, so it collapsed to its content height — stretch the
   calendar body to the remaining viewport instead */
#cdContentSlot .csched-cal-body { min-height: calc(100vh - 300px); min-height: calc(100dvh - 300px); }
/* client leads table (Lead analytics → expand modal) — this client's own
   enquiries; rows open the shared lead drawer (the modal closes itself first) */
.cl-leads .table-card { overflow-x: auto; flex: none; }
.cl-leads .ctable { min-width: var(--lead-min-w, 760px); }
/* column widths for the 5-col leads table (was inline <col style> in clientTabs) */
.cl-leads .ctable col:nth-child(1) { width: 124px; }
.cl-leads .ctable col:nth-child(2) { width: 210px; }
.cl-leads .ctable col:nth-child(3) { width: 140px; }
.cl-leads .ctable col:nth-child(4) { width: 150px; }
.cl-leads .ctable col:nth-child(5) { width: 180px; }
.cl-leads .ctable tbody tr { cursor: pointer; }
/* the Lead analytics card's right-side controls cluster: range segmented +
   the expand icon-button, grouped as one unit. MUST flex-grow: ResponsiveTabs
   measures available width from its parent, and a shrink-to-fit wrapper would
   always measure exactly the tabs' current width — collapsing them into the
   "+N more" menu even with the whole card free. Growing the wrapper makes its
   clientWidth the true free space (headline stays the stable left side). */
.rchart-head .rchart-head-controls { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); flex: 1 1 auto; min-width: 0; }
.rchart-head-controls .rchart-head-act { flex: none; }
.rchart-head-controls .rchart-head-act svg { width: 15px; height: 15px; }
.rchart-range-mobile { display: none; position: relative; flex: none; }
.rchart-range-mobile > .btn { display: inline-flex; align-items: center; gap: var(--space-1); height: 32px; padding: 0 var(--space-2) 0 var(--space-2-5); font-size: var(--text-sm); font-weight: var(--fw-semibold); }
.rchart-range-mobile > .btn svg { width: 14px; height: 14px; color: var(--text-soft); }
.rchart-range-mobile .filter-menu { left: auto; right: 0; min-width: 112px; }

@media (max-width: 480px) {
  .rchart-head-controls .rchart-range { display: none; }
  .rchart-range-mobile { display: block; }
}

.cd-header { display: flex; align-items: center; gap: var(--space-4); margin: 0 calc(-1 * var(--space-6)) var(--space-5); padding: 0 var(--space-6) var(--space-5); border-bottom: 1px solid var(--border); }
.proj-logo.lg { width: 56px; height: 56px; border-radius: var(--radius-xl); font-size: var(--text-2xl); }
.cd-logo { position: relative; overflow: hidden; cursor: pointer; }   /* the image itself: .proj-logo--photo (whole logo on a well) */
.cd-logo .cd-logo-mark { display: inline-flex; }
.cd-logo-ov { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-0-5); background: rgba(20, 20, 28, 0.56); color: #fff; opacity: 0; transition: opacity var(--dur) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .cd-logo:hover .cd-logo-ov { opacity: 1; }
}
.cd-logo-ov svg { width: 19px; height: 19px; }
.cd-logo-ov span { font-size: var(--text-micro); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.04em; }
.cd-title-wrap { display: flex; flex-direction: column; gap: 5px; }
.cd-title { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-2xl); font-weight: var(--fw-bold); color: var(--text-strong); letter-spacing: -0.01em; }
.cd-edit { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--text-soft); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .cd-edit:hover { background: var(--nav-hover-bg); color: var(--text-strong); }
}
.cd-edit svg { width: 15px; height: 15px; }
.cd-sub { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); }
.cd-sub-dot { color: var(--text-soft); }
.cd-mobile-assign { display: none; }

.cd-tabseg button { display: inline-flex; align-items: center; gap: var(--space-1-5); white-space: nowrap; }
.cd-tabseg button svg { width: 15px; height: 15px; }

/* declined-post attention marks — the client bounced a post back with a note.
   Card/list pill ("N declined") + the pulsing round-! on the Deliverables tab
   chip; same red mark the portal uses for its pending indicator. */
/* identical style + motion to the portal's pending mark (paprPulse twin):
   a fixed-size dot with a soft expanding ring — no scaling */
@keyframes declPulse {
  0% { box-shadow: 0 0 0 0 rgba(208, 56, 39, .35); }
  60% { box-shadow: 0 0 0 6px rgba(208, 56, 39, 0); }
  100% { box-shadow: 0 0 0 0 rgba(208, 56, 39, 0); }
}
.proj-badges { display: inline-flex; align-items: center; gap: var(--space-1-5); flex-wrap: wrap; }
.proj-card-id .proj-badges .badge { align-self: auto; }
.proj-alert { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--danger-600) 9%, var(--surface)); color: var(--danger-600); font-size: var(--text-2xs); font-weight: var(--fw-semibold); white-space: nowrap; flex: 0 0 auto; cursor: pointer; transition: background .14s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .proj-alert:hover { background: color-mix(in srgb, var(--danger-600) 16%, var(--surface)); }
}
.proj-row .proj-alert { margin-left: var(--space-1-5); }
.proj-alert svg, .deliv-alert svg { width: 13px; height: 13px; border-radius: 50%; animation: declPulse 2.2s ease-out infinite; }
.deliv-alert { display: inline-flex; flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) { .proj-alert svg, .deliv-alert svg { animation: none; } }
.cd-overview-actions { display: contents; }
.cd-grid { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(280px, 1fr); gap: var(--space-4); align-items: start; }
.cd-main, .cd-side { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.cd-card { padding: var(--space-5); }
.cd-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.cd-card-head h3 { font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--text-strong); white-space: nowrap; }
.cd-res-add { margin-left: auto; flex-shrink: 0; white-space: nowrap; display: inline-flex; align-items: center; gap: var(--space-1); height: 28px; padding: 0 10px 0 7px; border-radius: var(--radius-full); border: 1px dashed var(--border-strong); color: var(--text-muted); font-size: var(--text-sm); font-weight: var(--fw-medium); }
.cd-brief { font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--text-muted); }

.cd-portal-badges { display: flex; gap: var(--space-1-5); }
.cd-pin { display: flex; flex-direction: column; gap: 7px; margin-bottom: var(--space-4); }
.cd-pin-key { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-muted); }
.cd-pin-field { display: flex; align-items: center; justify-content: space-between; height: 42px; padding: 0 var(--space-2) 0 var(--space-3-5); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-sunk); }
.cd-pin-val { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: var(--text-lg); font-weight: var(--fw-semibold); letter-spacing: 0.22em; color: var(--text-strong); }
.cd-pin-actions { display: flex; gap: var(--space-0-5); }
.cd-pin-actions button { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--text-soft); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .cd-pin-actions button:hover { background: var(--nav-hover-bg); color: var(--text-strong); }
}
.cd-pin-actions svg { width: 15px; height: 15px; }
.cd-pin-actions button.is-copied { color: var(--success-600); }
.cd-pin-actions button.is-copied svg { animation: tick-pop 0.28s var(--ease); }
.cd-portal-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); }

/* client portal — core working area */
.cd-portal-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--space-4); margin-bottom: var(--space-4); }
.cd-side .cd-portal-grid { grid-template-columns: 1fr; gap: var(--space-3); }
/* the packages block ends the card: no trailing margins under it (the card's own padding is the space) */
.cd-portal-grid:last-child { margin-bottom: 0; }
.cd-portal-grid > .cd-pin:last-child { margin-bottom: 0; }
.cd-portal-note { font-size: var(--text-sm); color: var(--text-soft); }
/* the PIN note + Client View sit between the PIN and the packages (full width in the two-column grid) */
.cd-portal-foot--mid { grid-column: 1 / -1; padding-bottom: var(--space-3); border-bottom: 1px solid var(--border); }
@media (max-width: 720px) { .cd-portal-grid { grid-template-columns: 1fr; } }

.cd-info { display: flex; flex-direction: column; }
/* naked muted icon + key on the left, value on the right — the same
   field-row language as the lead drawer's .dw-cell-k (14 Sep, Attio reference) */
.cd-info-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--border-faint); }
/* the Account card: socials as links, brand glyphs in the icon slot */
.ci-link { color: var(--text-strong); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .ci-link:hover { text-decoration: underline; } }
.ci-brand { width: 14px; height: 14px; display: block; }
.cd-info-row:last-child { border-bottom: none; }
.ci-ico { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--text-soft); }
.ci-ico svg { width: 15px; height: 15px; }
.ci-key { font-size: var(--text-sm); color: var(--text-muted); margin-right: auto; }
.ci-val { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-val.is-empty { color: var(--text-soft); font-weight: var(--fw-regular); }

.cd-resources { display: flex; flex-direction: column; gap: var(--space-0-5); }
.cd-resource { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2-5) var(--space-2); border-radius: var(--radius-md); transition: background var(--dur) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .cd-resource:hover { background: var(--gray-25); }
}
.cd-res-ico { flex-shrink: 0; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--gray-100); color: var(--text-muted); }
.cd-res-ico svg { width: 16px; height: 16px; }
.cd-res-ico--brand { background: var(--surface); border: 1px solid var(--border); }
.cd-res-ico--brand svg { width: 17px; height: 17px; }
.cd-res-label { font-size: var(--text-md); font-weight: var(--fw-medium); color: var(--text-strong); flex-shrink: 0; }
.cd-res-link { flex: 1; font-size: var(--text-sm); color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.cd-res-open { flex-shrink: 0; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--text-soft); cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .cd-res-open:hover { background: var(--nav-hover-bg); color: var(--primary-600); }
}
.cd-res-open svg { width: 15px; height: 15px; }
.cd-res-add svg { width: 13px; height: 13px; }

/* ---- inline editing (Attio-style) ---------------------------------- */
.ie { border-radius: var(--radius-sm); cursor: text; transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.ie.is-empty { color: var(--text-soft); }

/* ---- Edit Company modal — body content; shell via window.Modal.open ---- */
.ec-record { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-5); padding-bottom: var(--space-5); border-bottom: 1px solid var(--border); }
.ec-record-top { display: flex; align-items: center; gap: var(--space-3); }
.ec-record-name { font-size: var(--text-2xl); font-weight: var(--fw-bold); color: var(--text-strong); letter-spacing: -0.01em; }
.ec-record-sub { font-size: var(--text-sm); color: var(--text-muted); }
.ec-record-ref { font-weight: var(--fw-semibold); color: var(--text); }
.ec-fields { display: flex; flex-direction: column; gap: var(--space-4); }
.ec-field { display: flex; flex-direction: column; gap: var(--space-1); }
.ec-label { font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--text-soft); }
.ec-input.input { width: 100%; }
textarea.ec-input.input { min-height: 60px; resize: none; overflow: hidden; }

/* Collapsible field groups — Resources + Socials */
.ec-group { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.ec-group-head { display: flex; align-items: center; gap: var(--space-2); padding: 11px 12px; cursor: pointer; list-style: none; user-select: none; transition: background var(--dur) var(--ease); }
.ec-group-head::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) {
  .ec-group-head:hover { background: var(--gray-50); }
}
.ec-group-ico { display: inline-flex; align-items: center; height: 18px; flex-shrink: 0; color: var(--text-soft); }
.ec-group-ico svg, .ec-group-ico img { height: 18px; width: auto; display: block; }
.ec-group-title { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); flex: 1; }
.ec-group-chev { display: inline-flex; color: var(--text-soft); transition: transform var(--dur) var(--ease); }
.ec-group-chev svg { width: 16px; height: 16px; }
.ec-group.is-open .ec-group-chev { transform: rotate(180deg); }
/* Collapse is driven by height keyed to .is-open (set by JS), not native
   <details> — so a closed group is fully hidden at rest. The inner wrapper
   carries the padding/border so the body collapses cleanly to zero height. */
.ec-group-body { overflow: hidden; height: 0; }
.ec-group.is-open > .ec-group-body { height: auto; }
.ec-group-inner { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-1) var(--space-3) var(--space-3-5); border-top: 1px solid var(--border); }
.ec-done { display: inline-flex; align-items: center; gap: 7px; }

/* inline editors ARE the shared .input component; minimal flow tweaks only */
.ie-input.input { min-width: 0; }

/* editable client name */
.cd-title .ie-input.input { width: 300px; max-width: 100%; height: auto; padding: 3px 10px; font: inherit; font-weight: var(--fw-bold); }

/* editable info fields */
.ci-val.ie { padding: 2px 7px; margin: 1px -7px; max-width: calc(100% + 14px); }
@media (hover: hover) and (pointer: fine) {
  .ci-val.ie:hover { background: var(--surface-hover); box-shadow: inset 0 0 0 1px var(--border); }
}
.cd-info-row .ie-input.input { text-align: right; min-width: 160px; }

/* editable client brief */
.cd-brief-empty { color: var(--text-soft); }

/* editable resource links */
.cd-res-right { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.cd-res-right .cd-res-link { flex: 0 1 auto; min-width: 0; }
.cd-res-link.ie { padding: 2px 7px; margin: -2px 0; cursor: text; }
@media (hover: hover) and (pointer: fine) {
  .cd-res-link.ie:hover { background: var(--surface-hover); box-shadow: inset 0 0 0 1px var(--border); color: var(--primary-700); }
}
.cd-res-right .ie-input.input { text-align: left; }

/* saved flash */
.ie-saved { display: inline-flex; align-items: center; gap: var(--space-1); margin-left: auto; font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--success-600); opacity: 0; transition: opacity var(--dur) var(--ease); }
.ie-saved svg { width: 13px; height: 13px; }
.ie-saved.show { opacity: 1; }

.cd-placeholder { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-8) var(--space-6); text-align: center; }
.cd-placeholder .pico { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-lg); background: var(--gray-100); color: var(--text-soft); }
.cd-placeholder .pico svg { width: 24px; height: 24px; }
.cd-placeholder h3 { font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--text-strong); }
.cd-placeholder p { font-size: var(--text-sm); color: var(--text-muted); }

/* ---- mobile filter kebab (⋮ next to the "Clients" crumb) ----
   Desktop never shows it; applyMobileLeadTools relocates it into the topbar
   at ≤640px and the segmented filter row hides (responsive.css). */
.proj-filterdd { display: none; }
.proj-filterdd .filter-opt > span:first-child { display: inline-flex; align-items: center; gap: var(--space-2); flex: 1; text-align: left; }
.proj-filterdd .filter-opt > span:first-child svg { width: 15px; height: 15px; margin-left: 0; color: var(--text-soft); }
.proj-filterdd .filter-opt.active > span:first-child svg { color: var(--primary-600); }
.proj-filterdd .filter-opt .pf-count { color: var(--text-soft); font-weight: var(--fw-semibold); margin-right: var(--space-1-5); }

/* Mobile client-detail header controls are mounted in the toolbar so they can
   reuse the shared FilterSheet mechanics, then relocated into the topbar. */
.client-sectiondd, .client-actionsdd { display: none; }
.client-menu-label { display: inline-flex; align-items: center; gap: var(--space-2-5); flex: 1; text-align: left; }
.client-sectiondd .filter-opt > .client-menu-label > svg,
.client-actionsdd .filter-opt > .client-menu-label > svg {
  width: 17px;
  height: 17px;
  margin-left: 0;
  flex-shrink: 0;
  color: var(--text-soft);
}
.client-sectiondd .filter-opt.active .client-menu-label svg { color: var(--primary-600); }
/* danger row reads red wherever it lives — the old ⋮ kebab menu or the
   section sheet it merged into (28 Aug) */
.filter-opt.client-action-danger,
.filter-opt.client-action-danger .client-menu-label,
.filter-opt.client-action-danger .client-menu-label svg { color: var(--danger-600); }

/* =========================================================================
   Access card (grant links) + Logins card (credential vault) — client
   Integrations tab (clientAccess.js)
   ========================================================================= */
.axr-item { display: flex; align-items: center; gap: var(--space-2); padding: 6px 0 0; font-size: var(--text-sm); }
.axr-item-name { flex: 1; color: var(--text-strong); }
.axr-item-name em { font-style: normal; color: var(--text-soft); font-size: var(--text-xs); }
.axr-state { font-size: var(--text-xs); color: var(--text-soft); display: inline-flex; align-items: center; gap: 5px; }
.axr-state--rep { color: var(--warning-700); font-weight: var(--fw-semibold); }
.axr-state--ok { color: var(--success-700); font-weight: var(--fw-semibold); }
.axr-state--ok svg { width: 14px; height: 14px; }

.axr-creds { display: flex; flex-direction: column; }
.axr-cred { display: flex; align-items: center; gap: var(--space-2-5); padding: 9px 0; border-bottom: 1px solid var(--border-faint, var(--border)); }
.axr-cred:last-child { border-bottom: 0; }
.axr-cred-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.axr-cred-label { font-weight: var(--fw-semibold); color: var(--text-strong); font-size: var(--text-sm); }
.axr-cred-label em { font-style: normal; font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--primary-700); background: var(--primary-50); border-radius: var(--radius-full); padding: 1px 8px; margin-left: var(--space-2); }
.axr-cred-sub { font-size: var(--text-xs); color: var(--text-muted); display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.axr-cred-note { font-size: var(--text-xs); color: var(--text-soft); }
.axr-cred-side { display: inline-flex; align-items: center; gap: var(--space-1-5); flex-shrink: 0; }
.axr-pass { font: 13px ui-monospace, "SF Mono", Menlo, monospace; color: var(--text-muted); }
.axr-pass.is-shown { color: var(--text-strong); background: var(--warning-50); border-radius: var(--radius-xs); padding: 1px 7px; }
.axr-pass--none { opacity: 0.6; font-size: var(--text-xs); }
.axr-mini { display: inline-flex; padding: 0; color: var(--text-soft); cursor: pointer; }
.axr-mini svg { width: 12px; height: 12px; }
.axr-empty { font-size: var(--text-sm); color: var(--text-soft); margin: var(--space-1) 0; }
.axr-addcred { display: flex; gap: var(--space-1-5); flex-wrap: wrap; padding-top: var(--space-2-5); }
.axr-addcred .input { flex: 1 1 140px; min-width: 130px; }

/* ---- Access card v2: standing link bar + Customise modal ---- */
/* first element in the panel — carries the same top gap .intg-note gives the
   other integration cards */
.axr-linkbar { display: flex; align-items: center; gap: var(--space-1-5); margin: var(--space-4) 0 var(--space-1-5); }
.axr-linkinput { flex: 1; min-width: 0; font-size: var(--text-xs); color: var(--text-muted); background: var(--gray-50); }
.axr-willreq { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-soft); padding: var(--space-2-5) 0 var(--space-0-5); }
.axr-brand { width: 18px; height: 18px; flex-shrink: 0; }
.axr-item .axr-brand { margin-right: var(--space-0-5); }

/* Customise modal */
.axm-sub { font-size: var(--text-sm); color: var(--text-muted); margin: 0 0 var(--space-3); }
.axm-rows { display: flex; flex-direction: column; gap: var(--space-2); }
.axm-row { display: flex; align-items: center; gap: 11px; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 11px 12px; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.axm-row.on { border-color: var(--primary-300); background: color-mix(in srgb, var(--primary-600) 3%, var(--surface)); }
.axm-brand { width: 22px; height: 22px; flex-shrink: 0; }
.axm-name { flex: 1; min-width: 0; font-size: var(--text-sm); color: var(--text); }
.axm-name b { color: var(--text-strong); }
.axm-name small { display: block; font-size: var(--text-xs); color: var(--text-soft); }

/* Google Ads locked until its manager ID exists */
.axm-row.is-disabled { opacity: 0.55; }
.axm-row.is-disabled .axm-brand { filter: grayscale(1); }
.axm-row.is-disabled .axm-switch { cursor: not-allowed; }
.axm-blocked { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--danger-600); margin: var(--space-2) 0 0; }

/* plan sheet Start date: button-styled field + anchored house calendar */
.plan-datebtn { display: flex; align-items: center; gap: var(--space-2); width: 100%; cursor: pointer; text-align: left; font: inherit; color: var(--text-strong); }
.plan-datebtn svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--text-soft); }
.plan-datebtn.is-empty span { color: var(--text-soft); }
/* surface + popIn come from the components popover tier list */
.plan-datepop { position: fixed; z-index: calc(var(--z-popover) + 20); width: 280px; padding: var(--space-2); }
.plan-datepop .cal-area, .plan-datepop .cal-area--date { min-height: 0; }

/* client record → Business profile card (clientBusiness): the shared .bp-list, tighter rows */
/* Client details modal: two sections — the business profile (theirs, shared
   with the portal) and our side (internal), each with a head + a pill */
.ec-section { margin-top: var(--space-5); }
.ec-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.ec-section-head > span:first-child { display: grid; gap: 2px; min-width: 0; }
.ec-section-head b { font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--text-strong); }
.ec-section-head small { font-size: var(--text-xs); color: var(--text-soft); }
.ec-section-head .badge { flex-shrink: 0; margin-top: 2px; }
.ec-profile .bp-row { padding: var(--space-3) 0; }
.ec-profile .bp-row:first-child { padding-top: 0; }
.ec-section--ours { padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-sunk); }
.ec-section--ours .ec-fields { margin: 0; }
.ec-section--ours .ec-group, .ec-section--ours .input { background: var(--surface); }
.cd-biz .cd-card-head { align-items: flex-start; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.cd-biz-sub { font-size: var(--text-xs); color: var(--text-soft); }
.cd-biz .bp-row { padding: var(--space-3) 0; }

/* client record → Client portal card → Packages (clientPortal): one switch row per package */
.cd-pk { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-sunk); }
.cd-setup:empty { display: none; }
/* in the main column, under Lead analytics: dressed as one of the record's cards */
.cd-setup--main .setup-card { padding: var(--space-5); border-radius: var(--radius-xl); }
.cd-setup--main .setup-card--admin .setup-title b { font-size: var(--text-md); }
.cd-setup--main .setup-card--admin .setup-segs { max-width: 160px; }
.setup-toggle { flex-shrink: 0; }
.setup-toggle svg { width: 14px; height: 14px; }
.setup-card--admin .setup-head .badge { flex-shrink: 0; }
.cd-pk-row { display: flex; align-items: center; gap: var(--space-2-5); padding: var(--space-2) var(--space-3); cursor: pointer; }
.cd-pk-row + .cd-pk-row { border-top: 1px solid var(--border-faint); }
.cd-pk-text { display: grid; gap: 1px; min-width: 0; }
.cd-pk-text b { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-strong); }
.cd-pk-text small { font-size: var(--text-xs); color: var(--text-soft); }