/* ============================================================
   SEED CRM v2 — Design System ("Greenhouse")
   Prefix: sd-  ·  Mockup stylesheet (design prototype)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

:root{
  /* palette */
  --sd-bg:#F4F6F2;            /* warm paper */
  --sd-surface:#FFFFFF;
  --sd-ink:#15211A;
  --sd-muted:#6B7A6F;
  --sd-line:#E4E9E2;
  --sd-green:#4CAE39;         /* brand */
  --sd-green-deep:#2F7A22;
  --sd-green-soft:#EAF6E5;
  --sd-forest:#11271A;        /* sidebar */
  --sd-forest-2:#1A3826;
  --sd-amber:#E8932B;  --sd-amber-soft:#FDF3E4;
  --sd-purple:#8B5CF6; --sd-purple-soft:#F1EBFE;
  --sd-blue:#2C7BE5;   --sd-blue-soft:#E8F1FD;
  --sd-red:#D6435B;    --sd-red-soft:#FCE9EC;
  --sd-radius:16px; --sd-radius-sm:10px;
  --sd-shadow:0 1px 2px rgba(21,33,26,.05),0 4px 16px rgba(21,33,26,.05);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',sans-serif;background:var(--sd-bg);color:var(--sd-ink);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.sd-display{font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:-.015em}
a{color:var(--sd-green-deep);text-decoration:none}
::placeholder{color:#9AA89E}

/* ---------- shell ---------- */
.sd-shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.sd-main{display:flex;flex-direction:column;min-width:0}
.sd-content{padding:24px 28px 48px;max-width:1440px;width:100%;margin:0 auto}

/* ---------- sidebar ---------- */
.sd-side{background:linear-gradient(180deg,var(--sd-forest) 0%,#0D2014 100%);color:#fff;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.sd-side-logo{display:flex;align-items:center;gap:10px;padding:20px 20px 16px;font-family:'Plus Jakarta Sans';font-weight:800;font-size:19px;color:#fff}
.sd-side-logo .sd-leaf{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--sd-green),#7ED957);display:flex;align-items:center;justify-content:center;font-size:17px}
.sd-side-logo small{display:block;font:600 10px 'Inter';letter-spacing:.14em;color:#7FA98B;text-transform:uppercase}
.sd-nav{padding:6px 12px;flex:0 0 auto}
.sd-nav-label{font:600 10px 'Inter';letter-spacing:.12em;text-transform:uppercase;color:#5E7E68;padding:14px 12px 6px}
.sd-nav a{display:flex;align-items:center;gap:11px;color:#C9D8CD;padding:9px 12px;border-radius:11px;font-weight:500;margin:1px 0;transition:.15s}
.sd-nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.sd-nav a.on{background:var(--sd-green);color:#fff;font-weight:600;box-shadow:0 4px 12px rgba(76,174,57,.35)}
.sd-nav a .ico{width:20px;text-align:center;font-size:16px}
.sd-nav a .sd-count{margin-left:auto;background:rgba(255,255,255,.14);border-radius:99px;font:600 10.5px 'Inter';padding:1px 8px}
.sd-pins{padding:0 12px;overflow-y:auto;flex:1}
.sd-pins a{display:flex;align-items:center;gap:9px;color:#AFC4B4;padding:7px 12px;border-radius:10px;font-size:13px}
.sd-pins a:hover{background:rgba(255,255,255,.07);color:#fff}
/* themed scrollbar for the dark sidebar clients list */
.sd-pins{scrollbar-width:thin;scrollbar-color:rgba(175,196,180,.32) transparent}
.sd-pins::-webkit-scrollbar{width:10px}
.sd-pins::-webkit-scrollbar-track{background:transparent}
.sd-pins::-webkit-scrollbar-thumb{background:rgba(175,196,180,.28);border-radius:99px;border:3px solid transparent;background-clip:padding-box}
.sd-pins::-webkit-scrollbar-thumb:hover{background:rgba(175,196,180,.5);background-clip:padding-box}
.sd-side-search{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:7px 11px}
.sd-side-search i{font-size:15px;color:#7FA98B;flex:0 0 auto}
.sd-side-search input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#fff;font-size:13px}
.sd-side-search input::placeholder{color:#6E8C77}
.sd-pin-dot{width:7px;height:7px;border-radius:50%;background:#52C234;flex:0 0 auto}
.sd-pin-dot.off{background:#D6435B}
.sd-side-user{margin:10px 12px 14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:13px;padding:10px 12px;display:flex;align-items:center;gap:10px}
.sd-side-user img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.sd-side-user b{font-size:13px;color:#fff;display:block;line-height:1.2}
.sd-side-user span{font-size:11px;color:#8FAE97}

/* ---------- topbar ---------- */
/* the header + the global on-call strip share one sticky wrapper so both stay pinned */
.sd-stickytop{position:sticky;top:0;z-index:50}
.sd-top{background:rgba(244,246,242,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--sd-line);display:flex;align-items:center;gap:14px;padding:12px 28px}
.sd-top h1{font-size:17px;font-weight:700}
.sd-crumb{color:var(--sd-muted);font-size:12.5px}
/* live count chips in the header (calls waiting / agents busy) */
.sd-hstats{display:flex;align-items:center;gap:8px}
.sd-hchip{display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:4px 11px;line-height:1;white-space:nowrap}
.sd-hchip i{font-size:14px}
.sd-hchip b{font:800 14px 'Plus Jakarta Sans',sans-serif;font-variant-numeric:tabular-nums}
.sd-hchip span{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;opacity:.85}
.sd-hchip.wait{background:var(--sd-green-soft);color:var(--sd-green-deep)}
.sd-hchip.busy{background:#E6F1FB;color:#185FA5}
.sd-hchip.wait.alarm{animation:hchipAlarm 1s ease-in-out infinite}
@keyframes hchipAlarm{0%,100%{background:#FEF3C7;color:#CA8A04}50%{background:#FACC15;color:#422006}}
/* waiting-call alert banner — shown to a free agent when a call is waiting in their queue */
.sd-callbanner{display:flex;align-items:center;gap:10px;padding:11px 24px;background:#FEF3C7;border-bottom:2px solid #FACC15;color:#7A5A00;font:700 14px 'Inter';animation:cbPulse 1.5s ease-in-out infinite}
.sd-callbanner i{font-size:20px;color:#CA8A04;flex:0 0 auto}
@keyframes cbPulse{0%,100%{background:#FEF3C7}50%{background:#FCE79A}}
/* global "on call" strip — sticky under the header, wraps to more rows only as needed,
   takes no space when there are no ongoing calls (hidden attribute toggled by seed-live.js) */
.sd-oncall{display:flex;align-items:flex-start;gap:12px;padding:7px 28px;background:#fff;border-bottom:1px solid var(--sd-line)}
.sd-oncall[hidden]{display:none}
.sd-oncall-lead{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding-top:4px;font:700 11px 'Inter';letter-spacing:.05em;text-transform:uppercase;color:#185FA5}
.sd-oncall-lead i{font-size:15px}
.sd-oncall-lead b{background:#185FA5;color:#fff;border-radius:99px;padding:0 7px;font-size:11px;font-variant-numeric:tabular-nums}
.sd-oncall-list{flex:1 1 auto;display:flex;flex-wrap:wrap;gap:6px 8px;max-height:86px;overflow-y:auto}
.oc-chip{display:inline-flex;align-items:center;gap:8px;background:#F4F6F2;border:1px solid var(--sd-line);border-radius:12px;padding:5px 12px;font-size:12.5px;max-width:340px}
.oc-chip .oc-dot{width:7px;height:7px;border-radius:50%;background:#185FA5;flex:0 0 auto}
.oc-chip .oc-dot.ring{background:#C77D18}
.oc-chip .oc-info{display:flex;flex-direction:column;gap:0;min-width:0}
.oc-chip .oc-top{display:flex;align-items:baseline;gap:14px;justify-content:space-between}
.oc-chip b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.oc-chip .oc-t{font-weight:600;font-variant-numeric:tabular-nums;color:var(--sd-forest,#11271A);flex:0 0 auto}
.oc-chip .oc-company{color:var(--sd-muted);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.oc-empty{align-self:center;color:var(--sd-muted);font-size:12.5px;padding:3px 2px}
@media (max-width:768px){ .sd-oncall{padding:7px 16px} .sd-hchip span{display:none} }
.sd-search{flex:1;max-width:430px;margin-left:auto;position:relative}
.sd-search input{width:100%;border:1px solid var(--sd-line);background:#fff;border-radius:99px;height:38px;padding:0 84px 0 38px;font-size:13px;box-shadow:var(--sd-shadow)}
.sd-search .ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#9AA89E}
.sd-search kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:#F0F3EE;border:1px solid var(--sd-line);border-radius:6px;font:600 10px 'Inter';padding:2px 7px;color:var(--sd-muted)}
.sd-sr{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border:1px solid var(--sd-line);border-radius:14px;box-shadow:0 14px 36px rgba(21,33,26,.16);max-height:64vh;overflow:auto;z-index:1100;padding:6px}
.sd-sr-group{font:700 10.5px 'Inter';letter-spacing:.06em;text-transform:uppercase;color:var(--sd-muted);padding:9px 10px 4px}
.sd-sr-item{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:10px;color:var(--sd-ink);text-decoration:none;cursor:pointer}
.sd-sr-item:hover,.sd-sr-item.active{background:var(--sd-green-soft)}
.sd-sr-ic{width:30px;height:30px;border-radius:9px;background:#EAF6E5;color:var(--sd-green-deep);display:flex;align-items:center;justify-content:center;font-size:16px;flex:0 0 auto}
.sd-sr-main{min-width:0;flex:1}
.sd-sr-name{display:block;font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sd-sr-sub{display:block;font-size:11.5px;color:var(--sd-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sd-sr-empty{padding:16px 12px;color:var(--sd-muted);font-size:13px;text-align:center}
/* form modals inject a <form> wrapper which breaks .modal-dialog-scrollable — cap + scroll the body */
#modal .modal-body{max-height:62vh;overflow-y:auto}
/* ---- records component: tabbed list / timeline (company + contact pages) ---- */
.sd-rec-bar{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--sd-line);flex-wrap:wrap}
.sd-rec-pane{display:none}
.sd-rec-pane.on{display:block}
.sd-rec table.dataTable{width:100% !important;border:0;margin:0 !important}
.sd-rec table.dataTable thead{display:none}
.sd-rec table.dataTable tbody td{border:0;padding:0}
.sd-rec table.dataTable tbody tr{background:transparent}
.sd-rec .dataTables_wrapper{padding:4px 4px 0}
.sd-rec .dataTables_filter{float:none;text-align:left;margin:2px 0 6px}
.sd-rec .dataTables_filter label{font-size:0}
.sd-rec .dataTables_filter input{border:1px solid var(--sd-line);border-radius:99px;padding:6px 14px;font-size:13px;margin:0;width:260px;max-width:100%}
.sd-rec .dataTables_info{font-size:12px;color:var(--sd-muted);padding-top:12px}
.sd-rec .dataTables_paginate{padding-top:10px}
.sd-rec .pagination{margin:0}
.sd-rec .pagination .page-link{border:0;border-radius:8px;margin:0 2px;color:var(--sd-muted);font-size:13px}
.sd-rec .pagination .page-item.active .page-link{background:var(--sd-green);color:#fff}
.sd-rec table.dataTable td.dataTables_empty{padding:28px;color:var(--sd-muted);text-align:center;font-size:13px}
/* record-section search box — full width + Greenhouse pill + search icon (every .sd-rec-load list) */
.sd-rec-load .dataTables_filter{float:none;text-align:left;width:100%;margin:0 0 12px}
.sd-rec-load .dataTables_filter label{display:block;width:100%;margin:0;font-size:0}
.sd-rec-load .dataTables_filter input{width:100%!important;box-sizing:border-box;height:40px;border:1px solid var(--sd-line);border-radius:99px;padding:0 16px 0 40px;font-size:13px;margin:0;color:var(--sd-ink);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239AA89E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 15px center;box-shadow:none}
.sd-rec-load .dataTables_filter input::placeholder{color:#9AA89E}
.sd-rec-load .dataTables_filter input:focus{border-color:var(--sd-green);box-shadow:0 0 0 3px rgba(76,174,57,.16);outline:none}
.sd-li{display:flex;align-items:flex-start;gap:12px;padding:12px 6px;border-bottom:1px solid #F1F4EF;color:inherit;text-decoration:none}
.sd-li:hover{background:#FAFCF9}
.sd-li-av{width:38px;height:38px;border-radius:50%;object-fit:cover;background:#EAF6E5;flex:0 0 auto}
.sd-li-ic{width:38px;height:38px;border-radius:11px;background:var(--sd-green-soft);color:var(--sd-green-deep);display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 auto}
.sd-li-main{min-width:0;flex:1}
.sd-li-name{font-weight:700;font-size:14px;color:var(--sd-green-deep)}
.sd-li-name.off{color:var(--sd-red)}
.sd-li-role{font-size:13px;color:var(--sd-ink)}
.sd-li-sub{display:block;font-size:12.5px;color:var(--sd-muted)}
.sd-li-note{display:block;font-size:12.5px;color:var(--sd-muted);margin-top:3px;white-space:pre-line}
.sd-acttl tbody{display:block;position:relative;padding-left:26px}
.sd-acttl tbody::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;background:var(--sd-line);border-radius:2px}
.sd-acttl tbody tr,.sd-acttl tbody td{display:block;width:100%}
.sd-act{position:relative;padding:0 0 16px;display:block;color:inherit;text-decoration:none}
.sd-act:hover .a-body{color:var(--sd-ink)}
.sd-act .nub{position:absolute;left:-26px;top:2px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff}
.sd-act .nub.mail{background:var(--sd-blue)}
.sd-act .nub.sms{background:var(--sd-purple)}
.sd-act .t{display:block;font:600 11px 'Inter';color:var(--sd-muted);margin-bottom:2px}
.sd-act .a-body{display:block;font-size:13px;color:#41504A}
.sd-act .a-body b{color:var(--sd-ink)}
.sd-act .fail{display:block;color:var(--sd-red);font-size:12px;margin-bottom:2px}
.sd-iconbtn{position:relative;width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid var(--sd-line);display:flex;align-items:center;justify-content:center;font-size:17px;color:#41524A;cursor:pointer;box-shadow:var(--sd-shadow)}
.sd-iconbtn .sd-badge{position:absolute;top:-3px;right:-3px;background:var(--sd-red);color:#fff;border-radius:99px;font:700 9.5px 'Inter';padding:1px 5px;border:2px solid var(--sd-bg)}
.sd-iconbtn.chat{color:var(--sd-green-deep)}
.sd-topavatar{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:var(--sd-shadow)}

/* ---------- cards ---------- */
.sd-card{background:var(--sd-surface);border:1px solid var(--sd-line);border-radius:var(--sd-radius);box-shadow:var(--sd-shadow)}
.sd-card-pad{padding:18px 20px}
.sd-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 20px 0}
.sd-card-head h3{font-size:15px;display:flex;align-items:center;gap:8px}
.sd-card-head h3 .ico{color:var(--sd-green);font-size:17px}

/* ---------- buttons / pills ---------- */
.sd-btn{display:inline-flex;align-items:center;gap:7px;border:0;border-radius:99px;font:600 13px 'Inter';padding:9px 16px;cursor:pointer;transition:.15s}
.sd-btn.pri{background:var(--sd-green);color:#fff;box-shadow:0 4px 12px rgba(76,174,57,.3)}
.sd-btn.pri:hover{background:var(--sd-green-deep)}
.sd-btn.soft{background:var(--sd-green-soft);color:var(--sd-green-deep)}
.sd-btn.ghost{background:#fff;border:1px solid var(--sd-line);color:var(--sd-ink)}
.sd-btn.info{background:#1E5FB8;color:#fff}
.sd-btn.info:hover{background:#17498F}
.sd-btn.sm{padding:6px 12px;font-size:12px}
.sd-pill{display:inline-flex;align-items:center;gap:6px;border-radius:99px;font:600 11.5px 'Inter';padding:4px 11px}
.sd-pill .dot{width:7px;height:7px;border-radius:50%}
.sd-pill.ok{background:var(--sd-green-soft);color:var(--sd-green-deep)}.sd-pill.ok .dot{background:var(--sd-green)}
.sd-pill.warn{background:var(--sd-amber-soft);color:#A96716}.sd-pill.warn .dot{background:var(--sd-amber)}
.sd-pill.bad{background:var(--sd-red-soft);color:#B03046}.sd-pill.bad .dot{background:var(--sd-red)}
.sd-pill.info{background:var(--sd-blue-soft);color:#1E5FB8}.sd-pill.info .dot{background:var(--sd-blue)}
.sd-pill.neut{background:#F0F3EE;color:var(--sd-muted)}
.sd-tag{font:600 10px 'Inter';letter-spacing:.05em;text-transform:uppercase;border-radius:6px;padding:2px 8px}
.sd-tag.live{background:var(--sd-green-soft);color:var(--sd-green-deep)}
.sd-tag.vip{background:var(--sd-amber);color:#fff}

/* ---------- KPI tiles ---------- */
.sd-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.sd-tile{border-radius:var(--sd-radius);padding:16px 14px;color:#fff;position:relative;overflow:hidden}
.sd-tile b{font:800 26px 'Plus Jakarta Sans';display:block;line-height:1.15;font-variant-numeric:tabular-nums}
.sd-tile span{font:600 10.5px 'Inter';letter-spacing:.07em;text-transform:uppercase;opacity:.9}
.sd-tile.g{background:linear-gradient(135deg,#46B255,#2E9344)}
.sd-tile.b{background:linear-gradient(135deg,#3D8BFD,#2C6FD6)}
.sd-tile.r{background:linear-gradient(135deg,#E45A72,#C93B53)}
.sd-tile.a{background:linear-gradient(135deg,#F0A64A,#DE8722)}
.sd-tile.p{background:linear-gradient(135deg,#8B5CF6,#6D28D9)}

/* ---------- tables ---------- */
.sd-table{width:100%;border-collapse:collapse}
.sd-table th{font:600 10.5px 'Inter';letter-spacing:.07em;text-transform:uppercase;color:var(--sd-muted);text-align:left;padding:10px 14px;border-bottom:1px solid var(--sd-line)}
.sd-table td{padding:13px 14px;border-bottom:1px solid #EFF3EE;vertical-align:middle}
.sd-table tr:hover td{background:#FAFBF8}
.sd-table tr:last-child td{border-bottom:0}

/* ---------- tabs ---------- */
.sd-tabs{display:flex;gap:4px;background:#EDF1EA;border-radius:12px;padding:4px;width:max-content}
.sd-tabs a{padding:7px 16px;border-radius:9px;font:600 13px 'Inter';color:var(--sd-muted)}
.sd-tabs a.on{background:#fff;color:var(--sd-ink);box-shadow:var(--sd-shadow)}
.sd-tabs a .n{font-size:11px;color:#9AA89E;margin-left:5px}

/* ---------- avatars ---------- */
.sd-av{width:36px;height:36px;border-radius:50%;object-fit:cover}
.sd-av.sm{width:28px;height:28px}
.sd-avchip{width:36px;height:36px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font:700 14px 'Plus Jakarta Sans';color:#fff}
.sd-avgroup{display:flex}
.sd-avgroup .sd-wrap{position:relative;margin-left:-8px;border:2px solid #fff;border-radius:50%}
.sd-avgroup .sd-wrap:first-child{margin-left:0}
.sd-avgroup .on::after{content:"";position:absolute;right:0;bottom:0;width:9px;height:9px;border-radius:50%;background:#2E9344;border:2px solid #fff}
/* live agent call-state (free / on a call / ringing) */
.sd-avgroup .sd-wrap{flex:0 0 auto}
.sd-avgroup .free::after,.sd-avgroup .oncall::after,.sd-avgroup .ringing::after{content:"";position:absolute;right:0;bottom:0;width:9px;height:9px;border-radius:50%;border:2px solid #fff}
.sd-avgroup .free::after{background:#2E9344}
.sd-avgroup .oncall::after{background:#DC5566}
.sd-avgroup .oncall img{filter:grayscale(.35);opacity:.85}
.sd-avgroup .ringing::after{background:#E8A317}
.sd-av.sm.ini{display:inline-flex;align-items:center;justify-content:center;background:var(--sd-green-soft);color:var(--sd-green-deep);font-weight:700;font-size:12px}
.db-agentkey{display:inline-flex;align-items:center;gap:12px;font-size:11px;color:var(--sd-muted)}
.db-agentkey .k{display:inline-flex;align-items:center;gap:5px}
.db-agentkey .k::before{content:"";width:9px;height:9px;border-radius:50%}
.db-agentkey .free::before{background:#2E9344}
.db-agentkey .oncall::before{background:#DC5566}
.db-agentkey .ringing::before{background:#E8A317}
.sd-agentbar{display:flex;align-items:flex-start;gap:12px;padding:7px 28px;background:#fff;border-bottom:1px solid var(--sd-line)}
@media (max-width:768px){ .sd-agentbar{padding:7px 16px} }
.sd-callbanner{flex-wrap:wrap}
.cb-debug{flex-basis:100%;width:100%;margin-top:4px;font:600 11px/1.45 ui-monospace,Menlo,Consolas,monospace;color:#7A5B00;word-break:break-word}

/* ---------- chat ---------- */
.sd-chat-msg{display:flex;gap:10px;margin-bottom:14px}
.sd-chat-msg .bub{background:#F2F5F0;border-radius:4px 14px 14px 14px;padding:9px 13px;max-width:78%}
.sd-chat-msg.me{flex-direction:row-reverse}
.sd-chat-msg.me .bub{background:var(--sd-green);color:#fff;border-radius:14px 4px 14px 14px}
.sd-chat-msg .who{font:600 12px 'Inter'}
.sd-chat-msg .when{font-size:10.5px;color:var(--sd-muted);margin-left:6px}
.sd-chat-msg.me .when{color:rgba(255,255,255,.75)}
.sd-chat-msg .bub a{color:inherit;text-decoration:underline!important;word-break:break-word}
.sd-chat-day{display:flex;align-items:center;justify-content:center;margin:6px 0 12px}
.sd-chat-day span{font:600 10.5px 'Inter';color:var(--sd-muted);background:#F2F5F0;padding:3px 11px;border-radius:11px;letter-spacing:.02em}
.sd-chat-input{display:flex;gap:9px;align-items:center}
.sd-chat-input input{flex:1;border:1px solid var(--sd-line);border-radius:99px;height:42px;padding:0 16px;font-size:13.5px}
.sd-chat-input .send{width:42px;height:42px;border-radius:50%;background:var(--sd-green);color:#fff;border:0;font-size:16px;cursor:pointer}
.sd-daysep{display:flex;align-items:center;gap:12px;color:var(--sd-muted);font:600 11px 'Inter';margin:18px 0}
.sd-daysep::before,.sd-daysep::after{content:"";flex:1;height:1px;background:var(--sd-line)}

/* ---------- timeline ---------- */
.sd-tl{position:relative;padding-left:26px}
.sd-tl::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--sd-line);border-radius:2px}
.sd-tl-item{position:relative;padding:0 0 18px}
.sd-tl-item .nub{position:absolute;left:-26px;top:2px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff}
.sd-tl-item .nub.mail{background:var(--sd-blue)} .sd-tl-item .nub.sms{background:var(--sd-purple)} .sd-tl-item .nub.call{background:var(--sd-green)}
.sd-tl-item .t{font:600 11px 'Inter';color:var(--sd-muted)}

/* ---------- forms ---------- */
.sd-field label{display:block;font:600 11.5px 'Inter';color:var(--sd-muted);margin-bottom:6px;letter-spacing:.02em}
.sd-field input,.sd-field select{width:100%;border:1px solid var(--sd-line);border-radius:11px;height:42px;padding:0 14px;font:500 14px 'Inter';color:var(--sd-ink);background:#fff}
.sd-field input:focus{outline:0;border-color:var(--sd-green);box-shadow:0 0 0 3px rgba(76,174,57,.15)}

/* ---------- misc ---------- */
.sd-kv{display:grid;grid-template-columns:130px 1fr;gap:8px 14px;font-size:13.5px}
.sd-kv dt{color:var(--sd-muted)} .sd-kv dd{font-weight:500}
.sd-note{position:relative;border-radius:14px;border:1px solid var(--sd-line);background:#fff;padding:15px 18px 15px 20px;overflow:hidden}
.sd-note::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
.sd-note .nh{display:inline-flex;align-items:center;gap:9px;margin-bottom:10px;font:700 11.5px 'Inter';letter-spacing:.06em;text-transform:uppercase}
.sd-note .nh i{width:24px;height:24px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;flex:0 0 auto}
.sd-note .nb{font-size:13.5px;line-height:1.6;color:var(--sd-ink)}
.sd-note.amber{background:#FDF8F0;border-color:#F1E1C6}.sd-note.amber::before{background:#DE8722}.sd-note.amber .nh{color:#A96716}.sd-note.amber .nh i{background:#E0922E}
.sd-note.purple{background:#F8F4FE;border-color:#E4D8FB}.sd-note.purple::before{background:#7C4FE0}.sd-note.purple .nh{color:#5B34B0}.sd-note.purple .nh i{background:#7C4FE0}
.sd-note.blue{background:#F1F7FE;border-color:#D5E6FB}.sd-note.blue::before{background:#2C6FD6}.sd-note.blue .nh{color:#1E5FB8}.sd-note.blue .nh i{background:#3A7DDD}
.sd-callrow{display:flex;align-items:center;gap:12px;border:1px solid var(--sd-line);border-radius:13px;padding:12px 14px;margin-bottom:10px}
.sd-callrow.vip{border-color:#F3D7AE;background:var(--sd-amber-soft)}
.sd-callrow .ring{font:800 17px 'Plus Jakarta Sans';color:var(--sd-red);font-variant-numeric:tabular-nums}
.sd-ringico{width:40px;height:40px;border-radius:12px;background:var(--sd-blue-soft);color:var(--sd-blue);display:flex;align-items:center;justify-content:center;font-size:18px;animation:sdring 1.1s infinite}
.sd-callrow.vip .sd-ringico{background:#FBE8CC;color:#C77A18}
@keyframes sdring{0%,100%{transform:rotate(0)}25%{transform:rotate(12deg)}75%{transform:rotate(-12deg)}}
.sd-bar{display:flex;align-items:center;gap:10px;margin-bottom:9px;font-size:12.5px}
.sd-bar .nm{width:74px;color:var(--sd-muted);text-align:right}
.sd-bar .tr{flex:1;background:#EFF3EE;border-radius:99px;height:9px;overflow:hidden}
.sd-bar .fl{height:100%;border-radius:99px;background:linear-gradient(90deg,#7ED957,var(--sd-green))}
.sd-empty{color:var(--sd-muted);font-size:13px;text-align:center;padding:22px}
.sd-grid{display:grid;gap:16px}
.sd-grid>*{min-width:0}
.sd-card{min-width:0}
.sd-mut{color:var(--sd-muted)}
.sd-right{margin-left:auto}

/* topbar chat icon alert (unread) */
.sd-iconbtn.chat.sd-chat-alert .bx{animation:sdchatflash 1.3s infinite}
@keyframes sdchatflash{0%,100%{color:var(--sd-green-deep);transform:scale(1)}50%{color:var(--sd-amber);transform:scale(1.15)}}

/* ---------- chat dock (slide-over, available on every staff page) ---------- */
.sd-dock-scrim{position:fixed;inset:0;background:rgba(13,32,20,.34);backdrop-filter:blur(2px);z-index:1059;opacity:0;pointer-events:none;transition:.2s}
.sd-dock{position:fixed;top:0;right:0;bottom:0;width:400px;max-width:94vw;background:#fff;z-index:1060;
  box-shadow:-18px 0 50px rgba(21,33,26,.18);display:flex;flex-direction:column;transform:translateX(105%);transition:.25s ease}
.sd-dock.open{transform:none}
.sd-dock-scrim.open{opacity:1;pointer-events:auto}
/* desktop: dock is non-blocking — agents keep working (send email, navigate) with chat open */
@media (min-width:769px){.sd-dock-scrim.open{opacity:0;pointer-events:none}}
.sd-dock-h{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--sd-line)}
.sd-dock-h h3{font-size:15px;flex:1}
.sd-dock-h .x{width:32px;height:32px;border-radius:50%;border:1px solid var(--sd-line);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--sd-muted)}
.sd-dock-b{flex:1;overflow-y:auto;padding:16px 18px}
.sd-dock-f{padding:13px 16px;border-top:1px solid var(--sd-line)}
/* new-message toast (any page) — so an incoming chat is visible from a contact profile etc. */
.sd-toasts{position:fixed;right:20px;bottom:20px;z-index:1080;display:flex;flex-direction:column;gap:10px;max-width:340px}
.sd-toast{display:flex;gap:11px;align-items:flex-start;background:#fff;border:1px solid var(--sd-line);border-left:4px solid var(--sd-green);border-radius:13px;padding:12px 14px;box-shadow:0 12px 34px rgba(21,33,26,.18);cursor:pointer;animation:sdtoastin .25s ease}
.sd-toast .ic{width:32px;height:32px;border-radius:50%;background:var(--sd-green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;flex:0 0 auto}
.sd-toast .tx{min-width:0}
.sd-toast .tx b{display:block;font:700 13px 'Plus Jakarta Sans';color:var(--sd-ink)}
.sd-toast .tx span{display:block;font-size:12.5px;color:var(--sd-muted);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
@keyframes sdtoastin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* ---------- skeleton loader (AJAX list placeholders) ---------- */
@keyframes sd-shimmer{0%{background-position:-450px 0}100%{background-position:450px 0}}
.sd-skel{position:relative;border-radius:6px;background:#E8EDE6;background-image:linear-gradient(90deg,#E8EDE6 0,#F2F5F0 80px,#E8EDE6 160px);background-size:450px 100%;animation:sd-shimmer 1.3s infinite linear}
.sd-skel-list{padding:2px 0}
.sd-skel-row{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid #F1F4EF}
.sd-skel-row:last-child{border-bottom:0}
.sd-skel-av{width:38px;height:38px;border-radius:10px;flex:0 0 auto}
.sd-skel-lines{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.sd-skel-line{height:10px;border-radius:5px}
@media (prefers-reduced-motion:reduce){.sd-skel{animation:none}}
/* swap: show skeleton while .loading, the real table once data has drawn */
.sd-rec-load.loading .dataTables_wrapper,.sd-rec-load.loading>table{display:none}
.sd-rec-load:not(.loading) .sd-skel-list{display:none}
/* avatar size fallbacks for AJAX-injected (Velzon-class) modals — keeps view-activity profile small */
.avatar-xs{height:32px;width:32px}
.avatar-sm{height:48px;width:48px}
.avatar-md{height:64px;width:64px}
img.avatar-xs,img.avatar-sm,img.avatar-md{object-fit:cover}
.avatar-xs .avatar-title,.avatar-sm .avatar-title,.avatar-md .avatar-title{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:16px}

/* mobile sidebar drawer toggle (hidden on desktop; shown <=1024px) */
.sd-menu-btn{display:none;width:38px;height:38px;border-radius:11px;background:#fff;border:1px solid var(--sd-line);color:#41524A;font-size:20px;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--sd-shadow);flex:0 0 auto;margin-right:4px}
.sd-side-scrim{position:fixed;inset:0;background:rgba(13,32,20,.42);backdrop-filter:blur(2px);z-index:1089;opacity:0;pointer-events:none;transition:.2s}
.sd-side-scrim.open{opacity:1;pointer-events:auto}

/* ============================================================
   RESPONSIVE — desktop-first (1280 / 1024 / 768 / 600)
   NOTE (prototype): pages set grid columns inline, so these
   overrides use !important; real templates will use classes.
   ============================================================ */
@media (max-width:1280px){
  .sd-tiles{grid-template-columns:repeat(5,1fr)}
  .sd-grid{grid-template-columns:1fr 1fr !important}
  .sd-content{padding:20px 20px 40px}
}
@media (max-width:1024px){
  .sd-shell{grid-template-columns:1fr}
  .sd-grid{grid-template-columns:1fr !important}
  .sd-menu-btn{display:flex}
  /* sidebar becomes a slide-in drawer (toggled by the hamburger) */
  .sd-side{position:fixed;left:0;top:0;bottom:0;height:100vh;width:248px;z-index:1090;
    transform:translateX(-100%);transition:transform .25s ease}
  .sd-side.open{transform:none;box-shadow:10px 0 44px rgba(13,32,20,.35)}
}
@media (max-width:768px){
  .sd-tiles{grid-template-columns:repeat(2,1fr)}
  .sd-top{padding:10px 16px;flex-wrap:wrap}
  .sd-search{order:9;max-width:100%;flex:1 1 100%;margin:6px 0 0}
  .sd-content{padding:16px 14px 36px}
  .sd-card-pad{padding:14px 14px}
  .sd-card-head{padding:14px 14px 0}
  .sd-kv{grid-template-columns:104px 1fr}
  .sd-tabs{max-width:100%;overflow-x:auto}
  .sd-card-pad{overflow-x:auto}
  .sd-table{min-width:480px}
}
@media (max-width:600px){
  .sd-search kbd{display:none}
  .sd-top h1{font-size:15px}
  .sd-tile b{font-size:21px}
  .sd-chat-msg .bub{max-width:92%}
}

/* ---------- form modals — Greenhouse reskin (every BS form modal loads into #modal_content;
   id-specificity + !important so the Velzon theme can't out-rank it) ---------- */
#modal_content .modal-body{padding:18px 20px}
#modal_content .form-label{font:600 12.5px 'Inter'!important;color:#3C4B40!important;margin-bottom:6px}
/* target inputs by element too — the markdown (mdeditor) note fields render as a bare
   <textarea> with no .form-control class, wrapped in .wmd-wrapper */
#modal_content .form-control,#modal_content .form-select,#modal_content textarea,#modal_content input[type=text],#modal_content input[type=email],#modal_content input[type=number],#modal_content input[type=password],#modal_content input[type=url],#modal_content input[type=tel]{border:1px solid var(--sd-line)!important;border-radius:11px!important;padding:10px 13px!important;font-size:13.5px!important;color:var(--sd-ink)!important;background:#FCFDFB!important;box-shadow:none!important}
#modal_content .form-control::placeholder,#modal_content textarea::placeholder,#modal_content input::placeholder{color:#9AA89E}
#modal_content .form-control:focus,#modal_content .form-select:focus,#modal_content textarea:focus,#modal_content input:focus{border-color:var(--sd-green)!important;background:#fff!important;box-shadow:0 0 0 3px rgba(76,174,57,.2)!important;outline:none}
#modal_content .wmd-wrapper{width:100%}
#modal_content textarea{min-height:112px!important;width:100%!important;line-height:1.55;resize:vertical;display:block}
/* Floating-label fields carry a redundant field-name placeholder ("first_name" etc.);
   when the field is empty the label doesn't float, so it sat right on top of that
   placeholder. Hide the placeholder so the floating label alone acts as it. (The notes
   form uses label-above, not form-floating, so its descriptive hints are untouched.) */
#modal_content .form-floating>.form-control::placeholder{color:transparent!important}
/* Textareas add a second problem: their text is top-aligned, so once the label floats
   (field has content) it overlaps the first line. Push the text below the floated label. */
#modal_content .form-floating>textarea{padding-top:1.9rem!important}
/* input-group prefixes (Email: / Cc:): the blanket radius above rounds every corner, so
   the prefix and field don't join. Restore the connected-pill corners. */
#modal_content .input-group>.input-group-text{border-radius:11px 0 0 11px!important;border-right:0!important}
#modal_content .input-group>.form-control{border-radius:0 11px 11px 0!important}
#modal_content .modal-footer{border-top:1px solid var(--sd-line);gap:8px;padding:13px 18px}
#modal_content .modal-footer .btn-primary{background:var(--sd-green-deep)!important;border-color:var(--sd-green-deep)!important;color:#fff!important;box-shadow:none!important}
#modal_content .modal-footer .btn-primary:hover{background:#266219!important;border-color:#266219!important}
#modal_content .modal-footer .btn-secondary{background:#fff!important;border:1px solid var(--sd-line)!important;color:#3C4B40!important;box-shadow:none!important}
#modal_content .modal-footer .btn-secondary:hover{background:var(--sd-green-soft)!important;color:var(--sd-green-deep)!important}
#modal_content .modal-footer .btn-danger{background:#C93B53!important;border-color:#C93B53!important;color:#fff!important;box-shadow:none!important}
#modal_content .modal-footer .btn-danger:hover{background:#A62D45!important;border-color:#A62D45!important}
#modal_content .modal-header .avatar-title.bg-primary{background:var(--sd-green-deep)!important;color:#fff!important}
/* every modal header icon white (the theme leaves some dark on coloured tiles) */
#modal_content .modal-header .avatar-title{color:#fff!important}
#modal_content .modal-header .avatar-title i{color:#fff!important}