/* The CRM and marketing interface: on top of the HR lab's look (lab/05-hr/ui.css, .hr), scoped to .crm. */

.crm-root { background: var(--bg); min-height: 100%; }
.crm-root[data-page] .split { height: 100%; }
.crm-root:not([data-page="overview"]):not([data-page="compliance"]):not([data-page="attribution"]):not([data-page="pipeline"]) { height: 100%; }
.crm .page.wide { max-width: 1180px; }
.crm .small { font-size: 12.5px; }
.crm .note { margin: 8px 0 0; font-size: 12.5px; color: var(--secondary); }
.crm .docs { margin: 12px 0 0; }
.crm .stats.four { grid-template-columns: repeat(4, 1fr); margin-top: 18px; }
.crm .stats .tile b { font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm .file .hero h1 { font-size: 26px; }
.crm .campaign-mark { background: linear-gradient(160deg, var(--indigo), var(--accent)); }
.crm .campaign-mark .i { width: 32px; height: 32px; }
.crm .row-btn > .right .pill { font-size: 11.5px; }
.crm .row-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.crm .head-tools { display: flex; gap: 8px; align-items: center; }
.crm .head-tools .search { width: 220px; }

/* Banners in any color */
.crm .banner.c-red { --c: var(--red); }
.crm .banner.c-green { --c: var(--green); }
.crm .banner.c-orange { --c: var(--orange); }
.crm .banner.c-indigo { --c: var(--indigo); }
.crm .banner + .banner { margin-top: 8px; }
.crm .banner .btn { flex: none; }
.crm .actor-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0 0; }
.crm .actor-line .label { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--secondary); }
.crm .actor-line .seg { flex: none; }
.crm .actor-line .seg button { padding: 4px 10px; white-space: nowrap; }
.crm .labbar { display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; }
.crm .labbar .actor-line { margin: 0; }
.crm .labbar .note { margin: 0; }

/* Forms: schema-driven fields in a grid */
.crm .form-card { padding: 14px 16px; }
.crm .form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px 14px; }
.crm .field.wide, .crm .check.wide { grid-column: 1 / -1; }
.crm .field input, .crm .field select, .crm .field textarea, .crm .rule input, .crm .rule select, .crm .pick input, .crm .pick select, .crm .add-activity input, .crm .add-activity select {
  font: inherit; font-size: 14px; color: var(--label); padding: 8px 10px; border-radius: 9px; border: 1px solid var(--hairline); background: var(--surface-2); outline: 0; min-width: 0; width: 100%;
}
.crm .field input:focus, .crm .field select:focus, .crm .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.crm .field > span { font-size: 12px; }
.crm .field .req { color: var(--red); margin-left: 3px; }
.crm .field .req.soft { color: var(--tertiary); }
.crm .field.bad input, .crm .field.bad select { border-color: color-mix(in srgb, var(--red) 55%, transparent); background: color-mix(in srgb, var(--red) 5%, var(--surface-2)); }
.crm .problem { color: var(--red) !important; font-size: 12px; }
.crm .check { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; font-size: 14px; cursor: pointer; }
.crm .check input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }
.crm .check small { flex-basis: 100%; color: var(--secondary); font-size: 12px; }
.crm .chips .chip:disabled { opacity: 0.5; cursor: default; }

/* Consent */
.crm .consent { overflow: hidden; }
.crm .consent-row { display: grid; grid-template-columns: 1.1fr 1.6fr auto; gap: 12px; align-items: center; padding: 10px 16px; }
.crm .consent-row + .consent-row { border-top: 1px solid var(--hairline); }
.crm .consent-row b { display: block; font-size: 14px; }
.crm .consent-row small { display: block; color: var(--secondary); font-size: 12px; margin-top: 2px; }

/* Activities */
.crm .add-activity { display: grid; grid-template-columns: 140px 1fr 150px auto; gap: 8px; padding: 10px; margin-bottom: 10px; align-items: center; }
.crm .rows .wide { grid-template-columns: auto 1fr auto; }
.crm .inspector .add-activity { grid-template-columns: 1fr 1fr auto; }
.crm .inspector .add-activity input[name=name] { grid-column: 1 / -1; grid-row: 1; }
.crm .row-btn.bare { grid-template-columns: minmax(0, 1fr) auto; }
.crm .row-btn .right { flex: none; }

/* Pipeline and kanban */
.crm .board-page { display: grid; grid-template-columns: 1fr; min-height: 100%; }
.crm .board-page.inspecting { grid-template-columns: 1fr 420px; }
.crm .board-main { padding: 32px 32px 60px; min-width: 0; }
.crm .board, .crm .kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 12px; margin-top: 22px; overflow-x: auto; padding-bottom: 8px; }
.crm .kanban { grid-auto-columns: minmax(200px, 1fr); margin: 0 0 12px; }
.crm .column { background: var(--fill-2); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
.crm .column header { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 2px 2px 6px; font-size: 12.5px; }
.crm .deal { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; text-align: left; border: 1px solid transparent; cursor: pointer; width: 100%; }
.crm div.deal { cursor: default; }
.crm .deal:hover { border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.crm .deal.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.crm .deal b { font-size: 13.5px; font-weight: 600; }
.crm .deal small { color: var(--secondary); font-size: 12px; }
.crm .deal-foot { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 4px; }
.crm .deal .tag { align-self: flex-start; margin-top: 4px; }
.crm .inspector { border-left: 1px solid var(--hairline); background: var(--surface-2); overflow-y: auto; max-height: 100vh; position: sticky; top: 0; }
.crm .inspector .insp-head { grid-template-columns: 1fr auto auto; }
.crm .inspector .form-grid { grid-template-columns: 1fr 1fr; }
.crm .inspector .actions { margin-top: 0; }

/* Compliance */
.crm .report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.crm .report-card { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.crm .report-card h3 { margin: 0; font-size: 15.5px; display: flex; gap: 8px; align-items: center; }
.crm .report-card .es { margin: -4px 0 0; font-size: 12.5px; color: var(--secondary); font-style: italic; }
.crm .report-card p { margin: 0; font-size: 13px; }
.crm .report-card .pick { display: flex; gap: 6px; margin-top: auto; }
.crm .report-card .row-actions { justify-content: flex-start; }
.crm .tt .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.crm .tt td.on { font-weight: 700; color: var(--accent); }
.crm .tt .barcell { width: 30%; }
.crm .paper h3.doc-section { font: 600 13px/1.4 var(--font); letter-spacing: 0.05em; text-transform: uppercase; color: #6e6e73; margin: 22px 0 6px; }
.crm .paper table.grid { font-size: 12px; }
.crm .paper table.grid th { width: auto; font-size: 11px; }
.crm .paper table.grid td, .crm .paper table.grid th { padding: 5px 6px 5px 0; }
.crm .paper .doc-missing { color: #c0392b; font: 600 12.5px var(--font); }
.crm .paper .doc-check { margin-right: 14px; white-space: nowrap; font: 13px var(--font); }

/* The document viewer: the paper alone, or the paper beside its JSON. */
.crm .viewer:not(.json) > pre { display: none; }
.crm .viewer.json { grid-template-columns: 1fr 380px; }

/* Marketing */
.crm .funnel { padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; }
.crm .bar-row { display: grid; grid-template-columns: 110px 1fr 40px 44px; gap: 10px; align-items: center; font-size: 13.5px; }
.crm .bar-row b { text-align: right; font-variant-numeric: tabular-nums; }
.crm .bar-row small { color: var(--secondary); font-size: 12px; text-align: right; }
.crm .bar { height: 10px; border-radius: 5px; background: var(--fill); overflow: hidden; }
.crm .bar div { height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--accent), var(--indigo)); }
.crm .campaign-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.crm .campaign-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; text-align: left; border: 0; cursor: pointer; }
.crm .campaign-card small { color: var(--secondary); font-size: 12.5px; }
.crm .cc-foot { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--secondary); font-variant-numeric: tabular-nums; }
.crm .progress div { background: var(--accent); }
.crm .checks { overflow: hidden; }
.crm .check-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 16px; }
.crm .check-row + .check-row { border-top: 1px solid var(--hairline); }
.crm .check-row > .i { width: 20px; height: 20px; }
.crm .check-row.ok > .i { color: var(--green); }
.crm .check-row.bad > .i { color: var(--red); }
.crm .check-row.warn > .i { color: var(--orange); }
.crm .check-row b { display: block; font-size: 14px; font-weight: 600; }
.crm .check-row small { color: var(--secondary); font-size: 12.5px; }
.crm .model-seg { margin-bottom: 4px; }
.crm .toolbar { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.crm .toolbar .seg { flex: 1; min-width: 300px; }
.crm .toolbar .seg.narrow { flex: none; min-width: 0; width: 210px; }
.crm .path { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.crm .steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.crm .step-card { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.crm .step-card .muted { margin: 0; }
.crm .step-head { display: flex; align-items: center; gap: 10px; }
.crm .step-no { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 700; flex: none; }
.crm .step-stats { margin-left: auto; font-size: 12.5px; color: var(--secondary); }
.crm .step-head .x { width: 26px; height: 26px; }
.crm .rules { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.crm .rules .seg { width: 260px; }
.crm .rule { display: grid; grid-template-columns: 1.3fr 0.8fr 1.3fr auto; gap: 8px; width: 100%; align-items: center; }
.crm pre.code { margin: 0; padding: 14px 16px; overflow: auto; font: 12px/1.5 var(--mono); color: var(--secondary); max-height: 420px; }
.crm .danger .note { margin-top: 4px; }
.crm .x { flex: none; }

@media (max-width: 820px) {
  .crm .stats.four { grid-template-columns: repeat(2, 1fr); }
  .crm .board-page.inspecting { grid-template-columns: 1fr; }
  .crm .board-page.inspecting .inspector { position: fixed; inset: auto 0 0 0; max-height: 75vh; border-left: 0; border-top: 1px solid var(--hairline); border-radius: 16px 16px 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15); z-index: 20; }
  .crm .board-main { padding: 16px 16px 40px; }
  .crm .head-tools .search { width: 140px; }
  .crm .consent-row { grid-template-columns: 1fr; }
  .crm .consent-row .row-actions { justify-content: flex-start; }
  .crm .add-activity { grid-template-columns: 1fr 1fr; }
  .crm .add-activity input[name=name] { grid-column: 1 / -1; }
  .crm .rule { grid-template-columns: 1fr 1fr; }
  .crm .bar-row { grid-template-columns: 90px 1fr 34px; }
  .crm .bar-row small { display: none; }
  .crm .toolbar .seg { min-width: 0; }
}

/* A file's head stands apart from what follows it (a form card, a section). */
.crm .file > .hero + .card { margin-top: 22px; }