/*
 * CRM screens (release R1b): My Activities and a customer's CRM page (crm.js).
 *
 * Built from the FORGE kit (forge-kit.css): the band, tabs, cards, fields, chips, icons and the
 * pop-up are the kit's own, so this file only lays them out. Colours and type sizes are tokens
 * only: design-kit-guard.test.js fails a new file with any raw hex or font size. A chip or a row
 * picks a MEANING (attention, done, moving), never a hue.
 */

/* ── My Activities: one card, a row per activity ─────────────────────────────────────────── */
.crm-list { overflow: hidden; }
.crm-filterbar { border-bottom: 1px solid var(--fk-line); }
.crm-how { margin-top: 14px; }
.crm-rows { list-style: none; margin: 0; padding: 0; }
.crm-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--fk-line);
}
.crm-rows > .crm-row:first-child { border-top: 0; }
.crm-row-main { min-width: 0; }
.crm-row-title { font-weight: 600; color: var(--fk-ink); overflow-wrap: anywhere; }
.crm-row-sub { margin-top: 2px; font-size: var(--fk-type-sm); color: var(--fk-ink-3); overflow-wrap: anywhere; }
.crm-due-inline { color: var(--fk-ink-2); }
.crm-due-inline.is-late { color: var(--fk-attention); font-weight: 600; }
.crm-type { margin-right: 8px; font-weight: 600; color: var(--fk-ink-3); }
.crm-link { color: var(--fk-link); text-decoration: none; }
.crm-link:hover, .crm-link:focus-visible { text-decoration: underline; }

/* When it is due: late reads in the attention colour, as a waiting chip does. */
.crm-due {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: var(--fk-type-sm);
  color: var(--fk-ink-2);
  white-space: nowrap;
}
.crm-due.is-late { color: var(--fk-attention); font-weight: 600; }
.crm-due-time { color: var(--fk-ink-3); font-weight: 400; }

/* ── The tick: mark done, or not done ────────────────────────────────────────────────────── */
.crm-check {
  position: relative;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 2px solid var(--fk-gray-400);
  border-radius: var(--fk-radius-pill);
  background: var(--fk-surface);
  cursor: pointer;
}
.crm-check:hover { border-color: var(--fk-done); }
.crm-check:focus-visible { outline: none; box-shadow: var(--fk-focus-ring); }
.crm-check.is-done { border-color: var(--fk-done); background: var(--fk-done); }
.crm-check.is-done::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 11px;
  border: solid var(--fk-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.crm-check.is-static { cursor: default; }
.crm-check.is-static:hover { border-color: var(--fk-gray-400); }

/* ── A customer's page: the work on the left, what is coming up on the right ──────────────── */
.crm-cust {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
  gap: 20px;
}
.crm-main, .crm-rail { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* Pinned beside the work. Four cards (#352) can be taller than a laptop's window, and a pinned
   column taller than the window hides its foot until the history ends: it scrolls inside itself
   instead, pinned notes still at its top. The 2px keep the cards' shadow from being clipped. */
.crm-rail { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 2px; margin: -2px; }
.crm-card-title { margin: 0; padding: 16px 18px 4px; }
.crm-rail-card .fk-empty { padding: 18px; }
.crm-rail-card .crm-rows { padding: 0 18px 8px; }
.crm-rail-card .crm-row { grid-template-columns: auto minmax(0, 1fr); padding: 10px 0; }

/* ── The composer: log, schedule or note ─────────────────────────────────────────────────── */
.crm-composer { overflow: hidden; }
.crm-modes { padding: 0 18px; }
.crm-form { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; }
.crm-types { display: flex; flex-wrap: wrap; gap: 6px; }
.crm-type-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--fk-line);
  border-radius: var(--fk-radius-pill);
  background: var(--fk-surface);
  color: var(--fk-ink-2);
  font: inherit;
  font-size: var(--fk-type-sm);
  cursor: pointer;
}
.crm-type-btn:hover { border-color: var(--fk-moving-line); color: var(--fk-ink); }
.crm-type-btn:focus-visible { outline: none; box-shadow: var(--fk-focus-ring); }
.crm-type-btn.is-on { border-color: var(--fk-moving-line); background: var(--fk-moving-bg); color: var(--fk-moving); font-weight: 600; }
.crm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.crm-span-2 { grid-column: 1 / -1; }
.crm-optional { font-weight: 400; color: var(--fk-ink-3); }
.crm-tick { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fk-type-sm); color: var(--fk-ink-2); }
.crm-form-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.crm-form-error { margin-right: auto; font-size: var(--fk-type-sm); color: var(--fk-broken); }

/* ── The history: one list per Eastern day ───────────────────────────────────────────────── */
.crm-history { padding-bottom: 6px; }
.crm-day { margin: 14px 18px 2px; font-size: var(--fk-type-xs); font-weight: 600; color: var(--fk-ink-3); }
.crm-items { list-style: none; margin: 0; padding: 0 18px; }
.crm-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--fk-line);
}
.crm-items > .crm-item:first-child { border-top: 0; }
.crm-item-main { min-width: 0; }
.crm-item-title { font-weight: 600; color: var(--fk-ink); overflow-wrap: anywhere; }
.crm-item-meta { margin-top: 2px; font-size: var(--fk-type-sm); color: var(--fk-ink-3); }
.crm-item-body { margin-top: 6px; color: var(--fk-ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.crm-pin { margin-left: 8px; }

/* Its buttons show on hover or focus, so a long history reads quietly; always on a touch screen. */
.crm-item-actions { display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s; }
.crm-item:hover .crm-item-actions, .crm-item:focus-within .crm-item-actions { opacity: 1; }
.crm-more { display: flex; justify-content: center; padding: 8px 18px; }

/* ── Pinned notes beside the history, first in the column (#353) ─────────────────────────── */
.crm-pins { list-style: none; margin: 0; padding: 0 18px 8px; }
.crm-pin-note { padding: 10px 0; border-top: 1px solid var(--fk-line); }
.crm-pins > .crm-pin-note:first-child { border-top: 0; }

/* ── The Contacts card beside the call log (#352): initials, then name, job, phone, email ── */
.crm-rail-person { align-items: start; }
.crm-rail-more { padding: 0 18px 12px; }

/* ── A person's page (People pages, #353): the Details card, a label beside each value ── */
.crm-details {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 12px;
  margin: 0;
  padding: 2px 18px 14px;
}
.crm-details dt { font-size: var(--fk-type-sm); color: var(--fk-ink-3); }
.crm-details dd { margin: 0; min-width: 0; color: var(--fk-ink); overflow-wrap: anywhere; }

/* ── The Customers list (R1f) ────────────────────────────────────────────────────────────── */
.crm-list-count { margin-left: auto; font-size: var(--fk-type-sm); color: var(--fk-ink-3); white-space: nowrap; }
.crm-cust-table td { vertical-align: top; padding-top: 10px; padding-bottom: 10px; }
.crm-cust-row { cursor: pointer; }
.crm-cust-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--fk-blue-500); }
/* A name wraps between words, never inside one: the table scrolls sideways on a phone instead. */
.crm-cust-table td:first-child { min-width: 180px; }
.crm-cust-name { font-weight: 600; overflow-wrap: break-word; }
.crm-cust-when { white-space: nowrap; color: var(--fk-ink-2); }
.crm-cust-when.is-late { color: var(--fk-attention); font-weight: 600; }
.crm-person { display: inline-flex; align-items: center; white-space: nowrap; }
.crm-none { color: var(--fk-ink-3); }

/* ── Files beside the history (R1d) ──────────────────────────────────────────────────────── */
.crm-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-right: 18px; }
.crm-card-head .crm-card-title { padding-bottom: 12px; }
.crm-file-add { position: relative; cursor: pointer; }
.crm-file-add:focus-within { outline: 2px solid var(--fk-link); outline-offset: 2px; }
/* The picker itself is invisible but still reachable by keyboard: the label is its button. */
.crm-file-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.crm-file-busy { font-size: var(--fk-type-sm); color: var(--fk-ink-3); }
.crm-files { list-style: none; margin: 0; padding: 0 18px 8px; }
.crm-file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--fk-line); }
.crm-files > .crm-file:first-child { border-top: 0; }
.crm-file > .fk-icon { margin-top: 2px; color: var(--fk-ink-3); }
.crm-file-name { font-weight: 600; overflow-wrap: anywhere; }

/* ── The pop-ups (the next one, editing) ─────────────────────────────────────────────────── */
.crm-modal .crm-form { padding: 18px 20px; }
.crm-modal-lead { margin: 0; color: var(--fk-ink-2); }

/* ── A customer's settings: the General and Attribution tabs (R2a) ───────────────────────── */
/* A form reads best at a form's width, not across the whole wide page. */
.crm-settings { display: flex; flex-direction: column; gap: 16px; max-width: 880px; }
.crm-settings-form { display: flex; flex-direction: column; gap: 16px; }
.crm-settings-card { display: flex; flex-direction: column; gap: 14px; padding-bottom: 16px; }
.crm-settings-card > :not(.crm-card-title) { margin-left: 18px; margin-right: 18px; }
.crm-settings-card > .fk-help { margin-top: -6px; }
.crm-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.crm-tai-code { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.crm-tai-code > .fk-input { flex: 1 1 200px; max-width: 280px; }
.crm-move > .fk-input { max-width: 220px; }
/* .fk-field's own display would beat the browser's [hidden] rule (the kit covers only its buttons and chips). */
.crm-move[hidden] { display: none; }

/* ── The Load Builder tab (R2b): saved locations and the load form's fields ──────────────── */
/* A card's head carries its own title padding, so it takes none of the card's side margins. */
.crm-settings-card > .crm-card-head { margin-left: 0; margin-right: 0; }
.crm-settings-card > .crm-card-head .crm-card-title { padding-bottom: 4px; }
.crm-locs { list-style: none; margin: 0; padding: 0; }
.crm-loc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: start;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--fk-line);
}
.crm-locs > .crm-loc:first-child { border-top: 0; padding-top: 4px; }
.crm-loc-main { min-width: 0; }
.crm-loc-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 600; color: var(--fk-ink); overflow-wrap: anywhere; }
.crm-loc-meta { margin-top: 2px; font-size: var(--fk-type-sm); color: var(--fk-ink-3); overflow-wrap: anywhere; }
.crm-loc-side { text-align: right; }
.crm-loc-actions { display: flex; gap: 6px; }
.crm-loc-pending { margin: 8px 0 0; color: var(--fk-attention); font-weight: 600; }
.crm-fcs { display: flex; flex-direction: column; }
.crm-fc { border-top: 1px solid var(--fk-line); }
.crm-fc:last-child { border-bottom: 1px solid var(--fk-line); }
.crm-fc > summary { padding: 10px 0; font-weight: 600; color: var(--fk-ink-2); cursor: pointer; }
.crm-fc > summary:focus-visible { outline: none; box-shadow: var(--fk-focus-ring); }
.crm-fc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px 72px;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid var(--fk-line);
  font-size: var(--fk-type-sm);
  color: var(--fk-ink);
}
.crm-fc-row > input { justify-self: center; }
.crm-fc-row.is-locked { color: var(--fk-ink-3); }
.crm-fc-head { font-size: var(--fk-type-xs); font-weight: 600; color: var(--fk-ink-3); }
.crm-fc-head > span:not(:first-child) { justify-self: center; }

/* ── Drafting from an email (R3a) ─────────────────────────────────────────────────────────── */
.crm-email-open { display: flex; justify-content: flex-end; padding: 10px 18px 0; }
.crm-email-form { display: flex; flex-direction: column; gap: 8px; margin: 12px 18px 0; padding: 12px 14px; border: 1px solid var(--fk-line); border-radius: var(--fk-radius-md); background: var(--fk-gray-50); }
.crm-email-row { display: flex; align-items: center; gap: 8px; }
.crm-email-row .fk-input { flex: 1 1 auto; min-width: 0; }
.crm-email-note { display: flex; flex-direction: column; gap: 8px; }
.crm-email-from { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--fk-ink-2); }
.crm-email-from > span:nth-child(2) { flex: 1 1 260px; }
.crm-front-link { color: var(--fk-link); white-space: nowrap; }
/* The Front button's landing page (R3b): which customer the email is for. */
.crm-email-pick { max-width: 720px; padding-bottom: 8px; }
.crm-email-none, .crm-email-find { margin: 0 18px 12px; }
.crm-email-choices { list-style: none; margin: 0; padding: 0 18px; }
.crm-email-choice { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--fk-line); }
.crm-email-choices > .crm-email-choice:first-child { border-top: 0; }
.crm-email-name { font-weight: 600; color: var(--fk-ink); }

/* ── The Contacts tab (R2d) ──────────────────────────────────────────────────────────────── */
.crm-contacts { display: flex; flex-direction: column; gap: 16px; max-width: 1100px; }
.crm-contacts-card { padding-bottom: 8px; }
.crm-contacts-card > .fk-help { margin: -4px 18px 12px; }
.crm-contacts-card > .fk-empty { padding: 18px; }
.crm-contact-who { display: inline-flex; align-items: center; }
.crm-contact-who .fk-strong { display: block; }
/* A long note shows its first two lines; the whole of it is the cell's tooltip. */
.crm-contact-notes { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: 320px; overflow-wrap: anywhere; }
.crm-contact-actions { text-align: right; white-space: nowrap; }
.crm-ct-origin { min-width: 0; margin: 4px 0 0; padding: 0; border: 0; }
.crm-ct-origin legend { margin-bottom: 8px; padding: 0; font-weight: 600; color: var(--fk-ink); }
.crm-ct-origin .fk-help { margin-top: 8px; }
/* ── Narrow screens ──────────────────────────────────────────────────────────────────────── */
@media (hover: none) {
  .crm-item-actions { opacity: 1; }
}
@media (max-width: 1100px) {
  .crm-cust { grid-template-columns: minmax(0, 1fr); }
  .crm-rail { position: static; max-height: none; overflow: visible; }
}
@media (max-width: 640px) {
  .crm-grid { grid-template-columns: minmax(0, 1fr); }
  .crm-row { grid-template-columns: auto auto minmax(0, 1fr); padding: 12px 14px; }
  .crm-row > .crm-due { grid-column: 3; flex-direction: row; gap: 6px; align-items: baseline; }
  .crm-item { grid-template-columns: auto minmax(0, 1fr); }
  .crm-item-actions { grid-column: 2; }
  .crm-loc { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .crm-loc-side { text-align: left; }
  .crm-fc-row { grid-template-columns: minmax(0, 1fr) 56px 56px; }
}