/* ==========================================================
یوزر CRM — پوسته پیامگستر (RTL)
========================================================== */
@font-face {
font-family: 'Vazirmatn';
src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: 'Vazirmatn';
src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
font-weight: 700;
font-display: swap;
}
:root {
--orange: #f07f3c;
--orange2: #e8622a;
--blue-link: #3b6ef5;
--ink: #2b3038;
--ink2: #5a6270;
--muted: #8b93a1;
--line: #e6e9ee;
--bg: #f5f6f8;
--dark-btn: #2e3440;
--teal: #26c6da;
--purple: #ab47bc;
--purple2: #8e24aa;
--pink: #ec407a;
--yellow: #f7e04b;
--orange-w: #ff7043;
--blue-w: #42a5f5;
--green-tile: #26a69a;
--radius: 12px;
--shadow: 0 2px 10px rgba(25, 32, 45, .07);
/* نگاشت توکنهای قدیمی */
--panel: #ffffff;
--border: var(--line);
--text: var(--ink);
--primary: var(--blue-link);
--primary-dark: #2f5ad8;
--green: #43a047;
--red: #e53935;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Vazirmatn', Tahoma, 'Segoe UI', sans-serif;
background: var(--bg);
color: var(--ink);
font-size: 14px;
line-height: 1.8;
-webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
a { color: inherit; text-decoration: none; }
.link { color: var(--blue-link); }
.link:hover { text-decoration: underline; }
.muted { color: var(--muted); }
.small-text { font-size: 12px; }
.hidden { display: none !important; }
.inline { display: inline; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
/* ============================= نوار بالایی ============================= */
.topbar {
background: #fff; border-bottom: 1px solid var(--line);
display: flex; align-items: center; gap: 6px;
padding: 0 18px; height: 58px;
position: sticky; top: 0; z-index: 200;
}
.topbar .logo { display: flex; align-items: center; gap: 9px; margin-inline-end: 14px; flex: none; }
.logo-txt { font-weight: 800; font-size: 16px; color: #3a4150; line-height: 1.15; }
.logo-txt small { display: block; font-size: 8px; font-weight: 600; color: var(--orange); letter-spacing: 2px; }
.nav-items { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; overflow: hidden; }
.nav-item {
display: flex; align-items: center; gap: 5px; white-space: nowrap;
font-size: 13px; color: #4a5261; padding: 8px 10px; border-radius: 8px;
background: none; border: 0;
}
.nav-item:hover, .nav-item.open { background: #f2f4f7; color: var(--ink); }
.nav-item.active { background: #f2f4f7; color: var(--ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--orange); }
.nav-item svg { opacity: .55; transition: transform .18s; }
.nav-item.open svg.nav-caret { transform: rotate(180deg); }
.nav-caret { opacity: .4; margin-inline-start: -2px; }
/* آیتمهای زیرمنوی گروهی نوار بالا */
.dropdown .dd-item.dd-nav { display: flex; align-items: center; gap: 9px; }
.dd-nav .dd-ic { display: inline-flex; opacity: .6; flex: 0 0 auto; }
.dd-nav.on { background: #f4f8ff; color: var(--ink); font-weight: 700; box-shadow: inset 3px 0 0 var(--orange); }
.dd-badge { margin-inline-start: auto; background: var(--orange); color: #fff; border-radius: 999px; font-size: 10px; font-weight: 700; padding: 1px 8px; }
.dropdown.dd-scroll { max-height: max(220px, calc(100vh - 90px)); overflow-y: auto; }
/* ریسپانسیو نوار بالا — بدون هیچ اسکرول افقی */
@media (max-width: 1240px) {
.nav-item { padding: 8px 7px; font-size: 12.5px; gap: 4px; }
}
@media (max-width: 1080px) {
/* نمایشگر کوچک: منو کامل داخل همبرگر (گروهبندیشده) */
.nav-items { display: none; }
}
@media (min-width: 1081px) {
#hamburgerBtn { display: none; } /* منو کامل روی نوار است — همبرگر لازم نیست */
}
.top-actions { display: flex; align-items: center; gap: 8px; flex: none; margin-inline-start: auto; }
.icon-btn {
background: none; border: 0; color: #5a6270; position: relative;
width: 36px; height: 36px; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
}
.icon-btn:hover { background: #f2f4f7; }
.notif-badge {
position: absolute; top: -2px; inset-inline-start: -6px;
background: var(--orange); color: #fff; border-radius: 10px;
font-size: 10px; padding: 2px 6px; font-weight: 700;
}
.user-chip {
display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink);
background: none; border: 0; border-radius: 8px; padding: 4px 8px;
}
.user-chip:hover { background: #f2f4f7; }
.avatar {
width: 32px; height: 32px; border-radius: 50%;
background: linear-gradient(135deg, #5b6472, #2b3038);
color: #fff; display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700; flex-shrink: 0;
}
/* ============================= دراپداون و توست ============================= */
.dropdown {
position: fixed; background: #fff; border: 1px solid var(--line); border-radius: 12px;
box-shadow: 0 14px 34px rgba(20, 30, 50, .16); padding: 6px; min-width: 210px; max-width: 320px;
z-index: 500; display: none;
}
.dropdown.show { display: block; animation: ddin .14s ease; }
@keyframes ddin { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.dropdown .dd-title { font-size: 11.5px; color: var(--muted); padding: 7px 12px 5px; font-weight: 600; }
.dropdown .dd-item {
display: flex; align-items: center; gap: 9px; width: 100%; text-align: start;
background: none; border: 0; border-radius: 8px; padding: 9px 12px; font-size: 13px; color: var(--ink2);
}
.dropdown .dd-item:hover { background: #f2f4f7; color: var(--ink); text-decoration: none; }
.dropdown .dd-item.danger { color: #e53935; }
.dropdown .dd-item.danger:hover { background: #fdecea; }
.dropdown .dd-sep { height: 1px; background: var(--line); margin: 5px 4px; }
.dropdown .dd-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; margin: 4px; }
.color-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 6px 8px 4px; }
.color-sw { width: 30px; height: 30px; border-radius: 7px; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); cursor: pointer; transition: transform .1s; }
.color-sw:hover { transform: scale(1.12); }
.dropdown .dd-search input { border: 0; outline: none; flex: 1; font-size: 13px; background: none; }
/* فهرست اسکرولدار داخل دراپداون (بردها/منوهای بلند) — سربرگ و کادر جستجو بالا ثابت میمانند */
.dropdown .dd-list { max-height: max(180px, calc(100vh - 190px)); overflow-y: auto; overscroll-behavior: contain; }
.dropdown .dd-noresult { text-align: center; padding: 14px 12px; }
.dd-item .dd-meta { display: block; font-size: 11px; color: var(--muted); }
#toast {
position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(16px);
background: #2e3440; color: #fff; font-size: 13px; padding: 11px 20px; border-radius: 10px;
box-shadow: 0 10px 26px rgba(0, 0, 0, .25); opacity: 0; pointer-events: none;
transition: opacity .22s, transform .22s; z-index: 600; max-width: 90vw; text-align: center;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* ============================= نوار عنوان صفحه ============================= */
.subbar {
background: #fff; border-bottom: 1px solid var(--line);
display: flex; align-items: center; gap: 10px; padding: 11px 22px;
}
.subbar .grid-ico { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 20px; height: 20px; }
.subbar .grid-ico i { border-radius: 3px; }
.subbar .grid-ico i:nth-child(1) { background: #42a5f5; }
.subbar .grid-ico i:nth-child(2) { background: #ffca28; }
.subbar .grid-ico i:nth-child(3) { background: #66bb6a; }
.subbar .grid-ico i:nth-child(4) { background: #ef5350; }
.subbar span { font-size: 14.5px; font-weight: 600; }
.main { padding: 18px 22px 60px; max-width: 1280px; margin: 0 auto; }
.main.full { max-width: none; padding-left: 12px; padding-right: 12px; }
/* افکت ظریف باز شدن هر صفحه: محوشدن کل صفحه (بدون transform تا fixed/sticky نشکند)
+ بالاآمدن پلکانیِ بخشهای سطحاول برای حس «باز شدن بخشها». */
@keyframes pageFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sectionIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.main { animation: pageFade .28s ease both; }
.main > .card, .main > .page-head, .main > .stat-chips, .main > .databank-layout, .main > .wf-grid,
.main > .rep-tabs, .main > .filter-tabs, .main > .kanban, .main > section.card, .main > form {
animation: sectionIn .44s cubic-bezier(.22, .61, .36, 1) both;
}
.main > *:nth-child(1) { animation-delay: .02s; }
.main > *:nth-child(2) { animation-delay: .07s; }
.main > *:nth-child(3) { animation-delay: .12s; }
.main > *:nth-child(4) { animation-delay: .17s; }
.main > *:nth-child(5) { animation-delay: .21s; }
.main > *:nth-child(n+6) { animation-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
.main, .main > * { animation: none !important; }
}
/* ============================= سربرگ صفحه ============================= */
.page-head {
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 12px 18px; margin-bottom: 16px;
}
.page-head h1 { font-size: 16px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.page-head .muted { font-size: 12.5px; }
.page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.search-form { display: flex; gap: 6px; }
.search-form .input { width: 230px; }
.filter-tabs { display: flex; background: #eef0f4; border-radius: 9px; padding: 3px; }
.tab { padding: 6px 14px; border-radius: 7px; font-size: 12.5px; color: var(--ink2); }
.tab.active { background: #fff; color: var(--ink); box-shadow: var(--shadow); font-weight: 700; }
/* ============================= کارت ============================= */
.card {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 16px 18px;
margin-bottom: 16px;
}
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.card-head h2 { font-size: 14.5px; font-weight: 700; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .grid-2 { grid-template-columns: 1fr; } }
.section-bar {
background: var(--teal);
color: #fff; font-size: 13px; font-weight: 700;
padding: 8px 14px; border-radius: 9px; margin-bottom: 14px;
display: flex; align-items: center; gap: 8px;
}
.section-bar .sb-ico { opacity: .95; flex-shrink: 0; }
/* بنر مبدأ فرایند (ساختهشده از تسک/مشتری) */
.origin-banner {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
background: #fff6ee; border: 1px solid #f5d5b8; border-radius: 10px;
padding: 10px 14px; margin-bottom: 16px; font-size: 13px; color: #8a5a2b;
}
.origin-banner .ico { color: var(--orange); flex-shrink: 0; }
.origin-banner .btn { margin-inline-start: auto; }
.ico { display: inline-block; vertical-align: -3px; flex-shrink: 0; }
.nav-item .ico, .topmenu-item .ico { vertical-align: middle; }
/* ============================= آمار ============================= */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat-card {
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 14px 16px;
display: flex; align-items: center; gap: 14px;
}
.stat-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 19px; color: #fff; }
.si-blue { background: var(--blue-w); } .si-green { background: var(--green-tile); }
.si-orange { background: var(--orange-w); } .si-purple { background: var(--purple); }
.stat-value { font-size: 21px; font-weight: 800; line-height: 1.2; }
.stat-label { font-size: 12px; color: var(--muted); }
.stat-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.stat {
flex: 1 1 150px; display: flex; align-items: center; justify-content: flex-start; gap: 10px;
background: #f1f2f4; border: 1px solid transparent;
border-radius: 9px; padding: 6px 10px; font-size: 12.5px; color: var(--ink2);
}
.stat:hover { background: #eceef1; border-color: var(--line); }
.stat .stat-lbl { flex: 1; }
.stat b {
min-width: 34px; height: 34px; border-radius: 7px; color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700; padding: 2px 6px; flex: none;
}
/* نشان دوتکهٔ چیپ کارتابل (سبک پیامگستر): بالا = امروز، خط میانی، پایین = مجموع */
.stat b.stat-split { flex-direction: column; height: auto; padding: 0; overflow: hidden; line-height: 1.6; }
.stat b.stat-split span { display: block; width: 100%; text-align: center; padding: 1px 8px; }
.stat b.stat-split span:first-child { border-bottom: 1px solid rgba(255, 255, 255, .55); font-size: 10.5px; opacity: .95; }
/* سفارشیسازی چیپهای کارتابل (⚙ + پاپآپ انتخاب) */
.stat-row { position: relative; }
.stat-cfg {
flex: none; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line);
background: #fff; color: var(--muted); cursor: pointer; font-size: 14px; align-self: center;
}
.stat-cfg:hover { color: var(--ink); border-color: #c9cfd8; }
.stat-cfg-pop {
position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
background: #fff; border: 1px solid var(--line); border-radius: 11px;
box-shadow: 0 10px 28px rgba(25, 35, 60, .14); padding: 10px 12px; min-width: 220px;
}
.stat-cfg-pop.hidden { display: none; }
.stat-cfg-pop .scp-title { font-size: 12px; font-weight: 700; color: var(--ink2); margin-bottom: 8px; }
.stat-cfg-pop .scp-row { display: flex; align-items: center; gap: 7px; font-size: 12.5px; padding: 4px 0; cursor: pointer; }
.stat-cfg-pop .scp-dot { width: 11px; height: 11px; border-radius: 4px; flex: none; }
/* ============================= جدول ============================= */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: right; font-size: 12px; color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.table td { padding: 9px 10px; border-bottom: 1px solid #f1f3f6; vertical-align: middle; font-size: 13px; }
.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: #fafbfc; }
.row-actions { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.table-scroll { overflow-x: auto; }
/* ============================= نشانها ============================= */
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.badge-running, .badge-todo { background: #e7effd; color: #2b56c4; }
.badge-in_progress { background: #fff0e6; color: #d9570f; }
.badge-completed, .badge-done { background: #e5f5ea; color: #1e7d3f; }
.badge-cancelled { background: #eef0f4; color: var(--ink2); }
.badge-warn { background: #fdf3d5; color: #a1720c; margin-inline-start: 6px; }
.badge-light { background: #f2f4f7; color: #5a6270; font-weight: 500; }
.badge-late { background: #fdecea; color: #c62828; }
.prio { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.prio-high { background: #ef5350; }
.prio-normal { background: var(--orange); opacity: .6; }
.prio-low { background: #b0b8c2; }
/* ============================= دکمه ============================= */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
border: 1px solid transparent; border-radius: 9px;
padding: 8px 16px; font-size: 13px; font-family: inherit;
cursor: pointer; transition: all .18s; white-space: nowrap;
}
.btn-primary { background: var(--dark-btn); color: #fff; }
.btn-primary:hover { background: #1f242e; transform: translateY(-1px); }
.btn-light { background: #fff; border-color: var(--line); color: var(--ink2); }
.btn-light:hover { background: #f5f6f8; color: var(--ink); }
.btn-danger-light { background: #fdecea; border-color: #f6c9c5; color: #c62828; }
.btn-danger-light:hover { background: #fbdbd7; }
.btn-block { width: 100%; }
.btn-sm { padding: 5px 12px; font-size: 12.5px; }
.btn-xs { padding: 3px 8px; font-size: 12px; border-radius: 7px; }
/* ============================= فرم ============================= */
.form-group { margin-bottom: 12px; }
.form-group label { display: block; font-size: 12px; color: var(--ink2); margin-bottom: 5px; font-weight: 600; }
.input {
width: 100%; padding: 8px 12px; font-family: inherit; font-size: 13px;
border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink);
transition: border-color .2s, box-shadow .2s;
}
.input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(240, 127, 60, .12); }
.input:disabled { background: #f2f4f7; color: #9aa2af; cursor: not-allowed; }
textarea.input { resize: vertical; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-wide { grid-column: 1 / -1; }
.form-actions { display: flex; gap: 8px; margin-top: 4px; }
.boxed { background: #fafbfc; border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-bottom: 14px; }
.checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); margin-bottom: 6px; cursor: pointer; }
.perm-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 6px; }
/* ============================= پیام فلش ============================= */
.flash { padding: 11px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 13px; }
.flash-success { background: #e5f5ea; color: #1e7d3f; border: 1px solid #c6e8d2; }
.flash-error { background: #fdecea; color: #c62828; border: 1px solid #f6c9c5; }
/* ============================= حالت خالی ============================= */
.empty-state { text-align: center; padding: 40px 20px; }
.empty-state.small { padding: 18px; }
.empty-icon { font-size: 36px; margin-bottom: 8px; }
.empty-state h3 { margin-bottom: 6px; font-size: 15px; }
.empty-state p { color: var(--muted); margin-bottom: 14px; font-size: 13px; }
.empty-msg { padding: 26px 6px; text-align: center; color: var(--muted); font-size: 12px; }
/* ============================= فهرست اطلاعات و خط زمان ============================= */
.info-list > div { padding: 7px 0; border-bottom: 1px solid #f1f3f6; font-size: 13px; }
.info-list > div:last-child { border-bottom: none; }
.timeline { position: relative; padding-right: 18px; }
.timeline::before { content: ''; position: absolute; right: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.timeline-item { position: relative; padding-bottom: 16px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
position: absolute; right: -18px; top: 5px;
width: 12px; height: 12px; border-radius: 50%;
background: var(--orange); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--line);
}
.timeline-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* ============================= ردیف تسک ============================= */
.task-row {
display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
padding: 13px 6px; border-bottom: 1px solid #f1f3f6;
}
.task-row:last-child { border-bottom: none; }
.task-main { flex: 1; min-width: 0; }
.task-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.task-title-row strong { color: var(--blue-link); }
.task-action-form { display: flex; flex-direction: column; gap: 6px; min-width: 260px; }
.task-action-form.compact { min-width: 230px; }
.task-action-form.with-form { min-width: 320px; max-width: 380px; }
.action-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.task-row-link { text-decoration: none; color: inherit; cursor: pointer; border-radius: 8px; }
.task-row-link:hover { background: #fafbfc; }
.task-row-go { align-self: center; font-size: 12px; white-space: nowrap; color: var(--blue-link); }
.task-meta-foot { margin-top: 10px; padding-top: 8px; border-top: 1px solid #f1f3f6; }
.open-task { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; background: #fafbfc; }
.open-task-head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.open-task .task-action-form { margin-top: 8px; }
/* ============================= کانبان (پیگیری وظایف) ============================= */
.kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
@media (max-width: 900px) { .kanban { grid-template-columns: 1fr; } }
.kanban-col { background: none; border-radius: var(--radius); padding: 0; }
.kanban-col-head {
display: flex; justify-content: space-between; align-items: center;
padding: 4px 6px 10px; font-weight: 600; font-size: 12.5px; color: var(--ink2);
}
.kanban-count { background: #eef0f4; border-radius: 6px; padding: 1px 9px; font-size: 11.5px; color: var(--ink); font-weight: 700; }
.kanban-cards { min-height: 60px; display: flex; flex-direction: column; gap: 10px; border-radius: 10px; transition: background .15s; padding: 2px; }
.kanban-cards.over { background: rgba(59, 110, 245, .06); outline: 2px dashed var(--blue-link); outline-offset: -2px; }
.kanban-card {
background: #fff; border: 1px solid var(--line); border-radius: 10px;
padding: 10px 12px; cursor: grab; box-shadow: var(--shadow);
}
.kanban-card.dragging { opacity: .5; }
.kanban-card-title { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 12.5px; margin-bottom: 6px; color: var(--blue-link); }
.kanban-card-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.kanban-card-foot {
display: flex; justify-content: space-between; font-size: 11px; color: var(--muted);
border-top: 1px dashed var(--line); padding-top: 8px; margin-top: 8px;
}
/* کارت تسک (ویجت کارتابل) */
.tcard { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: #fff; display: block; }
.tcard:hover { border-color: #d5dae2; }
.tcard h4 { font-size: 12.5px; color: var(--blue-link); font-weight: 600; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcard .kv { font-size: 11.5px; color: var(--muted); margin-bottom: 4px; }
.tcard .kv b { color: var(--ink); font-weight: 600; }
.tcard footer { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 8px; font-size: 11px; color: var(--muted); }
.mini-av { width: 22px; height: 22px; border-radius: 50%; background: #eceff3; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; color: #5a6270; font-weight: 700; }
/* آواتار تصویری (پروفایل) — قانون سراسری: هر عنصری با has-img، تصویر داخلش مهار میشود */
.has-img { overflow: hidden; padding: 0; }
.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
/* زنگولهٔ موعد مقرر + هایلایت تازهوارد کارتابل */
.due-bell { color: var(--orange); display: inline-flex; vertical-align: -2px; margin-inline-end: 3px; }
.due-bell .ico { vertical-align: middle; }
.tcard.is-new, .kanban-card.is-new { background: #eefaf0; border-color: #bfe6c9; }
.tcard.is-new:hover, .kanban-card.is-new:hover { background: #e6f6ea; }
.badge-new { background: #e5f5ea; color: #1e7d3f; border-radius: 5px; font-size: 9.5px; font-weight: 700; padding: 1px 6px; margin-inline-start: 4px; }
.kcol-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink2); margin-bottom: 8px; }
.kcol-head b { background: #eef0f4; border-radius: 6px; padding: 1px 8px; font-size: 11.5px; color: var(--ink); }
.tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--line); margin-bottom: 12px; font-size: 13px; }
.tabs button, .tabs a { background: none; border: 0; padding: 8px 2px; color: var(--muted); border-bottom: 2px solid transparent; }
.tabs .on { color: var(--ink); font-weight: 600; border-color: var(--teal); }
.kartabel-pane#pane-process .dash-list { display: flex; flex-direction: column; gap: 8px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.search-mini { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; color: var(--muted); font-size: 12.5px; flex: 1; min-width: 130px; }
.search-mini input { border: 0; outline: none; flex: 1; font-size: 12.5px; background: none; }
.chip-btn { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 6px 12px; font-size: 12.5px; color: var(--ink2); }
.chip-btn:hover { background: #f5f6f8; }
/* ============================= ورود (هویت مستقل — کارت مرکزی + پسزمینهٔ اورورا) ============================= */
.lgn-body { min-height: 100vh; background: #e8ecf6; }
.lgn-bg {
position: fixed; inset: 0; z-index: 0; overflow: hidden;
background: linear-gradient(155deg, #eef1fb 0%, #f2edfb 52%, #e8f8f4 100%);
}
.lgn-grid {
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(96, 116, 205, .055) 1px, transparent 1px),
linear-gradient(90deg, rgba(96, 116, 205, .055) 1px, transparent 1px);
background-size: 42px 42px;
-webkit-mask-image: radial-gradient(circle at 50% 38%, #000, transparent 72%);
mask-image: radial-gradient(circle at 50% 38%, #000, transparent 72%);
}
.lgn-blob { position: absolute; border-radius: 50%; filter: blur(64px); opacity: .5; will-change: transform; }
.lgn-blob.b1 { width: 460px; height: 460px; background: #7ea0ff; top: -150px; inset-inline-end: -130px; animation: lgnFloat 19s ease-in-out infinite; }
.lgn-blob.b2 { width: 420px; height: 420px; background: #bb8cff; bottom: -170px; inset-inline-start: -130px; animation: lgnFloat 24s ease-in-out infinite reverse; }
.lgn-blob.b3 { width: 300px; height: 300px; background: #5fe0cf; top: 42%; inset-inline-start: 55%; opacity: .38; animation: lgnFloat 28s ease-in-out infinite; }
@keyframes lgnFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-22px, 28px) scale(1.09); } }
.lgn-shell {
position: relative; z-index: 1; min-height: 100vh;
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 26px 18px;
}
.lgn-card {
width: 100%; max-width: 430px; text-align: center;
background: #fff; border: 1px solid #ecEFf6; border-radius: 24px;
padding: 42px 36px 30px;
box-shadow: 0 30px 70px rgba(40, 50, 95, .16), 0 2px 6px rgba(40, 50, 95, .05);
animation: lgnIn .45s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes lgnIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.lgn-logo-ring {
margin: 2px auto 18px;
display: flex; align-items: center; justify-content: center;
}
.lgn-logo-ring .lgn-mark { width: 84px; height: 84px; display: block; }
.lgn-logo-ring .brand-logo-img { height: 92px; width: auto; max-width: 230px; display: block; object-fit: contain; }
.lgn-title { font-size: 22px; font-weight: 800; color: #1e2531; margin-bottom: 8px; letter-spacing: -.2px; }
.lgn-sub { color: #79818f; font-size: 14px; margin-bottom: 26px; }
.lgn-form { text-align: right; }
.lgn-hint { color: #79818f; font-size: 13px; margin: -6px 0 16px; line-height: 1.9; }
.lgn-field { position: relative; margin-bottom: 13px; }
.lgn-field > .ic {
position: absolute; inset-inline-start: 15px; top: 0; bottom: 0;
display: flex; align-items: center; color: #8b93a3; pointer-events: none;
}
.lgn-field > .eye {
position: absolute; inset-inline-end: 10px; top: 0; bottom: 0; width: 36px;
display: flex; align-items: center; justify-content: center;
background: none; border: 0; color: #9aa2af; cursor: pointer; border-radius: 9px;
}
.lgn-field > .eye:hover { color: #5b7cfa; background: #f1f4fe; }
.lgn-field input {
width: 100%; height: 54px; box-sizing: border-box;
border: 1.5px solid #e4e8f0; background: #f5f7fc; border-radius: 13px;
padding-block: 0; padding-inline-start: 46px; padding-inline-end: 16px;
font-size: 14.5px; color: #20242c; outline: none;
font-family: inherit; transition: border-color .18s, background .18s, box-shadow .18s;
}
.lgn-field.pw input { padding-inline-end: 44px; }
.lgn-field input::placeholder { color: #a7aeba; }
.lgn-field input:focus {
border-color: #5b7cfa; background: #fff;
box-shadow: 0 0 0 4px rgba(91, 124, 250, .14);
}
.lgn-btn {
width: 100%; height: 54px; border: 0; border-radius: 13px; margin-top: 4px;
background: linear-gradient(135deg, #4f6ef7, #7256f0); color: #fff;
font-family: inherit; font-size: 15.5px; font-weight: 700; cursor: pointer;
box-shadow: 0 12px 24px rgba(79, 110, 247, .30);
transition: transform .15s, box-shadow .15s, filter .15s;
}
.lgn-btn:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 16px 30px rgba(79, 110, 247, .38); }
.lgn-btn:active { transform: translateY(0); }
.lgn-btn.ghost { background: #eef0f5; color: #556; box-shadow: none; margin-top: 9px; }
.lgn-btn.ghost:hover { background: #e5e8ef; filter: none; }
.lgn-err { background: #fff2f1; color: #d43b30; border: 1px solid #f6cdc8; border-radius: 12px; padding: 11px 14px; font-size: 13px; margin-bottom: 16px; text-align: right; }
.lgn-foot { margin-top: 24px; font-size: 12px; color: #9aa2af; line-height: 1.9; }
.lgn-tag { margin-top: 20px; max-width: 420px; text-align: center; color: #67707e; font-size: 12.5px; line-height: 1.95; }
@media (max-width: 480px) {
.lgn-card { padding: 32px 22px 26px; border-radius: 20px; }
.lgn-title { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
.lgn-blob { animation: none; }
.lgn-card { animation: none; }
}
/* نصب */
.auth-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--bg); padding: 20px; }
.auth-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 34px; width: 100%; max-width: 380px; box-shadow: 0 20px 50px rgba(25, 32, 45, .12); }
.auth-logo {
width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 14px;
background: linear-gradient(135deg, var(--orange), var(--orange2));
color: #fff; font-weight: 800; font-size: 26px;
display: flex; align-items: center; justify-content: center;
}
.auth-title { text-align: center; font-size: 19px; margin-bottom: 4px; }
.auth-sub { text-align: center; color: var(--muted); font-size: 13px; margin-bottom: 18px; }
.install-info { margin: 14px 0; }
/* ============================= داشبورد ویجتی ============================= */
.hint {
margin: 0 0 14px; padding: 9px 14px; border-radius: 10px;
background: #eef4ff; color: #3b5bd0; font-size: 12.5px; display: flex; gap: 8px; align-items: center;
}
#dashCanvas { position: relative; margin: 0 0 26px; min-height: 300px; }
.widget {
position: absolute; background: #fff; border-radius: 14px; border: 1px solid #ecEFf4; border-color: #eceff4;
box-shadow: 0 1px 2px rgba(24, 32, 52, .05), 0 8px 22px rgba(24, 32, 52, .05);
display: flex; flex-direction: column; overflow: hidden;
transition: box-shadow .15s;
}
.widget:hover { box-shadow: 0 2px 4px rgba(24, 32, 52, .06), 0 14px 30px rgba(24, 32, 52, .09); }
#dashCanvas:not(.stacked) .widget:not(.dragging):not(.resizing) { transition: box-shadow .15s, top .18s ease, left .18s ease; }
.widget.dragging { box-shadow: 0 18px 40px rgba(20, 30, 50, .25); opacity: .95; z-index: 150 !important; cursor: grabbing; }
.widget.resizing { box-shadow: 0 12px 30px rgba(20, 30, 50, .2); z-index: 150 !important; }
/* سربرگ ویجت: سفید با نوار اکسنت رنگی بالا + نشان رنگی کنار عنوان (رنگ از --wc) */
.w-head {
height: 46px; flex: none; display: flex; align-items: center; gap: 8px; position: relative;
background: #fff; color: #2b3240; padding: 0 14px; cursor: grab; user-select: none; touch-action: none;
border-bottom: 1px solid #eef1f6;
}
.w-head::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 3px; background: var(--wc, #9aa3b2); opacity: .9; }
.w-head:active { cursor: grabbing; }
/* عنوان ویجت سمت راست، دکمههای سهنقطه و فلش سمت چپ */
.w-head .title { font-size: 13.5px; font-weight: 800; order: -1; margin-inline-end: auto; display: flex; align-items: center; gap: 9px; }
.w-head .title::before { content: ""; width: 10px; height: 10px; border-radius: 4px; background: var(--wc, #9aa3b2); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--wc, #9aa3b2) 18%, #fff); }
.w-head .hbtn { background: none; border: 0; color: #98a1b0; width: 27px; height: 27px; display: flex; align-items: center; justify-content: center; border-radius: 7px; }
.w-head .hbtn:hover { background: #f2f4f8; color: #2b3240; }
.w-head.dark-text { color: #2b3240; }
.w-body { flex: 1; overflow: auto; padding: 14px; font-size: 13px; position: relative; }
.widget.collapsed .w-body, .widget.collapsed .rs-handle { display: none; }
.widget.collapsed .collapse-btn svg { transform: rotate(180deg); }
.rs-handle { position: absolute; bottom: 0; inset-inline-start: 0; width: 20px; height: 20px; cursor: nwse-resize; z-index: 5; touch-action: none; }
.rs-handle::after {
content: ""; position: absolute; bottom: 4px; inset-inline-start: 4px; width: 10px; height: 10px;
border-inline-start: 2px solid #c3c9d2; border-bottom: 2px solid #c3c9d2; border-radius: 0 0 0 3px;
}
/* رنگ ویجت فقط اکسنت است (نه پسزمینهٔ توپُر) — هویت بصری مستقل */
.h-teal { --wc: var(--teal); } .h-purple { --wc: var(--purple); }
.h-purple2 { --wc: var(--purple2); } .h-pink { --wc: var(--pink); }
.h-yellow { --wc: #d9a400; } .h-orange { --wc: var(--orange-w); }
.h-blue { --wc: var(--blue-w); } .h-gray { --wc: #78909c; }
#dashCanvas.stacked { display: flex; flex-direction: column; gap: 14px; margin: 0 0 40px; }
#dashCanvas.stacked .widget { position: static !important; width: 100% !important; height: auto !important; }
#dashCanvas.stacked .w-body { max-height: 420px; }
#dashCanvas.stacked .rs-handle { display: none; }
#dashCanvas.stacked .w-head { cursor: default; }
.dash-foot { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 50px; }
.add-widget {
position: relative; display: flex; align-items: center; gap: 8px;
background: #e7e9ed; border: 0; border-radius: 8px; padding: 12px 34px;
font-size: 14px; color: var(--ink2); font-weight: 600; transition: .2s;
}
.add-widget:hover { background: #dcdfe5; color: var(--ink); }
a.stat { text-decoration: none; }
a.stat:hover { background: #f5f6f8; border-color: #d5dae2; text-decoration: none; }
/* بارگذاری تدریجی «بیشتر» */
.dash-hidden { display: none !important; }
.dash-more {
display: block; width: 100%; margin-top: 8px;
background: #f2f4f7; border: 1px solid var(--line); border-radius: 8px;
padding: 8px; font-size: 12px; color: var(--ink2); font-weight: 600; transition: .15s;
}
.dash-more:hover { background: #e7e9ed; color: var(--ink); }
/* ویجت دسترسی سریع — تایل سفید با چیپ آیکون رنگی */
.quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(106px, 1fr)); gap: 10px; }
.quick-tile {
background: #fff; color: #39414f; border: 1px solid #e7eaf1; border-radius: 12px;
height: 86px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
font-size: 12px; font-weight: 700; transition: .16s; text-align: center;
box-shadow: 0 1px 2px rgba(24, 32, 52, .04);
}
.quick-tile:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--qc, #3b6ef5) 55%, #fff);
box-shadow: 0 10px 22px color-mix(in srgb, var(--qc, #3b6ef5) 18%, transparent); text-decoration: none; color: var(--ink); }
.qt-ic { width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--qc, #3b6ef5) 13%, #fff); color: var(--qc, #3b6ef5); transition: .16s; }
.quick-tile:hover .qt-ic { background: var(--qc, #3b6ef5); color: #fff; }
.qt-blue { --qc: #3b6ef5; } .qt-green { --qc: #1d7a43; } .qt-orange { --qc: #f07f3c; }
.qt-purple { --qc: #8e5bd9; } .qt-teal { --qc: #00958d; } .qt-pink { --qc: #d81b60; }
.quick-form { display: contents; }
button.quick-tile { cursor: pointer; font-family: inherit; width: 100%; }
/* ویجت آخرین فعالیت */
.act { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.act:last-child { border: 0; }
.act .t1 { font-size: 12.5px; font-weight: 500; }
.act .t2 { font-size: 11.5px; color: var(--muted); }
.time-badge { align-self: flex-start; background: var(--orange-w); color: #fff; border-radius: 6px; font-size: 10.5px; padding: 2px 8px; margin-bottom: 2px; }
/* ویجت یادآوری */
.remind { background: #f4f5f7; border-radius: 8px; padding: 12px; margin-bottom: 12px; font-size: 12px; color: var(--ink2); display: block; }
.remind:hover { background: #eef0f4; text-decoration: none; }
.remind h5 { font-size: 12.5px; color: var(--ink); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.tag-new { background: #ef5350; color: #fff; border-radius: 5px; font-size: 10px; padding: 1px 7px; }
.remind .meta { line-height: 1.9; font-size: 11.5px; }
.remind .foot { margin-top: 8px; background: #e7e9ed; border-radius: 6px; display: inline-block; padding: 2px 8px; font-size: 10.5px; }
/* ویجت نظرات */
/* ---- فید نظرات داشبورد (مطابق پیامگستر) ---- */
/* نظر خودِ شخص: آواتار سمت راست + حباب آبیفام؛ نظر دیگران: آواتار سمت چپ + حباب خاکستری گرم */
.cmt-feed { display: flex; flex-direction: column; gap: 22px; }
.cmt-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cmt:not(.cmt-mine) .cmt-top { flex-direction: row-reverse; justify-content: flex-start; }
.cmt-av {
width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
background: #eef0f4; color: #8a93a5; font-weight: 700; font-size: 13px;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(25, 35, 60, .14);
}
.cmt-name { font-size: 13px; font-weight: 700; color: #3a4152; }
/* ---- فید ارجاعات تسک — تایملاین «پاراف» (بیش از ۳ آیتم → اسکرول) ---- */
.paraf-feed { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 6px 2px 2px; }
.paraf-feed.scrolly { max-height: 470px; overflow-y: auto; overscroll-behavior: contain; padding-inline-end: 6px; }
.paraf-feed.scrolly::-webkit-scrollbar { width: 6px; }
.paraf-feed.scrolly::-webkit-scrollbar-thumb { background: #d3dae4; border-radius: 6px; }
.paraf-feed.scrolly::-webkit-scrollbar-thumb:hover { background: #b9c3d1; }
.paraf-feed.scrolly::-webkit-scrollbar-track { background: transparent; }
.paraf-item { position: relative; display: flex; gap: 12px; animation: parafIn .38s ease both; }
.paraf-item:nth-child(2) { animation-delay: .07s; }
.paraf-item:nth-child(3) { animation-delay: .14s; }
.paraf-item:nth-child(n+4) { animation-delay: .2s; }
@keyframes parafIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* ریل تایملاین: آواتار فرستنده روی خط اتصال گرادیانی */
.paraf-rail { position: relative; flex: none; width: 34px; display: flex; justify-content: center; align-items: flex-start; padding-top: 4px; }
.paraf-item:not(:last-child) .paraf-rail::after {
content: ''; position: absolute; top: 40px; bottom: -14px; right: 50%; margin-right: -1px; width: 2px;
background: linear-gradient(180deg, rgba(38, 198, 218, .5), rgba(59, 110, 245, .2));
}
.paraf-av {
width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; z-index: 1;
background: #eef0f4; color: #8a93a5; font-weight: 800; font-size: 12px;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #dbe5f2, 0 3px 8px rgba(25, 35, 60, .15);
}
.paraf-item.is-pending .paraf-av { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--orange), 0 4px 12px rgba(240, 127, 60, .35); }
.paraf-item.is-done .paraf-av { filter: grayscale(.35); }
/* کارت ارجاع */
.paraf-card {
position: relative; flex: 1; min-width: 0; background: #fff;
border: 1px solid #e7ebf1; border-radius: 12px; padding: 9px 14px 9px 12px;
box-shadow: 0 1px 3px rgba(20, 30, 50, .05); overflow: hidden;
transition: transform .18s ease, box-shadow .18s ease;
}
.paraf-card::after {
content: ''; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px;
background: linear-gradient(180deg, var(--teal), var(--blue-link)); opacity: .5;
}
.paraf-item.is-pending .paraf-card {
border-color: #ffd9bd; background: linear-gradient(160deg, #fff7f0, #fff 45%);
box-shadow: 0 8px 22px rgba(240, 127, 60, .13);
}
.paraf-item.is-pending .paraf-card::after { background: linear-gradient(180deg, #ffb347, var(--orange)); opacity: 1; }
.paraf-item.is-done .paraf-card::after { background: #c9d2de; opacity: .8; }
.paraf-item:hover .paraf-card { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(25, 35, 60, .13); }
/* مسیر: فرستنده ← گیرنده — همیشه تکخطی؛ نام بلند با … کوتاه میشود */
.paraf-route { display: flex; align-items: center; gap: 7px; flex-wrap: nowrap; min-width: 0; }
.paraf-from, .paraf-to { font-size: 12.5px; font-weight: 800; color: #2e3648; display: inline-flex; align-items: center; gap: 5px; min-width: 30px; flex: 0 1 auto; overflow: hidden; }
.paraf-from .pn, .paraf-to .pn { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paraf-arrow { flex: none; }
.paraf-arrow { color: var(--blue-link); display: inline-flex; opacity: .9; animation: parafArrow 1.8s ease-in-out infinite; }
@keyframes parafArrow { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }
.paraf-av-sm {
width: 22px; height: 22px; border-radius: 50%; background: #e8edf5; color: #6a7488;
font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 0 0 2px #fff; flex-shrink: 0;
}
.paraf-av-sm.is-role { color: var(--blue-link); background: #e6efff; }
.paraf-state {
display: inline-flex; align-items: center; gap: 5px;
font-size: 10px; font-weight: 800; border-radius: 20px; padding: 2px 9px; white-space: nowrap;
}
.paraf-state.pending { color: #fff; background: linear-gradient(90deg, #ff9a4d, var(--orange)); box-shadow: 0 3px 9px rgba(240, 127, 60, .35); }
.paraf-state.done { color: #127a3e; background: #e6f6ec; }
.paraf-state.done .ico { color: #127a3e; }
.paraf-state.copy { color: #5b6472; background: #eef1f5; }
.p-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pDot 1.2s ease-in-out infinite; }
@keyframes pDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.65); } }
/* متادیتا */
.paraf-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 5px; }
.paraf-meta .pm { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: #98a0ad; }
.paraf-meta .pm .ico { color: #b3bac6; }
.paraf-meta .pm.late { color: #d84315; font-weight: 700; }
.paraf-meta .pm.late .ico { color: #d84315; }
/* موضوع — حباب نقلقولی */
.paraf-subject {
position: relative; margin-top: 7px; background: #f6f7f9; border-radius: 9px;
padding: 7px 28px 7px 12px; font-size: 12.3px; line-height: 1.95; color: #3d4454; word-break: break-word;
}
.paraf-subject::before {
content: '«'; position: absolute; top: 0; inset-inline-start: 8px;
font-size: 21px; color: #c6d3e8; font-weight: 800; line-height: 1.5;
}
.paraf-item.is-pending .paraf-subject { background: #fff; border: 1px dashed #ffd0ac; }
.paraf-item.is-pending .paraf-subject::before { color: #ffc79e; }
/* پاراف خاتمه — یادداشت گیرنده هنگام خاتمهٔ ارجاع */
.paraf-closenote {
margin-top: 6px; background: #f0faf3; border: 1px solid #cdeeda; border-radius: 9px;
padding: 7px 11px; font-size: 12.2px; line-height: 1.9; color: #1e6b3a; word-break: break-word;
}
.paraf-closenote b { font-weight: 800; }
.paraf-closenote svg { vertical-align: -2px; margin-inline-end: 3px; }
/* رنگ هویت مشتری (بازخورد شرکت م۱۵) */
.cust-color-dot { display: inline-block; border-radius: 50%; vertical-align: middle; margin-inline-end: 6px;
box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.25); }
.cust-color-pick { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; padding: 4px 0; }
.cust-color-pick .ccp-opt { cursor: pointer; }
.cust-color-pick input { display: none; }
.cust-color-pick .ccp-dot { display: inline-block; width: 22px; height: 22px; border-radius: 50%;
border: 2px solid transparent; transition: transform .12s; }
.cust-color-pick .ccp-none { display: inline-flex; width: 22px; height: 22px; border-radius: 50%;
border: 2px dashed #c5ccd8; align-items: center; justify-content: center; font-size: 11px; color: #8b93a1; }
.cust-color-pick input:checked + .ccp-dot { border-color: #2e3440; transform: scale(1.18); }
.cust-color-pick input:checked + .ccp-none { border-color: #2e3440; color: #2e3440; }
/* نوار «مرتبط با» بالای صفحهٔ تسک/درخواست (بازخورد شرکت — سبک پیامگستر) */
.relate-strip {
display: flex; align-items: center; gap: 12px; padding: 10px 16px; margin-bottom: 12px;
}
.relate-strip .rs-lbl {
display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800;
color: #3d4454; white-space: nowrap;
}
.relate-strip .rs-picker { flex: 1; max-width: 520px; }
.relate-strip .rs-open {
display: inline-flex; align-items: center; gap: 5px; background: #eef4ff; color: var(--blue-link);
border: 1px solid #d5e3fb; border-radius: 8px; padding: 6px 13px; font-size: 12.5px;
font-weight: 700; text-decoration: none; white-space: nowrap;
}
.relate-strip .rs-open:hover { background: #e0ecff; }
.relate-strip .rs-crumb { font-size: 13px; color: #3d4454; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.relate-strip .rs-crumb .sep { color: #b7bfcc; }
/* منوی کلیکراست فهرست مشتریان */
.ctx-menu {
position: fixed; z-index: 500; background: #fff; border: 1px solid var(--line);
border-radius: 11px; box-shadow: 0 12px 40px rgba(20, 30, 60, .18); padding: 5px;
min-width: 190px; display: flex; flex-direction: column;
}
.ctx-item {
background: none; border: 0; text-align: right; font-family: inherit; font-size: 13px;
padding: 8px 12px; border-radius: 8px; cursor: pointer; color: #2e3440; white-space: nowrap;
}
.ctx-item:hover { background: #f2f5fa; color: var(--blue-link); }
/* سربرگ دامنه + جداکننده + آیتم خطرناک + زیرمنوی منوی کلیکراست بانک اطلاعاتی */
.ctx-head { padding: 6px 12px 7px; font-size: 11.5px; color: #8a93a3; font-weight: 700;
border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.ctx-sep { height: 1px; background: var(--line); margin: 4px 6px; }
.ctx-item.danger { color: #c0392b; }
.ctx-item.danger:hover { background: #fdecea; color: #c0392b; }
.ctx-item.has-sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ctx-item.has-sub::after { content: '‹'; color: #9aa3b2; font-size: 15px; line-height: 1; }
.ctx-item.has-sub.open { background: #f2f5fa; color: var(--blue-link); }
.ctx-sub {
position: fixed; z-index: 501; background: #fff; border: 1px solid var(--line);
border-radius: 11px; box-shadow: 0 12px 40px rgba(20, 30, 60, .18); padding: 5px;
min-width: 168px; max-height: 340px; overflow-y: auto; display: flex; flex-direction: column;
}
.ctx-sub .ctx-empty { padding: 8px 12px; font-size: 12px; color: #9aa3b2; }
.ctx-color-item { display: flex; align-items: center; gap: 8px; }
.ctx-color-item .cdot { width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0,0,0,.12); }
/* چیپ مشتری کنار عنوان تسک */
.task-cust-chip {
display: inline-flex; align-items: center; gap: 5px; margin-inline-start: 8px;
background: #eef4ff; color: var(--blue-link); border: 1px solid #d5e3fb; border-radius: 999px;
padding: 3px 12px; font-size: 12.5px; font-weight: 700; text-decoration: none; vertical-align: middle;
}
.task-cust-chip:hover { background: #e0ecff; }
.cmt-subj { display: block; text-align: right; font-size: 13.5px; font-weight: 700; color: var(--blue-link); text-decoration: none; line-height: 1.9; margin: 0 2px 9px; }
.cmt-subj:hover { text-decoration: underline; }
.cmt-bubble {
background: #f4f3f1; border-radius: 10px; padding: 14px 16px;
font-size: 12.8px; line-height: 2.15; color: #3f4553; word-break: break-word;
}
.cmt-time { font-size: 11px; color: #9aa2af; margin-top: 7px; }
.cmt-bubble .mention-inline { color: var(--blue-link); font-weight: 600; }
.cmt-mine .cmt-av { background: var(--blue-link); color: #fff; }
.cmt-mine .cmt-bubble { background: #e9edf7; }
/* جعبهٔ «پیام خود را بنویسید» بالای فید + آیکون ارسال در چپ */
.dash-compose { border-bottom: 1px solid #e9ebf0; margin-bottom: 16px; padding-bottom: 8px; }
.dash-compose-main { position: relative; }
.dash-compose textarea {
width: 100%; border: 0; background: transparent; resize: none; outline: none;
font: inherit; font-size: 13.5px; line-height: 2; color: var(--ink);
padding: 6px 2px 6px 48px; min-height: 66px;
}
.dash-compose textarea::placeholder { color: #c3c9d4; font-size: 14px; }
.dash-send {
position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
border: 0; background: none; color: #6d7fa8; width: 38px; height: 38px; border-radius: 50%;
cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.dash-send:hover { background: #eef2f8; color: var(--blue-link); }
.dash-send .ico { transform: scaleX(-1); }
.dash-compose-foot { display: none; align-items: center; gap: 8px; padding: 6px 2px 8px; font-size: 12px; color: var(--muted); }
.dash-compose.focused .dash-compose-foot { display: flex; }
.tgt-picker { position: relative; flex: 1; min-width: 0; }
.tgt-picker .tgt-search { width: 100%; height: 32px; font-size: 12px; }
.tgt-picker .cust-results { z-index: 60; }
/* ============================= صفحه درخواست ============================= */
.request-grid { display: grid; grid-template-columns: 1fr 360px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .request-grid { grid-template-columns: 1fr; } }
.stepper-card { padding: 12px 14px; }
.stepper { display: flex; align-items: stretch; gap: 3px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: thin; }
.stepper::-webkit-scrollbar { height: 6px; }
.stepper::-webkit-scrollbar-thumb { background: #d5dae3; border-radius: 99px; }
.stepper::-webkit-scrollbar-track { background: transparent; }
.step {
flex: 1; min-width: 118px; max-width: 200px; text-align: center;
padding: 10px 22px; font-size: 12px; font-weight: 700;
background: #eef0f4; color: var(--muted); white-space: nowrap;
clip-path: polygon(100% 0, 14px 0, 0 50%, 14px 100%, 100% 100%, calc(100% - 14px) 50%);
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
/* فرایند پرمرحله: متن بلند با سهنقطه تمام شود نه بریدهٔ وسط کلمه (متن کامل = title هاور) */
.step .step-label { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step:first-child { clip-path: polygon(100% 0, 14px 0, 0 50%, 14px 100%, 100% 100%); }
.step.done { background: #dcf0ee; color: #0d7c70; }
.step.active { background: var(--orange); color: #fff; }
.step.cancelled { background: #fdecea; color: #c62828; }
.actions-card { padding: 10px 16px; }
.actions-row {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap; padding: 6px 0;
}
.actions-row + .actions-row { border-top: 1px solid #f1f3f6; }
.actions-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.toolbar-btns { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.stage-block { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.stage-block.active { border-color: #f3b795; background: #fff9f5; }
.stage-block.done { background: #fafbfc; }
.stage-block.pending { border-style: dashed; background: none; padding: 8px 14px; }
.stage-block-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.stage-block.pending .stage-block-head:last-child { margin-bottom: 0; }
.stage-dot { width: 10px; height: 10px; border-radius: 50%; background: #c3c9d2; flex-shrink: 0; }
.stage-dot.active { background: var(--orange); box-shadow: 0 0 0 3px rgba(240, 127, 60, .2); }
.stage-dot.done { background: var(--green-tile); }
.stage-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; margin-bottom: 6px; }
/* بخشهای گروه در سازندهٔ اینپوتها (تنظیمات) */
.fb-group { border: 1px dashed #ccd4e0; border-radius: 12px; padding: 12px; margin-bottom: 12px; background: #fbfcfe; }
.fb-group.fb-ungrouped { background: #fff; border-style: solid; border-color: #e7ebf1; }
.fb-group-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.fb-group-title { font-size: 12px; }
.fb-group-name { max-width: 320px; font-weight: 700; }
.fb-add-field { margin-top: 4px; }
.fb-move { height: 26px; font-size: 11px; padding: 0 6px; max-width: 130px; }
.fb-role-pick { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.fb-roles { min-width: 120px; max-width: 180px; height: auto; min-height: 30px; font-size: 11.5px; padding: 2px 4px; }
.bf-roles { min-width: 130px; max-width: 220px; height: auto; min-height: 30px; font-size: 12px; padding: 3px 5px; }
.field-lock { font-size: 11px; opacity: .7; margin-inline-start: 3px; cursor: help; }
/* پاپآپ آلارم یادآور تماس (کالسنتر) — میماند تا اپراتور اقدام کند */
#ccRemPop {
position: fixed; top: 70px; left: 18px; z-index: 901;
display: flex; align-items: flex-start; gap: 12px; direction: rtl;
background: linear-gradient(135deg, #7a3c00, #b3540a); color: #fff;
border: 1px solid #ffb36b; border-radius: 14px; padding: 14px 16px;
box-shadow: 0 16px 44px rgba(120, 60, 0, .45); min-width: 280px; max-width: 400px;
animation: vcpIn .35s cubic-bezier(.2, .9, .3, 1.2);
}
#ccRemPop .crp-bell { font-size: 26px; animation: vcpShake 1.1s infinite; margin-top: 2px; }
#ccRemPop .crp-title { font-size: 11px; color: #ffd9ae; }
#ccRemPop .crp-snz { color: #ffc48a; }
#ccRemPop .crp-subject { font-weight: 800; font-size: 14px; margin: 3px 0 5px; line-height: 1.9; }
#ccRemPop .crp-cust { display: inline-block; color: #ffe3c2; font-size: 12px; text-decoration: none; border-bottom: 1px dashed #ffc48a; margin-bottom: 4px; }
#ccRemPop .crp-num { font-size: 13px; font-weight: 700; color: #ffe9d2; }
#ccRemPop .crp-at { font-size: 10.5px; color: #ffd9ae; margin-top: 3px; }
#ccRemPop .crp-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
#ccRemPop .crp-actions button {
border: 0; border-radius: 8px; padding: 6px 12px; font-family: inherit;
font-size: 11.5px; font-weight: 700; cursor: pointer;
background: rgba(255, 255, 255, .16); color: #fff;
}
#ccRemPop .crp-actions button:hover { background: rgba(255, 255, 255, .28); }
#ccRemPop .crp-actions .crp-done { background: #2e9e5b; }
#ccRemPop .crp-actions .crp-done:hover { background: #27884e; }
/* پاپآپ تماس ورودی ویپ */
#voipCallPop {
position: fixed; top: 70px; left: 18px; z-index: 900;
display: flex; align-items: center; gap: 12px; direction: rtl;
background: #1f2733; color: #fff; border-radius: 14px; padding: 14px 16px;
box-shadow: 0 16px 44px rgba(10, 18, 34, .45); min-width: 260px; max-width: 400px;
animation: vcpIn .35s cubic-bezier(.2, .9, .3, 1.2);
}
#voipCallPop .vcp-ring { align-self: flex-start; margin-top: 4px; }
@keyframes vcpIn { from { transform: translateY(-14px); opacity: 0 } to { transform: none; opacity: 1 } }
#voipCallPop .vcp-ring { font-size: 26px; animation: vcpShake 1.1s infinite; }
@keyframes vcpShake { 0%,100%{transform:rotate(0)} 10%{transform:rotate(-14deg)} 20%{transform:rotate(12deg)} 30%{transform:rotate(-9deg)} 40%{transform:rotate(6deg)} 50%{transform:rotate(0)} }
#voipCallPop .vcp-title { font-size: 11px; color: #9fb0c8; }
#voipCallPop .vcp-who { font-weight: 800; font-size: 14.5px; margin: 1px 0; }
#voipCallPop .vcp-num { font-size: 12px; color: #cdd7e4; }
#voipCallPop .vcp-link { display: inline-block; margin-top: 5px; font-size: 12px; color: #7fb2ff; text-decoration: none; }
#voipCallPop .vcp-link:hover { text-decoration: underline; }
#voipCallPop .vcp-x { position: absolute; top: 6px; inset-inline-end: 8px; border: none; background: none; color: #8fa0b8; cursor: pointer; font-size: 12px; }
#voipCallPop .vcp-x:hover { color: #fff; }
/* اطلاعات غنی مشتری در پاپآپ تماس (شناخت قبل از پاسخ) */
#voipCallPop .vcp-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
#voipCallPop .vcp-chip { background: rgba(255,255,255,.1); border-radius: 12px; padding: 2px 9px; font-size: 10.5px; color: #cdd7e4; }
#voipCallPop .vcp-last { margin-top: 6px; font-size: 11px; color: #ffd9a8; background: rgba(255,180,80,.08); border-radius: 8px; padding: 6px 9px; line-height: 1.8; }
#voipCallPop .vcp-acts { margin-top: 5px; display: flex; flex-direction: column; gap: 2px; }
#voipCallPop .vcp-act { font-size: 10.5px; color: #b9c6d8; line-height: 1.7; }
#voipCallPop .vcp-when { color: #8fa0b8; }
/* دکمهٔ کلیکتوکال کنار شمارهها */
.c2c-btn { border: none; background: #e8f7ee; color: #127a3e; width: 26px; height: 26px; border-radius: 8px; cursor: pointer; font-size: 13px; line-height: 1; vertical-align: middle; margin-inline-start: 5px; }
.c2c-btn:hover { background: #127a3e; color: #fff; }
/* دراپداون شمارههای تماس (سربرگ پروفایل مشتری) */
.call-dd-wrap { position: relative; display: inline-block; }
.call-caret { font-size: 10px; opacity: .6; margin-inline-start: 2px; }
.call-dd {
position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 300;
min-width: 250px; background: #fff; border: 1px solid var(--line); border-radius: 12px;
box-shadow: 0 14px 38px rgba(20, 30, 50, .16); padding: 6px; direction: rtl;
}
.call-dd-item {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
width: 100%; border: none; background: none; padding: 9px 11px; border-radius: 8px;
cursor: pointer; font-size: 13px; text-align: right;
}
.call-dd-item:hover { background: #e8f7ee; }
.call-dd-item .cdi-num { font-weight: 700; color: #127a3e; font-size: 13px; }
.call-dd-item .cdi-lbl { color: var(--muted); font-size: 11.5px; }
.call-dd-hint { border-top: 1px dashed var(--line); margin-top: 4px; padding: 8px 10px; font-size: 11.5px; color: #b05e10; background: #fffaf3; border-radius: 0 0 8px 8px; }
/* چیپهای آمار (سراسری — سوابق تماس، برد فروش و...) */
.stat-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat-chip {
background: #fff; border: 1px solid var(--line); border-radius: 14px;
padding: 14px 16px; display: flex; align-items: center; gap: 13px;
box-shadow: 0 1px 3px rgba(20, 30, 50, .04);
}
.stat-chip .sc-ico {
width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: #eef2f8; color: #4a5568;
}
.stat-chip .sc-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat-chip .sc-num { font-size: 20px; font-weight: 800; line-height: 1.1; color: #2e3440; }
.stat-chip .sc-lbl { font-size: 12px; color: var(--muted); white-space: nowrap; }
.stat-chip.sc-blue .sc-ico { background: #e8f0fb; color: #3159a8; }
.stat-chip.sc-blue .sc-num { color: #3159a8; }
.stat-chip.sc-green .sc-ico { background: #e8f7ee; color: #127a3e; }
.stat-chip.sc-green .sc-num { color: #127a3e; }
.stat-chip.sc-red .sc-ico { background: #fdeceb; color: #c62828; }
.stat-chip.sc-red .sc-num { color: #c62828; }
.stat-chip.sc-orange .sc-ico { background: #fff3e2; color: #b05e10; }
.stat-chip.sc-orange .sc-num { color: #b05e10; }
/* سوابق تماس ویپ */
.vc-dir { font-size: 12px; font-weight: 700; white-space: nowrap; }
.vc-dir.vc-in { color: #3159a8; }
.vc-dir.vc-out { color: #127a3e; }
.badge.vc-st-answered { background: #e8f7ee; color: #127a3e; }
.badge.vc-st-completed { background: #e8f0fb; color: #3159a8; }
.badge.vc-st-missed, .badge.vc-st-noanswer { background: #fdeceb; color: #c62828; }
.badge.vc-st-ringing { background: #fff3e2; color: #b05e10; }
/* کارت دعوتشدگان جلسه (request.php) */
.inv-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.inv-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.inv-name { flex: 1; font-size: 13px; font-weight: 600; }
.inv-x { border: none; background: #fdeceb; color: #c62828; width: 24px; height: 24px; border-radius: 7px; cursor: pointer; font-size: 11px; }
.inv-x:hover { background: #c62828; color: #fff; }
.inv-add { display: flex; gap: 8px; align-items: center; }
.inv-add select { flex: 1; }
/* انتخابگر جستجویی دعوتشدگان (فیلد users) */
.users-field.up-src { display: none; }
.up-wrap { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: #fff; }
.up-wrap.up-locked { background: #fafbfc; }
.up-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.up-chips:empty { margin-bottom: 0; }
.up-chip { display: inline-flex; align-items: center; gap: 6px; background: #e8f0fb; color: #2a4a9b; border-radius: 16px; padding: 3px 11px; font-size: 12.5px; font-weight: 700; }
.up-chip .up-x { border: none; background: none; color: #c62828; cursor: pointer; font-size: 11px; padding: 0; }
.up-inputrow { display: flex; align-items: center; gap: 8px; }
.up-search { border: none !important; box-shadow: none !important; padding: 4px 2px; flex: 1; }
.up-count { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.up-results { max-height: 210px; overflow: auto; border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.up-opt { text-align: right; border: none; background: none; padding: 7px 9px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.up-opt:hover { background: #f2f6ff; }
.up-lock { font-size: 12px; color: #b05e10; background: #fff7ec; border: 1px dashed #ecc386; border-radius: 8px; padding: 7px 10px; margin-top: 6px; }
/* بنر «نوبت کیست؟» صفحهٔ درخواست */
.turn-banner {
display: flex; align-items: center; gap: 14px;
border-radius: 14px; padding: 14px 18px; margin-bottom: 14px;
border: 1px solid var(--line); background: #fff;
}
.turn-banner .tb-ico { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.turn-banner .tb-body { flex: 1; min-width: 0; }
.turn-banner .tb-title { font-weight: 800; font-size: 15px; margin-bottom: 3px; }
.turn-banner .tb-text { font-size: 13px; color: #4a5568; line-height: 1.9; }
.turn-banner.turn-mine { border-color: #f3b795; background: linear-gradient(180deg, #fff8f3, #fff); box-shadow: 0 4px 16px rgba(240, 127, 60, .12); }
.turn-mine .tb-ico { background: #fdebdd; color: var(--orange); animation: tbPulse 2s infinite; }
.turn-mine .tb-title { color: #b05310; }
@keyframes tbPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(240,127,60,.35) } 50% { box-shadow: 0 0 0 9px rgba(240,127,60,0) } }
.turn-banner.turn-wait { border-color: #cfe0ff; background: linear-gradient(180deg, #f6f9ff, #fff); }
.turn-wait .tb-ico { background: #e8f0fb; color: #3159a8; }
.turn-wait .tb-title { color: #2a4a9b; }
.turn-banner.turn-done { border-color: #cbe8d5; background: linear-gradient(180deg, #f3fbf6, #fff); }
.turn-done .tb-ico { background: #e8f7ee; color: #127a3e; }
.turn-done .tb-title { color: #127a3e; }
.turn-banner.turn-cancel { opacity: .85; }
.turn-cancel .tb-ico { background: #f0f1f3; color: #8a93a3; }
.tb-due { display: inline-block; margin-inline-start: 8px; background: #fff3e2; color: #b05e10; border-radius: 8px; padding: 2px 10px; font-size: 12px; font-weight: 700; }
.tb-due.late { background: #fdeceb; color: #c62828; }
.tb-cta { background: var(--orange); color: #fff; font-weight: 700; border: none; flex-shrink: 0; }
.tb-cta:hover { background: #d96a2b; color: #fff; }
/* راهنمای مرحلهٔ فعال */
.stage-guide {
display: flex; gap: 10px; align-items: flex-start;
background: #f3f8ff; border: 1px solid #cfe0ff; border-inline-start: 4px solid #3b6ef5;
border-radius: 10px; padding: 10px 14px; margin: 8px 0 12px; font-size: 13px; line-height: 2; color: #2e3c55;
}
.stage-guide .sg-ico { color: #3b6ef5; flex-shrink: 0; margin-top: 3px; }
/* توضیح اقدام ثبتشده روی مرحله (از request_log) — بعد از تکمیل هم دیده میشود */
.stage-note {
display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
background: #f8f6f2; border: 1px solid #eee7da; border-inline-start: 4px solid #e0c98f;
border-radius: 10px; padding: 8px 12px; margin: 8px 0; font-size: 12.5px; color: #3a4152;
}
.stage-note b { color: #2e3440; }
.stage-note .sn-act { font-size: 10.5px; font-weight: 700; color: #8a5a20; background: #fff3dd; border-radius: 999px; padding: 1px 9px; }
.stage-note .sn-body { flex: 1 1 100%; line-height: 1.9; }
.stage-note i { font-style: normal; color: #b3a98f; font-size: 10.5px; margin-inline-start: auto; }
/* نوبتهای تکراری یک مرحله (حلقهٔ اصلاح/برگشت) */
.stage-round {
display: inline-flex; gap: 6px; align-items: center; background: #eef3fb; border-radius: 999px;
padding: 4px 14px; margin: 10px 0 4px; font-size: 11.5px; color: #2a4479; font-weight: 700;
}
.spr-title { font-size: 11.5px; font-weight: 800; color: #8a93a3; margin-top: 12px; border-top: 1px dashed #e3e6ec; padding-top: 10px; }
/* ویجت اختصاصی فرایند در داشبورد */
.pw-item {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 9px 10px; border-bottom: 1px solid #f0f2f5; border-radius: 9px;
}
/* دکمهٔ واتساپ پروفایل مشتری */
.btn-wa { color: #128c4b !important; }
.btn-wa:hover { background: #e8f7ee !important; border-color: #b8e6c8 !important; }
/* پیشنیازها و تایمشیت تسک (فاز ۲ پروژه) */
.dep-block-warn { background: #fdecea; color: #b3261e; border: 1px solid #f5c6c2; border-radius: 9px; padding: 8px 12px; font-size: 12px; font-weight: 700; margin-bottom: 10px; }
.dep-row { display: flex; align-items: center; gap: 7px; padding: 6px 2px; border-bottom: 1px dashed #f0f2f5; font-size: 12.5px; }
.dep-row .link { flex: 1; }
.dep-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.dep-dot.open { background: #f07f3c; box-shadow: 0 0 0 3px #fdeade; }
.dep-dot.done { background: #2e9e5b; }
/* چکلیست تسک */
.cl-bar { height: 6px; background: #eef1f5; border-radius: 6px; overflow: hidden; margin: 2px 0 10px; }
.cl-bar-fill { height: 100%; background: linear-gradient(90deg, #2e9e5b, #3fb56e); border-radius: 6px; transition: width .3s; }
.cl-list { list-style: none; margin: 0; padding: 0; }
.cl-item { display: flex; align-items: center; gap: 8px; padding: 6px 2px; border-bottom: 1px dashed #f0f2f5; font-size: 13px; }
.cl-item .cl-chk { display: inline-flex; margin: 0; }
.cl-item input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; accent-color: #2e9e5b; }
.cl-item .cl-text { flex: 1; }
.cl-item.is-done .cl-text { text-decoration: line-through; color: #9aa3af; }
.cl-dot { width: 13px; height: 13px; border-radius: 4px; border: 2px solid #cdd4de; flex: 0 0 auto; }
.cl-dot.on { background: #2e9e5b; border-color: #2e9e5b; }
.cl-x { opacity: .5; }
.cl-item:hover .cl-x { opacity: 1; }
.cl-add { display: flex; gap: 6px; margin-top: 10px; }
.cl-add .input { flex: 1; }
/* مالی پروژه */
.fin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.fin-tile { border: 1px solid #e6e9ef; border-radius: 12px; padding: 14px; background: #fff; position: relative; overflow: hidden; }
.fin-tile::before { content: ''; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px; background: #cdd4de; }
.fin-tile span { display: block; font-size: 12px; color: #77808f; margin-bottom: 4px; }
.fin-tile b { font-size: 18px; display: block; }
.fin-tile small { display: block; margin-top: 5px; color: #9aa3af; font-size: 11px; }
.fin-tile.f-rev::before { background: #3b6ef5; } .fin-tile.f-rev b { color: #3b6ef5; }
.fin-tile.f-cost::before { background: #c26a00; } .fin-tile.f-cost b { color: #c26a00; }
.fin-tile.f-profit::before { background: #1d7a43; } .fin-tile.f-profit b { color: #1d7a43; }
.fin-tile.f-loss::before { background: #c0392b; } .fin-tile.f-loss b { color: #c0392b; }
.fin-tile.f-budget::before { background: #8e5bd9; } .fin-tile.f-budget b { color: #6b46c1; }
.fin-link-row { display: flex; align-items: center; gap: 8px; padding: 6px 2px; border-bottom: 1px dashed #f0f2f5; font-size: 12.5px; }
.fin-link-row .link, .fin-link-row > span:first-child { flex: 1; }
/* پورتال مشتری */
.portal-link-box { display: flex; gap: 6px; align-items: center; }
.portal-link-box .input { flex: 1; font-size: 12px; background: #f6f7f9; }
.prj-hdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; margin-inline-end: 4px; box-shadow: 0 0 0 3px rgba(0,0,0,.04); }
.dep-add, .time-add { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.dep-add .input { flex: 1; }
/* فرم ثبت زمان (تایمشیت) — چیدمان گرید تمیز با برچسب */
.time-add2 { display: flex; flex-direction: column; gap: 9px; background: #f8f9fb; border: 1px solid var(--line); border-radius: 11px; padding: 11px 12px; }
.ta2-row { display: flex; gap: 8px; align-items: flex-end; }
.ta2-field { display: flex; flex-direction: column; gap: 4px; }
.ta2-field > span { font-size: 11px; font-weight: 700; color: #5a6472; }
.ta2-field > span .muted { font-weight: 400; }
.ta2-num { width: 74px; flex: 0 0 auto; }
.ta2-num .input { text-align: center; padding-inline: 6px; }
.ta2-date { flex: 1; min-width: 0; }
.ta2-date .input { width: 100%; }
.ta2-note { flex: 1; min-width: 0; }
.ta2-btn { flex: 0 0 auto; white-space: nowrap; height: 38px; }
@media (max-width: 520px) { .ta2-row { flex-wrap: wrap; } .ta2-note { flex-basis: 100%; } }
.time-list { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.time-row { display: flex; align-items: center; gap: 8px; font-size: 12px; border-bottom: 1px dashed #f0f2f5; padding-bottom: 5px; }
.time-row .muted { flex: 1; }
.prj-prog-fill.over { background: linear-gradient(90deg, #e2557f, #c62828); }
.wl-over td { background: #fff6f4; }
.b-blocked { background: #fdecea; color: #b3261e; }
.gantt-legend { display: flex; gap: 16px; margin-top: 10px; align-items: center; }
.gantt-legend i { display: inline-block; width: 14px; height: 9px; border-radius: 3px; vertical-align: -1px; margin-inline-end: 4px; }
/* ویجت «پروژههای من» داشبورد */
.dash-prj { padding: 8px 10px; border-bottom: 1px solid #f0f2f5; }
.dash-prj-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dash-prj-bar { height: 7px; background: #eef1f5; border-radius: 6px; overflow: hidden; margin: 6px 0 4px; }
.dash-prj-bar > div { height: 100%; background: linear-gradient(90deg, #3b6ef5, #17a2a6); border-radius: 6px; }
.dash-prj-meta { font-size: 11px; }
.pw-item:last-child { border-bottom: none; }
.pw-item.pw-today { background: #fff7f1; border: 1px solid #f3c9a8; margin-bottom: 6px; }
.pw-info { min-width: 0; flex: 1; }
.pw-meta { margin-top: 2px; }
.pw-alert { color: #c05310; font-weight: 800; font-size: 12.5px; animation: pwBlink 2.2s infinite; display: inline-block; }
@keyframes pwBlink { 0%,100% { opacity: 1 } 50% { opacity: .55 } }
.pw-actions { display: flex; gap: 5px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.w-count { background: rgba(255,255,255,.28); border-radius: 10px; padding: 1px 8px; font-size: 11px; margin-inline-start: 6px; }
/* نوار زنجیرهٔ تسکهای رویهم */
.task-chain {
display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
background: #fff; border: 1px solid var(--line); border-radius: 12px;
padding: 10px 14px; margin-bottom: 14px;
}
.tc-label { font-size: 12px; font-weight: 800; color: #55607a; display: inline-flex; align-items: center; gap: 5px; }
.tc-chip {
display: inline-flex; align-items: center; gap: 6px;
background: #f5f6f8; border: 1px solid var(--line); border-radius: 20px;
padding: 4px 12px; font-size: 12px; font-weight: 600; color: #3a4152; text-decoration: none;
transition: box-shadow .15s;
}
a.tc-chip:hover { box-shadow: 0 3px 9px rgba(20, 30, 50, .12); color: var(--blue-link); }
.tc-chip.tc-current { background: #fff7f1; border-color: #f0a06a; color: #b05310; box-shadow: 0 0 0 3px rgba(240, 127, 60, .12); }
.tc-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: #b0b8c2; }
.tc-dot.st-todo { background: #f0ad4e; }
.tc-dot.st-in_progress { background: #3b6ef5; }
.tc-dot.st-done { background: #2e9e5b; }
.tc-dot.st-cancelled { background: #c62828; }
.tc-arrow { color: #b0b8c2; font-size: 13px; }
.tc-group { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; border: 1px dashed #d5dae2; border-radius: 12px; padding: 3px 8px; }
.tc-sep { width: 1px; height: 16px; background: #d5dae2; }
/* ردیف گلوگاه گزارش فرایند */
.bottleneck-row { background: #fff8f6; }
.bottleneck-row td:first-child { border-inline-start: 3px solid #d84315; }
/* پیشرفت تأیید گروهی */
.ap-progress { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; font-weight: 700; color: #2a4a9b; background: #f3f8ff; border: 1px solid #cfe0ff; border-radius: 10px; padding: 5px 10px; }
.ap-chip { background: #fff; border: 1px solid #cfe0ff; border-radius: 8px; padding: 1px 8px; font-size: 11px; font-weight: 600; color: #3a4152; }
/* پیشنمایش مقصد کنار دکمههای اقدام */
.act-wrap { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; }
.act-hint { font-size: 10.5px; color: var(--muted); max-width: 200px; text-align: center; line-height: 1.6; }
/* توضیح مقصد اقدام فقط با هاور/فوکوس (ضد شلوغی نوار اقدامات — درخواست کاربر): تولتیپ CSS از data-outcome */
.act-wrap { position: relative; display: inline-flex; }
.act-btn { position: relative; }
.act-btn[data-outcome]:not([data-outcome=""])::after {
content: attr(data-outcome);
position: absolute; top: calc(100% + 10px); right: 50%;
transform: translateX(50%) translateY(-4px);
background: #2e3440; color: #fff; font-size: 11px; font-weight: 400; line-height: 1.9;
padding: 7px 12px; border-radius: 9px; width: max-content; max-width: 270px;
white-space: normal; text-align: right;
box-shadow: 0 10px 26px rgba(20, 28, 45, .25);
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .14s ease, transform .14s ease;
z-index: 260;
}
.act-btn[data-outcome]:not([data-outcome=""])::before {
content: ''; position: absolute; top: calc(100% + 4px); right: 50%; transform: translateX(50%);
border: 6px solid transparent; border-bottom-color: #2e3440;
opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .14s ease;
z-index: 260;
}
.act-btn[data-outcome]:not([data-outcome=""]):hover::after,
.act-btn[data-outcome]:not([data-outcome=""]):focus-visible::after,
.act-btn[data-outcome]:not([data-outcome=""]):hover::before,
.act-btn[data-outcome]:not([data-outcome=""]):focus-visible::before { opacity: 1; visibility: visible; }
.act-btn[data-outcome]:not([data-outcome=""]):hover::after,
.act-btn[data-outcome]:not([data-outcome=""]):focus-visible::after { transform: translateX(50%) translateY(0); }
/* پنل جدای «اقدام شما در این مرحله» (درخواست کاربر) — دکمههای فرایند، بزرگ و تایلمانند */
.act-panel {
margin-top: 10px; padding: 12px 14px 14px;
background: linear-gradient(180deg, #fffdfb, #fdf7f1);
border: 1px solid #f0e4d6; border-right: 3px solid var(--orange);
border-radius: 12px;
}
.act-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.apn-ico {
width: 32px; height: 32px; border-radius: 9px; flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--orange) 14%, #fff); color: var(--orange);
}
.apn-tt { display: flex; flex-direction: column; gap: 2px; }
.apn-tt b { font-size: 13px; }
.apn-tt .muted { font-size: 11px; }
.act-tiles { display: flex; flex-wrap: wrap; gap: 9px; }
.act-tile {
border: 1px solid var(--border); background: #fff; color: #2b3240;
border-radius: 11px; padding: 11px 24px; min-width: 132px;
font-size: 13.5px; font-weight: 800; font-family: inherit; cursor: pointer;
transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.act-tile:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(25, 35, 60, .10); }
.act-tile.tile-primary { background: var(--dark-btn); border-color: var(--dark-btn); color: #fff; }
.act-tile.tile-primary:hover { box-shadow: 0 10px 22px rgba(46, 52, 64, .32); }
.act-tile.tile-danger { background: #fdecea; border-color: #f2c4bf; color: #c62828; }
.act-tile.tile-light:hover { border-color: var(--orange); color: var(--orange); }
@media (max-width: 640px) { .act-tile { flex: 1 1 calc(50% - 9px); min-width: 0; } }
/* بزرگنمایی نقشهٔ فرایند (درخواست کاربر): کلیک روی کارت → مودال تمامصفحه با زوم/پن و وضعیت زنده */
.mini-clickable { position: relative; cursor: zoom-in; }
.mini-zoom-hint {
position: absolute; bottom: 8px; left: 10px;
background: rgba(46, 52, 64, .78); color: #fff; font-size: 10.5px;
padding: 3px 9px; border-radius: 99px; opacity: 0; transition: opacity .15s; pointer-events: none;
}
.mini-clickable:hover .mini-zoom-hint { opacity: 1; }
.mini-modal {
position: fixed; inset: 0; background: rgba(20, 26, 40, .55); z-index: 420;
display: flex; align-items: center; justify-content: center; padding: 18px;
}
.mini-modal.hidden { display: none; }
.mini-modal-card {
background: #fff; border-radius: 16px; width: min(1500px, 96vw); height: min(860px, 92vh);
display: flex; flex-direction: column; overflow: hidden;
box-shadow: 0 24px 70px rgba(10, 18, 40, .35);
}
.mini-modal-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.mmh-t { display: flex; flex-direction: column; gap: 2px; margin-inline-end: auto; }
.mmh-t b { font-size: 13.5px; }
.mmh-cur { font-size: 11px; color: var(--orange); font-weight: 700; }
.mmh-legend { display: flex; gap: 6px; }
.mml { font-size: 10.5px; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--border); }
.mml-active { background: #fff3e8; color: #b45309; border-color: #f5d3ae; }
.mml-done { background: #dcf0ee; color: #0d7c70; border-color: #bfe3df; }
.mml-todo { background: #f2f4f8; color: #6b7280; }
.mmh-tools { display: flex; gap: 5px; }
.mmz { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: #fff; cursor: pointer; font-size: 14px; font-family: inherit; }
.mmz:hover { background: #f5f6f8; }
.mmz-close { color: #c62828; }
.mini-modal-body { flex: 1; overflow: hidden; background: #fbfcfe; }
.mini-modal-body .mini-dio-host { width: 100%; height: 100%; overflow: auto; background: #fff; }
.mini-modal-body .mini-dio-host .mxgraph { min-height: 100%; }
/* نمای کوچکِ دیاگرامی داخل کارت: غیرتعاملی (کلیک از کانتینر = بزرگنمایی) و محدود به قاب */
.mini-map .mini-dio-card { pointer-events: none; max-height: 340px; overflow: hidden; }
.mini-modal-body .mini-svg { width: 100%; height: 100%; cursor: grab; touch-action: none; display: block; }
.mini-modal-body .mini-svg.dragging { cursor: grabbing; }
.mini-modal-foot { padding: 6px 14px; border-top: 1px solid var(--border); font-size: 10.5px; }
.ac-outcome { background: #f3f8ff; border: 1px dashed #cfe0ff; border-radius: 9px; padding: 9px 12px; font-size: 12.5px; color: #2a4a9b; }
/* روایت روند درخواست */
.ctl-item.is-live { background: #fff8f3; border-radius: 10px; border-bottom: none; padding-inline: 8px; }
.story-ico { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; }
.story-ico.story-done { background: #e8f7ee; color: #127a3e; }
.story-ico.story-active { background: #fdebdd; color: var(--orange); }
.story-ico.story-cancel { background: #f0f1f3; color: #8a93a3; }
/* لوگوی آپلودی برندینگ */
.topbar .logo .brand-img { height: 32px; max-width: 150px; object-fit: contain; display: block; }
.login-box .brand-logo-img { height: 56px; max-width: 220px; object-fit: contain; }
/* بج فعالیت مشتری (RFM) */
.act-badge { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 20px; padding: 3px 10px; vertical-align: middle; }
.act-hot { background: #fdeceb; color: #c62828; }
.act-active { background: #e8f7ee; color: #127a3e; }
.act-cold { background: #e8f0fb; color: #3159a8; }
.act-inactive { background: #f0f1f3; color: #8a93a3; }
/* یادآوری پیگیری مشتری */
.fu-add { display: flex; gap: 8px; flex-wrap: wrap; }
.fu-add .input { flex: 1; min-width: 120px; }
.fu-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.fu-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; }
.fu-item.fu-pending { border-inline-start: 3px solid var(--teal); }
.fu-item.fu-late { border-inline-start: 3px solid #d84315; background: #fff8f6; }
.fu-item.fu-done { opacity: .6; }
.fu-main { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; }
.fu-date { font-weight: 700; color: #3a4152; display: inline-flex; align-items: center; gap: 4px; }
.fu-late .fu-date { color: #d84315; }
.fu-acts { display: flex; gap: 5px; flex-shrink: 0; }
/* تایملاین یکپارچهٔ مشتری */
.ctl { display: flex; flex-direction: column; }
.ctl-item { display: flex; gap: 10px; padding: 9px 2px; border-bottom: 1px dashed var(--line); }
.ctl-item:last-child { border-bottom: none; }
.ctl-ico { font-size: 16px; flex-shrink: 0; width: 26px; text-align: center; }
.ctl-title { font-size: 12.8px; font-weight: 700; color: #2e3440; }
.ctl-detail { font-size: 12px; color: #5a6272; margin-top: 2px; }
.ctl-time { font-size: 11px; color: var(--muted); margin-top: 3px; }
/* بجهای مرحلهٔ فرصت و وضعیت پیشفاکتور */
.badge.opp-lead { background: #eef2f8; color: #4a5568; }
.badge.opp-negotiation { background: #fff3e2; color: #b05e10; }
.badge.opp-proposal { background: #e8f0fb; color: #3159a8; }
.badge.opp-won { background: #e8f7ee; color: #127a3e; }
.badge.opp-lost { background: #fdeceb; color: #c62828; }
.badge.q-draft { background: #f0f1f3; color: #6a7382; }
.badge.q-sent { background: #e8f0fb; color: #3159a8; }
.badge.q-accepted { background: #e8f7ee; color: #127a3e; }
.badge.q-rejected { background: #fdeceb; color: #c62828; }
.late-text { color: #d84315; font-weight: 700; }
.input-xs { height: 28px; font-size: 12px; padding: 0 8px; }
/* اینپوت پولی (جداکنندهٔ سهرقمی + واحد): واحد سمت چپ، عدد راستچین */
.money-wrap { position: relative; display: block; }
.money-wrap .money-input { padding-left: 68px; text-align: right; font-weight: 700; letter-spacing: .3px; }
.money-suffix {
position: absolute; left: 1px; top: 1px; bottom: 1px;
display: flex; align-items: center; padding: 0 12px;
background: #f2f4f7; color: #55607a; font-size: 12px; font-weight: 700;
border-right: 1px solid var(--line); border-radius: 8px 0 0 8px; pointer-events: none;
}
/* دیتپیکر شمسی */
.jdp-wrap { display: block; position: relative; }
.jdp-text { cursor: pointer; background-image: 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='%238b93a1' stroke-width='1.7'%3E%3Crect x='3' y='5' width='18' height='16' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 10px center; }
.jdp-pop {
position: absolute; z-index: 500; width: 244px; background: #fff;
border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 40px rgba(20, 30, 50, .2);
padding: 10px; direction: rtl; font-size: 13px;
}
.jdp-head { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.jdp-title { flex: 1; text-align: center; font-weight: 700; font-size: 13px; color: var(--ink); }
.jdp-nav { border: none; background: #f2f4f7; color: #55607a; width: 26px; height: 26px; border-radius: 7px; cursor: pointer; font-size: 14px; line-height: 1; }
.jdp-nav:hover { background: var(--orange); color: #fff; }
.jdp-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.jdp-week span { text-align: center; font-size: 11px; color: var(--muted); font-weight: 700; padding: 3px 0; }
.jdp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.jdp-cell { border: none; background: none; height: 30px; border-radius: 7px; cursor: pointer; font-size: 12.5px; color: #3a4152; }
.jdp-cell.empty { visibility: hidden; }
.jdp-cell:hover { background: #eef2f8; }
.jdp-cell.today { box-shadow: inset 0 0 0 1.5px var(--teal); color: var(--teal); font-weight: 700; }
.jdp-cell.sel { background: var(--orange); color: #fff; font-weight: 700; }
.jdp-foot { display: flex; gap: 8px; margin-top: 8px; border-top: 1px solid var(--line); padding-top: 8px; }
.jdp-today, .jdp-clear2 { flex: 1; border: 1px solid var(--line); background: #f7f8fa; border-radius: 8px; padding: 6px; cursor: pointer; font-size: 12px; color: #445; }
.jdp-today:hover { background: var(--teal); color: #fff; border-color: var(--teal); }
.jdp-clear2:hover { background: #fdecea; color: #b3261e; border-color: #f5c6c2; }
/* سربرگ گروهِ اینپوتهای سفارشی — تمامعرض داخل گرید فیلدها */
.fields-group-bar {
grid-column: 1 / -1; display: flex; align-items: center; gap: 8px;
background: var(--teal); color: #fff; border-radius: 9px;
padding: 8px 14px; font-size: 13px; font-weight: 700; margin: 10px 0 6px;
}
.fields-group-bar:first-child { margin-top: 0; }
@media (max-width: 700px) { .stage-fields { grid-template-columns: 1fr; } }
.stage-fields .node-field:has(textarea),
.stage-fields .node-field:has(.choice-list),
.stage-fields .node-field:has(input[type=file]) { grid-column: 1 / -1; }
.stage-block.pending .stage-fields,
.stage-block.active .stage-fields:has(:disabled) { opacity: .8; }
/* ---------- نمایش مراحل فرایند سبک پیامگستر: سربرگ آبی + فرم پیوسته ---------- */
.req-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.rtab {
display: inline-flex; align-items: center; gap: 6px;
background: #fff; border: 1px solid var(--line); border-bottom-width: 3px;
border-radius: 10px 10px 0 0; padding: 9px 20px; font-size: 13px; font-weight: 700;
color: var(--muted); cursor: pointer;
}
.rtab.on { color: #2e3c55; border-bottom-color: #4a86c5; background: #fff; }
.rtab:hover { color: #2e3c55; }
.pg-stage { margin-bottom: 18px; }
.stage-bar {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
background: linear-gradient(90deg, #4a86c5, #5b95d1); color: #fff;
border-radius: 9px; padding: 9px 14px; margin-bottom: 12px;
box-shadow: 0 2px 6px rgba(60, 100, 160, .18);
}
.stage-bar .sb-state { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.22); display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.stage-bar .sb-state.pulse { animation: sbPulse 2s infinite; }
@keyframes sbPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,.45) } 50% { box-shadow: 0 0 0 7px rgba(255,255,255,0) } }
.stage-bar .sb-title { font-size: 13.5px; font-weight: 800; }
.stage-bar .sb-chip { background: rgba(255,255,255,.92); color: #b05310; border-radius: 14px; padding: 2px 10px; font-size: 11px; font-weight: 800; }
.stage-bar .sb-chip.ok { color: #127a3e; }
.stage-bar .sb-chip.late { color: #c62828; }
.stage-bar .sb-meta { margin-inline-start: auto; font-size: 11.5px; opacity: .95; }
.stage-bar.active { background: linear-gradient(90deg, #ec8547, #f09a63); box-shadow: 0 3px 10px rgba(240, 127, 60, .3); }
.stage-bar.pending { background: linear-gradient(90deg, #aab5c4, #b9c3d0); box-shadow: none; }
.stage-bar.done .sb-state { background: rgba(255,255,255,.28); }
.pg-stage.pending .stage-fields { opacity: .65; }
.pg-stage .stage-fields { padding: 0 2px; }
.ro-value {
background: #fff; border: 1px solid var(--line); border-radius: 9px;
padding: 8px 12px; font-size: 13px; color: #3a4152; min-height: 37px;
word-break: break-word;
}
.ro-value.ro-tall { min-height: 64px; }
.total-duration { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; }
.node-form { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.node-form .form-group { margin-bottom: 8px; }
.node-form .form-group:last-child { margin-bottom: 0; }
.req { color: #e53935; }
.choice-list { display: flex; flex-direction: column; gap: 4px; }
.choice-row { display: flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; margin: 0; }
.input-file { padding: 6px; }
.start-fields-title { font-weight: 700; font-size: 13px; margin-bottom: 10px; color: var(--blue-link); }
.fields-sub-title { font-weight: 700; font-size: 13px; margin: 6px 0 10px; color: var(--blue-link); border-top: 1px solid var(--line); padding-top: 12px; }
/* ============================= نظرات و منشن ============================= */
/* آواتار و نام نظردهنده بالای متن (مثل داشبورد) */
.comments { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.comment { display: flex; flex-direction: column; gap: 6px; }
.comment-avatar {
width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
background: linear-gradient(135deg, #5b6472, #2b3038); color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 12px;
}
.comment-avatar.sm { width: 22px; height: 22px; font-size: 11px; }
.comment-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.comment-head strong { font-size: 12.5px; }
.comment-head .muted { margin-inline-start: auto; }
.cmt-edited { font-size: 10.5px; color: var(--muted); font-style: italic; }
/* بج کلیکپذیر «ویرایششده» + پاپآپ سابقهٔ ویرایش (قبل/بعد هر ویرایش) */
.cmt-edited-badge { display: inline-flex; align-items: center; gap: 3px; border: 1px solid #e3d9c8; background: #fdf8ee; color: #a9781c; font-size: 10.5px; border-radius: 999px; padding: 1px 8px; cursor: pointer; font-family: inherit; }
.cmt-edited-badge:hover { background: #f9efd9; border-color: #d9c9a8; }
.ch-card { max-width: 560px; width: 94%; }
.ch-body { max-height: 62vh; overflow: auto; }
.ch-meta { font-size: 12px; color: var(--muted); border-bottom: 1px dashed var(--line); padding-bottom: 8px; }
.ch-item { margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #fafbfc; }
.ch-item-head { font-size: 11.5px; font-weight: 700; color: #5a6472; margin-bottom: 8px; }
.ch-ver { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.9; border-radius: 8px; padding: 7px 10px; margin-top: 6px; }
.ch-ver > div { flex: 1; word-break: break-word; }
.ch-old { background: #fdeeec; border: 1px solid #f3cdc8; color: #8c2f28; }
.ch-old > div { text-decoration: line-through; opacity: .85; }
.ch-new { background: #e9f7ee; border: 1px solid #c4e6cf; color: #14622f; }
.ch-tag { flex: 0 0 auto; font-size: 10px; font-weight: 800; border-radius: 6px; padding: 1px 7px; margin-top: 3px; }
.ch-old .ch-tag { background: #f5c6c2; color: #7a221c; }
.ch-new .ch-tag { background: #b8e6c8; color: #0f5227; }
.ch-err { color: #b3261e; background: #fdecea; border: 1px solid #f5c6c2; border-radius: 8px; padding: 9px 12px; font-size: 12.5px; }
.cmt-edit-btn { border: none; background: none; color: #9aa2af; cursor: pointer; padding: 2px; border-radius: 5px; display: inline-flex; }
.cmt-edit-btn:hover { color: var(--blue-link); background: #eef2fb; }
.cmt-edit-box { margin-top: 6px; }
.cmt-edit-box .cmt-edit-ta { width: 100%; min-height: 66px; resize: vertical; font: inherit; font-size: 12.5px; line-height: 2; }
.cmt-edit-actions { display: flex; gap: 8px; margin-top: 7px; }
.comment-body { min-width: 0; background: #f4f5f7; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; }
.comment-body p { font-size: 12.5px; word-break: break-word; line-height: 2; white-space: pre-wrap; }
.mention-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.mention-chip {
background: #e7effd; color: var(--blue-link); border: 1px solid #c8d8fb;
border-radius: 999px; padding: 1px 9px; font-size: 11px; font-weight: 700;
}
/* تگِ گروه/همه: چیپ بنفش برای تمایز از تگِ فرد */
.mention-chip.men-grp { background: #f1e9fb; color: #7a3fd0; border-color: #ddc8f5; }
.men-kind { font-size: 10px; font-weight: 700; border-radius: 8px; padding: 1px 6px; margin-inline-start: 4px; }
.men-kind.grp { background: #f1e9fb; color: #7a3fd0; }
.men-kind.all { background: #fdeaf1; color: #c2185b; }
/* جعبهٔ ثبت نظر: متن + دکمهٔ ارسال کنار هم (فشرده) */
.comment-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.comment-compose { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.comment-compose .mention-wrap { width: 100%; }
/* جعبهٔ نظر داشبورد: wrapper منشن تمامعرض بماند تا دکمهٔ ارسال و لیست پیشنهاد سرجایشان باشند */
.dash-compose .dash-mention-wrap { width: 100%; }
.dash-compose .mention-chips { padding: 0 2px; }
.comment-compose textarea { min-height: 90px; resize: vertical; }
.comment-send { align-self: flex-start; height: 38px; padding: 0 22px; }
.mention-feed { display: flex; flex-direction: column; }
.mention-item {
display: flex; justify-content: space-between; align-items: center; gap: 12px;
padding: 9px 6px; border-bottom: 1px solid #f1f3f6; font-size: 13px; border-radius: 8px;
}
.mention-item:last-child { border-bottom: none; }
.mention-item:hover { background: #fafbfc; }
.mention-select { max-width: 200px; font-size: 12px; padding: 6px 8px; }
/* اینپوت انتخاب مشتری با جستجوی زنده */
.cust-picker { position: relative; }
.cust-picker .cust-search { width: 100%; }
.cust-picker.has-value .cust-search { border-color: var(--teal); background: #f2fbfc; padding-inline-start: 30px; }
.cust-clear { position: absolute; inset-inline-start: 8px; top: 50%; transform: translateY(-50%); border: none; background: #e2e6ec; color: #55607a; width: 20px; height: 20px; border-radius: 50%; cursor: pointer; font-size: 11px; line-height: 1; display: none; }
.cust-picker.has-value .cust-clear { display: flex; align-items: center; justify-content: center; }
.cust-results { position: absolute; top: calc(100% + 3px); right: 0; left: 0; z-index: 45; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 30px rgba(20, 30, 50, .16); max-height: 240px; overflow-y: auto; }
.cust-opt { padding: 8px 11px; font-size: 12.5px; cursor: pointer; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #f2f4f7; }
.cust-opt:last-child { border-bottom: none; }
.cust-opt.active, .cust-opt:hover { background: #eef6f8; }
.cust-opt .cust-mob { margin-inline-start: auto; color: var(--muted); font-size: 11.5px; }
.cust-empty { padding: 12px; text-align: center; color: var(--muted); font-size: 12.5px; }
.mention-wrap { position: relative; }
.mention-suggest {
position: absolute; top: 100%; right: 0; left: 0; z-index: 40;
background: #fff; border: 1px solid var(--line); border-radius: 10px;
box-shadow: 0 10px 28px rgba(20, 30, 50, .16);
max-height: 210px; overflow-y: auto; margin-top: 3px;
}
.mention-suggest-item { padding: 8px 12px; font-size: 13px; cursor: pointer; }
.mention-suggest-item.active { background: #eef4ff; }
.mention-suggest-item strong { color: var(--blue-link); font-weight: 700; }
.mention-inline { color: var(--blue-link); font-weight: 700; }
.mention-chip.removable { display: inline-flex; align-items: center; gap: 4px; }
.chip-x { border: none; background: none; color: #9bb4f0; cursor: pointer; font-size: 10px; padding: 0 2px; line-height: 1; }
.chip-x:hover { color: #e53935; }
/* ============================= مودال ============================= */
.modal-overlay {
position: fixed; inset: 0; z-index: 400;
background: rgba(25, 32, 45, .5);
display: flex; align-items: center; justify-content: center; padding: 24px;
}
.modal-card {
background: #fff; border-radius: 14px; box-shadow: 0 25px 70px rgba(0, 0, 0, .3);
width: 100%; max-width: 560px; max-height: 84vh;
display: flex; flex-direction: column;
}
.modal-card.modal-wide { max-width: 760px; }
.modal-head {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 20px; border-bottom: 1px solid var(--line);
}
.modal-head h2 { font-size: 14.5px; }
.modal-close {
border: none; background: #f2f4f7; color: var(--muted);
width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 14px;
}
.modal-close:hover { background: #e7e9ed; color: var(--ink); }
.modal-body { padding: 18px 20px; overflow-y: auto; }
/* ============================= زنجیره افراد و گردش کار ============================= */
.participants-strip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; padding: 0 4px; }
.p-chip {
display: inline-flex; align-items: center; gap: 7px;
background: #fff; border: 1px solid var(--line); border-radius: 999px;
padding: 4px 12px 4px 14px; font-size: 12px; font-weight: 700;
}
.p-chip.creator { border-color: #f3c9ad; background: #fff6f0; }
.p-chip.done { background: #ecf7f0; border-color: #cbe8d5; }
.p-arrow { color: #b0b8c2; font-size: 13px; }
.flow-tree { display: flex; flex-direction: column; gap: 6px; }
.flow-branch { display: flex; align-items: flex-start; gap: 6px; }
.flow-elbow { color: #b0b8c2; font-size: 15px; margin-top: 8px; flex-shrink: 0; }
.flow-branch .flow-node { flex: 1; }
.flow-node { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; background: #fafbfc; }
.flow-node.active { border-color: #f3b795; background: #fff9f5; }
.flow-node.done { background: #ecf7f0; border-color: #cbe8d5; }
.flow-user { font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.flow-meta { margin-top: 3px; }
.flow-subject { margin-top: 6px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
.refer-add-box { border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-top: 14px; background: #fafbfc; }
.refer-add-title { font-weight: 700; font-size: 13px; margin-bottom: 10px; }
.refer-add-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.refer-add-actions { display: flex; align-items: center; gap: 8px; }
.attach-form { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.attach-form .input-file { max-width: 340px; }
.contact-add, .interaction-add { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.contact-add .input { flex: 1; min-width: 110px; }
.contact-add select.input, .contact-add input[name=ext] { flex: 0 0 auto; min-width: 90px; max-width: 130px; }
.contact-add .checkbox-row { margin-bottom: 0; white-space: nowrap; }
.interaction-add .input { flex: 1; min-width: 160px; }
/* ============================= برد فرایند ============================= */
.board { display: flex; gap: 14px; align-items: flex-start; overflow-x: auto; padding-bottom: 16px; }
.board-col { width: 280px; flex-shrink: 0; background: #eef0f4; border-radius: var(--radius); padding: 10px; }
.board-col-done { background: #e2f2ee; }
.board-col-cancelled { background: #f6e9e8; }
.board-col-head { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 8px; font-weight: 700; font-size: 13px; }
.board-col-sla { font-size: 11px; padding: 0 6px 8px; }
.board-cards { display: flex; flex-direction: column; gap: 8px; }
.board-card {
display: block; background: #fff; border: 1px solid var(--line);
border-radius: 10px; padding: 10px 12px; box-shadow: var(--shadow);
transition: box-shadow .15s, transform .1s;
}
.board-card:hover { box-shadow: 0 4px 14px rgba(25, 32, 45, .12); transform: translateY(-1px); text-decoration: none; }
.board-card-title { color: var(--blue-link); font-weight: 600; font-size: 12.5px; margin-bottom: 8px; }
.board-card-rows { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; }
.board-card-foot {
display: flex; justify-content: space-between; align-items: center;
border-top: 1px dashed var(--line); margin-top: 8px; padding-top: 6px; font-size: 11px;
}
.board-empty { text-align: center; font-size: 12px; padding: 14px 0; }
.board-list { display: flex; flex-direction: column; gap: 8px; }
.kanban-cards .dash-list { display: flex; flex-direction: column; gap: 8px; }
.kanban-cards .dash-more { margin-top: 8px; }
.board-more { display: flex; flex-direction: column; gap: 8px; }
.board-more.hidden { display: none; }
.board-more-btn { border: none; background: none; color: var(--blue-link); cursor: pointer; font-family: inherit; font-size: 12px; padding: 8px 0 2px; }
.board-more-btn:hover { text-decoration: underline; }
.nav-badge {
display: inline-block; margin-inline-start: 5px;
background: var(--orange); color: #fff; font-size: 10px; font-weight: 700;
min-width: 17px; height: 17px; line-height: 17px; text-align: center;
border-radius: 999px; padding: 0 5px;
}
/* ============================= تنظیمات ============================= */
.vis-option {
display: flex; align-items: flex-start; gap: 10px;
border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
margin-bottom: 10px; cursor: pointer;
}
.vis-option:hover { border-color: var(--orange); background: #fff9f5; }
.vis-option input { margin-top: 3px; }
.tf-card { max-width: 460px; }
/* صفحهبندی */
.pagination { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; margin-top: 16px; }
.pg {
min-width: 34px; height: 34px; padding: 0 10px; border-radius: 8px;
border: 1px solid var(--line); background: #fff; color: var(--ink2);
display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px;
}
.pg:hover { background: #f5f6f8; text-decoration: none; }
.pg.on { background: var(--dark-btn); color: #fff; border-color: var(--dark-btn); font-weight: 700; }
.pg.disabled { color: #c3c9d2; pointer-events: none; }
.pg-gap { color: var(--muted); padding: 0 4px; }
.user-search { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.user-search .input { flex: 1; min-width: 130px; }
.user-search select.input { flex: 0 0 auto; min-width: 120px; }
.settings-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.stab {
background: #fff; border: 1px solid var(--line); border-radius: 9px;
padding: 9px 16px; font-size: 13px; color: var(--ink2); font-weight: 600;
display: inline-flex; align-items: center; gap: 7px;
}
.stab .ico { opacity: .75; }
.stab.on .ico { opacity: 1; }
.stab:hover { background: #f5f6f8; }
.stab.on { background: var(--dark-btn); color: #fff; border-color: var(--dark-btn); }
.tab-pane { display: none; }
.tab-pane.on { display: block; }
.sms-event { padding: 10px 0; border-bottom: 1px solid #f1f3f6; }
.sms-event:last-of-type { border-bottom: none; }
.sms-event .input { margin-top: 6px; }
/* ============================= طراح فرایند ============================= */
.designer-body { display: flex; flex-direction: column; height: 100vh; overflow: hidden; background: var(--bg); }
.designer-topbar {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
background: #fff; border-bottom: 1px solid var(--line);
padding: 8px 16px; flex-shrink: 0; position: relative; z-index: 20;
}
/* --- گروه نام فرایند (همیشه دیده میشود) --- */
.dtb-name { display: flex; align-items: center; gap: 10px; flex: 1 1 300px; min-width: 260px; }
.dtb-icon {
display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
border: 1px solid var(--line); border-radius: 9px; color: #5a6472; text-decoration: none; font-size: 18px; flex-shrink: 0;
}
.dtb-icon:hover { background: #f4f6fa; color: #2e3440; }
.dtb-name-field { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.dtb-name-field label { font-size: 10px; font-weight: 700; color: #8a93a3; margin-inline-start: 2px; }
.proc-name-input {
font-weight: 800; font-size: 14.5px; border: 1px solid #e0e5ee; border-radius: 9px;
padding: 6px 12px; width: 100%; background: #fafbfd; color: #2e3440;
}
.proc-name-input:focus { border-color: var(--orange); background: #fff; outline: none; }
/* --- ابزار بوم: پیل آیکونمحور --- */
.dtb-tools { display: inline-flex; align-items: center; gap: 2px; background: #f4f6fa; border: 1px solid #e6ebf3; border-radius: 11px; padding: 3px; flex-shrink: 0; }
.dtb-tbtn {
border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 15px; color: #4a5464;
width: 32px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
}
.dtb-tbtn:hover { background: #fff; color: #2e3440; box-shadow: 0 1px 3px rgba(30,45,80,.1); }
.dtb-tbtn.dtb-zoom { width: auto; padding: 0 8px; font-size: 12px; font-weight: 700; }
.dtb-tbtn.dtb-danger:hover { color: #b3261e; background: #fdecea; }
.dtb-sep { width: 1px; height: 18px; background: #d8dee8; margin: 0 2px; }
/* --- اکشنهای چپ --- */
.dtb-actions { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.dtb-search { max-width: 160px; font-size: 12.5px; padding: 7px 11px; }
.save-status { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.save-status.ok { color: #1e7d3f; }
.save-status.err { color: #c62828; }
.save-status.warn { color: var(--orange2, #d08321); }
/* --- منوهای جمعشونده (native details) --- */
.dtb-menu { position: relative; }
.dtb-menu > summary { list-style: none; cursor: pointer; user-select: none; }
.dtb-menu > summary::-webkit-details-marker { display: none; }
.dtb-menu[open] > summary { background: #33518f; border-color: #33518f; color: #fff; }
.dtb-pop {
position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 40;
background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(30,45,80,.18);
padding: 10px; min-width: 240px; display: flex; flex-direction: column; gap: 6px;
}
.dtb-pop-lbl { font-size: 10.5px; font-weight: 700; color: #8a93a3; margin: 4px 2px 0; }
.dtb-pop-btn {
display: flex; align-items: center; gap: 7px; text-align: right; border: 0; background: transparent;
font: inherit; font-size: 12.5px; color: #3a4152; padding: 8px 10px; border-radius: 8px; cursor: pointer; text-decoration: none;
}
.dtb-pop-btn:hover { background: #f4f6fa; color: #2e3440; }
@media (max-width: 1000px) {
.dtb-tools { order: 3; }
.dtb-actions { order: 2; margin-inline-start: auto; }
}
.designer-layout { display: flex; flex: 1; overflow: hidden; }
.palette {
width: 230px; background: #fff; border-inline-start: 1px solid var(--line);
padding: 14px; overflow-y: auto; flex-shrink: 0;
}
.palette-title { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.palette-hint { font-size: 11.5px; color: var(--muted); margin-bottom: 12px; }
.palette-item {
display: flex; align-items: center; gap: 10px;
border: 1px solid var(--line); border-radius: 10px;
padding: 9px 11px; margin-bottom: 8px; cursor: grab; background: #fff;
transition: box-shadow .15s, border-color .15s;
}
.palette-item:hover { border-color: var(--orange); box-shadow: var(--shadow); }
.palette-item small { display: block; color: var(--muted); font-size: 11px; }
.pal-shape { width: 26px; height: 26px; flex-shrink: 0; }
.pal-start { border-radius: 50%; background: #e5f5ea; border: 2px solid #43a047; }
.pal-end { border-radius: 50%; background: #fdecea; border: 2px solid #ef5350; }
.pal-task { border-radius: 6px; background: #e7effd; border: 2px solid var(--blue-w); }
.pal-approval { border-radius: 6px; background: #f4e6f7; border: 2px solid var(--purple); }
.pal-decision { background: #fff0e6; border: 2px solid var(--orange); transform: rotate(45deg) scale(.8); }
.pal-notify { border-radius: 6px; background: #e0f5f8; border: 2px solid var(--teal); }
.palette-help { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
.palette-help ul { padding-right: 16px; font-size: 11.5px; color: var(--muted); }
.palette-help li { margin-bottom: 6px; }
.canvas-wrap { flex: 1; position: relative; direction: ltr; background: #fafbfc; }
#canvas { width: 100%; height: 100%; display: block; cursor: default; outline: none; }
.props {
width: 300px; background: #fff; border-inline-end: 1px solid var(--line);
padding: 14px; overflow-y: auto; flex-shrink: 0;
}
.props-empty { color: var(--muted); font-size: 12.5px; text-align: center; padding: 30px 6px; }
.prop-static { font-weight: 700; }
/* شناسهٔ گره در پنل طراح — همان مقداری که در اتصال سیستم بیرونی کلید node میشود */
.node-id-row { display: flex; align-items: center; gap: 6px; }
.node-id-row code {
flex: 1; font-family: Consolas, monospace; font-size: 12px; font-weight: 700;
background: #eef2fa; border: 1px dashed #b9c6e0; border-radius: 6px;
padding: 5px 9px; color: #2e3f66; text-align: center; user-select: all;
}
.node-id-row .btn { flex-shrink: 0; }
.props-section { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; }
.props-sec-head { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.field-card {
border: 1px solid var(--line); border-radius: 10px;
padding: 10px; margin-bottom: 10px; background: #fafbfc;
display: flex; flex-direction: column; gap: 8px;
}
.field-card .input { font-size: 12.5px; padding: 6px 10px; }
.field-row { display: flex; gap: 6px; }
.field-foot { display: flex; align-items: center; justify-content: space-between; }
.field-foot .checkbox-row { margin-bottom: 0; font-size: 12px; }
.field-btns { display: flex; gap: 4px; }
.field-key { font-size: 10.5px; }
.sla-row { display: flex; gap: 8px; }
.sla-row .form-group { flex: 1; }
/* گرههای SVG طراح */
.node { cursor: grab; }
.node .node-shape { stroke-width: 2; }
.node-start .node-shape { fill: #e5f5ea; stroke: #43a047; }
.node-end .node-shape { fill: #fdecea; stroke: #ef5350; }
.node-task .node-shape { fill: #e7effd; stroke: var(--blue-w); }
.node-approval .node-shape { fill: #f4e6f7; stroke: var(--purple); }
.node-decision .node-shape { fill: #fff0e6; stroke: var(--orange); }
.node-notify .node-shape { fill: #e0f5f8; stroke: var(--teal); }
.node.selected .node-shape { stroke-width: 3; filter: drop-shadow(0 0 6px rgba(240, 127, 60, .5)); }
/* نشان آیکون رنگی گوشهٔ گره (روی بوم طراح) */
.node-badge-ring { fill: #fff; }
.node-badge { filter: drop-shadow(0 1px 2px rgba(0,0,0,.22)); }
.node-badge-emoji { font-size: 13px; pointer-events: none; }
.node.selected .node-badge { filter: drop-shadow(0 0 4px rgba(240,127,60,.6)); }
.node-label { font-family: 'Vazirmatn', Tahoma, sans-serif; font-size: 13px; font-weight: 700; fill: #2b3038; pointer-events: none; direction: rtl; }
.node-sub { font-family: 'Vazirmatn', Tahoma, sans-serif; font-size: 10.5px; fill: #8b93a1; pointer-events: none; direction: rtl; }
.port { fill: #fff; stroke: #8b93a1; stroke-width: 2; cursor: crosshair; }
.port:hover { fill: var(--orange); stroke: var(--orange); }
.edge-line { fill: none; stroke: #8b93a1; stroke-width: 2; }
.edge-hit { fill: none; stroke: transparent; stroke-width: 14; cursor: pointer; }
.edge.selected .edge-line { stroke: var(--blue-link); stroke-width: 2.5; }
.edge-cond .edge-line { stroke: #0891b2; stroke-dasharray: 7 4; }
.edge-else .edge-line { stroke: #b0b8c2; stroke-dasharray: 2 5; }
.edge-label { font-family: 'Vazirmatn', Tahoma, sans-serif; font-size: 11.5px; fill: #3a4150; paint-order: stroke; stroke: #fafbfc; stroke-width: 4; direction: rtl; }
.edge-label.cond { fill: #0e7490; }
.edge-temp { fill: none; stroke: var(--orange); stroke-width: 2; stroke-dasharray: 6 4; pointer-events: none; }
/* نقشه کوچک */
.mini-map { width: 100%; }
.mini-svg { width: 100%; height: auto; max-height: 420px; }
.mini-shape { stroke-width: 2; }
/* رنگ هر نوع گره همراستا با پالت طراحها (استاندارد و دیاگرام) */
.mini-start .mini-shape { fill: #e8f8ee; stroke: #2e9e5b; }
.mini-end .mini-shape { fill: #fdecea; stroke: #d23f31; }
.mini-task .mini-shape { fill: #eef3fb; stroke: #3b6ef5; }
.mini-approval .mini-shape { fill: #f3ecfd; stroke: #8e5bd9; }
.mini-decision .mini-shape { fill: #fff4e8; stroke: #f07f3c; }
.mini-notify .mini-shape { fill: #e6f7f6; stroke: #00958d; }
.mini-timer .mini-shape { fill: #f4f5f7; stroke: #8a93a3; stroke-dasharray: 6 4; }
.mini-sms_customer .mini-shape { fill: #e9f7ee; stroke: #3fae52; }
.mini-msg_customer .mini-shape { fill: #fce8f0; stroke: #ad1457; }
.mini-webhook .mini-shape { fill: #edf1f7; stroke: #33518f; }
.mini-crm_action .mini-shape { fill: #eeeafd; stroke: #5e35b1; }
.mini-parallel .mini-shape, .mini-join .mini-shape { fill: #2e3440; stroke: #2e3440; }
.mini-parallel .mini-text, .mini-join .mini-text { fill: #fff; }
.mini-subprocess .mini-shape { fill: #e8eefb; stroke: #33518f; stroke-width: 3; }
.mini-email .mini-shape { fill: #fdf1e3; stroke: #e0862c; }
.mini-wait_event .mini-shape { fill: #f2edfb; stroke: #7a5fc0; stroke-dasharray: 6 4; }
.mini-wait_cond .mini-shape { fill: #fbf7e6; stroke: #a16207; stroke-dasharray: 6 4; }
.mini-data_in .mini-shape { fill: #e3f2e8; stroke: #1d7a43; stroke-width: 3; }
.mini-set_var .mini-shape { fill: #eef7fb; stroke: #0e7490; }
.mini-ai_classify .mini-shape { fill: #f5edfb; stroke: #9333ea; }
.mini-doc_gen .mini-shape { fill: #fbf3e8; stroke: #b45309; }
.mini-public_form .mini-shape { fill: #eaf6f0; stroke: #0f766e; stroke-dasharray: 6 4; }
/* نتایج سناریوهای تست شبیهساز */
.sim-sc-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; margin-bottom: 5px; font-size: 12.5px; }
.sim-sc-row.ok { background: #e8f7ee; border: 1px solid #b8e6c8; }
.sim-sc-row.bad { background: #fdecea; border: 1px solid #f5c6c2; }
.sim-sc-del { margin-inline-start: auto; border: none; background: none; cursor: pointer; color: #98a0ae; font-size: 13px; }
.sim-sc-del:hover { color: #d23f31; }
.mini-done .mini-shape { fill: #e5f5ea !important; stroke: #43a047 !important; }
.mini-done .mini-text { fill: #1d5c33; }
/* ===== مرحلهٔ فعال: چشمکزن با هالهٔ تپنده تا محل توقف فرایند مشخص باشد ===== */
.mini-active .mini-shape {
stroke: var(--orange) !important; stroke-width: 3;
animation: miniBlink 1.5s ease-in-out infinite;
}
@keyframes miniBlink {
0%, 100% { fill: #fff0e6; filter: drop-shadow(0 0 0 rgba(240, 127, 60, 0)); }
50% { fill: #ffd8ba; filter: drop-shadow(0 0 10px rgba(240, 127, 60, .9)); }
}
.mini-halo {
fill: none; stroke: var(--orange); stroke-width: 2; opacity: 0;
transform-box: fill-box; transform-origin: center;
animation: miniHalo 1.5s ease-out infinite;
}
@keyframes miniHalo {
0% { opacity: .75; transform: scale(1); }
100% { opacity: 0; transform: scale(1.35); }
}
.mini-dot {
fill: var(--orange); stroke: #fff; stroke-width: 2;
animation: miniDot 1.5s ease-in-out infinite;
}
@keyframes miniDot { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
/* مسیر منتهی به مرحلهٔ فعال: خطچین متحرک نارنجی */
.mini-edge-hot {
stroke: var(--orange) !important; stroke-width: 2.5;
stroke-dasharray: 7 6;
animation: miniDash 1s linear infinite;
}
@keyframes miniDash { to { stroke-dashoffset: -13; } }
.mini-text { font-family: 'Vazirmatn', Tahoma, sans-serif; font-size: 12px; fill: #3a4150; direction: rtl; }
.mini-edge { fill: none; stroke: #b0b8c2; stroke-width: 1.5; }
.mini-label { font-family: 'Vazirmatn', Tahoma, sans-serif; font-size: 11px; fill: #8b93a1; paint-order: stroke; stroke: #fff; stroke-width: 3; direction: rtl; }
/* ============================= ریسپانسیو ============================= */
@media (max-width: 980px) {
.login-wrap { grid-template-columns: 1fr; padding: 16px; }
.login-hero { order: 2; min-height: 480px; padding: 32px 24px 48px; }
.login-form-col { order: 1; padding: 26px 8px; }
}
@media (max-width: 900px) {
.subbar { padding: 10px 14px; }
.hint { margin: 12px 12px 0; }
.main { padding: 14px 12px 40px; }
.props { display: none; }
}
@media (max-width: 520px) {
.login-hero { display: none; }
}
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
}
/* ---------- استایل مشترک نمودارهای charts.js (hbar/donut/line/cols) ---------- */
.chart-empty { color: var(--muted); font-size: 12.5px; text-align: center; padding: 24px 0; }
.hbar { display: flex; flex-direction: column; gap: 9px; }
.hbar-row { display: grid; grid-template-columns: 130px 1fr auto; gap: 10px; align-items: center; }
.hbar-lbl { font-size: 12.5px; font-weight: 700; color: #3a4152; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar-track { background: #f0f2f5; border-radius: 8px; height: 16px; overflow: hidden; }
.hbar-fill { height: 100%; border-radius: 8px; transition: width .5s; }
.hbar-val { font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.hbar-extra { font-weight: 400; color: var(--muted); font-size: 11px; }
.donut-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.donut-svg { width: 150px; height: 150px; flex-shrink: 0; }
.donut-total { font-size: 22px; font-weight: 800; fill: #2e3440; font-family: inherit; }
.donut-sub { font-size: 9px; fill: #8a93a3; font-family: inherit; }
.donut-legend { display: flex; flex-direction: column; gap: 7px; }
.dl-item { font-size: 12px; color: #3a4152; display: flex; align-items: center; gap: 7px; }
.dl-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.dl-pct { color: var(--muted); font-size: 11px; }
.line-svg { width: 100%; height: auto; }
.ln-grid { stroke: #eceff3; stroke-width: 1; }
.ln-axis { font-size: 9.5px; fill: #8a93a3; font-family: inherit; }
.ln-legend { flex-direction: row; gap: 16px; margin-top: 6px; justify-content: center; }
.cols-svg { width: 100%; height: auto; }
.cols-legend { display: flex; flex-direction: row; gap: 14px; justify-content: flex-start; margin: 0 4px 6px; }
.cols-legend .dl-item { background: #f6f7f9; border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; font-size: 11.5px; }
/* تولتیپ شناور نمودارها + هاور */
.chart-tip { position: fixed; display: none; z-index: 9999; pointer-events: none; direction: rtl;
background: #2e3440; color: #fff; border-radius: 10px; padding: 9px 13px; font-size: 12px;
box-shadow: 0 6px 22px rgba(20,26,40,.28); min-width: 130px; line-height: 2; }
.chart-tip .ct-title { font-weight: 800; font-size: 12px; border-bottom: 1px solid rgba(255,255,255,.15);
padding-bottom: 4px; margin-bottom: 5px; white-space: nowrap; }
.chart-tip .ct-row { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.chart-tip .ct-row b { margin-inline-start: auto; padding-inline-start: 14px; font-size: 12.5px; }
.chart-tip .ct-dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.cols-svg rect:not(.cols-band):hover { filter: brightness(1.18); }
.hbar-row:hover .hbar-track { background: #e8ecf2; }
.hbar-row:hover .hbar-fill { filter: brightness(1.1); }
/* ---------- گرههای جدید طراح فرایند ---------- */
.node-timer .node-shape { fill: #fff7ed; stroke: #f0ad4e; stroke-width: 2; }
.node-sms_customer .node-shape { fill: #eefbf3; stroke: #2e9e5b; stroke-width: 2; }
.node-msg_customer .node-shape { fill: #fce8f0; stroke: #ad1457; stroke-width: 2; }
.node-webhook .node-shape { fill: #f4f0ff; stroke: #8e5bd9; stroke-width: 2; }
.node-crm_action .node-shape { fill: #fdf1f5; stroke: #e2557f; stroke-width: 2; }
.node-parallel .node-shape, .node-join .node-shape { fill: #2e3440; stroke: #2e3440; }
.node-parallel .node-label, .node-join .node-label { fill: #fff; }
.node-label-sm { font-size: 10.5px; font-weight: 700; }
.node-note .node-shape { fill: #fffbea; stroke: #e6d590; stroke-width: 1.5; stroke-dasharray: 5 3; }
.pal-timer { background: #fff7ed; border: 2px solid #f0ad4e; }
.pal-smsc { background: #eefbf3; border: 2px solid #2e9e5b; }
.pal-msgc { background: #fce8f0; border: 2px solid #ad1457; }
.pal-webhook { background: #f4f0ff; border: 2px solid #8e5bd9; }
.pal-crm { background: #fdf1f5; border: 2px solid #e2557f; }
.pal-parallel, .pal-join { background: #2e3440; border: 2px solid #2e3440; height: 10px !important; margin: 7px 0; }
.pal-note { background: #fffbea; border: 2px dashed #e6d590; }
/* گرههای فرایندساز+ (زیرفرایند/ایمیل/انتظار رویداد) */
.node-subprocess .node-shape { fill: #e8eefb; stroke: #33518f; stroke-width: 3; }
.node-email .node-shape { fill: #fdf1e3; stroke: #e0862c; stroke-width: 2; }
.node-wait_event .node-shape { fill: #f2edfb; stroke: #7a5fc0; stroke-width: 2; stroke-dasharray: 6 4; }
.node-wait_cond .node-shape { fill: #fbf7e6; stroke: #a16207; stroke-width: 2; stroke-dasharray: 6 4; }
.node-data_in .node-shape { fill: #e3f2e8; stroke: #1d7a43; stroke-width: 3; }
.pal-subprocess { background: #e8eefb; border: 3px double #33518f; }
.pal-email { background: #fdf1e3; border: 2px solid #e0862c; }
.pal-waitev { background: #f2edfb; border: 2px dashed #7a5fc0; }
.pal-waitcond { background: #fbf7e6; border: 2px dashed #a16207; }
.pal-datain { background: #e3f2e8; border: 3px solid #1d7a43; }
/* گرههای جدید: متغیر / هوش مصنوعی / تولید سند */
.node-set_var .node-shape { fill: #eef7fb; stroke: #0e7490; stroke-width: 2; }
.node-ai_classify .node-shape { fill: #f5edfb; stroke: #9333ea; stroke-width: 2; }
.node-doc_gen .node-shape { fill: #fbf3e8; stroke: #b45309; stroke-width: 2; }
.pal-setvar { background: #eef7fb; border: 2px solid #0e7490; }
.pal-ai { background: #f5edfb; border: 2px solid #9333ea; }
.pal-docgen { background: #fbf3e8; border: 2px solid #b45309; }
.node-public_form .node-shape { fill: #eaf6f0; stroke: #0f766e; stroke-width: 2; stroke-dasharray: 6 4; }
.pal-pform { background: #eaf6f0; border: 2px dashed #0f766e; }
/* سازندهٔ گرهٔ متغیر (set_var) — کارت per متغیر، مشترک بین هر دو طراح:
ردیف بالا = نام + حالت + حذف؛ ردیف پایین = مقدار تمامعرض (خوانا، بدون فشردگی) */
.sv-card { border: 1px solid #dfe4ec; border-radius: 9px; padding: 8px 9px; margin-bottom: 8px; background: #fafbfd; }
.sv-card:focus-within { border-color: #9fb6e8; background: #fff; }
.sv-top { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.sv-top .sv-key { flex: 1; min-width: 0; direction: ltr; text-align: left; font-family: Consolas, Menlo, monospace; font-size: 12.5px; font-weight: 600; color: #1d4ed8; }
.sv-top select.input { flex: 0 0 auto; width: auto; max-width: 132px; font-size: 12px; }
.sv-val { width: 100%; font-size: 12.5px; }
.sv-val.sv-mono { direction: ltr; text-align: left; font-family: Consolas, Menlo, monospace; }
.sv-empty { font-size: 12px; color: var(--muted); padding: 6px 2px; }
/* راهنمای بازشوی گرهٔ متغیر (sv_guide_html — مشترک هر دو طراح) */
.sv-guide { margin-top: 8px; border: 1px solid #d7e3f4; border-radius: 10px; background: #f6f9ff; font-size: 12px; }
.sv-guide > summary { cursor: pointer; padding: 8px 11px; font-weight: 700; color: #1d4ed8; font-size: 12.5px; list-style: none; user-select: none; }
.sv-guide > summary::-webkit-details-marker { display: none; }
.sv-guide > summary::after { content: '▾'; margin-inline-start: 5px; font-size: 10px; opacity: .7; }
.sv-guide[open] > summary { border-bottom: 1px dashed #d7e3f4; }
.sv-guide[open] > summary::after { content: '▴'; }
.sv-g-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 11px; }
.sv-g-t { display: block; color: #0f2f66; margin-bottom: 4px; font-size: 12px; }
.sv-g-sec p, .sv-g-sec li { margin: 0 0 4px; line-height: 2; color: #33415c; }
.sv-g-sec ul { margin: 0; padding-inline-start: 16px; }
.sv-g-sec code { direction: ltr; unicode-bidi: embed; background: #eaf0fb; border-radius: 5px; padding: 1px 5px; font-size: 11px; color: #1d4ed8; }
.sv-g-note { font-size: 11.5px; color: #8a6d1a; background: #fff8e6; border: 1px solid #f2e2ac; border-radius: 7px; padding: 6px 9px; margin: 4px 0 0 !important; }
.sv-ex { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #e3eaf6; border-radius: 8px; padding: 7px 9px; margin-bottom: 6px; }
.sv-ex-info { flex: 1; min-width: 0; }
.sv-ex-info .t { font-weight: 700; font-size: 11.5px; color: #0f2f66; margin-bottom: 2px; }
.sv-ex-info .t .d { font-weight: 400; color: var(--muted); font-size: 11px; }
.sv-ex-info .c { display: block; direction: ltr; text-align: left; font-family: Consolas, Menlo, monospace; font-size: 11px; color: #1d4ed8; overflow-wrap: anywhere; }
.sv-ex-info .c.c-rtl { direction: rtl; text-align: right; font-family: inherit; }
.sv-ex-add { flex: 0 0 auto; border: 1px solid #bcd2f0; background: #eef4fe; color: #1d4ed8; border-radius: 7px; padding: 4px 10px; font-size: 11.5px; cursor: pointer; font-family: inherit; font-weight: 700; white-space: nowrap; }
.sv-ex-add:hover { background: #dbe8fc; }
/* چکلیست مرحله در صفحهٔ درخواست */
.stage-checklist { background: #fbfcfe; border: 1px solid #e2e8f2; border-inline-start: 3px solid #0e7490; border-radius: 10px; padding: 10px 12px; margin: 10px 0; }
.scl-head { font-size: 13px; font-weight: 700; color: #0e7490; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.scl-count { background: #fff4e8; color: #b45309; border-radius: 999px; padding: 1px 10px; font-size: 11.5px; font-weight: 700; }
.scl-count.ok { background: #e5f5ea; color: #1d7a43; }
.scl-item-form { margin: 0 0 4px; }
.scl-item { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; padding: 3px 2px; border-radius: 6px; }
.scl-item:hover { background: #f2f6fb; }
.scl-item.ro { cursor: default; }
.stage-otp-send { display: flex; align-items: center; gap: 10px; margin: 8px 0; flex-wrap: wrap; }
/* Claim وظیفهٔ نقشی + درخواست اطلاعات وسط مرحله */
.stage-claim { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #f8fafc; border: 1px dashed #cfd8e6; border-radius: 10px; padding: 8px 12px; margin: 8px 0; }
.stage-infoask { border-radius: 10px; padding: 10px 12px; margin: 8px 0; font-size: 13px; }
.stage-infoask.pending { background: #fff8ec; border: 1px solid #f3ddb4; border-inline-start: 3px solid #f0ad4e; }
.stage-infoask.answered { background: #f4faf6; border: 1px solid #cde8d6; border-inline-start: 3px solid #2e9e5b; }
.sia-q { line-height: 1.9; }
.sia-a { margin-top: 6px; padding-top: 6px; border-top: 1px dashed #d8e3da; line-height: 1.9; }
.sia-answer { display: flex; gap: 8px; margin-top: 8px; align-items: flex-start; }
.sia-answer textarea { flex: 1; }
.sia-toggle { margin: 6px 0 2px; }
/* سازندهٔ قوانین مسیردهی شرطی گرهٔ دریافت داده (هر دو طراح) */
.din-rule { border: 1px solid #d8e3da; border-inline-start: 3px solid #1d7a43; border-radius: 8px; padding: 8px 9px; margin-bottom: 8px; background: #fafdfb; }
.din-rhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 12px; color: #1d7a43; }
.din-rops button { border: 1px solid #cfd6df; background: #fff; border-radius: 6px; cursor: pointer; font-size: 11px; padding: 2px 7px; margin-inline-start: 3px; }
.din-rops button:disabled { opacity: .35; cursor: default; }
.din-crow { display: flex; gap: 5px; align-items: center; margin-bottom: 5px; }
.din-crow .input { flex: 1; min-width: 0; font-size: 12px; padding: 5px 8px; }
.din-crow select.input { flex: 0 1 auto; max-width: 46%; }
.din-x { border: none; background: #fdecea; color: #d23f31; border-radius: 6px; width: 24px; height: 24px; cursor: pointer; flex: 0 0 auto; }
/* کارت «گزارش دریافت داده» در صفحهٔ درخواست */
.din-report { padding: 4px 2px 2px; }
.din-report + .din-report { border-top: 1px dashed #e2e6ec; margin-top: 10px; padding-top: 10px; }
.dinr-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; }
.dinr-badge { background: #e3f2e8; color: #1d7a43; border: 1px solid #b5dcc2; border-radius: 999px; padding: 1px 11px; font-size: 11px; font-weight: 700; }
.dinr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dinr-cell { background: #f7f8fa; border: 1px solid #e7eaf0; border-radius: 8px; padding: 7px 6px; text-align: center; }
.dinr-cell b { display: block; font-size: 16px; line-height: 1.3; }
.dinr-cell span { font-size: 10.5px; color: #778; }
.dinr-cell.c-green b { color: #1d7a43; }
.dinr-cell.c-blue b { color: #3b6ef5; }
.dinr-cell.c-red b { color: #d23f31; }
/* ===== دستیار شناور (همهٔ صفحات) ===== */
#asstFab { position: fixed; bottom: 22px; inset-inline-start: 22px; z-index: 380; width: 56px; height: 56px;
border: 0; border-radius: 50%; cursor: pointer; color: #fff;
background: linear-gradient(135deg, #3b6ef5, #7a4df0);
box-shadow: 0 8px 24px rgba(59, 110, 245, .40); display: flex; align-items: center; justify-content: center;
animation: asstFloat 3.2s ease-in-out infinite; transition: transform .18s, box-shadow .18s; }
#asstFab:hover { animation-play-state: paused; transform: scale(1.08); box-shadow: 0 12px 30px rgba(59, 110, 245, .5); }
#asstFab.on { animation: none; transform: scale(.94); }
#asstFab::after { content: ""; position: absolute; inset: -5px; border-radius: 50%;
border: 2px solid rgba(59, 110, 245, .35); animation: asstPulse 2.6s ease-out infinite; pointer-events: none; }
@keyframes asstFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes asstPulse { 0% { transform: scale(.9); opacity: .9; } 70% { transform: scale(1.35); opacity: 0; } 100% { opacity: 0; } }
#asstPanel { position: fixed; bottom: 90px; inset-inline-start: 22px; z-index: 380; width: 375px; max-width: calc(100vw - 32px);
height: 540px; max-height: calc(100vh - 120px); background: #fff; border: 1px solid #e2e6ee; border-radius: 18px;
box-shadow: 0 24px 60px rgba(24, 34, 60, .22); display: flex; flex-direction: column; overflow: hidden;
animation: asstIn .18s ease; }
@keyframes asstIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
#asstPanel.hidden { display: none; }
.as-head { display: flex; align-items: center; gap: 8px; padding: 12px 15px; border-bottom: 1px solid #eef1f6;
background: linear-gradient(135deg, #f7f9ff, #f3effe); font-size: 13.5px; }
.as-dot { width: 10px; height: 10px; border-radius: 50%; background: #2fbf71; box-shadow: 0 0 0 3px #d9f4e6; }
.as-sub { font-size: 10.5px; color: #8a93a5; background: #fff; border: 1px solid #e6eaf2; border-radius: 999px; padding: 2px 9px; }
.as-head .as-close, .as-head .as-clear { margin-inline-start: auto; border: 0; background: none; color: #98a1b0;
width: 27px; height: 27px; border-radius: 7px; cursor: pointer; font-size: 14px; }
.as-head .as-clear { margin-inline-start: auto; }
.as-head .as-close { margin-inline-start: 0; }
.as-head .as-close:hover, .as-head .as-clear:hover { background: #eceff5; color: #2b3240; }
.as-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #fbfcfe; }
.as-msg { max-width: 88%; border-radius: 14px; padding: 9px 13px; font-size: 12.5px; line-height: 2; white-space: normal; }
.as-msg.me { align-self: flex-start; background: linear-gradient(135deg, #3b6ef5, #6a5df0); color: #fff; border-end-start-radius: 4px; }
.as-msg.bot { align-self: flex-end; background: #fff; border: 1px solid #e7eaf1; color: #2c3342; border-end-end-radius: 4px;
box-shadow: 0 1px 2px rgba(24, 32, 52, .05); }
.as-typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.as-typing i { width: 7px; height: 7px; border-radius: 50%; background: #b6bfd0; animation: asstTy 1s infinite; }
.as-typing i:nth-child(2) { animation-delay: .15s; } .as-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes asstTy { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-4px); opacity: 1; } }
.as-refs { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.as-ref { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #f7f9fc; border: 1px solid #e6eaf2;
border-radius: 10px; padding: 7px 10px; text-decoration: none; color: #2c3342; font-size: 12px; transition: .14s; }
.as-ref:hover { border-color: #3b6ef5; background: #f2f7ff; text-decoration: none; transform: translateX(-2px); }
.as-ref b { font-weight: 700; }
.as-ref small { color: #8a93a5; flex-basis: 100%; margin-inline-start: 46px; margin-top: -3px; }
.as-ref-t { font-size: 10px; font-weight: 800; border-radius: 6px; padding: 2px 7px; flex: none; }
.rt-task .as-ref-t { background: #eef3fb; color: #3b6ef5; }
.rt-req .as-ref-t { background: #fff2e7; color: #e0862c; }
.rt-proc .as-ref-t { background: #e6f7f6; color: #00958d; }
.rt-cust .as-ref-t { background: #e9f7ee; color: #1d7a43; }
.rt-exp .as-ref-t { background: #e8f5e9; color: #2e7d32; }
/* بخشهای راهنمای داخل چت دستیار */
.as-help-sec { margin-top: 9px; padding: 7px 9px; background: #fff; border: 1px solid #eceae5; border-radius: 9px; line-height: 1.9; }
.as-help-sec > b { color: #2e3440; font-size: 12px; }
/* اسلاتهای خالی جلسه در چت دستیار */
.as-slots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.as-slot { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: #fff; border: 1.5px solid #cfe0ff;
border-radius: 10px; padding: 7px 12px; cursor: pointer; font: inherit; transition: all .15s; }
.as-slot b { font-size: 12px; color: #2e3440; }
.as-slot small { font-size: 11px; color: #3b6ef5; font-weight: 700; }
.as-slot:hover { border-color: #3b6ef5; background: #f4f8ff; transform: translateY(-1px); }
.as-slot:disabled { opacity: .55; cursor: default; transform: none; }
/* نمودار داخل حباب چت دستیار (mode=chart) */
.as-chart { background: #fff; border: 1px solid #e8e6e1; border-radius: 10px; padding: 8px 10px; margin-top: 8px; }
.as-chart svg { width: 100%; height: auto; }
.as-chart-t { font-size: 11.5px; font-weight: 700; color: #5d6b7a; margin-bottom: 6px; }
.as-chart .donut-wrap { flex-wrap: wrap; }
.as-plan { margin-top: 8px; background: #f7f9ff; border: 1px dashed #bcd0f5; border-radius: 12px; padding: 10px 12px; }
.as-plan > div { display: flex; gap: 6px; font-size: 12px; padding: 2px 0; }
.as-plan > div span { color: #8a93a5; min-width: 62px; }
.as-warns { color: #b26a00; background: #fff8ec; border-radius: 8px; padding: 6px 9px; margin-top: 6px; font-size: 11.5px; }
.as-run { margin-top: 9px; width: 100%; border: 0; border-radius: 9px; background: #2e3440; color: #fff;
font-family: inherit; font-size: 12.5px; font-weight: 700; padding: 9px; cursor: pointer; }
.as-run:hover { background: #3b4350; }
.as-run:disabled { opacity: .6; cursor: default; }
.as-foot { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid #eef1f6; background: #fff; }
.as-foot textarea { flex: 1; border: 1px solid #e2e6ee; border-radius: 12px; resize: none; font-family: inherit;
font-size: 12.5px; padding: 9px 12px; max-height: 90px; outline: none; }
.as-foot textarea:focus { border-color: #3b6ef5; box-shadow: 0 0 0 3px rgba(59, 110, 245, .12); }
#asstSend { border: 0; border-radius: 11px; width: 38px; height: 38px; flex: none; background: #3b6ef5; color: #fff;
display: flex; align-items: center; justify-content: center; cursor: pointer; }
#asstSend:hover { background: #2f5cd8; }
#asstSend svg { transform: scaleX(-1); }
.as-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.as-chip { border: 1px solid #dfe5f0; background: #fff; border-radius: 999px; padding: 5px 12px; font-family: inherit;
font-size: 11.5px; font-weight: 700; color: #3b4a63; cursor: pointer; transition: .14s; }
.as-chip:hover { border-color: #3b6ef5; color: #2a55c9; background: #f2f7ff; }
.as-choose-t { font-size: 12px; font-weight: 700; margin-bottom: 8px; }
/* تکمیل گفتگویی: فرم فیلدهای کم داخل حباب چت */
.as-in-t { font-size: 12px; font-weight: 700; margin: 8px 0 6px; color: #2a55c9; }
.as-inrow { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.as-inrow label { font-size: 11.5px; color: #5a6478; font-weight: 700; }
.as-inp { border: 1px solid #dfe5f0; border-radius: 9px; padding: 7px 10px; font-family: inherit; font-size: 12.5px;
background: #fff; outline: none; width: 100%; }
.as-inp:focus { border-color: #3b6ef5; box-shadow: 0 0 0 3px rgba(59, 110, 245, .1); }
.as-continue { margin-top: 4px; width: 100%; border: 0; border-radius: 9px; background: #3b6ef5; color: #fff;
font-family: inherit; font-size: 12.5px; font-weight: 700; padding: 9px; cursor: pointer; }
.as-continue:hover { background: #2f5cd8; }
.as-continue:disabled { opacity: .6; cursor: default; }
.as-choices { display: flex; flex-direction: column; gap: 6px; }
.as-choice { text-align: right; border: 1px solid #dfe5f0; background: #fff; border-radius: 10px; padding: 8px 11px;
font-family: inherit; font-size: 12px; cursor: pointer; transition: .14s; display: flex; flex-direction: column; gap: 2px; }
.as-choice:hover { border-color: #3b6ef5; background: #f2f7ff; }
.as-choice small { color: #8a93a5; }
#asstMic { border: 0; border-radius: 11px; width: 38px; height: 38px; flex: none; background: #f2f4f8; color: #5a6478;
display: flex; align-items: center; justify-content: center; cursor: pointer; }
#asstMic:hover { background: #e7ebf2; }
#asstMic.rec { background: #e53935; color: #fff; animation: asstTy 1s infinite; }
@media (max-width: 560px) { #asstPanel { inset-inline-start: 8px; bottom: 84px; height: 70vh; } #asstFab { bottom: 16px; inset-inline-start: 16px; } }
/* بنر «ورود بهجای کاربر» (کنسول مدیریت کاربر) */
.imp-banner { position: sticky; top: 58px; z-index: 190; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
background: #fff3e0; border-bottom: 1px solid #f2c98f; color: #7a4a12; font-size: 12.5px; padding: 8px 18px; }
.imp-banner form { margin-inline-start: auto; }
.imp-back { border: 1px solid #e0a457; background: #fff; color: #b26a00; font-family: inherit; font-size: 12px;
font-weight: 700; border-radius: 8px; padding: 5px 14px; cursor: pointer; }
.imp-back:hover { background: #b26a00; color: #fff; }
/* دکمهٔ کنسول کاربر در users.php */
.op-btn.op-console { color: #1d7a43; background: #f0faf3; border-color: #cae6d2; }
.op-btn.op-console:hover { border-color: #1d7a43; color: #146033; background: #e3f2e8; }
/* ===== فهرست فرایندها (processes.php) — ردیف تمیز + منوی «بیشتر» ===== */
.plist td { vertical-align: top; padding-top: 13px; padding-bottom: 13px; }
.plist tbody tr { transition: background .12s; }
.plist tbody tr:hover { background: #fafbfd; }
.pl-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pl-title .link strong { font-size: 14px; }
.pl-id { font-size: 11px; color: #9aa3b2; background: #f2f4f7; border-radius: 6px; padding: 1px 7px; direction: ltr; }
.pl-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
.pl-chip { font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 1px 9px; border: 1px solid transparent; }
.pl-chip.c-teal { background: #e6f7f6; color: #00958d; border-color: #b8e5e2; }
.pl-chip.c-gray { background: #f2f4f7; color: #6b7585; border-color: #e2e6ec; }
.pl-chip.c-amber { background: #fff6e6; color: #b26a00; border-color: #f2dcae; }
.pl-chip.c-blue { background: #eef3fb; color: #3b6ef5; border-color: #cfdcf7; }
.pl-chip.c-purple { background: #f3ecfd; color: #8e5bd9; border-color: #e0d0f5; }
.pl-chip.c-red { background: #fdecea; color: #d23f31; border-color: #f5c9c4; }
.pl-desc { color: #778; font-size: 12px; margin-top: 5px; max-width: 520px; line-height: 1.8; }
.pl-ops { white-space: nowrap; }
.pl-ops .pl-main-btn { display: inline-flex; align-items: center; gap: 5px; margin-inline-end: 4px; }
.pl-ops-h { text-align: right; }
.pmenu-wrap { position: relative; display: inline-block; }
.pmenu { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 300; width: 265px;
background: #fff; border: 1px solid #dfe3ea; border-radius: 12px; box-shadow: 0 12px 34px rgba(20, 30, 55, .16);
padding: 6px; text-align: right; white-space: normal; }
.pmenu form { margin: 0; }
.pm-sec { font-size: 10.5px; font-weight: 800; color: #98a1b0; padding: 7px 10px 3px; letter-spacing: .3px; }
.pm-sec:first-child { padding-top: 4px; }
.pm-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: right; border: none; background: none;
font-family: inherit; font-size: 12.5px; color: #2a3140; padding: 8px 10px; border-radius: 8px; cursor: pointer; text-decoration: none; }
.pm-item:hover { background: #f2f5fa; color: #1c2333; }
.pm-item svg { flex: 0 0 auto; opacity: .75; }
.pm-item .pm-cur { margin-inline-start: auto; color: #1d7a43; font-weight: 800; }
.pm-item .pm-on { margin-inline-start: auto; font-size: 10px; font-weight: 800; background: #e3f2e8; color: #1d7a43; border-radius: 999px; padding: 1px 8px; }
.pm-danger { color: #d23f31; }
.pm-danger:hover { background: #fdecea; color: #b52a1d; }
@media (max-width: 900px) { .pl-ops { white-space: normal; } .pl-ops .pl-main-btn { margin-bottom: 4px; } }
/* بج لینت زندهٔ طراح */
.lint-badge { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 800; border-radius: 999px;
padding: 4px 12px; cursor: pointer; user-select: none; }
.lint-badge.lint-ok { background: #e9f7ee; color: #1d7a43; }
.lint-badge.lint-warn { background: #fff7e9; color: #8a5a20; }
.lint-badge.lint-err { background: #fdecea; color: #a33a30; }
/* سازندهٔ شرط ترکیبی یال */
.cond-card { border: 1px dashed var(--line); border-radius: 9px; padding: 8px; margin-bottom: 8px;
display: flex; flex-direction: column; gap: 6px; background: #fafbfc; }
/* تنظیمات بیشتر فیلد فرم */
.field-adv { border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 8px;
display: flex; flex-direction: column; gap: 6px; }
.field-adv .field-row { display: flex; gap: 6px; }
/* جدول تکرارشونده در فرمها */
.tbl-field .tbl-edit td { padding: 4px 6px; }
.tbl-field .tbl-add { margin-top: 6px; }
.tbl-ro td, .tbl-ro th { padding: 5px 8px; font-size: 12px; }
/* ============================= انبار (Warehouse) ============================= */
.wh-picker { position: relative; }
.wh-picker .wh-search { width: 100%; }
.wh-results { position: absolute; top: calc(100% + 3px); right: 0; left: 0; z-index: 55; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 30px rgba(20, 30, 50, .16); max-height: 300px; overflow-y: auto; }
.wh-results.hidden { display: none; }
.wh-opt { padding: 8px 11px; font-size: 12.5px; cursor: pointer; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #f2f4f7; }
.wh-opt:last-child { border-bottom: none; }
.wh-opt.active, .wh-opt:hover { background: #eef6f8; }
.wh-opt .wh-av { margin-inline-start: auto; font-size: 11px; color: #2e7d55; background: #eafbf1; border-radius: 20px; padding: 1px 8px; white-space: nowrap; }
.wh-empty { padding: 10px; text-align: center; color: var(--muted); font-size: 12px; }
.wh-low-row { background: #fff7f5; }
.wh-low-row td { border-color: #ffe0d8; }
/* ==================== UI انبارداری: تایلهای اقدام + نوار پیل (کشفپذیر و یوزرفرندلی) ==================== */
.tw-blue{--twc:#3b6ef5}.tw-green{--twc:#1d7a43}.tw-orange{--twc:#f07f3c}.tw-purple{--twc:#7048b6}
.tw-teal{--twc:#0e8f83}.tw-slate{--twc:#33518f}.tw-pink{--twc:#ad1457}.tw-gray{--twc:#5b6472}
.wh-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:10px;margin:0 0 16px}
.wh-tile{background:#fff;border:1px solid var(--line,#e3e6ec);border-radius:14px;padding:14px 10px 12px;
display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;text-decoration:none;
color:#1c2333;box-shadow:0 1px 2px rgba(15,23,42,.05);transition:transform .15s,box-shadow .15s,border-color .15s;min-width:0}
.wh-tile:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(15,23,42,.10);border-color:var(--twc)}
.wh-tile .ti{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;
background:color-mix(in srgb,var(--twc) 13%,#fff);color:var(--twc);flex:none}
.wh-tile b{font-size:13px;font-weight:800}
.wh-tile .d{font-size:10.5px;color:#7b8494;line-height:1.7;overflow-wrap:anywhere}
.wh-tile.primary{background:var(--twc);border-color:var(--twc);color:#fff}
.wh-tile.primary .ti{background:rgba(255,255,255,.2);color:#fff}
.wh-tile.primary .d{color:rgba(255,255,255,.85)}
.wh-bar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px;align-items:center}
.wh-bar a{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border:1px solid var(--line,#e3e6ec);
border-radius:999px;background:#fff;font-size:12.5px;font-weight:700;text-decoration:none;color:#333;transition:.12s}
.wh-bar a svg{color:var(--twc)}
.wh-bar a:hover{border-color:var(--twc);color:var(--twc);box-shadow:0 3px 10px rgba(15,23,42,.07)}
.wh-bar a.on{background:var(--twc);border-color:var(--twc);color:#fff}
.wh-bar a.on svg{color:#fff}
@media (max-width:700px){.wh-tiles{grid-template-columns:repeat(2,1fr)}}
/* ---------- گفتگوهای چت آنلاین در پروندهٔ مشتری ---------- */
.chat-thread{border:1px solid #eef0f4;border-radius:10px;margin-bottom:10px;background:#fbfcfd}
.chat-thread>summary{cursor:pointer;padding:9px 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;list-style:none}
.chat-thread>summary::-webkit-details-marker{display:none}
.chat-thread>summary::before{content:'▾';color:var(--ink2);font-size:12px;transition:transform .15s}
.chat-thread:not([open])>summary::before{transform:rotate(90deg)}
.chat-thread>summary:hover{background:#f5f7fa;border-radius:10px}
.chat-log{padding:6px 12px 12px;display:flex;flex-direction:column;gap:8px;max-height:420px;overflow:auto}
/* پیامها داخل wrapper صفحهبندی (.chat-msgs) هستند — فلکسِ تراز حبابها باید روی همین wrapper باشد */
.chat-msgs{display:flex;flex-direction:column;gap:8px}
.chat-msg{max-width:82%;padding:7px 11px;border-radius:12px;background:#fff;border:1px solid #eef0f4}
.chat-msg .cm-head{display:flex;gap:8px;align-items:center;font-size:11.5px;margin-bottom:3px;flex-wrap:wrap}
.chat-msg .cm-head .muted{font-size:11px}
.chat-msg .cm-body{font-size:13px;line-height:1.9;word-break:break-word}
.chat-msg.cm-visitor{align-self:flex-start;background:#f4f3f1}
.chat-msg.cm-operator{align-self:flex-end;background:#e9edf7;border-color:#dde3f0}
.chat-msg.cm-bot{align-self:flex-end;background:#eef7f3;border-color:#d9ece4}
.chat-msg.cm-note,.chat-msg.cm-system{align-self:center;background:#fdf3d5;border-color:#f3e3b5;font-size:12px}
/* اسکرولبار باریک و تمیز برای لاگ گفتگو (بهجای اسکرولبار پیشفرض ویندوز) */
.chat-log{scrollbar-width:thin;scrollbar-color:#c9cfd8 transparent}
.chat-log::-webkit-scrollbar{width:6px}
.chat-log::-webkit-scrollbar-thumb{background:#c9cfd8;border-radius:6px}
.chat-log::-webkit-scrollbar-track{background:transparent}
/* ---------- صفحهبندی و جستجوی گفتگوهای چت در پروندهٔ مشتری ---------- */
.chat-search-row{display:flex;gap:8px;margin-bottom:10px;align-items:center}
.chat-search-row .input{flex:1;min-width:0}
.chat-log-more{display:flex;justify-content:center;gap:8px;align-items:center;padding:4px 0}
.chat-sr{border:1px solid #eef0f4;border-radius:10px;padding:8px 10px;margin-bottom:8px;background:#fbfcfd}
.chat-sr .chat-msg{max-width:100%;align-self:stretch}
.chat-sr-meta{margin-bottom:4px}
.cm-body mark{background:#fdf3d5;color:#7a5b0d;border-radius:3px;padding:0 2px}
/* ── کاشیهای سنجهٔ بخشهای داده (پروندهٔ مشتری/کاربر) ── */
.ds-mtiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px;margin-bottom:12px}
.ds-mtile{background:#f7f9fc;border:1px solid #e4e9f2;border-radius:10px;padding:9px 10px;text-align:center}
.ds-mtile b{display:block;font-size:17px;color:#2e3440;line-height:1.5;direction:ltr}
.ds-mtile span{display:block;font-size:11px;color:#7a8699;margin-top:2px;line-height:1.6}
/* ==== گروه مشتری (پرسونا — پرسشنامهٔ جرنی): نشان بزرگ پرونده + چیپ فهرستها ==== */
.persona-badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 800; cursor: pointer; color: var(--pc, #546e7a); background: color-mix(in srgb, var(--pc, #546e7a) 12%, #fff); border: 1.5px solid color-mix(in srgb, var(--pc, #546e7a) 45%, #fff); box-shadow: 0 2px 8px color-mix(in srgb, var(--pc, #546e7a) 22%, transparent); }
.persona-badge:hover { background: color-mix(in srgb, var(--pc, #546e7a) 18%, #fff); }
.persona-badge .pb-dot, .persona-chip .pb-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pc, #546e7a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc, #546e7a) 25%, transparent); flex: 0 0 9px; }
.persona-chip { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; color: var(--pc, #546e7a); background: color-mix(in srgb, var(--pc, #546e7a) 10%, #fff); border: 1px solid color-mix(in srgb, var(--pc, #546e7a) 35%, #fff); margin-inline-start: 5px; vertical-align: middle; white-space: nowrap; }
.persona-why { border: 1px solid #e7e9ee; border-radius: 10px; padding: 10px 12px; background: #f9fafb; }
.persona-why .pw-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 4px 0; border-bottom: 1px dashed #e5e7eb; }
.persona-why .pw-row:last-child { border-bottom: 0; }
#personaLive .pl-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pc) 25%, transparent); animation: plPulse 1.6s ease-in-out infinite; flex: 0 0 10px; }
@keyframes plPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.25); } }
#personaLive .pl-desc { font-weight: 400; color: color-mix(in srgb, var(--pc) 70%, #444); }
#personaLive .pl-wait { color: #6b7280; font-weight: 600; }
/* ==== چیدمان کارتی فرم مرحله (formLayout=cards — انتخاب طراح روی گره) ==== */
.qcards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
align-items: stretch; margin-bottom: 6px; counter-reset: qcard; }
.qcards.qc-n { grid-template-columns: repeat(var(--qcols, 3), 1fr); }
@media (max-width: 980px) { .qcards.qc-n { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .qcards, .qcards.qc-n { grid-template-columns: 1fr; } }
/* ---- کارت ---- */
.qcards > .node-field { position: relative; margin: 0; padding: 0 0 13px; background: #fff;
border: 1.5px solid #e9edf4; border-radius: 16px; overflow: visible;
box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 16px -8px rgba(16, 24, 40, .10);
transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
animation: qcardIn .3s cubic-bezier(.22, 1, .36, 1) both;
display: flex; flex-direction: column; counter-increment: qcard; }
.qcards > .node-field:focus-within { z-index: 40; }
.qcards > .node-field:nth-child(2) { animation-delay: .05s; }
.qcards > .node-field:nth-child(3) { animation-delay: .1s; }
.qcards > .node-field:nth-child(4) { animation-delay: .15s; }
.qcards > .node-field:nth-child(n+5) { animation-delay: .2s; }
@keyframes qcardIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.qcards > .node-field:hover { border-color: #dbe1ec; transform: translateY(-3px);
box-shadow: 0 2px 4px rgba(16, 24, 40, .05), 0 14px 28px -12px rgba(16, 24, 40, .18); }
/* نوار اکسنت بالای کارت (باریک، گوشهگرد، فقط با تعامل) */
.qcards > .node-field::before { content: ''; position: absolute; top: -1.5px; inset-inline: 18%; height: 3px;
border-radius: 0 0 4px 4px; background: linear-gradient(90deg, transparent, var(--orange), transparent);
opacity: 0; transform: scaleX(.4); transform-origin: center;
transition: opacity .25s ease, transform .25s ease; }
.qcards > .node-field:hover::before { opacity: .55; transform: scaleX(.8); }
.qcards > .node-field:has(input:checked)::before,
.qcards > .node-field:has(.input:not(:placeholder-shown))::before { opacity: 1; transform: scaleX(1); }
/* کارتِ پاسخدادهشده */
.qcards > .node-field:has(input:checked) { border-color: #f6cba9;
box-shadow: 0 1px 2px rgba(240, 127, 60, .08), 0 10px 24px -14px rgba(240, 127, 60, .5); }
/* ---- سربرگ سؤال ---- */
.qcards > .node-field > label { display: flex; align-items: center; gap: 9px; margin: 0 0 11px;
padding: 13px 14px 11px; background: linear-gradient(180deg, #fcfdff, #f6f8fc);
border-bottom: 1px dashed #e7ecf4; border-radius: 14px 14px 0 0;
font-size: 12.5px; font-weight: 800; color: var(--ink); line-height: 1.7; }
/* شمارهٔ خودکار سؤال */
.qcards > .node-field > label::before { content: counter(qcard); flex: 0 0 auto;
width: 23px; height: 23px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
background: #eef1f7; color: #7c869a; font-size: 11px; font-weight: 800; font-family: inherit;
transition: background .22s ease, color .22s ease, box-shadow .22s ease; }
.qcards > .node-field:has(input:checked) > label::before,
.qcards > .node-field:has(.input:not(:placeholder-shown)) > label::before {
background: linear-gradient(135deg, var(--orange), #e2691f); color: #fff;
box-shadow: 0 2px 7px rgba(240, 127, 60, .35); }
/* نشان تکمیل (تیک) سمت چپ سربرگ */
.qcards > .node-field > label::after { content: ''; margin-inline-start: auto; flex: 0 0 auto;
width: 19px; height: 19px; border-radius: 50%; background: #eef1f7;
transition: background .22s ease, transform .28s cubic-bezier(.34, 1.56, .64, 1);
transform: scale(.75);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; }
.qcards > .node-field:has(input:checked) > label::after,
.qcards > .node-field:has(.input:not(:placeholder-shown)) > label::after {
background: #16a34a; transform: scale(1);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; }
.qcards > .node-field > label .req { color: #e5484d; }
.qcards > .node-field > :not(label) { margin-inline: 13px; }
.qcards > .node-field .choice-list { display: flex; flex-direction: column; gap: 8px; }
/* ---- گزینه ---- */
.qcards > .node-field .choice-row { position: relative; display: flex; align-items: center; gap: 10px; margin: 0;
border: 1.5px solid #eaeef5; border-radius: 12px; padding: 9px 12px; cursor: pointer; overflow: hidden;
font-size: 12.5px; color: #414b5c; background: #fff;
transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease; }
.qcards > .node-field .choice-row::after { content: ''; position: absolute; inset: 0; border-radius: inherit;
background: linear-gradient(90deg, rgba(240, 127, 60, .10), rgba(240, 127, 60, 0));
opacity: 0; transition: opacity .22s ease; pointer-events: none; }
.qcards > .node-field .choice-row:hover { border-color: #f4c19c; background: #fffaf5; transform: translateX(-2px); }
.qcards > .node-field .choice-row:has(input:checked) { border-color: var(--orange); background: #fff6ee;
color: #8a3f0c; font-weight: 800; box-shadow: 0 2px 10px -3px rgba(240, 127, 60, .45);
animation: qPick .3s cubic-bezier(.34, 1.56, .64, 1); }
.qcards > .node-field .choice-row:has(input:checked)::after { opacity: 1; }
@keyframes qPick { 0% { transform: scale(1); } 45% { transform: scale(1.025); } 100% { transform: scale(1); } }
/* رادیو/چکباکس سفارشی با تیک واقعی */
.qcards > .node-field .choice-row input[type=radio],
.qcards > .node-field .choice-row input[type=checkbox] {
appearance: none; -webkit-appearance: none; position: relative; flex: 0 0 19px;
width: 19px; height: 19px; margin: 0; cursor: pointer; background: #fff;
border: 2px solid #ccd4e2; border-radius: 50%;
transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.qcards > .node-field .choice-row input[type=checkbox] { border-radius: 6px; }
.qcards > .node-field .choice-row:hover input:not(:checked):not(:disabled) { border-color: #f4a877; }
.qcards > .node-field .choice-row input:checked { border-color: var(--orange);
background: linear-gradient(135deg, #f68f4f, var(--orange)); box-shadow: 0 0 0 3px rgba(240, 127, 60, .16); }
.qcards > .node-field .choice-row input:checked::after { content: ''; position: absolute;
inset-inline-start: 5px; top: 2px; width: 4px; height: 8px; border: solid #fff;
border-width: 0 2px 2px 0; transform: rotate(45deg); animation: qTick .22s ease both; }
@keyframes qTick { from { opacity: 0; transform: rotate(45deg) scale(.5); } to { opacity: 1; transform: rotate(45deg) scale(1); } }
.qcards > .node-field .choice-row input:disabled { border-color: #dfe3ea; background: #f3f4f7; cursor: default; }
.qcards > .node-field .choice-row input:disabled:checked { background: #b6bcc8; border-color: #b6bcc8; box-shadow: none; }
.qcards > .node-field .choice-row:has(input:disabled) { cursor: default; opacity: .75; }
.qcards > .node-field .choice-row:has(input:disabled):hover { border-color: #eaeef5; background: #fff; transform: none; }
/* ورودیهای متنی/عددی داخل کارت */
.qcards > .node-field .input { border-radius: 10px; }
.qcards > .node-field .input:focus { box-shadow: 0 0 0 3px rgba(240, 127, 60, .13); }
/* ---- نوار پیشرفت بالای مجموعهٔ کارتها (JS پر میکند) ---- */
.qc-prog { display: flex; align-items: center; gap: 11px; margin: 0 0 13px;
background: linear-gradient(135deg, #fcfdff, #f6f8fc); border: 1.5px solid #e9edf4;
border-radius: 13px; padding: 10px 14px; }
.qc-prog-txt { font-size: 12px; font-weight: 800; color: #4a5568; white-space: nowrap; }
.qc-prog-txt b { color: var(--orange); }
.qc-prog-bar { flex: 1; height: 7px; background: #e9edf4; border-radius: 20px; overflow: hidden; min-width: 60px; }
.qc-prog-fill { height: 100%; width: 0; border-radius: 20px;
background: linear-gradient(90deg, #f6a56d, var(--orange)); transition: width .35s cubic-bezier(.22, 1, .36, 1); }
.qc-prog.done { border-color: #b8e6c8; background: linear-gradient(135deg, #f2fdf6, #ecfdf3); }
.qc-prog.done .qc-prog-txt { color: #15803d; }
.qc-prog.done .qc-prog-txt b { color: #16a34a; }
.qc-prog.done .qc-prog-fill { background: linear-gradient(90deg, #4ade80, #16a34a); }
/* کارتِ تنهامانده در ردیف آخر (JS کلاس میدهد) دو ستون میگیرد تا فضای خالی نماند */
.qcards > .node-field.qc-solo { grid-column: span 2; }
@media (max-width: 620px) { .qcards > .node-field.qc-solo { grid-column: auto; } }
/* فیلدهای پهن (متن بلند/فایل/جدول/انتخابگرهای زنده) کل ردیف را میگیرند */
.qcards > .node-field:has(textarea), .qcards > .node-field:has(input[type=file]),
.qcards > .node-field:has(.cust-picker), .qcards > .node-field:has(.wh-picker),
.qcards > .node-field:has(.users-field), .qcards > .node-field:has(.tbl-rows),
.qcards > .node-field:has(table) { grid-column: 1 / -1; }
@media (prefers-reduced-motion: reduce) {
.qcards > .node-field { animation: none; }
.qcards > .node-field:hover { transform: none; }
.qcards > .node-field .choice-row:has(input:checked) { animation: none; }
.qcards > .node-field .choice-row input:checked::after { animation: none; }
.qc-prog-fill { transition: none; }
}
/* ============ حالت مشتری و راهنمای مکالمه ============ */
.state-badge{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#eef2ff,#e0e7ff);border:1px solid #c7d2fe;border-radius:20px;padding:3px 10px 3px 8px;font-size:11.5px;vertical-align:middle;margin-inline-start:6px}
.state-badge .sb-code{font-family:monospace;font-weight:800;color:#3730a3;letter-spacing:.4px}
.state-badge .sb-num{color:#6366f1;font-size:10.5px;border-inline-start:1px solid #c7d2fe;padding-inline-start:6px}
.state-chip{display:inline-flex;align-items:center;gap:4px;background:#eef2ff;border:1px solid #c7d2fe;border-radius:14px;padding:1px 8px;font-size:10.5px;font-family:monospace;color:#3730a3;direction:ltr}
/* دکمهٔ باز کردن راهنما */
.sg-open-btn{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#4f46e5,#6366f1);color:#fff;border:none;border-radius:9px;padding:8px 14px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 2px 8px rgba(79,70,229,.25)}
.sg-open-btn:hover{filter:brightness(1.08)}
.sg-open-btn.sm{padding:5px 10px;font-size:11.5px;border-radius:7px}
/* مودال راهنما */
.sg-modal{position:fixed;inset:0;z-index:430;display:flex;align-items:center;justify-content:center;padding:20px}
.sg-modal.hidden{display:none}
.sg-backdrop{position:absolute;inset:0;background:rgba(17,22,34,.55);backdrop-filter:blur(2px)}
.sg-card{position:relative;background:var(--bg,#f5f6f8);border-radius:18px;width:min(1180px,96vw);max-height:92vh;display:flex;flex-direction:column;box-shadow:0 24px 70px rgba(10,15,30,.35);overflow:hidden;animation:sgIn .18s ease}
@keyframes sgIn{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
.sg-head{background:linear-gradient(120deg,#312e81,#4f46e5);color:#fff;padding:14px 20px;display:flex;align-items:center;gap:14px;flex-shrink:0}
.sg-head-main{flex:1;min-width:0}
.sg-title{font-size:15.5px;font-weight:800}
.sg-sub{font-size:12px;opacity:.92;margin-top:3px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.sg-sub .sg-code{font-family:monospace;background:rgba(255,255,255,.18);border-radius:6px;padding:1px 7px;letter-spacing:.5px}
.sg-sub .sg-num{opacity:.85}
.sg-head-actions{display:flex;align-items:center;gap:8px}
.sg-x,.sg-fullbtn{background:rgba(255,255,255,.16);border:none;color:#fff;width:32px;height:32px;border-radius:9px;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;text-decoration:none}
.sg-x:hover,.sg-fullbtn:hover{background:rgba(255,255,255,.28)}
.sg-body{padding:16px 20px 22px;overflow-y:auto;flex:1}
.sg-loading,.sg-empty{text-align:center;color:#78808e;padding:40px 20px;font-size:13.5px;line-height:2}
.sg-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.sg-chip{background:#fff;border:1px solid var(--line,#e3e7ee);border-radius:20px;padding:4px 11px;font-size:11.5px;color:#3a4152}
.sg-chip i{font-style:normal;color:#8a93a3;font-size:10.5px}
.sg-chip-prio{background:#fff1e4;border-color:#f7c9a4;color:#b45309;font-weight:700}
.sg-chip-dim{background:#f5f7ff;border-color:#dfe4ff}
.sg-mindset{display:flex;gap:12px;align-items:flex-start;background:linear-gradient(135deg,#eef2ff,#f5f3ff);border:1px solid #ddd6fe;border-radius:13px;padding:13px 16px;margin-bottom:14px}
.sg-quote{font-size:34px;line-height:.8;color:#a5b4fc;font-family:Georgia,serif}
.sg-mind-lbl{font-size:10.5px;color:#6366f1;font-weight:800;margin-bottom:3px}
.sg-mind-txt{font-size:14px;color:#312e81;font-weight:600;line-height:1.9}
.sg-summary{background:#fff;border:1px solid var(--line,#e3e7ee);border-radius:11px;padding:11px 14px;font-size:13px;line-height:2;margin-bottom:14px}
.sg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:13px;align-items:start}
.sg-sec.sg-wide{grid-column:1/-1}
.sg-sec{background:#fff;border:1px solid var(--line,#e3e7ee);border-radius:13px;overflow:hidden;box-shadow:0 1px 3px rgba(20,26,40,.05)}
.sg-sec-head{display:flex;align-items:center;gap:8px;padding:11px 14px;font-weight:800;font-size:13px;color:#2e3440;cursor:pointer;user-select:none;border-bottom:1px solid #f0f2f6}
.sg-sec-head .sg-ic{font-size:14px}
.sg-count{margin-inline-start:auto;background:#f2f4f7;border-radius:20px;padding:1px 8px;font-size:10.5px;color:#78808e;font-weight:700}
.sg-caret{transition:transform .15s;font-size:12px;color:#98a0ae}
.sg-sec.collapsed .sg-caret{transform:rotate(180deg)}
.sg-sec.collapsed .sg-sec-body{display:none}
.sg-sec-body{padding:11px 14px 13px}
.sg-sec.sg-danger .sg-sec-head{color:#b3261e;background:linear-gradient(90deg,#fef2f2,transparent)}
.sg-sec.sg-ok .sg-sec-head{color:#127a3e;background:linear-gradient(90deg,#f0fdf4,transparent)}
.sg-sec.sg-warn .sg-sec-head{color:#b45309;background:linear-gradient(90deg,#fffbeb,transparent)}
.sg-sec.sg-cta .sg-sec-head{color:#4f46e5;background:linear-gradient(90deg,#eef2ff,transparent)}
.sg-sec.sg-send .sg-sec-head{color:#0e7490;background:linear-gradient(90deg,#ecfeff,transparent)}
.sg-list{list-style:none;margin:0;padding:0}
.sg-list li{display:flex;align-items:flex-start;gap:8px;padding:7px 0;border-bottom:1px dashed #f0f2f6;font-size:13px;line-height:1.95}
.sg-list li:last-child{border-bottom:none}
.sg-li-txt{flex:1}
.sg-list li::before{content:"•";color:#98a0ae;margin-top:2px}
.sg-list.sg-danger li{color:#7f1d1d}
.sg-list.sg-danger li::before{content:"✕";color:#dc2626;font-weight:900;font-size:11px;margin-top:4px}
.sg-list.sg-ok li::before{content:"✓";color:#16a34a;font-weight:900;font-size:11px;margin-top:4px}
.sg-list.sg-cta li::before{content:"▸";color:#4f46e5;font-weight:900;margin-top:2px}
.sg-copy{opacity:0;background:none;border:1px solid var(--line,#e3e7ee);border-radius:6px;width:24px;height:24px;cursor:pointer;font-size:11px;color:#78808e;flex-shrink:0;transition:opacity .12s}
.sg-list li:hover .sg-copy,.sg-pair:hover .sg-copy{opacity:1}
.sg-copy:hover{background:#f5f6f8;color:#2e3440}
.sg-pairs .sg-pair{padding:8px 0;border-bottom:1px dashed #f0f2f6}
.sg-pairs .sg-pair:last-child{border-bottom:none}
.sg-pa{font-size:12.5px;font-weight:700;color:#2e3440;margin-bottom:3px}
.sg-pb{font-size:12.5px;color:#4a5361;line-height:1.95;display:flex;align-items:flex-start;gap:8px}
.sg-pb::before{content:"←";color:#94a3b8;flex-shrink:0}
.sg-pairs.sg-warn .sg-pa{color:#b45309}
.sg-sends{display:flex;flex-direction:column;gap:8px}
.sg-send-row{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--line,#e3e7ee);border-radius:10px;background:#fcfdff;flex-wrap:wrap}
.sg-send-row.sent{background:#f0fdf4;border-color:#bbf7d0}
.sg-send-main{flex:1;min-width:180px}
.sg-send-label{font-size:12.5px;font-weight:700;color:#2e3440}
.sg-send-link{font-size:11px;color:#3b6ef5;direction:ltr;display:inline-block;margin-top:2px;text-decoration:none;word-break:break-all}
.sg-mark{background:#fff;border:1px solid #cbd5e1;border-radius:8px;padding:5px 12px;font-family:inherit;font-size:11.5px;cursor:pointer;color:#475569;font-weight:700}
.sg-mark:hover{border-color:#4f46e5;color:#4f46e5}
.sg-mark.is-sent{background:#16a34a;border-color:#16a34a;color:#fff}
.sg-sent-tag{background:#dcfce7;color:#15803d;border-radius:20px;padding:3px 10px;font-size:11px;font-weight:700}
.sg-sent-at{font-size:10.5px;color:#8a93a3;width:100%}
.sg-why{margin-top:14px;background:#fff;border:1px solid var(--line,#e3e7ee);border-radius:11px;padding:10px 14px;font-size:12.5px}
.sg-why summary{cursor:pointer;font-weight:700;color:#4f46e5}
.sg-why-body{margin-top:9px;line-height:2.1;color:#4a5361}
.sg-why-at{color:#98a0ae;font-size:11px;margin-top:5px}
.sg-src{margin-top:12px;font-size:11px;color:#8a93a3;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.sg-src-chip{background:#f2f4f7;border-radius:14px;padding:2px 9px}
.sg-src-chip i{font-style:normal;font-family:monospace;color:#6366f1}
/* کارت راهنما در پروندهٔ مشتری */
.state-card-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:10px}
.state-mini{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px}
.state-mini .sm-item{background:#f7f8fb;border:1px solid var(--line,#e3e7ee);border-radius:9px;padding:5px 10px;font-size:11.5px}
.state-mini .sm-item b{color:#4f46e5}
.state-none{font-size:12.5px;color:#78808e;line-height:2}
@media(max-width:640px){
.sg-modal{padding:0}
.sg-card{width:100vw;max-height:100vh;border-radius:0}
.sg-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.sg-card{animation:none}}
.vcp-state{display:flex;align-items:center;gap:8px;margin:8px 0 4px;flex-wrap:wrap}
.vcp-state .state-chip{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);color:#e0e7ff}
.pl-state{display:inline-flex;align-items:center;gap:6px;background:#eef2ff;border:1px solid #c7d2fe;border-radius:9px;padding:4px 11px;color:#4338ca;font-size:12.5px;margin-inline-start:auto}
.pl-state b{font-family:monospace;letter-spacing:.4px}
.pl-state-wait{background:#f4f5f7;border-color:#e0e3e9;color:#6b7280}
.pl-badge{background:#dcfce7;color:#15803d;border-radius:12px;padding:1px 8px;font-size:10.5px}
.dimchip{display:inline-block;background:#f5f7ff;border:1px solid #e2e7f5;border-radius:12px;padding:1px 8px;margin-inline-end:4px;font-size:10.5px;color:#3a4152}
.dimchip i{font-style:normal;color:#98a0ae}
.chip-warn{background:#fff7ec !important;border-color:#f0d19a !important;color:#a5610a}
.sg-edit-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:linear-gradient(135deg,#fff7ec,#fffbf5);border:1px dashed #f0d19a;border-radius:11px;padding:11px 15px;margin-top:14px}
.sg-eb-txt{flex:1;min-width:200px;font-size:12.5px;color:#8a5a12;line-height:1.9}
.sg-src-link{text-decoration:none}
.sg-src-link:hover .sg-src-chip{background:#e0e7ff;color:#3730a3}
/* ===== سادهسازی صفحهٔ حالتها ===== */
.stab-side{margin-inline-start:auto;opacity:.85}
.stab-side.on{opacity:1}
.stab-sub{font-size:9.5px;background:rgba(0,0,0,.06);border-radius:20px;padding:1px 7px;margin-inline-start:4px}
.stab.on .stab-sub{background:rgba(255,255,255,.22)}
/* جادوگر شروع */
.wiz-card{max-width:760px;margin:0 auto}
.wiz-head{display:flex;gap:15px;align-items:flex-start;margin-bottom:18px}
.wiz-ic{width:52px;height:52px;flex-shrink:0;border-radius:14px;background:linear-gradient(135deg,#4f46e5,#6366f1);display:flex;align-items:center;justify-content:center;font-size:24px}
.wiz-t{font-size:17px;font-weight:800;color:#2e3440;margin-bottom:4px}
.wiz-s{font-size:13px;color:#67707f;line-height:1.9}
.wiz-form{background:#fbfcfe;border:1px solid var(--line,#e3e7ee);border-radius:12px;padding:16px 18px}
.btn-lg{padding:12px 24px;font-size:14.5px;margin-top:6px}
.wiz-after{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;justify-content:center}
.wiz-step{background:#f5f7ff;border:1px solid #e2e7f5;border-radius:10px;padding:9px 13px;font-size:12px;color:#4a5361;display:flex;align-items:center;gap:7px}
.wiz-step b{width:20px;height:20px;border-radius:50%;background:#4f46e5;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px}
.wiz-done{background:#f0fdf4;border-color:#bbf7d0}
.wiz-done b{background:#16a34a}
.wiz-arrow{color:#c7d2fe;font-size:15px}
/* ردیف سؤال */
.dim-row{position:relative}
.dim-num{position:absolute;top:12px;right:12px;width:24px;height:24px;border-radius:50%;background:#eef2ff;color:#4f46e5;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
.dim-row .form-group:first-of-type{padding-inline-end:34px}
.dim-adv{margin:8px 0 10px;background:#f7f8fb;border:1px solid var(--line,#e3e7ee);border-radius:9px;padding:8px 12px}
.dim-adv summary{cursor:pointer;font-size:12px;color:#78808e;font-weight:700}
.dim-adv[open] summary{margin-bottom:9px}
.hint-inline{font-size:10.5px;color:#98a0ae;font-weight:400}
/* انتخابگر «برای چه کسانی؟» */
.pp-box{background:linear-gradient(135deg,#fbfcff,#f7f9ff);border:1px solid #dfe4ff;border-radius:13px;padding:14px 16px;margin-bottom:14px}
.pp-title{font-weight:800;font-size:13.5px;color:#312e81;margin-bottom:11px}
.pp-rows{display:flex;flex-direction:column;gap:9px}
.pp-row{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.pp-label{min-width:120px;font-size:12.5px;font-weight:700;color:#3a4152;flex-shrink:0}
.pp-opts{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.pp-opt{background:#fff;border:1.5px solid #e3e7ee;border-radius:20px;padding:5px 13px;font-family:inherit;font-size:12px;color:#5a6472;cursor:pointer;transition:all .12s}
.pp-opt:hover{border-color:#a5b4fc;color:#4f46e5}
.pp-opt.on{background:#4f46e5;border-color:#4f46e5;color:#fff;font-weight:700}
.pp-any{color:#8a93a3}
.pp-any.on{background:#e0e7ff;border-color:#c7d2fe;color:#4338ca}
.pp-foot{margin-top:12px;padding-top:11px;border-top:1px dashed #dfe4ff}
.pp-summary{font-size:12.5px;color:#3730a3;line-height:1.9}
.pp-adv{margin-top:9px}
.pp-adv summary{cursor:pointer;font-size:11px;color:#98a0ae}
.pp-adv[open] summary{margin-bottom:6px}
.pp-adv .input{max-width:280px}
@media(max-width:620px){.pp-label{min-width:100%}}
/* ===== نوار مجموعههای برچسب ===== */
.setbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#f7f8fb;border:1px solid var(--line,#e3e7ee);border-radius:11px;padding:9px 13px;margin-bottom:12px}
.setbar-lbl{font-size:12px;color:#78808e;font-weight:700}
.setchip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1.5px solid var(--line,#e3e7ee);border-radius:20px;padding:5px 13px;font-size:12.5px;color:#3a4152;text-decoration:none;transition:all .12s}
.setchip:hover{border-color:var(--stc,#4f46e5)}
.setchip.on{background:var(--stc,#4f46e5);border-color:var(--stc,#4f46e5);color:#fff;font-weight:700}
.setchip.off{opacity:.55}
.setchip .sc-dot{width:9px;height:9px;border-radius:50%;background:var(--stc,#4f46e5);flex-shrink:0}
.setchip.on .sc-dot{background:rgba(255,255,255,.85)}
.sc-off{font-size:9.5px;background:rgba(0,0,0,.08);border-radius:20px;padding:1px 6px}
.setchip-add{border-style:dashed;color:#78808e}
td .sc-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--stc,#4f46e5);margin-inline-end:6px}
/* بج چندبرچسبی روی پروندهٔ مشتری */
.state-badge{--stc:#4f46e5;background:color-mix(in srgb,var(--stc) 10%,#fff);border-color:color-mix(in srgb,var(--stc) 35%,#fff)}
.state-badge .sb-set{font-size:10px;color:var(--stc);font-weight:800;border-inline-end:1px solid color-mix(in srgb,var(--stc) 30%,#fff);padding-inline-end:6px}
.state-badge .sb-code{color:var(--stc)}
.state-badge .sb-num{color:color-mix(in srgb,var(--stc) 70%,#666);border-color:color-mix(in srgb,var(--stc) 30%,#fff)}
.state-cards-multi{display:flex;flex-direction:column;gap:12px}
.stm-item{border:1px solid var(--line,#e3e7ee);border-radius:11px;padding:11px 13px;background:#fcfdff;border-inline-start:3px solid var(--stc,#4f46e5)}
.stm-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.stm-name{font-size:12.5px;font-weight:800;color:var(--stc,#4f46e5)}
.sg-setname{background:rgba(255,255,255,.2);border-radius:6px;padding:1px 8px;font-size:11px;font-weight:700}
.vcp-setname{font-size:10px;color:#a7f3d0;font-weight:700}
/* دکمهٔ اقدام با رنگ انتخابی طراح (رنگ مسیر در طراح فرایند) */
.act-tile.tile-custom{
font-weight:800;
box-shadow:0 2px 8px rgba(16,24,40,.12);
filter:saturate(1.02);
}
.act-tile.tile-custom::after{ /* تولتیپ مقصد روی رنگ سفارشی هم خوانا بماند */
color:#fff;
}
.act-tile.tile-custom:hover{
filter:brightness(1.08) saturate(1.05);
transform:translateY(-1px);
}
.act-tile.tile-custom:active{ transform:translateY(0); filter:brightness(.96); }
/* نشان رنگ در پنل تنظیمات مسیر (هر دو طراح) */
.ec-palette{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.ec-swatch{
width:26px;height:26px;border-radius:8px;cursor:pointer;border:2px solid transparent;
box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transition:transform .12s,border-color .12s;
}
.ec-swatch:hover{transform:scale(1.12)}
.ec-swatch.on{border-color:#2e3440;transform:scale(1.12)}
.ec-swatch.ec-none{
background:repeating-linear-gradient(45deg,#fff,#fff 4px,#e9edf4 4px,#e9edf4 8px);
position:relative;
}
.ec-swatch.ec-none::after{content:'✕';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:#8a94a6}
/* زیرمنوی سطح دوم داخل دراپداون گروهی (تبهای تنظیمات) */
.dd-hassub { display: block; }
.dd-subrow { display: flex; align-items: stretch; gap: 2px; }
.dd-subrow > .dd-item { flex: 1 1 auto; min-width: 0; }
.dd-subtoggle {
flex: 0 0 auto; width: 30px; border: 0; background: transparent; cursor: pointer;
color: var(--muted); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
transition: background .15s, color .15s, transform .18s;
}
.dd-subtoggle:hover { background: #f2f4f7; color: var(--ink); }
.dd-hassub.open .dd-subtoggle { color: var(--orange); transform: rotate(180deg); }
.dd-subs { display: none; margin: 2px 0 4px; padding-inline-start: 10px; border-inline-start: 2px solid #eef1f7; }
.dd-hassub.open .dd-subs { display: block; }
.dropdown .dd-item.dd-sub {
display: flex; align-items: center; gap: 8px;
font-size: 12.5px; padding-block: 7px; color: var(--muted);
}
.dropdown .dd-item.dd-sub:hover { color: var(--ink); background: #f7f9fc; }
.dd-sub .dd-ic { display: inline-flex; opacity: .55; flex: 0 0 auto; }