/* =========================================================================
   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: 999px; }
.projects-page { padding: 20px var(--space-6) var(--space-6); }
.proj-filterseg button { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.proj-filterseg .pf-ico svg { width: 13px; height: 13px; }
.proj-filterseg .pf-count { font-size: 11px; font-weight: var(--fw-semibold); padding: 1px 6px; border-radius: 999px; 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 10px; display: inline-flex; align-items: center; gap: 4px;
  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: 11px; border-radius: var(--radius-xs); }
/* client folder/card logo showing the uploaded photo (same as their portal pfp) */
.proj-logo--photo { background-size: cover; background-position: center; overflow: hidden; }
.crumb-client { display: inline-flex; align-items: center; gap: 7px; }
.proj-card-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.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: 6px; }
.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: 999px; background: var(--gray-100); overflow: hidden; }
.proj-bar span { display: block; height: 100%; border-radius: 999px; 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; }
.pm-key { font-size: var(--text-sm); color: var(--text-soft); }
.pm-val { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text); }
.proj-avatars { display: flex; align-items: center; }
.proj-avatars .avatar { width: 26px; height: 26px; font-size: 10px; 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: 10px; font-weight: var(--fw-semibold); border: 2px solid var(--surface); }
.proj-assign { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px 0 7px; border-radius: 999px; 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: 12px 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: 6px; }
.proj-row-prog { display: flex; align-items: center; gap: var(--space-2); }
.proj-row-prog .proj-bar { flex: 1; }
.proj-row-deadline { font-size: var(--text-sm); color: var(--text-muted); }

.proj-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-8) var(--space-6); text-align: center; }
.proj-empty .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); }
.proj-empty .pico svg { width: 24px; height: 24px; }
.proj-empty h3 { font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--text-strong); }
.proj-empty p { font-size: var(--text-sm); color: var(--text-muted); }
.proj-viewseg button svg { width: 16px; height: 16px; }

/* ---- Client folder detail ------------------------------------------ */
.crumb-link { display: inline-flex; align-items: center; gap: 6px; 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 2px; }
.btn-ghost-danger { color: var(--danger-600); background: transparent; border-color: transparent; box-shadow: none; width: var(--btn-height); padding: 0; }
@media (hover: hover) and (pointer: fine) {
  .btn-ghost-danger:hover { background: var(--danger-bg); }
}
.proj-avatars.inline { margin-right: 2px; }
.proj-avatars.inline .avatar { width: 22px; height: 22px; font-size: 9px; }

.client-detail { padding: 20px var(--space-6) var(--space-6); }
/* 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; }
/* 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); }
.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: 4px; height: 32px; padding: 0 8px 0 10px; 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; background-size: cover; background-position: center; }
.cd-logo .cd-logo-mark { display: inline-flex; }
.cd-logo-ov { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; 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: 9px; 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: 6px; 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: 6px; 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: 999px; 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); }
.proj-alert:hover { background: color-mix(in srgb, var(--danger-600) 16%, var(--surface)); }
.proj-row .proj-alert { margin-left: 6px; }
.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: 4px; height: 28px; padding: 0 10px 0 7px; border-radius: 999px; 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: 6px; }
.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 8px 0 14px; 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: 2px; }
.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: pinTickPop 0.28s var(--ease); }
@keyframes pinTickPop { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.18); } 100% { transform: scale(1); opacity: 1; } }
.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); }
.cd-portal-url { font-size: var(--text-sm); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* breadcrumb */
.cd-crumb { display: flex; align-items: center; gap: 8px; margin-bottom: var(--space-3); font-size: var(--text-sm); }
.cd-crumb-link { color: var(--text-soft); font-weight: var(--fw-medium); transition: color var(--dur) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .cd-crumb-link:hover { color: var(--primary-600); }
}
.cd-crumb-sep { color: var(--gray-300); }
.cd-crumb-cur { color: var(--text-strong); font-weight: var(--fw-semibold); }

/* 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); }
.cd-portal-link { display: flex; flex-direction: column; gap: 7px; }
.cd-url-field { display: flex; align-items: center; gap: var(--space-2); height: 42px; padding: 0 6px 0 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-sunk); }
.cd-url-field .cd-portal-url { flex: 1; }
.cd-url-copy { 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); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .cd-url-copy:hover { background: var(--nav-hover-bg); color: var(--text-strong); }
}
.cd-url-copy svg { width: 15px; height: 15px; }
.cd-portal-note { font-size: var(--text-sm); color: var(--text-soft); }
@media (max-width: 720px) { .cd-portal-grid { grid-template-columns: 1fr; } }

.cd-info { display: flex; flex-direction: column; }
.cd-info-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 10px 0; border-bottom: 1px solid var(--border); }
.cd-info-row:last-child { border-bottom: none; }
.ci-key { font-size: var(--text-sm); color: var(--text-soft); }
.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: 2px; }
.cd-resource { display: flex; align-items: center; gap: var(--space-3); padding: 10px 8px; 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); }
/* always-on form fields (Client information + brief) */
.cd-info-form { gap: var(--space-1); }
.cd-field-row { display: flex; align-items: center; gap: var(--space-3); }
.cd-field-row .ci-key { flex-shrink: 0; width: 76px; }
.cd-field-row .input, .cd-field-row .input-inline { flex: 1; min-width: 0; text-align: left; }
.cd-brief-ta { width: 100%; min-height: 88px; }

/* ---- 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: 4px; }
.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; }
.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: 4px 12px 14px; 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-name { padding: 1px 7px; margin: 0 -7px; }
@media (hover: hover) and (pointer: fine) {
  .cd-title .ie-name:hover { background: var(--surface-hover); }
}
.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: 4px; 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: 8px; 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: 6px; }

/* 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: 10px; 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); }
.client-actionsdd .filter-opt.client-action-danger,
.client-actionsdd .filter-opt.client-action-danger .client-menu-label,
.client-actionsdd .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-bmrow { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin: 4px 0 10px; }
.axr-bmrow label { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-muted); }
.axr-bmrow .input { width: 170px; }
.axr-warn { font-size: var(--text-xs); color: var(--warning-700, #a05a00); background: var(--warning-50, #fdf3e4); border-radius: var(--radius-sm); padding: 7px 10px; margin: 0 0 10px; }
.axr-compose { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 0 12px; border-bottom: 1px solid var(--border-faint, var(--border)); }
.axr-tog { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 8px; border: 1px solid var(--border); border-radius: 999px; font-size: var(--text-sm); font-weight: var(--fw-medium); cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.axr-tog.on { border-color: var(--primary-400); background: var(--primary-50); }
.axr-level { margin-left: auto; }
.axr-list { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; }
.axr-req { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 8px 10px; }
.axr-req.is-dead { opacity: 0.55; }
.axr-req-head { display: flex; align-items: center; gap: 8px; }
.axr-req-head .spacer { flex: 1; }
.axr-req-when { font-size: var(--text-xs); color: var(--text-soft); }
.axr-req-status { font-size: var(--text-xs); font-weight: var(--fw-semibold); border-radius: 999px; padding: 2px 9px; background: var(--gray-100); color: var(--text-muted); }
.axr-req-status--reported { background: var(--warning-50, #fdf3e4); color: var(--warning-700, #a05a00); }
.axr-req-status--confirmed { background: var(--success-50, #ecfdf3); color: var(--success-700, #1a7f4b); }
.axr-item { display: flex; align-items: center; gap: 8px; 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, #a05a00); font-weight: var(--fw-semibold); }
.axr-state--ok { color: var(--success-700, #1a7f4b); 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: 10px; 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: 999px; padding: 1px 8px; margin-left: 8px; }
.axr-cred-sub { font-size: var(--text-xs); color: var(--text-muted); display: flex; align-items: center; gap: 4px; 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: 6px; 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, #fdf3e4); 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: 4px 0; }
.axr-addcred { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 10px; }
.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: 6px; margin: var(--space-4) 0 6px; }
.axr-linkinput { flex: 1; min-width: 0; font-size: var(--text-xs); color: var(--text-muted); background: var(--gray-50, var(--gray-100)); }
.axr-meta-row { display: flex; align-items: center; gap: 10px; font-size: var(--text-xs); color: var(--text-soft); padding-bottom: 8px; border-bottom: 1px solid var(--border-faint, var(--border)); flex-wrap: wrap; }
.axr-meta-row .spacer { flex: 1; }
.axr-textbtn { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-muted); cursor: pointer; padding: 3px 6px; border-radius: var(--radius-sm); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
@media (hover: hover) and (pointer: fine) { .axr-textbtn:hover { background: var(--gray-100); color: var(--text-strong); } }
.axr-textbtn svg { width: 12px; height: 12px; }
.axr-textbtn--danger { color: var(--danger-600, #e5484d); }
.axr-willreq { font-size: var(--text-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-soft); padding: 10px 0 2px; }
.axr-brand { width: 18px; height: 18px; flex-shrink: 0; }
.axr-item .axr-brand { margin-right: 2px; }

/* Customise modal */
.axm-sub { font-size: var(--text-sm); color: var(--text-muted); margin: 0 0 12px; }
.axm-rows { display: flex; flex-direction: column; gap: 8px; }
.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); }
.axm-level { width: 108px; flex-shrink: 0; }
.axm-ids { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.axm-ids label { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-muted); flex: 1 1 160px; }
.axm-hint { font-size: var(--text-xs); color: var(--text-soft); margin: 8px 0 0; }

/* toggle switch (no app-wide switch component — local to the modal) */
.axm-switch { position: relative; display: inline-flex; flex-shrink: 0; cursor: pointer; }
.axm-switch input { position: absolute; opacity: 0; pointer-events: none; }
.axm-switch .switch-track { width: 36px; height: 21px; border-radius: 999px; background: var(--gray-200, var(--gray-100)); position: relative; transition: background var(--dur-fast) var(--ease); }
.axm-switch .switch-track::after { content: ""; position: absolute; top: 2.5px; left: 2.5px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(27,27,35,0.25); transition: transform var(--dur-fast) var(--ease); }
.axm-switch input:checked + .switch-track { background: var(--primary-600); }
.axm-switch input:checked + .switch-track::after { transform: translateX(15px); }
.axm-switch input:focus-visible + .switch-track { box-shadow: var(--ring-primary); }

/* 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, #e5484d); margin: 8px 0 0; }