/* HeroX HQ — Sales CRM in Pipedrive's layout (Dan, 4 Nov: "make it look like a perfect replica"). Applies only while
   body.crm-pd is set (#/sales… routes, crm2-shell.js). Sizes, spacing and colour roles measured on the live Pipedrive
   account (Inter 14/21 @450, ink #21232C, secondary text #65686F, borders rgba(33,35,44,.14), columns #F5F5F6, primary
   #2D8647, selection #0D68C5 on #EFF6FF, overdue #C82627 / mark #FA5E51, no-activity mark #FFDF5C, rotting card #FEF2F0).
   HQ keeps its own icons and its HeroX mark. */
@media (prefers-color-scheme:light){
  body.crm-pd{--bg:#fff;--surface:#fff;--surface2:#f5f5f6;--grey-soft:#f5f5f6;--border:rgba(33,35,44,.14);--grid:rgba(33,35,44,.14);--gridh:#f9f9fa;
    --ink:#21232c;--ink2:#65686f;--ink3:rgba(33,35,44,.56);--action:#0d68c5;--action2:#0b58a8;--action-soft:#eff6ff;--sel:#0d68c5;--accent:#0d68c5;--accent-soft:#eff6ff;--link:#0d68c5;
    --ok:#2d8647;--ok-soft:#e7f4eb;--bad:#d83c38;--bad-soft:#fef2f0;--late:#c82627;--warn:#8a6100;--warn-soft:#fff6d6;--info:#0d68c5;--info-soft:#eff6ff;
    --sh1:0 0 1px 1px rgba(0,0,0,.05),0 1px 2px -2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.07);
    --sh2:0 0 2px rgba(0,0,0,.24),0 8px 10px 1px rgba(0,0,0,.05),0 3px 14px 2px rgba(0,0,0,.06);background:#fff}
}
@media (min-width:761px){
  body.crm-pd{--nav:56px;--top:56px;font-weight:450;letter-spacing:0}
  body.crm-pd #nav{display:none}
  body.crm-pd #main{margin-left:56px;padding:0 16px 0}
  /* the rail */
  #crmrail{display:none}
  body.crm-pd #crmrail{display:flex;flex-direction:column;align-items:center;gap:4px;position:fixed;left:0;top:0;bottom:0;width:56px;padding:8px 0;box-sizing:border-box;background:#211c52;z-index:80;box-shadow:0 0 2px rgba(0,0,0,.24),0 16px 24px 2px rgba(0,0,0,.05)}
  #crmrail .cr-logo{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;margin-bottom:8px}
  #crmrail .cr-logo i{width:28px;height:28px;border-radius:8px;background:var(--hx,#d7263d);display:block;position:relative}
  #crmrail .cr-logo i:after{content:'';position:absolute;left:6px;right:6px;bottom:8px;height:10px;border-radius:12px 12px 1px 1px;background:#fff}
  #crmrail .cr-i{position:relative;width:40px;height:40px;box-sizing:border-box;padding:10px;border-radius:8px;color:#fff;display:flex;align-items:center;justify-content:center;text-decoration:none}
  #crmrail .cr-i svg{width:20px;height:20px}
  #crmrail .cr-i:hover{background:rgba(255,255,255,.12)}
  #crmrail .cr-i.on{background:#6150e1}
  #crmrail .cr-sp{flex:1}
  #crmrail .cr-tip{position:absolute;left:48px;top:50%;transform:translateY(-50%);background:#21232c;color:#fff;font-size:12px;font-weight:600;line-height:16px;padding:4px 8px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s}
  #crmrail .cr-i:hover .cr-tip{opacity:1}
  /* the slim white header */
  body.crm-pd #topbar{height:56px;margin:0 -16px 16px;padding:0 16px 0 16px;gap:8px;background:#fff;border-bottom:0;box-shadow:0 0 1px 1px rgba(0,0,0,.05),0 1px 2px -2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.07);backdrop-filter:none;-webkit-backdrop-filter:none}
  body.crm-pd #topbar #modbar{display:none}
  body.crm-pd #topbar .grow{flex:1 1 0}
  body.crm-pd #crmtitle{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:6px;font-size:16px;line-height:24px;white-space:nowrap;overflow:hidden}
  body.crm-pd #crmtitle b{font-weight:600}
  body.crm-pd #crmtitle .ct-a{color:var(--ink);font-weight:450}
  body.crm-pd #crmtitle .ct-s{color:var(--ink3)}
  body.crm-pd #gs{flex:0 0 360px;width:360px;min-width:0;height:40px;margin:0;border-radius:40px;border:1px solid rgba(33,35,44,.14);background:#fff;box-shadow:none}
  body.crm-pd #gs input{font-size:14px;height:38px}
  body.crm-pd #gs kbd{display:none}
  body.crm-pd #crmqa{order:0;width:40px;height:40px;border-radius:100px;border:1px solid rgba(33,35,44,.14);background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(42,54,71,.05)}
  body.crm-pd #topbar .ai-btn{width:40px;height:40px;padding:0;justify-content:center;border-radius:100px;box-shadow:none}
  body.crm-pd #topbar .ai-btn span{display:none}
  body.crm-pd #crmme{display:inline-flex;margin-left:8px}
  body.crm-pd #crmme .av{width:32px;height:32px;font-size:12px}
  #crmtitle,#crmme{display:none}
  body.crm-pd #crmtitle{display:flex}
  /* the page itself */
  body.crm-pd #view{padding:0}
  body.crm-pd.cl-dr #view{padding-right:360px}
  body.crm-pd .cb-banner{position:fixed;left:72px;bottom:12px;z-index:70;max-width:560px;padding:6px 10px;border:0;border-radius:8px;font-size:12px;line-height:18px;margin:0;background:#21232c;color:#fff;box-shadow:0 0 2px rgba(0,0,0,.24),0 8px 10px 1px rgba(0,0,0,.05),0 3px 14px 2px rgba(0,0,0,.06)}
  body.crm-pd .cb-banner .cb-ic{color:#fff}
  body.crm-pd .cb-board{margin-top:16px;height:calc(100vh - 194px);min-height:360px}
  body.crm-pd .cb-col{background:#f5f5f6;border-radius:0;min-width:186px;overflow:auto}
  body.crm-pd .cb-col:first-child .cb-ch{border-top-left-radius:12px}
  body.crm-pd .cb-col:last-child .cb-ch{border-top-right-radius:12px;clip-path:none}
  body.crm-pd .cb-ch{background:#f5f5f6;padding:8px 20px 0 12px}
  body.crm-pd .cb-ch .s{color:#65686f}
  body.crm-pd .cb-cards{padding:2px 6px 8px;gap:4px}
  body.crm-pd .cb-card{padding:6px 32px 6px 8px;min-height:45px;flex-shrink:0}
  body.crm-pd .cb-card .t{font-size:14px;font-weight:600;line-height:21px;color:#21232c}
  body.crm-pd .cb-card .m{font-size:12px;line-height:18px;color:#65686f}
  body.crm-pd .cb-card .m.ecd.past{color:#c82627}
  body.crm-pd .cb-card .m.ecd .cb-ic{width:14px;height:14px;margin-right:3px}
  body.crm-pd .cb-card .v{display:inline;font-size:11px;font-weight:600;line-height:18px;color:#65686f}
  body.crm-pd .cb-card .b{display:flex;align-items:center;justify-content:flex-start;gap:4px;margin-top:3px;min-height:18px}
  body.crm-pd .cb-card .b .av{width:16px;height:16px;font-size:7px}
  body.crm-pd .cb-card .cb-as{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:24px;height:24px;padding:4px;border-radius:24px;background:#fff}
  body.crm-pd .cb-card.rot .cb-as{background:transparent}
  body.crm-pd .cb-card .cb-as svg{width:16px;height:16px}
  body.crm-pd .cb-as.none{color:#ffdf5c}
  body.crm-pd .cb-as.none svg path+path{stroke:#21232c}
  body.crm-pd .cb-as.over{color:#fa5e51}
  body.crm-pd .cb-as.plan{color:#a1a3a8}
  body.crm-pd .cb-as.today{color:#2d8647}
  body.crm-pd .cb-pill.rp{height:16px;line-height:16px;border-radius:4px;padding:0 4px;font-size:11px;font-weight:600;background:#c82627}
  body.crm-pd .cb-card .rpl{display:flex;align-items:center;gap:4px;margin-top:4px;font-size:12px;font-weight:600;line-height:18px;color:#0d68c5}
  body.crm-pd .cb-card .rpl .cb-ic{width:14px;height:14px}
  /* toolbar */
  body.crm-pd .cb-btn{border-color:rgba(33,35,44,.14);box-shadow:0 1px 2px rgba(42,54,71,.05);font-weight:600}
  body.crm-pd .cb-btn.pri{background:#2d8647;border-color:#2d8647}
  body.crm-pd .cb-btn.neg{background:#d83c38;border-color:#d83c38}
  body.crm-pd .cb-seg{border-color:rgba(33,35,44,.14);box-shadow:0 1px 2px rgba(42,54,71,.05)}
  body.crm-pd .cb-seg button{color:#21232c}
  body.crm-pd .cb-seg button.on{background:#eff6ff;color:#0d68c5;box-shadow:inset 0 0 0 1px #2b74da}
  body.crm-pd .cb-chip{color:rgba(33,35,44,.72)}
  body.crm-pd .cb-pop{border:0;border-radius:12px;box-shadow:0 0 2px rgba(0,0,0,.24),0 8px 10px 1px rgba(0,0,0,.05),0 3px 14px 2px rgba(0,0,0,.06)}
  /* deal page */
  body.crm-pd .cd-hd{margin:-16px -16px 0;padding:16px 16px 8px;background:#fff;border:0}
  body.crm-pd .cd-title{font-size:25px;line-height:38px;font-weight:400}
  body.crm-pd .cd-st{flex:1 1 180px;max-width:186px;height:24px;font-size:12px;line-height:24px;padding:0 6px 0 14px;background:rgba(33,35,44,.12);color:#65686f;margin-right:-4px}
  body.crm-pd .cd-st:first-child{border-radius:8px 0 0 8px;padding-left:8px}
  body.crm-pd .cd-st.done,body.crm-pd .cd-st.cur{background:#2d8647;color:#fff}
  body.crm-pd .cd-crumb{font-size:12px;color:#0d68c5}
  body.crm-pd .cd-body{margin:0 -16px;border:0;border-radius:0;border-top:1px solid rgba(33,35,44,.14);height:calc(100vh - 205px);min-height:420px}
  body.crm-pd .cd-side{background:#fff;border-right:1px solid rgba(33,35,44,.14);padding:12px 0 16px}
  body.crm-pd .cd-main{background:#f5f5f6;padding:24px}
  body.crm-pd .cd-sec{border-bottom:1px solid rgba(33,35,44,.14)}
  body.crm-pd .cd-sec>h3{font-size:16px;line-height:24px;font-weight:600}
  body.crm-pd .cd-lnk,body.crm-pd .cd-side a{color:#0d68c5}
  body.crm-pd .cd-comp{border:0;border-radius:8px;background:#fff;box-shadow:0 0 1px 1px rgba(0,0,0,.05),0 1px 2px -2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.07)}
  body.crm-pd .cd-tabs button{height:40px;padding:6px 12px;font-size:14px;font-weight:450;color:#21232c}
  body.crm-pd .cd-tabs button.on{background:#eff6ff;color:#0d68c5;box-shadow:none}
  body.crm-pd .cd-h{font-size:16px;line-height:24px;font-weight:600;color:#000}
  body.crm-pd .cd-it .cc{border:0;border-radius:8px;background:#fff;box-shadow:0 0 1px 1px rgba(0,0,0,.05),0 1px 2px -2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.07)}
  body.crm-pd .cd-it .cc{max-width:none}
  body.crm-pd .cd-it.note .cc{background:#fff6d6}
  body.crm-pd .cd-it .tt{font-size:16px;line-height:24px;font-weight:600}
  body.crm-pd .cd-it .cmt{font-size:12px;line-height:18px;color:#65686f}
  body.crm-pd .cd-chips .cb-chip{font-size:12px;font-weight:600;color:#0d68c5}
  body.crm-pd .cd-side a,body.crm-pd .cd-lnk{text-decoration:none;font-weight:600}
  body.crm-pd .cd-it .cmt a{color:#65686f;text-decoration:none;font-weight:450}
  body.crm-pd .cd-it .cmt a:hover,body.crm-pd .cd-side a:hover{text-decoration:underline}
  /* dialogs (Add deal, activity form) */
  body.crm-pd #mbox .btn.p,body.crm-pd .af .btn.p,body.crm-pd .cb-pop .btn.p{background:#2d8647;border-color:#2d8647;color:#fff}
  body.crm-pd .ad-two select.in{flex:0 0 120px;width:120px}
  body.crm-pd .ad-two .in:first-child{flex:1 1 auto;min-width:0;width:auto}
  /* Contacts menu column (lists and the person / organization pages) */
  body.crm-pd .ct-wrap{grid-template-columns:230px minmax(0,1fr);gap:0;margin:-16px -16px 0}
  body.crm-pd .ct-nav{background:#f5f5f6;padding:8px;min-height:calc(100vh - 56px);box-sizing:border-box;gap:2px}
  body.crm-pd .ct-nav .ct-h{display:none}
  body.crm-pd .ct-nav a,body.crm-pd .ct-nav .ct-x{height:32px;padding:0 8px;border-radius:6px;display:flex;align-items:center;gap:8px;font-size:14px;color:#21232c;text-decoration:none}
  body.crm-pd .ct-nav a.on{background:#e3effd;color:#0d68c5;font-weight:600}
  body.crm-pd .ct-main{padding:16px 16px 0;min-width:0}
  body.crm-pd .ct-wrap-d .ct-main{padding:0}
  body.crm-pd .ct-wrap-d .cd-hd{margin:0;padding:16px 16px 8px}
  body.crm-pd .ct-wrap-d .cd-body{margin:0}
  /* lists (deals list, activities, people, organizations, leads) */
  body.crm-pd .ag-wrap{border:0;border-top:1px solid rgba(33,35,44,.14);border-radius:0;margin:0 -16px}
  body.crm-pd .ag-t{font-size:14px}
  body.crm-pd .ag-t th{height:31px;padding:0 8px;font-size:14px;font-weight:600;color:#21232c;background:#fff;border-bottom:1px solid rgba(33,35,44,.14);border-right:1px solid rgba(33,35,44,.14);text-transform:none;letter-spacing:0}
  body.crm-pd .ag-t td{height:31px;padding:0 8px;border-bottom:1px solid rgba(33,35,44,.14);border-right:1px solid rgba(33,35,44,.14)}
  body.crm-pd .ag-t td a{color:#0d68c5}
  body.crm-pd .ag-t tr:hover td{background:#f5f5f6}
}