/* The CRM area's visual system, taken from the design prototype in the workspace note
   (dpf-crm-design.html) and scoped under a single .crm root so its generic class names — .card, .btn,
   .row, .item, .pill — cannot collide with app.css, which uses several of the same words for different
   things. Every CRM page renders inside <div class="crm">, which is also where the custom properties
   live: the prototype declares them on :root, and moving them onto the scope keeps the palette from
   leaking out into the rest of the app.

   Rules the prototype needed only to BE a prototype (the spec annotations, the demo toggle, the phone
   mock, its own top bar and bell) are dropped; the panel, modal and toast are re-declared at the end of
   this file as real components rather than as the ids the prototype hard-coded. */

.crm { --indigo:#4F46E5; --indigo-dark:#4338CA; --indigo-soft:#EEF0FE; --indigo-line:#D9DCFB; --bg:#F6F7F9; --card:#FFFFFF; --line:#E8EAEF; --line-soft:#F1F2F5; --ink:#15171C; --muted:#6B7280; --faint:#9AA0AA; --red:#DC2626; --red-soft:#FEECEC; --amber:#B45309; --amber-soft:#FEF3E2; --green:#047857; --green-soft:#E7F6F0; --slate-soft:#F3F4F6; --r:12px; --r-sm:8px; }
.crm * { box-sizing:border-box }
.crm { margin:0;background:var(--bg);color:var(--ink); font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased }
.crm a { color:inherit;text-decoration:none }
.crm h1 { font-size:30px;letter-spacing:-.02em;margin:0 0 8px }
.crm h2 { font-size:17px;margin:0;letter-spacing:-.01em }
.crm h3 { font-size:13px;margin:0;color:var(--muted);font-weight:600 }
.crm .sub { color:var(--muted);max-width:760px;margin:0 0 26px }
.crm .wrap { max-width:1180px;margin:0 auto;padding:34px 28px 90px }
.crm .subnav { display:flex;gap:4px;margin:0 0 26px;background:#fff;padding:5px;border:1px solid var(--line); border-radius:var(--r);width:fit-content }
.crm .subnav button { background:none;border:0;font:inherit;font-weight:600;color:var(--muted);padding:7px 14px; border-radius:var(--r-sm);cursor:pointer }
.crm .subnav button.on { background:var(--indigo);color:#fff }
.crm .subnav .count { font-weight:600;opacity:.65;margin-left:5px }
.crm .card { background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden }
.crm .card + .card { margin-top:16px }
.crm .ch { padding:14px 18px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;gap:10px }
.crm .ch .rt { margin-left:auto;display:flex;gap:8px;align-items:center }
.crm .cb { padding:18px }
.crm .row { display:flex;gap:16px;align-items:flex-start }
.crm .grid { display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start }
.crm .btn { background:var(--indigo);color:#fff;border:0;border-radius:var(--r-sm);height:36px;padding:0 16px;font:inherit; font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center; white-space:nowrap;line-height:1 }
.crm .btn.ghost { background:#fff;color:var(--ink);border:1px solid var(--line) }
.crm .btn.sm { height:30px;padding:0 12px;font-size:13px }
.crm .btn.block { width:100% }
.crm .btn.link { background:none;color:var(--indigo);padding:0;height:auto;font-weight:600;display:inline }
.crm .acts-col { display:flex;flex-direction:column;gap:6px;align-items:stretch }
.crm .pill { display:inline-flex;align-items:center;gap:6px;background:var(--indigo-soft);color:var(--indigo-dark); border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;white-space:nowrap }
.crm .pill.grey { background:var(--slate-soft);color:var(--muted) }
.crm .pill.red { background:var(--red-soft);color:var(--red) }
.crm .pill.amber { background:var(--amber-soft);color:var(--amber) }
.crm .pill.green { background:var(--green-soft);color:var(--green) }
.crm .pill.line { background:#fff;border:1px solid var(--line);color:var(--muted) }
.crm .muted { color:var(--muted) }
.crm .faint { color:var(--faint) }
.crm .tiny { font-size:12px }
.crm .mono { font-variant-numeric:tabular-nums }
.crm input[type=text], .crm textarea, .crm select { border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 12px; font:inherit;width:100%;background:#fff }
.crm textarea { resize:vertical }
.crm table { width:100%;border-collapse:collapse }
.crm thead th { background:#FAFBFC;text-align:left;font-size:12.5px;color:var(--muted);font-weight:600; padding:11px 16px;border-bottom:1px solid var(--line) }
.crm tbody td { padding:14px 16px;border-bottom:1px solid var(--line-soft);vertical-align:top }
.crm tbody tr:last-child td { border-bottom:0 }
.crm tbody tr.clickable { cursor:pointer }
.crm tbody tr.clickable:hover { background:#FBFBFD }
.crm .item { display:flex;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line-soft);align-items:flex-start }
.crm .item:last-child { border-bottom:0 }
.crm .item .body { flex:1;min-width:0 }
.crm .item .acts { display:flex;flex-direction:column;gap:6px;flex-shrink:0;width:152px }
.crm .item .acts .btn { width:100% }
.crm .item .acts.wide { width:210px }
.crm .item .acts.row { flex-direction:row;width:auto }
.crm .item .acts.row .btn { width:auto;min-width:82px }
.crm .dot { width:7px;height:7px;border-radius:50%;margin-top:7px;flex-shrink:0 }
.crm .dot.red { background:var(--red) }
.crm .dot.amber { background:var(--amber) }
.crm .dot.green { background:var(--green) }
.crm .dot.grey { background:#CBD0D8 }
.crm .track { padding:22px 18px 8px;background:linear-gradient(180deg,#FCFCFE,#fff) }
.crm .steps { display:flex;align-items:flex-start;overflow-x:auto;padding-bottom:12px }
.crm .step { flex:1;min-width:96px;position:relative;text-align:center;padding-top:22px }
.crm .step:before { content:"";position:absolute;top:6px;left:0;right:0;height:2px;background:var(--line) }
.crm .step:first-child:before { left:50% }
.crm .step:last-child:before { right:50% }
.crm .step i { position:absolute;top:0;left:50%;transform:translateX(-50%);width:14px;height:14px;border-radius:50%; background:#fff;border:2px solid var(--line) }
.crm .step.done:before { background:var(--indigo) }
.crm .step.done i { background:var(--indigo);border-color:var(--indigo) }
.crm .step.now i { border-color:var(--indigo);box-shadow:0 0 0 4px var(--indigo-soft) }
.crm .step.now:before { background:linear-gradient(90deg,var(--indigo) 50%,var(--line) 50%) }
.crm .step span { font-size:11.5px;color:var(--muted);display:block;padding:0 4px }
.crm .step.now span { color:var(--indigo);font-weight:700 }
.crm .step.done span { color:var(--ink) }
.crm .phase { display:flex;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint) }
.crm .phase div { text-align:center }
.crm .kv { display:grid;grid-template-columns:118px 1fr;gap:7px 12px;font-size:13px }
.crm .kv dt { color:var(--muted) }
.crm .kv dd { margin:0 }
.crm .quote { border-left:2px solid var(--indigo-line);padding-left:12px;color:var(--ink) }
.crm .empty { padding:34px 18px;text-align:center;color:var(--muted) }
.crm .avatar { width:24px;height:24px;border-radius:50%;background:var(--indigo-soft);color:var(--indigo-dark); font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0 }
.crm .heat { height:4px;border-radius:2px;background:var(--line);width:56px;overflow:hidden }
.crm .heat b { display:block;height:100%;background:var(--indigo) }
.crm .split { display:grid;grid-template-columns:1fr 1fr;gap:16px }
.crm .tl { position:relative;padding-left:22px }
.crm .tl:before { content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--line) }
.crm .tl .ev { position:relative;padding:0 0 20px }
.crm .tl .ev:before { content:"";position:absolute;left:-20px;top:5px;width:10px;height:10px;border-radius:50%; background:#fff;border:2px solid var(--indigo-line) }
.crm .tl .ev.call:before { background:var(--indigo);border-color:var(--indigo) }
.crm .transcript p { margin:0 0 12px }
.crm .transcript b { color:var(--indigo-dark) }
.crm .hl { background:#FFF6D6;border-radius:3px;padding:0 2px }
.crm .mbox { margin-top:14px;border-top:1px dashed var(--line);padding-top:12px }
.crm .mrow { display:grid;grid-template-columns:58px 1fr;gap:10px;font-size:12.5px;margin-bottom:7px }
.crm .mrow b { color:var(--ink);font-size:11px;text-transform:uppercase;letter-spacing:.05em;padding-top:1px }
.crm .hide { display:none!important }
@keyframes p {50%{opacity:.25}}
.crm .sug { border:1px solid var(--indigo-line);background:#FBFBFF;border-radius:10px;padding:11px 12px;margin-top:10px }
.crm .slot { display:flex;gap:6px;flex-wrap:wrap;margin-top:9px }
.crm .slot button { border:1px solid var(--line);background:#fff;border-radius:8px;padding:7px 10px;font:inherit; font-size:12.5px;font-weight:600;cursor:pointer }
.crm .slot button.best { border-color:var(--indigo);background:var(--indigo);color:#fff }
.crm .mention { background:var(--indigo-soft);color:var(--indigo-dark);border-radius:4px;padding:1px 5px;font-weight:600 }
.crm .navline { display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:26px }
.crm .navline .subnav { margin:0 }
.crm .subnav button.ctx { background:#fff;border:1px solid var(--indigo-line);color:var(--indigo-dark); padding-right:8px;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.crm .subnav button.ctx.on { background:var(--indigo);border-color:var(--indigo);color:#fff }
.crm .subnav button.ctx .x { margin-left:9px;opacity:.55;font-weight:400;font-size:15px;line-height:1 }
.crm .subnav button.ctx .x:hover { opacity:1 }
.crm .subnav .tabdiv { width:1px;background:var(--line);margin:4px 5px;align-self:stretch }
.crm .setgrid { display:grid;grid-template-columns:210px 1fr;gap:24px;align-items:start }
.crm .setnav { position:sticky;top:80px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:6px }
.crm .setnav a { display:block;padding:8px 12px;border-radius:var(--r-sm);color:var(--muted);font-weight:600;font-size:13px }
.crm .setnav a:hover { background:var(--slate-soft);color:var(--ink) }
.crm .setnav a.on { background:var(--indigo-soft);color:var(--indigo-dark) }
.crm .field { padding:14px 18px;border-bottom:1px solid var(--line-soft);display:grid; grid-template-columns:1fr 300px;gap:20px;align-items:start }
.crm .field:last-child { border-bottom:0 }
.crm .field .lab { font-weight:600 }
.crm .field .help { color:var(--muted);font-size:12.5px;margin-top:3px }
.crm .field .ctl { display:flex;flex-direction:column;gap:8px }
.crm .sw { width:40px;height:23px;border-radius:999px;background:#D7DAE1;position:relative;flex-shrink:0;cursor:pointer }
.crm .sw:after { content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff; transition:left .12s }
.crm .sw.on { background:var(--indigo) }
.crm .sw.on:after { left:20px }
.crm .lock { display:inline-flex;align-items:center;gap:5px;background:var(--slate-soft);color:var(--muted); border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:600 }
.crm .chips { display:flex;flex-wrap:wrap;gap:6px }
.crm .chip { background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:12px; display:inline-flex;gap:6px;align-items:center }
.crm .chip b { font-weight:600 }
.crm .chip .x { color:var(--faint);cursor:pointer }
.crm .preset { border:1px solid var(--line);border-radius:var(--r);padding:14px;cursor:pointer;background:#fff }
.crm .preset.on { border-color:var(--indigo);background:var(--indigo-soft) }
.crm .preset b { display:block;margin-bottom:4px }
.crm .presets { display:grid;grid-template-columns:repeat(4,1fr);gap:10px }
@media(max-width:900px) {
  .crm .setgrid, .crm .field, .crm .presets { grid-template-columns:1fr }
  .crm .setnav { position:static }
}
@media(max-width:900px) {
  .crm .grid, .crm .split { grid-template-columns:1fr }
}

/* ---- the three containers the prototype hard-coded as #pn / #md / #ts ------------------------------
   Four ways for something to open, and they are not interchangeable (control reference §0):
   INLINE replaces the control in place; PANEL slides in from the right and keeps the record beside you,
   which is why it is used for review and drafting; MODAL centres and BLOCKS, used only where the action
   is irreversible or externally visible, so the block is the point; TAB is a navigation, never an action. */

.crm-scrim { position:fixed; inset:0; background:rgba(18,20,26,.32); z-index:60; animation:crm-fade .14s ease; }
@keyframes crm-fade { from { opacity:0 } to { opacity:1 } }

.crm-panel {
    position:fixed; top:0; right:0; bottom:0; width:520px; max-width:94vw; background:#fff; z-index:61;
    display:flex; flex-direction:column; box-shadow:-8px 0 40px rgba(0,0,0,.12);
    animation:crm-slide .18s ease;
}
@keyframes crm-slide { from { transform:translateX(100%) } to { transform:none } }
.crm-panel .ph { padding:18px 22px; border-bottom:1px solid var(--line); display:flex; align-items:flex-start; gap:12px; }
.crm-panel .ph h2 { margin-top:2px; }
.crm-panel .ph .btn { margin-left:auto; }
.crm-panel .pb { padding:20px 22px; overflow:auto; flex:1; }
.crm-panel .pf { padding:14px 22px; border-top:1px solid var(--line); display:flex; gap:8px; align-items:center; }

.crm-modal {
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:560px; max-width:94vw;
    max-height:86vh; display:flex; flex-direction:column; background:#fff; border-radius:14px; z-index:62;
    box-shadow:0 24px 60px rgba(0,0,0,.24); animation:crm-pop .15s ease;
}
.crm-modal.wide { width:760px; }
@keyframes crm-pop { from { opacity:0; transform:translate(-50%,-46%) scale(.98) } to { opacity:1; transform:translate(-50%,-50%) scale(1) } }
.crm-modal .mh { padding:20px 22px 0; }
.crm-modal .mb { padding:14px 22px 4px; overflow:auto; flex:1; }
.crm-modal .mf { padding:16px 22px 18px; display:flex; gap:8px; justify-content:flex-end; align-items:center; }
.crm-modal .mf .left { margin-right:auto; }

/* The toast. Undo appears on it for the six controls that have one; on everything else it NAMES the
   forward control that reverses the change, which is honest and costs nothing to build. */
.crm-toast { position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:70; animation:crm-rise .16s ease; }
@keyframes crm-rise { from { opacity:0; transform:translateX(-50%) translateY(14px) } to { opacity:1; transform:translateX(-50%) } }
.crm-toast .tst {
    background:var(--ink); color:#fff; border-radius:10px; padding:12px 18px; display:flex; gap:18px;
    align-items:center; font-size:13.5px; box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.crm-toast .tst button { background:none; border:0; color:#A5B4FC; font:inherit; font-weight:700; cursor:pointer; padding:0; }
.crm-toast .tst .why { color:#C7CBD4; }

/* ---- small additions the prototype implied but never declared ---- */
.crm .stack { display:flex; flex-direction:column; gap:16px; }
.crm .inline-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.crm .disabled-note { color:var(--faint); font-size:12px; }
.crm .btn:disabled { opacity:.45; cursor:not-allowed; }
.crm .btn.danger { background:var(--red); }
.crm label.check { display:flex; gap:8px; align-items:flex-start; font-size:13px; cursor:pointer; }
.crm label.check input { margin-top:3px; flex-shrink:0; }
.crm .field-row { display:flex; flex-direction:column; gap:5px; margin-bottom:14px; }
.crm .field-row > span { font-weight:600; font-size:13px; }
.crm .field-row .help { color:var(--muted); font-size:12.5px; }
.crm .warn { background:var(--amber-soft); color:var(--amber); border-radius:var(--r-sm); padding:10px 12px; font-size:13px; }
.crm .err { background:var(--red-soft); color:var(--red); border-radius:var(--r-sm); padding:10px 12px; font-size:13px; }
.crm .ok { background:var(--green-soft); color:var(--green); border-radius:var(--r-sm); padding:10px 12px; font-size:13px; }
.crm .sect-head { display:flex; align-items:baseline; gap:10px; margin:26px 0 12px; }
.crm .sect-head h2 { font-size:15px; }
.crm .sect-head .count { color:var(--faint); font-size:13px; }
.crm .strip { display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; }
.crm .strip .card { min-width:280px; flex-shrink:0; margin:0; }
.crm textarea.tall { min-height:180px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; }

/* The breadcrumb a record shows instead of the sub-nav. Kept from the prototype (which declared it near its
   own chrome, most of which is dropped here) because a record page has no h1 of its own: its name is the h2 of
   its first card, and this line is the only thing that says which list it belongs to. */
.crm .crumb { color: var(--muted); font-size: 13px; }
.crm .crumb b { color: var(--indigo); font-weight: 600; }
.crm .crumb a { color: inherit; }
.crm .crumb a:hover { text-decoration: underline; }

/* The sub-nav's entries are links here rather than the prototype's buttons — they are navigations, and a
   navigation that is not a link cannot be opened in a new tab. */
.crm .subnav a {
    background: none; border: 0; font: inherit; font-weight: 600; color: var(--muted);
    padding: 7px 14px; border-radius: var(--r-sm); cursor: pointer; display: inline-flex; align-items: center;
}
.crm .subnav a.on { background: var(--indigo); color: #fff; }
.crm .subnav a:hover:not(.on) { background: var(--slate-soft); color: var(--ink); }

/* The record's context chip in the sub-nav: the open record joins the row, and its × closes it back to the
   list it came from. A span here — the record itself is the page you are on, not a navigation. */
.crm .subnav span.ctx {
    font-weight: 600; padding: 7px 8px 7px 14px; border-radius: var(--r-sm);
    display: inline-flex; align-items: center; max-width: 230px; white-space: nowrap;
    background: #fff; border: 1px solid var(--indigo-line); color: var(--indigo-dark);
}
.crm .subnav span.ctx.on { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.crm .subnav span.ctx .x {
    margin-left: 9px; padding: 0; opacity: .55; font-weight: 400; font-size: 15px; line-height: 1; color: inherit;
}
.crm .subnav span.ctx .x:hover { opacity: 1; background: none; }

/* ---- the spec boxes and their toggle --------------------------------------------------------------------
   The design ships its own rationale: every screen carries a dashed "spec" box explaining what the screen IS
   and the rules that keep it honest, hidden behind a Show-the-spec toggle in the corner. Kept as a real
   feature rather than prototype furniture — it is the documentation a new colleague reads in place. The
   toggle state persists per browser (localStorage), and the boxes only exist in the DOM of CRM pages. */
.crm .spec {
    display: none;
    border: 1px dashed var(--indigo-line); background: #FBFBFF; border-radius: var(--r);
    padding: 16px 18px; margin-top: 16px;
}
.crm.showspec .spec { display: block; }
.crm .spec h4 {
    margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .07em;
    color: var(--indigo-dark);
}
.crm .spec dl { margin: 0 0 12px; }
.crm .spec dl:last-child { margin: 0; }
.crm .spec dt { font-weight: 700; font-size: 12.5px; margin-top: 9px; }
.crm .spec dd { margin: 2px 0 0; font-size: 12.5px; color: #3F434C; }
.crm .spec code {
    background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; font-size: 11.5px;
}

/* Sits left of the app's own chat bubble, which owns the very corner. */
.crm-fab { position: fixed; right: 84px; bottom: 20px; z-index: 50; }
.crm-fab button {
    background: var(--ink); color: #fff; border: 0; border-radius: 999px; padding: 11px 18px;
    font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.crm-fab button.on { background: var(--indigo); }