/* ============================================================================
   NEXORA CRM — reference design, isolated build (reference-v1)
   Source: approved sketch "Nexora CRM - סקיצה.html" + ChatGPT implementation guide
   ALL rules scoped under #v-crm so nothing leaks into other views.
   Dialogs (nx-actions / client) are appended INSIDE #v-crm → inherit tokens
   and are matched by #v-crm dialog... even while promoted to the top layer.
   ============================================================================ */

/* ---- design tokens (live on the CRM view root) ---- */
#v-crm{
  --nxc-bg:#FAFBFC;--nxc-surface:#fff;--nxc-raised:#F4F6F8;--nxc-text:#0E1316;--nxc-muted:#5A6B74;--nxc-border:#E5E7EB;
  /* brand + accent FOLLOW the palette the user picked in system settings (--primary), not a fixed colour */
  --nxc-brand:var(--primary,#009391);--nxc-accent:color-mix(in srgb,var(--primary,#009391) 62%,#fff);--nxc-on-brand:#fff;--nxc-ok:#1f9d63;--nxc-warn:#d9931f;--nxc-bad:#dd4b52;
  --nxc-radius:14px;--nxc-gap:16px;--nxc-ease:cubic-bezier(.22,1,.36,1);--nxc-focus:var(--primary,#006E6C);
  --nxc-shadow:0 1px 2px rgba(14,19,22,.04),0 10px 28px rgba(14,19,22,.06);
}
:root[data-theme="dark"] #v-crm, #v-crm[data-theme="dark"]{
  --nxc-bg:#0E1316;--nxc-surface:#161D22;--nxc-raised:#1F2933;--nxc-text:#EAF2F3;--nxc-muted:#ADBDC4;--nxc-border:#35424A;
  --nxc-brand:color-mix(in srgb,var(--primary,#009391) 60%,#fff);--nxc-accent:color-mix(in srgb,var(--primary,#009391) 48%,#fff);--nxc-on-brand:#0E1316;--nxc-focus:color-mix(in srgb,var(--primary,#009391) 60%,#fff);
  --nxc-shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px rgba(0,0,0,.4);color-scheme:dark;
}
/* force the sketch typeface inside the CRM view so nothing inherits the heavier site font */
#v-crm{font-family:"Heebo","Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--nxc-text)}
#v-crm button,#v-crm input,#v-crm select,#v-crm textarea,#v-crm a,#v-crm h1,#v-crm h2,#v-crm h3,#v-crm h4,#v-crm h5{font-family:inherit}
#v-crm .money{font-variant-numeric:tabular-nums;font-family:"Inter","Heebo",sans-serif}
#v-crm .nxc svg{display:block}

/* ============================= TOOLBAR (bar1 / bar2) — matches sketch 1:1, scoped ============================= */
/* ---- bar1 ---- */
#v-crm .page-header{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px;padding:0}
#v-crm .page-title{display:flex;align-items:center;gap:10px;min-width:0}
#v-crm .page-title-icon{width:36px;height:36px;border-radius:var(--radius-sm,11px);display:grid;place-items:center;background:color-mix(in srgb,var(--nxc-brand) 11%,transparent);color:var(--nxc-brand);flex:none}
#v-crm .page-title-icon svg{width:19px;height:19px}
#v-crm .page-title h1{margin:0;font-size:1.4rem;font-weight:800;letter-spacing:-.01em;color:var(--nxc-text);display:flex;align-items:baseline;gap:6px}
#v-crm .page-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
#v-crm .crm-scopebar{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:600;color:var(--nxc-muted);background:color-mix(in srgb,var(--nxc-brand) 8%,transparent);border-radius:30px;padding:6px 14px;white-space:nowrap}
#v-crm .crm-scopebar b{color:var(--nxc-text)}
#v-crm .page-title h1 .role-tag{font-size:.8rem;font-weight:700;color:var(--nxc-brand)}
/* ---- shared button look (sketch .btn) ---- */
#v-crm .page-actions .btn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:var(--radius-sm,10px);font-weight:700;font-size:.84rem;background:var(--nxc-surface);border:1px solid var(--nxc-border);box-shadow:var(--nxc-shadow);color:var(--nxc-text);cursor:pointer;transition:transform .18s var(--nxc-ease),border-color .18s;line-height:1;white-space:nowrap}
#v-crm .crm-toolbar2 .btn{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:var(--radius-sm,9px);font-weight:600;font-size:.8rem;background:var(--nxc-surface);border:1px solid var(--nxc-border);box-shadow:none;color:var(--nxc-muted);cursor:pointer;transition:border-color .18s,color .18s;line-height:1;white-space:nowrap}
#v-crm .crm-toolbar2 .btn svg{width:13px;height:13px}
#v-crm .page-actions .btn:hover,#v-crm .crm-toolbar2 .btn:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--nxc-brand) 35%,var(--nxc-border));color:var(--nxc-brand)}
#v-crm .page-actions .btn svg,#v-crm .crm-toolbar2 .btn svg{width:14px;height:14px;flex:none}
#v-crm .page-actions .btn-primary{background:linear-gradient(135deg,var(--nxc-accent),var(--nxc-brand));color:#fff;border:none;box-shadow:0 8px 20px rgba(0,147,145,.26)}
#v-crm .page-actions .btn-primary:hover{color:#fff;border-color:transparent}
/* neutralise the old purple manager bar */
#v-crm .admin-bar{background:var(--nxc-raised)!important;border:1px solid var(--nxc-border)!important;border-radius:var(--radius,12px)!important;padding:9px 14px!important;margin-bottom:14px!important;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#v-crm .admin-bar>span{color:var(--nxc-brand)!important;font-weight:700;font-size:.84rem}
#v-crm .admin-bar .form-input{height:34px;padding:6px 11px!important;border-radius:var(--radius-sm,9px);border:1px solid var(--nxc-border);background:var(--nxc-surface);color:var(--nxc-text);font-size:.82rem;font-weight:600}
/* ---- bar2: one clean flowing row ---- */
#v-crm .crm-toolbar2{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:14px}
#v-crm .crm-filters,#v-crm .crm-inline-filters{display:contents}
/* kanban/list segmented toggle (sketch .segm) */
#v-crm .crm-tabs{display:inline-flex;background:var(--nxc-raised);border:1px solid var(--nxc-border);border-radius:var(--radius-sm,9px);padding:2px;gap:0}
#v-crm .crm-tab{padding:6px 12px;border-radius:7px;font-size:.8rem;font-weight:600;color:var(--nxc-muted);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border:none;background:none;cursor:pointer;transition:color .15s,background .15s}
#v-crm .crm-tab svg{width:14px;height:14px}
#v-crm .crm-tab.active{background:var(--nxc-surface);color:var(--nxc-brand);box-shadow:var(--nxc-shadow)}
/* search box (sketch .search) */
#v-crm .crm-search{display:flex;align-items:center;gap:7px;background:var(--nxc-surface);border:1px solid var(--nxc-border);border-radius:var(--radius-sm,9px);padding:7px 12px;color:var(--nxc-muted);font-size:.82rem;flex:1 1 200px;min-width:160px;max-width:420px;box-shadow:none;height:auto}
#v-crm .crm-search svg{width:14px;height:14px;color:var(--nxc-muted);flex:none}
#v-crm .crm-search input{border:none;background:none;outline:none;flex:1;min-width:0;font:inherit;font-size:.82rem;color:var(--nxc-text);padding:0}
#v-crm .crm-search input::placeholder{color:var(--nxc-muted)}
#v-crm .crm-search:focus-within{border-color:color-mix(in srgb,var(--nxc-brand) 45%,var(--nxc-border))}
/* filter pill "label: value" (sketch .fil) — wraps a select */
#v-crm .crm-filter-group{display:inline-flex;align-items:center;gap:6px;background:var(--nxc-surface);border:1px solid var(--nxc-border);border-radius:var(--radius-sm,9px);padding:6px 11px;font-size:.8rem;font-weight:500;color:var(--nxc-muted);white-space:nowrap}
#v-crm .crm-filter-group svg{width:13px;height:13px;color:var(--nxc-muted);flex:none}
#v-crm .crm-filter-label{color:var(--nxc-muted);font-weight:500;font-size:.8rem}
#v-crm .crm-filter-group .form-input,#v-crm .crm-filter-group select{border:none!important;background:transparent!important;box-shadow:none!important;padding:0 2px!important;height:auto;font-size:.8rem;font-weight:700;color:var(--nxc-text);min-width:auto;max-width:150px;cursor:pointer}
#v-crm .crm-filter-group .form-input:focus{outline:none}
/* date inputs as compact pills */
#v-crm .crm-filter-input{height:32px;padding:6px 10px;border-radius:var(--radius-sm,9px);border:1px solid var(--nxc-border);background:var(--nxc-surface);color:var(--nxc-text);font-size:.8rem;font-weight:500;box-shadow:none}
#v-crm .crm-filter-input:focus{outline:none;border-color:color-mix(in srgb,var(--nxc-brand) 45%,var(--nxc-border))}
/* amount min/max are not part of the clean bar (sketch 249) — reachable via Advanced Search */
#v-crm .crm-filter-amount{display:none}
#v-crm .crm-filter-clear{background:color-mix(in srgb,var(--nxc-bad) 12%,transparent);color:var(--nxc-bad);border:1px solid color-mix(in srgb,var(--nxc-bad) 30%,transparent);border-radius:var(--radius-sm,9px);padding:6px 10px;font-weight:600;cursor:pointer}

/* ============================= KANBAN BOARD ============================= */
#v-crm .kanban-viewport{overflow-x:auto;padding:6px 2px 30px}
#v-crm .kanban-board{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(300px,23vw,330px);gap:20px;inline-size:max-content;min-inline-size:100%}
/* override the global .kanban-column fixed 320px so the sketch clamp + grid gap control the width */
#v-crm .kanban-column{display:grid;grid-template-rows:auto minmax(0,1fr);background:var(--nxc-surface);border:1px solid var(--nxc-border);border-radius:calc(var(--nxc-radius) + 2px);max-height:calc(100vh - 300px);box-shadow:var(--nxc-shadow);overflow:hidden;min-width:0!important;max-width:none!important;margin:0!important;animation:none!important}
#v-crm .col-head{position:relative;overflow:hidden;padding:15px 16px 14px;background:color-mix(in srgb,var(--column-color,var(--nxc-brand)) 4%,var(--nxc-surface));border-bottom:1px solid var(--nxc-border)}
/* column icon — large, straight, very light; sits in the clear vertical centre of the
   header (names hug the right edge, the count/＋ hug the left) so nothing lands on it */
#v-crm .col-head .cwm{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:46px;height:46px;color:var(--column-color,var(--nxc-brand));opacity:.1;pointer-events:none;z-index:0}
#v-crm .col-head .cwm svg{width:100%;height:100%}
#v-crm .col-head .r1,#v-crm .col-head .r2{position:relative;z-index:1}
#v-crm .col-head .r1{display:flex;align-items:center;justify-content:space-between;gap:8px}
#v-crm .col-head .nm{font-size:.82rem;font-weight:600;display:flex;align-items:center;gap:8px;min-width:0;color:var(--nxc-text);letter-spacing:-.01em}
#v-crm .col-head .nm .cdot{width:9px;height:9px;border-radius:50%;background:var(--column-color,var(--nxc-brand));flex:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--column-color,var(--nxc-brand)) 11%,transparent)}
#v-crm .col-head .nm span.t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#v-crm .col-head .cnt{font-size:.7rem;font-weight:700;background:var(--nxc-raised);color:var(--nxc-muted);border-radius:30px;padding:3px 10px;flex:none}
#v-crm .col-head .r2{display:flex;align-items:baseline;justify-content:space-between;margin-top:11px}
#v-crm .col-head .sum{font-size:1.2rem;font-weight:800;color:var(--nxc-text)}
#v-crm .col-head .tools{display:flex;gap:4px}
#v-crm .col-head .tools button{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;color:var(--nxc-muted);border:none;background:none;cursor:pointer;font-size:1rem;line-height:1}
#v-crm .col-head .tools button:hover{background:var(--nxc-raised);color:var(--nxc-brand)}
#v-crm .col-items{overflow-y:auto;overscroll-behavior-y:contain;padding:14px;display:flex;flex-direction:column;gap:14px;background:var(--nxc-bg)}
#v-crm .col-items .kanban-empty{color:var(--nxc-muted);font-size:.84rem;text-align:center;padding:30px 0}

/* ============================= DEAL CARD ============================= */
#v-crm .deal{flex:0 0 auto;height:auto;background:var(--nxc-surface);border:1px solid var(--nxc-border);border-radius:var(--nxc-radius);box-shadow:var(--nxc-shadow);padding:16px;transition:transform .18s var(--nxc-ease),box-shadow .18s,border-color .18s;position:relative;overflow:hidden}
#v-crm .deal:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(14,19,22,.08);border-color:color-mix(in srgb,var(--nxc-brand) 20%,var(--nxc-border))}
#v-crm .deal .dstatus{display:flex;justify-content:center;margin-bottom:8px;position:relative;z-index:1}
#v-crm .deal .dstatus .pill,#v-crm .deal .dstatus .sopill{max-width:100%;overflow:hidden;text-overflow:ellipsis}
#v-crm .deal .dh{display:flex;align-items:center;gap:8px;min-width:0}
#v-crm .deal .dh a{font-size:.92rem;font-weight:600;color:var(--nxc-text);text-decoration:none;cursor:pointer;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#v-crm .deal .dh a:hover{color:var(--nxc-brand)}
#v-crm .deal .pill{font-size:.63rem;font-weight:500;padding:3px 9px;border-radius:7px;white-space:nowrap;flex:none}
#v-crm .deal .amt{font-size:1.2rem;font-weight:700;margin:9px 0 14px;letter-spacing:-.01em;display:inline-block;padding:5px 14px;border-radius:var(--radius-sm,11px);color:var(--nxc-text)}
#v-crm .deal dl{margin:0;display:flex;flex-direction:column;gap:9px;font-size:.8rem}
#v-crm .deal dl>div{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
#v-crm .deal dt{color:var(--nxc-muted);font-size:.76rem;font-weight:500;flex:none;max-width:50%;white-space:normal;word-break:break-word;line-height:1.35}
#v-crm .deal dd{margin:0;font-weight:500;color:var(--nxc-text);text-align:end;min-width:0;white-space:normal;word-break:break-word;line-height:1.35}
#v-crm .deal dd.ph{direction:ltr;white-space:nowrap}
#v-crm .deal dd .reveal-btn,#v-crm .deal dd button,#v-crm .deal dd.ph .masked-field{color:var(--nxc-brand);font-weight:600;direction:ltr;background:none;border:none;cursor:pointer;font:inherit;padding:0}
#v-crm .deal .df{display:flex;flex-direction:column;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--nxc-border)}
#v-crm .deal .dbtns{display:flex;gap:9px;justify-content:center}
#v-crm .deal .dbtns button{width:37px;height:37px;border-radius:var(--radius-sm,11px);display:grid;place-items:center;transition:transform .18s var(--nxc-ease),box-shadow .18s,background .18s,border-color .18s;border:none;background:none;cursor:pointer}
#v-crm .deal .dbtns button:hover{transform:translateY(-1px)}
#v-crm .deal .dbtns button svg{width:16px;height:16px}
#v-crm .deal .dbtns .act{border:1px solid var(--nxc-border);background:var(--nxc-raised);color:var(--nxc-muted)}
#v-crm .deal .dbtns .act:hover{background:var(--nxc-surface);border-color:color-mix(in srgb,var(--nxc-brand) 40%,var(--nxc-border));color:var(--nxc-brand)}
#v-crm .deal .dbtns .call{background:linear-gradient(140deg,color-mix(in srgb,var(--nxc-ok) 86%,#fff),var(--nxc-ok));color:#fff;box-shadow:0 4px 12px rgba(31,157,99,.26),inset 0 1px 0 rgba(255,255,255,.22)}
#v-crm .deal .dbtns .call:hover{box-shadow:0 7px 18px rgba(31,157,99,.34),inset 0 1px 0 rgba(255,255,255,.22)}
#v-crm .deal dd.nxc-empty{color:var(--nxc-muted)}
#v-crm .deal .dagent{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.82rem;font-weight:600;color:var(--nxc-text)}
#v-crm .deal .dagent .av{width:28px;height:28px;border-radius:var(--radius-sm,8px);background:linear-gradient(135deg,var(--nxc-brand),var(--nxc-accent));color:#fff;display:grid;place-items:center;font-size:.72rem;font-weight:700;flex:none;background-size:cover;background-position:center}
#v-crm .deal .paypill{font-size:.72rem;font-weight:500;padding:2px 10px;border-radius:7px;display:inline-block;letter-spacing:-.005em;white-space:normal;word-break:break-word;max-width:100%}
#v-crm .deal .wm{position:absolute;inset-inline-end:-14px;bottom:-18px;opacity:.055;color:var(--column-color,var(--nxc-brand));pointer-events:none;z-index:0}
#v-crm .deal .wm svg{width:104px;height:104px}
#v-crm .deal>.dstatus,#v-crm .deal>.dh,#v-crm .deal>.amt,#v-crm .deal>dl,#v-crm .deal>.df{position:relative;z-index:1}
/* follow-up temperature — clean colour dot instead of an emoji, still clickable to cycle */
#v-crm .deal .deal-temp-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--temp,var(--nxc-muted));box-shadow:0 0 0 3px color-mix(in srgb,var(--temp,var(--nxc-muted)) 16%,transparent);margin-inline-start:7px;cursor:pointer;vertical-align:middle;flex:none}

/* ---- standing order: marker lives IN the status pill → zero layout shift ---- */
#v-crm .deal .sopill{display:inline-flex;align-items:center;gap:5px}
#v-crm .deal .sopill svg{flex:none}
#v-crm .deal .sopill.new{background:var(--nxc-ok);color:#fff}
#v-crm .deal .sopill.auto{background:color-mix(in srgb,var(--nxc-ok) 12%,transparent);color:var(--nxc-ok);border:1px solid color-mix(in srgb,var(--nxc-ok) 30%,transparent)}
#v-crm .deal.so-new{border:1.5px solid color-mix(in srgb,var(--nxc-ok) 55%,var(--nxc-border));background:color-mix(in srgb,var(--nxc-ok) 7%,var(--nxc-surface));box-shadow:0 0 0 1px color-mix(in srgb,var(--nxc-ok) 20%,transparent),0 12px 30px color-mix(in srgb,var(--nxc-ok) 18%,transparent)}
#v-crm .deal.so-new::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:6px;background:linear-gradient(var(--nxc-ok),color-mix(in srgb,var(--nxc-ok) 55%,#000));z-index:3}
#v-crm .deal.so-auto::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:4px;background:color-mix(in srgb,var(--nxc-ok) 55%,transparent);z-index:3}
/* motion: capped — pulse 3 cycles, sheen 2 cycles, then rest (only on first entry via .so-attention) */
#v-crm .deal.so-new.so-attention .sopill.new{animation:nxc-sopulse 2.4s var(--nxc-ease) 3}
#v-crm .deal.so-new.so-attention::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 38%,color-mix(in srgb,var(--nxc-ok) 20%,transparent) 50%,transparent 62%);transform:translateX(120%);animation:nxc-sosheen 3.4s ease-in-out .3s 2;pointer-events:none;z-index:0}
@keyframes nxc-sopulse{0%,100%{box-shadow:0 2px 8px color-mix(in srgb,var(--nxc-ok) 35%,transparent)}50%{box-shadow:0 3px 14px color-mix(in srgb,var(--nxc-ok) 75%,transparent)}}
@keyframes nxc-sosheen{0%{transform:translateX(120%)}55%,100%{transform:translateX(-120%)}}

/* ============================= CLOCK-ARC ACTIONS DIALOG ============================= */
#v-crm dialog.nx-actions{position:fixed!important;inset:0!important;margin:auto!important;inline-size:min(600px,calc(100vw - 24px));block-size:max-content;max-block-size:calc(100dvh - 24px);overflow:visible;padding:22px;color:var(--nxc-text);background:color-mix(in srgb,var(--nxc-surface) 66%,transparent);-webkit-backdrop-filter:blur(26px) saturate(1.4);backdrop-filter:blur(26px) saturate(1.4);border:1px solid color-mix(in srgb,var(--nxc-surface) 45%,var(--nxc-border));border-radius:22px;box-shadow:0 30px 90px rgba(14,19,22,.26),inset 0 1px 0 rgba(255,255,255,.45)}
#v-crm dialog.nx-actions::backdrop{background:rgba(14,19,22,.2);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
#v-crm .nx-ah{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
#v-crm .nx-ah h2{font-size:1.05rem;margin:0}
#v-crm .nx-ah .who{font-size:.8rem;color:var(--nxc-muted)}
#v-crm .nx-ah .nx-ah-close{width:32px;height:32px;border-radius:var(--radius-sm,9px);display:grid;place-items:center;background:var(--nxc-raised);border:1px solid var(--nxc-border);color:var(--nxc-muted);cursor:pointer}
#v-crm .nx-ah .nx-ah-close svg{width:16px;height:16px}
#v-crm .segm{display:inline-flex;background:var(--nxc-raised);border:1px solid var(--nxc-border);border-radius:var(--radius-sm,10px);padding:3px}
#v-crm .segm.vtog{padding:3px}
#v-crm .segm.vtog button{padding:7px 17px;font-size:.82rem;font-weight:700;min-width:62px;justify-content:center;white-space:nowrap;border-radius:7px;color:var(--nxc-muted);border:none;background:none;cursor:pointer}
#v-crm .segm.vtog button.on{background:var(--nxc-surface);color:var(--nxc-brand);box-shadow:var(--nxc-shadow)}
#v-crm .nx-arc{position:relative;inline-size:540px;block-size:270px;margin-inline:auto}
#v-crm .arc-guide{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#v-crm .arc-hub{position:absolute;left:270px;top:235px;transform:translate(-50%,-50%);border:1.5px solid var(--nxc-border);border-radius:50%;width:70px;height:70px;color:var(--nxc-muted);background:color-mix(in srgb,var(--nxc-surface) 48%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:.66rem;font-weight:600;box-shadow:0 8px 22px rgba(14,19,22,.08);transition:border-color .22s var(--nxc-ease),color .22s var(--nxc-ease),background .22s var(--nxc-ease),transform .22s var(--nxc-ease);cursor:pointer}
#v-crm .arc-hub svg{width:17px;height:17px}
#v-crm .arc-hub:hover{border-color:var(--nxc-brand);color:var(--nxc-brand);background:color-mix(in srgb,var(--nxc-brand) 7%,transparent);transform:translate(-50%,-50%) scale(1.07)}
#v-crm .nx-action{border:none;background:none;color:var(--nxc-text);font:inherit;padding:0;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:.73rem;font-weight:600;cursor:pointer}
#v-crm .nx-action .ai{width:50px;height:50px;border-radius:var(--radius-lg,16px);display:grid;place-items:center;background:var(--nxc-raised);border:1px solid var(--nxc-border);color:var(--nxc-muted);transition:background .28s var(--nxc-ease),color .28s var(--nxc-ease),box-shadow .28s var(--nxc-ease),transform .28s var(--nxc-ease),border-color .28s var(--nxc-ease)}
#v-crm .nx-action .ai svg{width:21px;height:21px}
#v-crm .nx-action .al{transition:color .2s}
#v-crm .nx-action:hover .ai{background:linear-gradient(135deg,var(--nxc-accent),var(--nxc-brand));color:#fff;border-color:transparent;box-shadow:0 12px 28px rgba(0,147,145,.32);transform:translateY(-4px) scale(1.06)}
#v-crm .nx-action:hover .al{color:var(--nxc-brand)}
#v-crm .nx-arc .nx-action{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%)}
#v-crm .nx-action[data-danger="true"] .al{color:var(--nxc-bad)}
#v-crm .nx-action[data-danger="true"]:hover .ai{background:var(--nxc-bad);box-shadow:0 12px 28px rgba(221,75,82,.3)}
#v-crm .nx-sec{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;border-top:1px solid var(--nxc-border);padding-top:16px;margin-top:4px}
#v-crm .nx-sec .nx-action:hover,#v-crm .nx-rail .nx-action:hover{transform:translateY(-3px);transition:transform .22s var(--nxc-ease)}
#v-crm [data-feedback]{min-height:20px;font-size:.8rem;color:var(--nxc-muted);text-align:center;margin:10px 0 0}
#v-crm .nx-rail{display:none;grid-template-columns:1fr 1fr;gap:9px}
#v-crm dialog.nx-actions.rail .nx-arc,#v-crm dialog.nx-actions.rail .nx-sec{display:none}
#v-crm dialog.nx-actions.rail .nx-rail{display:grid}
#v-crm dialog.nx-actions.rail{inline-size:min(440px,calc(100vw - 24px))}
#v-crm .nx-rail .nx-action{flex-direction:row;justify-content:flex-start;gap:12px;padding:7px;border-radius:var(--radius,13px);font-size:.86rem}
#v-crm .nx-rail .nx-action .ai{width:42px;height:42px;border-radius:var(--radius,13px)}
#v-crm .nx-rail .nx-action:hover{background:var(--nxc-raised)}
#v-crm .nx-rail .nx-action:hover .ai{transform:scale(1.04)}
@media (max-width:640px){
 #v-crm .nx-arc{inline-size:100%;block-size:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-block:12px}
 #v-crm .nx-arc .nx-action{position:static;inline-size:auto;transform:none}
 #v-crm .arc-guide,#v-crm .arc-hub{display:none}
 #v-crm .nx-sec{grid-template-columns:repeat(2,1fr)}
}

/* ============================= CLIENT CARD DIALOG ============================= */
#v-crm dialog.nx-client{position:fixed!important;inset:0!important;margin:auto!important;inline-size:min(860px,calc(100vw - 24px));block-size:max-content;max-block-size:calc(100dvh - 24px);padding:0;border:1px solid var(--nxc-border);border-radius:var(--radius-lg,18px);background:var(--nxc-surface);color:var(--nxc-text);box-shadow:0 30px 90px rgba(14,19,22,.3)}
#v-crm dialog.nx-client::backdrop{background:rgba(14,19,22,.4);backdrop-filter:blur(2px)}
#v-crm .ch{display:flex;align-items:center;gap:14px;padding:20px 24px;border-bottom:1px solid var(--nxc-border);background:linear-gradient(120deg,var(--nxc-brand),color-mix(in srgb,var(--nxc-brand) 70%,#000));color:#fff}
#v-crm .ch .av{width:52px;height:52px;border-radius:var(--radius,13px);background:rgba(255,255,255,.2);display:grid;place-items:center;font-weight:800;font-size:1.2rem}
#v-crm .ch h2{margin:0;font-size:1.3rem;color:#fff}
#v-crm .ch .meta{font-size:.84rem;opacity:.9;margin-top:3px}
#v-crm .ch .cx{margin-inline-start:auto;width:34px;height:34px;border-radius:var(--radius-sm,9px);display:grid;place-items:center;background:rgba(255,255,255,.18);color:#fff;border:none;cursor:pointer}
#v-crm .ch .cx svg{width:17px;height:17px}
#v-crm .cbody{display:grid;grid-template-columns:1fr 1.2fr;gap:0;max-block-size:calc(100dvh - 160px);overflow:auto}
#v-crm .cbody>div{padding:22px 24px}
#v-crm .cbody>div:first-child{border-inline-end:1px solid var(--nxc-border)}
#v-crm .cbody h4{margin:0 0 12px;font-size:.92rem;color:var(--nxc-brand)}
#v-crm .crow{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--nxc-border);font-size:.86rem}
#v-crm .crow:last-child{border-bottom:none}
#v-crm .crow .k{color:var(--nxc-muted)}
#v-crm .cbtn{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:var(--radius-sm,10px);font-weight:700;font-size:.84rem;background:var(--nxc-surface);border:1px solid var(--nxc-border);box-shadow:var(--nxc-shadow);color:var(--nxc-text);cursor:pointer}
#v-crm .cbtn:hover{border-color:var(--nxc-brand);color:var(--nxc-brand)}
#v-crm .cbtn svg{width:15px;height:15px}
#v-crm .tl{display:flex;gap:11px;padding:10px 0;border-bottom:1px solid var(--nxc-border)}
#v-crm .tl:last-child{border-bottom:none}
#v-crm .tl .dot{width:10px;height:10px;border-radius:50%;margin-top:4px;flex:none;background:var(--nxc-brand)}
#v-crm .tl b{font-size:.86rem}
#v-crm .tl .s{font-size:.78rem;color:var(--nxc-muted)}
#v-crm .tl .t{font-size:.74rem;color:var(--nxc-muted);font-weight:700;min-width:46px;text-align:start}
#v-crm .tl .cempty{color:var(--nxc-muted);font-size:.82rem;padding:6px 0}
@media(max-width:700px){#v-crm .cbody{grid-template-columns:1fr}#v-crm .cbody>div:first-child{border-inline-end:none;border-bottom:1px solid var(--nxc-border)}}

@media (prefers-reduced-motion:reduce){#v-crm .deal,#v-crm .nx-action,#v-crm .arc-hub,#v-crm .deal.so-new.so-attention .sopill.new,#v-crm .deal.so-new.so-attention::before{animation:none!important;transition:none!important}}

/* ============================================================================
   LIST VIEW (deals table) — NEXORA language, scoped to #v-crm.
   ============================================================================ */
#v-crm #listContainer{background:var(--nxc-surface,#fff);border:1px solid var(--nxc-border,#E5E7EB);border-radius:var(--radius-lg,16px);overflow:hidden;box-shadow:0 1px 2px rgba(14,19,22,.04),0 8px 24px rgba(14,19,22,.05)}
#v-crm #listContainer .card-body{padding:0}
#v-crm #listContainer .table-container{overflow-x:auto}
#v-crm .deals-table{width:100%;border-collapse:collapse;font-family:"Heebo","Inter",system-ui,sans-serif;font-size:.86rem;color:var(--nxc-text,#0E1316)}
#v-crm .deals-table thead th{position:sticky;top:0;z-index:1;background:var(--nxc-raised,#F4F6F8);color:var(--nxc-muted,#5A6B74);font-size:.74rem;font-weight:800;text-align:start;padding:11px 14px;border-bottom:1px solid var(--nxc-border,#E5E7EB);white-space:nowrap;letter-spacing:-.01em}
#v-crm .deals-table tbody td{padding:11px 14px;border-bottom:1px solid color-mix(in srgb,var(--nxc-border,#E5E7EB) 70%,transparent);vertical-align:middle}
#v-crm .deals-table tbody tr.nxl-row{cursor:pointer;transition:background .13s}
#v-crm .deals-table tbody tr.nxl-row:hover{background:color-mix(in srgb,var(--nxc-brand,#009391) 5%,transparent)}
#v-crm .deals-table tbody tr:last-child td{border-bottom:none}
#v-crm .nxl-name b{font-weight:700;color:var(--nxc-text,#0E1316)}
#v-crm .nxl-amt{font-weight:800;font-family:"Inter","Heebo",sans-serif;white-space:nowrap}
#v-crm .nxl-date{color:var(--nxc-muted,#5A6B74);font-size:.8rem;white-space:nowrap;font-family:"Inter","Heebo",sans-serif}
#v-crm .nxl-phone{font-family:"Inter","Heebo",sans-serif;color:var(--nxc-text,#0E1316);white-space:nowrap;direction:ltr;text-align:start;unicode-bidi:plaintext}
#v-crm .nxl-status{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.78rem;padding:4px 11px 4px 9px;border-radius:30px;color:color-mix(in srgb,var(--c) 80%,var(--nxc-text,#0E1316));background:color-mix(in srgb,var(--c) 11%,transparent);border:1px solid color-mix(in srgb,var(--c) 28%,transparent);white-space:nowrap}
#v-crm .nxl-status i{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
#v-crm .nxl-pay{display:inline-block;font-size:.76rem;font-weight:600;border-radius:7px;padding:3px 9px;white-space:nowrap}
#v-crm .nxl-agent{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
#v-crm .nxl-av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--nxc-brand,#009391),var(--nxc-accent,#00D1C9));color:#fff;display:inline-grid;place-items:center;font-size:.68rem;font-weight:800;background-size:cover;background-position:center;flex:none}
#v-crm .nxc-empty{color:var(--nxc-muted,#5A6B74);opacity:.6}
#v-crm .nxl-actions{white-space:nowrap}
#v-crm .nxl-ib{width:32px;height:32px;border-radius:9px;display:inline-grid;place-items:center;background:var(--nxc-raised,#F4F6F8);border:1px solid var(--nxc-border,#E5E7EB);color:var(--nxc-muted,#5A6B74);cursor:pointer;transition:.13s;margin-inline-start:4px;vertical-align:middle}
#v-crm .nxl-ib:hover{color:var(--nxc-brand,#009391);border-color:color-mix(in srgb,var(--nxc-brand,#009391) 45%,var(--nxc-border,#E5E7EB));transform:translateY(-1px)}
#v-crm .nxl-ib.nxl-call:hover{color:#1f9d63;border-color:color-mix(in srgb,#1f9d63 45%,var(--nxc-border,#E5E7EB))}
#v-crm .nxl-ib.nxl-del:hover{color:#dd4b52;border-color:color-mix(in srgb,#dd4b52 45%,var(--nxc-border,#E5E7EB))}

/* ============================================================================
   TASKS SCREEN — NEXORA language (scoped to #v-tasks). Clean cards, SVG icons,
   priority as a colored accent bar. No emojis.
   ============================================================================ */
#v-tasks .nxt-item{display:flex;align-items:center;gap:12px;padding:13px 15px;background:var(--card-bg,#fff);border:1px solid var(--border,#E5E7EB);border-radius:var(--radius,14px);border-inline-start:4px solid var(--pc,#5A6B74);margin-bottom:9px;transition:box-shadow .14s,transform .14s;font-family:"Heebo","Inter",system-ui,sans-serif}
#v-tasks .nxt-item:hover{box-shadow:0 4px 16px rgba(14,19,22,.07);transform:translateY(-1px)}
#v-tasks .nxt-item.done{opacity:.72}
#v-tasks .nxt-item.done .nxt-title{text-decoration:line-through;color:var(--text-light,#5A6B74)}
#v-tasks .nxt-check{width:26px;height:26px;flex:none;border-radius:50%;border:2px solid var(--border,#cbd5e1);background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer;transition:.14s;padding:0}
#v-tasks .nxt-check:hover{border-color:var(--pc,#009391)}
#v-tasks .nxt-check.on{background:#1f9d63;border-color:#1f9d63}
#v-tasks .nxt-ic{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--pc,#8257d6) 13%,transparent);color:var(--pc,#8257d6)}
#v-tasks .nxt-content{flex:1;min-width:0}
#v-tasks .nxt-title{font-weight:600;font-size:.95rem;color:var(--text,#0E1316);margin-bottom:3px;overflow:hidden;text-overflow:ellipsis}
#v-tasks .nxt-meta{display:flex;gap:13px;flex-wrap:wrap;align-items:center;font-size:.8rem;color:var(--text-light,#5A6B74)}
#v-tasks .nxt-meta>span{display:inline-flex;align-items:center;gap:4px}
#v-tasks .nxt-meta svg{opacity:.85}
#v-tasks .nxt-badge{padding:2px 9px;border-radius:20px;font-weight:600;font-size:.74rem;color:var(--bc,#5A6B74);background:color-mix(in srgb,var(--bc,#5A6B74) 11%,transparent);border:1px solid color-mix(in srgb,var(--bc,#5A6B74) 26%,transparent)}
#v-tasks .nxt-has-note{color:var(--text-light,#5A6B74);opacity:.7}
#v-tasks .nxt-actions{display:flex;gap:5px;flex:none}
#v-tasks .nxt-ib{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--bg,#F4F6F8);border:1px solid var(--border,#E5E7EB);color:var(--text-light,#5A6B74);cursor:pointer;transition:.13s}
#v-tasks .nxt-ib:hover{color:var(--primary,#009391);border-color:color-mix(in srgb,var(--primary,#009391) 45%,var(--border,#E5E7EB));transform:translateY(-1px)}
#v-tasks .nxt-ib.nxt-del:hover{color:#dd4b52;border-color:color-mix(in srgb,#dd4b52 45%,var(--border,#E5E7EB))}

/* ============================================================================
   TASKS screen — calendar, aside buckets, nav (NEXORA). Scoped #v-tasks.
   ============================================================================ */
/* aside buckets: overdue / today / soon */
#v-tasks .nxt-buckets{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
#v-tasks .nxt-bucket{display:flex;align-items:center;gap:10px;padding:11px 13px;background:var(--card-bg,#fff);border:1px solid var(--border,#E5E7EB);border-radius:var(--radius,14px);border-inline-start:4px solid var(--bc,#5A6B74)}
#v-tasks .nxt-bucket .bi{width:32px;height:32px;flex:none;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--bc,#5A6B74) 13%,transparent);color:var(--bc,#5A6B74)}
#v-tasks .nxt-bucket b{display:block;font-size:1.3rem;font-weight:800;line-height:1;font-family:"Inter","Heebo",sans-serif;color:var(--text,#0E1316)}
#v-tasks .nxt-bucket small{font-size:.74rem;color:var(--text-light,#5A6B74);font-weight:600}
@media(max-width:600px){#v-tasks .nxt-buckets{grid-template-columns:1fr}}
/* calendar nav + view tabs */
#v-tasks .calendar-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%}
#v-tasks .calendar-nav-btn{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--bg,#F4F6F8);border:1px solid var(--border,#E5E7EB);color:var(--text-light,#5A6B74);cursor:pointer;transition:.13s}
#v-tasks .calendar-nav-btn:hover{color:var(--primary,#009391);border-color:color-mix(in srgb,var(--primary,#009391) 45%,var(--border,#E5E7EB))}
#v-tasks .calendar-month{font-weight:800;font-size:.92rem;color:var(--text,#0E1316);font-family:"Heebo",sans-serif}
#v-tasks .calendar-view-tabs{display:inline-flex;background:var(--bg,#F4F6F8);border:1px solid var(--border,#E5E7EB);border-radius:11px;padding:3px;gap:2px;margin-bottom:10px;width:100%}
#v-tasks .calendar-view-tab{flex:1;padding:6px 10px;border-radius:8px;font-size:.78rem;font-weight:600;color:var(--text-light,#5A6B74);background:none;border:none;cursor:pointer;transition:.13s}
#v-tasks .calendar-view-tab.active{background:var(--card-bg,#fff);color:var(--primary,#009391);box-shadow:0 1px 3px rgba(14,19,22,.08)}
/* month grid */
#v-tasks .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
#v-tasks .calendar-header{text-align:center;font-size:.68rem;font-weight:800;color:var(--text-light,#5A6B74);padding:6px 0}
#v-tasks .calendar-day{position:relative;min-height:44px;border-radius:10px;border:1px solid var(--border,#E5E7EB);background:var(--card-bg,#fff);padding:5px 6px;cursor:pointer;transition:.12s;display:flex;flex-direction:column;align-items:center;gap:3px}
#v-tasks .calendar-day:hover{border-color:color-mix(in srgb,var(--primary,#009391) 45%,var(--border,#E5E7EB));background:color-mix(in srgb,var(--primary,#009391) 5%,var(--card-bg,#fff))}
#v-tasks .calendar-day.other-month{background:transparent;border-color:transparent;cursor:default}
#v-tasks .calendar-day.today{border-color:var(--primary,#009391);box-shadow:inset 0 0 0 1px var(--primary,#009391)}
#v-tasks .calendar-day.today .calendar-day-number{color:var(--primary,#009391);font-weight:800}
#v-tasks .calendar-day.selected{background:color-mix(in srgb,var(--primary,#009391) 11%,var(--card-bg,#fff));border-color:var(--primary,#009391)}
#v-tasks .calendar-day-number{font-size:.82rem;font-weight:700;color:var(--text,#0E1316);font-family:"Inter","Heebo",sans-serif}
#v-tasks .calendar-day-tasks{display:flex;gap:3px;flex-wrap:wrap;justify-content:center}
#v-tasks .cal-cnt{display:inline-grid;place-items:center;min-width:16px;height:16px;padding:0 4px;border-radius:20px;font-size:.62rem;font-weight:800;line-height:1;font-family:"Inter",sans-serif}
#v-tasks .cal-cnt.mine{background:var(--primary,#009391);color:#fff}
#v-tasks .cal-cnt.others{background:color-mix(in srgb,#ea580c 16%,transparent);color:#ea580c}
/* week + year views */
#v-tasks .calendar-week-view{display:grid;gap:8px}
#v-tasks .calendar-week-day{border:1px solid var(--border,#E5E7EB);border-radius:12px;background:var(--card-bg,#fff);padding:10px;cursor:pointer}
#v-tasks .calendar-week-day.today{border-color:var(--primary,#009391)}
#v-tasks .calendar-week-day-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;font-weight:700;font-size:.82rem}
#v-tasks .calendar-week-task{font-size:.76rem;padding:4px 8px;border-radius:7px;margin-top:4px;background:color-mix(in srgb,var(--primary,#009391) 9%,transparent);border-inline-start:3px solid var(--primary,#009391)}
#v-tasks .calendar-week-task.high{border-inline-start-color:#dd4b52}#v-tasks .calendar-week-task.medium{border-inline-start-color:#d9931f}#v-tasks .calendar-week-task.low{border-inline-start-color:#1f9d63}
#v-tasks .calendar-week-task.others-task{opacity:.75}
#v-tasks .calendar-year-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
#v-tasks .calendar-year-month{border:1px solid var(--border,#E5E7EB);border-radius:12px;background:var(--card-bg,#fff);padding:14px 10px;cursor:pointer;text-align:center;transition:.12s}
#v-tasks .calendar-year-month:hover{border-color:var(--primary,#009391);transform:translateY(-1px)}
#v-tasks .calendar-year-month-title{font-weight:700;font-size:.86rem;margin-bottom:6px}