/* © 2026 Dapit Financial Infrastructure. All rights reserved.
   Proprietary and confidential. Unauthorized copying, distribution,
   or modification of this file is strictly prohibited.

   crm/css/crm.css

   Two layouts, one stylesheet. Full mode is kanban and dense tables for tablet
   and desktop; simple mode is one thing at a time for a phone. The switch is
   the `dcrm-simple` class on the shell, set from a stored preference rather
   than a media query — screen size only chooses the DEFAULT, and a rep who
   prefers the simple view on a tablet keeps it. */

:root {
  --dcrm-deep:#0350AA; --dcrm-blue:#0082CA; --dcrm-cyan:#009ADA;
  --dcrm-ink:#2B2E35;  --dcrm-mute:#6b7280; --dcrm-faint:#9ca3af;
  --dcrm-line:#e5e7eb; --dcrm-bg:#f6f8fb;   --dcrm-card:#fff;
  --dcrm-ok:#15803d;   --dcrm-okbg:#f0fdf4; --dcrm-bad:#991b1b; --dcrm-badbg:#fef2f2;
  --dcrm-warn:#854d0e; --dcrm-warnbg:#fefce8;
}

*{box-sizing:border-box}
body{margin:0;background:var(--dcrm-bg);color:var(--dcrm-ink);
     font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
     -webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--dcrm-deep)}

.dcrm-boot{padding:60px 20px;text-align:center;color:var(--dcrm-mute)}
.dcrm-booterr strong{display:block;color:var(--dcrm-ink);font-size:16px;margin-bottom:6px}

/* ── Shell ───────────────────────────────────────────────────────────── */
.dcrm-shell{max-width:1400px;margin:0 auto;padding:0 20px 60px}
.dcrm-bar{display:flex;align-items:center;gap:14px;padding:14px 0;flex-wrap:wrap}
.dcrm-brand{display:flex;align-items:center;gap:10px;margin-right:auto;min-width:0}
.dcrm-mark{width:30px;height:30px;border-radius:8px;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px;
  background:linear-gradient(135deg,var(--dcrm-deep),var(--dcrm-cyan))}
.dcrm-who{min-width:0}
.dcrm-tenant{font-weight:800;letter-spacing:-.2px;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcrm-role{font-size:10px;color:var(--dcrm-faint);letter-spacing:.1em;text-transform:uppercase;font-weight:600}

/* Product mark in the bar, in place of the initial-letter tile. Natural width
   is 331px and it renders at 132, so it stays sharp on a phone. The button
   wrapper exists because the mark is a link home, and a bare <img> with an
   onclick is not reachable from a keyboard. */
.dcrm-logobtn{border:0;background:none;padding:0;margin:0;cursor:pointer;
  display:flex;align-items:center;flex:0 0 auto;line-height:0}
.dcrm-logobtn:focus-visible{outline:2px solid var(--dcrm-blue);outline-offset:3px;border-radius:6px}
.dcrm-logo{width:132px;height:auto;display:block}
/* With a product mark present the household name is the SECOND fact, not the
   first: she knows what app she is in, and the bar should not shout it twice. */
.dcrm-brand .dcrm-logobtn + .dcrm-who .dcrm-tenant{font-weight:600;font-size:13px;color:var(--dcrm-mute)}
@media (max-width:520px){ .dcrm-logo{width:112px} }

.dcrm-modes{display:flex;border:1px solid var(--dcrm-line);border-radius:8px;overflow:hidden;background:#fff}
.dcrm-modes button{border:0;background:transparent;padding:7px 12px;font-size:11.5px;
  font-weight:700;color:var(--dcrm-mute);cursor:pointer}
.dcrm-modes button.on{background:var(--dcrm-deep);color:#fff}

.dcrm-back{border:1px solid var(--dcrm-line);background:#fff;border-radius:8px;
  padding:7px 13px;font-size:12px;font-weight:700;color:var(--dcrm-mute);cursor:pointer}

/* ── Widget map ──────────────────────────────────────────────────────── */
.dcrm-intro{padding:6px 0 16px}
.dcrm-kick{font-size:20px;font-weight:800;letter-spacing:-.4px}
.dcrm-lead{margin:4px 0 0;color:var(--dcrm-mute);font-size:13px}
.dcrm-top{display:flex;gap:12px;flex-wrap:wrap}
.dcrm-tile{position:relative;flex:1 1 190px;min-width:170px;text-align:left;cursor:pointer;
  background:var(--dcrm-card);border:1px solid var(--dcrm-line);border-radius:14px;
  padding:16px 16px 18px;transition:transform .12s,box-shadow .12s,opacity .12s;
  display:flex;flex-direction:column;gap:3px}
.dcrm-tile:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(16,24,40,.10)}
.dcrm-tile.dcrm-dim{opacity:.35}
.dcrm-tile.dcrm-focus{border-color:var(--dcrm-blue);box-shadow:0 0 0 3px rgba(3,80,170,.10)}
.dcrm-pinned{flex:0 0 130px;min-width:130px;background:#fbfdff}
.dcrm-code{font-size:9.5px;font-weight:800;letter-spacing:.1em;color:var(--dcrm-blue)}
.dcrm-name{font-size:15px;font-weight:800;letter-spacing:-.2px}
.dcrm-desc{font-size:11.5px;color:var(--dcrm-mute)}
.dcrm-badge{position:absolute;top:12px;right:12px;background:var(--dcrm-deep);color:#fff;
  border-radius:999px;padding:1px 8px;font-size:10.5px;font-weight:700}
.dcrm-branch{margin-top:14px}
.dcrm-children{display:flex;gap:10px;flex-wrap:wrap}
.dcrm-child{display:flex;align-items:center;gap:8px;cursor:pointer;
  background:#fff;border:1px solid var(--dcrm-line);border-radius:10px;padding:10px 14px;
  font-size:13px;font-weight:600}
.dcrm-child:hover{border-color:var(--dcrm-blue);color:var(--dcrm-deep)}
.dcrm-childcount{background:var(--dcrm-bg);border-radius:999px;padding:0 7px;
  font-size:11px;color:var(--dcrm-mute)}
.dcrm-tip{margin-top:16px;font-size:11px;color:var(--dcrm-faint)}

.dcrm-panel{background:#fff;border:1px solid var(--dcrm-line);border-radius:14px;padding:18px;max-width:640px}
.dcrm-panelhead{font-size:15px;font-weight:800;margin-bottom:3px}
.dcrm-panelsub{font-size:12px;color:var(--dcrm-mute);margin-bottom:12px}
.dcrm-askin{width:100%;padding:10px 12px;border:1px solid var(--dcrm-line);border-radius:9px;background:#fff}
.dcrm-askres{margin-top:10px;display:flex;flex-direction:column;gap:2px}
.dcrm-row{display:flex;align-items:baseline;gap:10px;width:100%;text-align:left;cursor:pointer;
  background:transparent;border:0;border-radius:8px;padding:9px 10px}
.dcrm-row:hover{background:var(--dcrm-bg)}
.dcrm-rowlab{font-weight:600}
.dcrm-rowsub{font-size:11px;color:var(--dcrm-faint);margin-left:auto}
.dcrm-recentrow{display:flex;align-items:center;gap:2px}
.dcrm-rowgrow{flex:1}
.dcrm-pin,.dcrm-forget{border:0;background:transparent;cursor:pointer;color:var(--dcrm-faint);
  font-size:15px;padding:6px 8px;border-radius:6px}
.dcrm-pin.on{color:#d97706}
.dcrm-pin:hover,.dcrm-forget:hover{background:var(--dcrm-bg);color:var(--dcrm-ink)}
.dcrm-empty{padding:26px 6px;text-align:center;color:var(--dcrm-faint);font-size:13px}

/* ── Board ───────────────────────────────────────────────────────────── */
.dcrm-head{display:flex;align-items:center;gap:12px;margin:6px 0 16px;flex-wrap:wrap}
.dcrm-h1{font-size:19px;font-weight:800;letter-spacing:-.3px;margin:0}
.dcrm-sub{font-size:12.5px;color:var(--dcrm-mute)}
.dcrm-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.dcrm-btn{border:1px solid var(--dcrm-deep);background:var(--dcrm-deep);color:#fff;
  border-radius:8px;padding:9px 16px;font-size:12.5px;font-weight:700;cursor:pointer}
.dcrm-btn.ghost{background:#fff;color:var(--dcrm-mute);border-color:var(--dcrm-line)}
.dcrm-btn:disabled{opacity:.55;cursor:default}

/* The board FITS. The previous version pinned columns at 268px and let the
   whole thing scroll sideways, which meant eight stages never fit on any
   screen — the one thing a pipeline is for is seeing the whole pipeline.
   Columns now share the available width and only start scrolling when there
   is genuinely no room. */
.dcrm-board{display:flex;gap:8px;overflow-x:auto;padding-bottom:14px;align-items:stretch}
.dcrm-col{flex:1 1 0;min-width:158px;max-width:320px;background:#eef2f7;
  border-radius:10px;padding:8px;min-height:110px;border-top:3px solid transparent}
.dcrm-col.over{background:#e2ecf9;outline:2px dashed var(--dcrm-blue)}
.dcrm-colhead{padding:2px 4px 9px}
.dcrm-coltop{display:flex;align-items:baseline;gap:6px}
.dcrm-colname{font-weight:800;font-size:12px;letter-spacing:-.1px}
.dcrm-colcount{font-size:10.5px;color:var(--dcrm-mute);background:#fff;border-radius:999px;
  padding:0 6px;margin-left:auto}
.dcrm-coltotal{font-size:10.5px;color:var(--dcrm-mute);font-variant-numeric:tabular-nums;margin-top:2px}

/* ── KPI strip ───────────────────────────────────────────────────────────
   The numbers a rep is actually judged on, above the board rather than
   buried inside it. */
.dcrm-kpis{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.dcrm-kpi{flex:1 1 130px;background:#fff;border:1px solid var(--dcrm-line);
  border-radius:10px;padding:11px 14px}
.dcrm-kpiv{font-size:19px;font-weight:800;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.dcrm-kpil{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--dcrm-faint);margin-top:1px}
.dcrm-cardlist{display:flex;flex-direction:column;gap:8px;min-height:40px}
.dcrm-item{background:#fff;border:1px solid var(--dcrm-line);border-radius:9px;padding:9px 10px;
  cursor:grab;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.dcrm-itemtop{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.dcrm-prod{font-size:8.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 6px;border-radius:5px;background:var(--dcrm-bg);color:var(--dcrm-mute);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.dcrm-age{margin-left:auto;font-size:9.5px;color:var(--dcrm-faint);font-variant-numeric:tabular-nums}
.dcrm-age.stale{color:#b45309;font-weight:700}
.dcrm-itemval{display:flex;align-items:baseline;gap:6px;margin-top:4px}
.dcrm-permo{font-size:13px;font-weight:800;color:#c2410c;font-variant-numeric:tabular-nums}
.dcrm-prob{margin-left:auto;font-size:10px;color:var(--dcrm-mute);font-variant-numeric:tabular-nums}
.dcrm-note{font-size:10px;color:var(--dcrm-faint);margin-top:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dcrm-item:active{cursor:grabbing}
.dcrm-item.dragging{opacity:.4}
.dcrm-itemtitle{font-weight:700;font-size:12.5px;line-height:1.3}
.dcrm-itemmeta{font-size:11px;color:var(--dcrm-mute);margin-top:4px;display:flex;gap:8px;flex-wrap:wrap}
.dcrm-money{font-variant-numeric:tabular-nums;font-weight:700}

/* ── Lists and detail ────────────────────────────────────────────────── */
.dcrm-card{background:#fff;border:1px solid var(--dcrm-line);border-radius:14px;overflow:hidden}
.dcrm-table{width:100%;border-collapse:collapse;font-size:13px}
.dcrm-table th{text-align:left;font-size:10px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dcrm-faint);padding:11px 14px;border-bottom:1px solid var(--dcrm-line);
  background:#fafcfe}
.dcrm-table td{padding:11px 14px;border-bottom:1px solid var(--dcrm-line)}
.dcrm-table tr:last-child td{border-bottom:0}
.dcrm-table tbody tr{cursor:pointer}
.dcrm-table tbody tr:hover{background:var(--dcrm-bg)}
.dcrm-pill{display:inline-block;font-size:10px;font-weight:700;padding:2px 9px;border-radius:999px;
  background:var(--dcrm-bg);color:var(--dcrm-mute)}
.dcrm-pill.ok{background:var(--dcrm-okbg);color:var(--dcrm-ok)}
.dcrm-pill.bad{background:var(--dcrm-badbg);color:var(--dcrm-bad)}
.dcrm-pill.warn{background:var(--dcrm-warnbg);color:var(--dcrm-warn)}

.dcrm-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;padding:18px}
.dcrm-field label{display:block;font-size:11px;font-weight:700;color:var(--dcrm-mute);margin-bottom:4px}
.dcrm-field input,.dcrm-field select,.dcrm-field textarea{width:100%;padding:9px 11px;
  border:1px solid var(--dcrm-line);border-radius:8px;background:#fff}
.dcrm-wide{grid-column:1/-1}
.dcrm-formfoot{display:flex;gap:8px;padding:0 18px 18px}

.dcrm-detail{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;align-items:start}
.dcrm-sect{padding:16px 18px}
.dcrm-secthead{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--dcrm-faint);margin-bottom:10px}
.dcrm-kv{display:flex;gap:10px;padding:6px 0;font-size:13px;border-bottom:1px solid #f1f5f9}
.dcrm-kv:last-child{border-bottom:0}
.dcrm-k{color:var(--dcrm-mute);min-width:120px}
.dcrm-v{font-weight:600;word-break:break-word}
.dcrm-feed{display:flex;flex-direction:column;gap:10px}
.dcrm-feeditem{border-left:2px solid var(--dcrm-line);padding:2px 0 2px 12px}
.dcrm-feedtitle{font-weight:700;font-size:13px}
.dcrm-feedmeta{font-size:11px;color:var(--dcrm-faint)}

.dcrm-todo{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid #f1f5f9}
.dcrm-todo:last-child{border-bottom:0}
.dcrm-todo input{margin-top:3px;width:17px;height:17px;flex:0 0 auto}
.dcrm-todo.done .dcrm-todotitle{text-decoration:line-through;color:var(--dcrm-faint)}
.dcrm-todotitle{font-weight:600;font-size:13px}
.dcrm-todometa{font-size:11px;color:var(--dcrm-faint)}
.dcrm-overdue{color:var(--dcrm-bad);font-weight:700}

.dcrm-msg{padding:10px 13px;border-radius:9px;font-size:12.5px;margin-bottom:12px}
.dcrm-msg.err{background:var(--dcrm-badbg);color:var(--dcrm-bad);border:1px solid #fecaca}
.dcrm-msg.ok{background:var(--dcrm-okbg);color:var(--dcrm-ok);border:1px solid #bbf7d0}

/* ── Simple mode ─────────────────────────────────────────────────────── */
/* Not a media query. The class is set from a stored preference so the choice
   travels with the member; screen size only picks the default. */
.dcrm-simple .dcrm-board{display:block;overflow:visible}
.dcrm-simple .dcrm-col{width:auto;flex:none;margin-bottom:12px;background:transparent;padding:0}
.dcrm-simple .dcrm-colhead{padding:8px 2px;border-bottom:1px solid var(--dcrm-line)}
.dcrm-simple .dcrm-item{cursor:pointer}
.dcrm-simple .dcrm-detail{grid-template-columns:1fr}
/* Compact tiles on a phone. The point of simple mode is TODAY, IMMEDIATELY,
   and six full-height cards push everything below the fold before you have
   reached anything. Two per row, no descriptions, so the whole map fits in
   about one screen and the work is visible without scrolling. */
.dcrm-simple .dcrm-top{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dcrm-simple .dcrm-tile{flex:none;width:auto;min-width:0;padding:11px 12px;border-radius:11px;gap:1px}
.dcrm-simple .dcrm-desc{display:none}
.dcrm-simple .dcrm-name{font-size:14px}
.dcrm-simple .dcrm-tile:hover{transform:none;box-shadow:none}
.dcrm-simple .dcrm-badge{top:9px;right:10px}
.dcrm-simple .dcrm-intro{padding:2px 0 12px}
.dcrm-simple .dcrm-kick{font-size:17px}
.dcrm-simple .dcrm-tip{display:none}
.dcrm-simple .dcrm-form{grid-template-columns:1fr}
.dcrm-simple .dcrm-table thead{display:none}
.dcrm-simple .dcrm-table td{display:block;border:0;padding:2px 14px}
.dcrm-simple .dcrm-table tr{display:block;border-bottom:1px solid var(--dcrm-line);padding:10px 0}

@media (max-width:760px){
  .dcrm-shell{padding:0 12px 60px}
  .dcrm-detail{grid-template-columns:1fr}
  .dcrm-form{grid-template-columns:1fr}
}


/* ── Modal ───────────────────────────────────────────────────────────────
   Replaces window.prompt(), which was expedient and wrong: it cannot be
   styled, it blocks the page, and a browser that offers "prevent this page
   from creating additional dialogs" lets a user permanently disable the
   feature by accident. */
.dcrm-overlay{position:fixed;inset:0;background:rgba(20,26,38,.45);z-index:900;
  display:flex;align-items:center;justify-content:center;padding:20px}
.dcrm-modal{background:#fff;border-radius:14px;width:100%;max-width:460px;
  box-shadow:0 20px 60px rgba(16,24,40,.28);overflow:hidden}
.dcrm-modalhead{padding:16px 18px 4px;font-size:15px;font-weight:800}
.dcrm-modalsub{padding:0 18px 12px;font-size:12px;color:var(--dcrm-mute)}
.dcrm-modalbody{padding:0 18px 4px;display:flex;flex-direction:column;gap:12px}
.dcrm-modalfoot{padding:14px 18px 16px;display:flex;gap:8px;justify-content:flex-end}
.dcrm-modal label{display:block;font-size:11px;font-weight:700;color:var(--dcrm-mute);margin-bottom:4px}
.dcrm-modal input,.dcrm-modal select,.dcrm-modal textarea{width:100%;padding:9px 11px;
  border:1px solid var(--dcrm-line);border-radius:8px;background:#fff}
.dcrm-chips{display:flex;gap:6px;flex-wrap:wrap}
.dcrm-chip{border:1px solid var(--dcrm-line);background:#fff;border-radius:999px;
  padding:5px 12px;font-size:12px;cursor:pointer}
.dcrm-chip.on{background:var(--dcrm-deep);border-color:var(--dcrm-deep);color:#fff;font-weight:700}