/* ═══════════════════════════════════════════════════════
   QK CRM — سیستم طراحی
   پالت آبی–سفید · RTL · فونت ایران‌یکان‌ایکس محلی
   ═══════════════════════════════════════════════════════ */

@font-face {
	font-family: 'IRANYekanX';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/IRANYekanX-Regular.woff2') format('woff2'),
	     url('../fonts/IRANYekanX-Regular.woff') format('woff');
}
@font-face {
	font-family: 'IRANYekanX';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/IRANYekanX-Medium.woff2') format('woff2'),
	     url('../fonts/IRANYekanX-Medium.woff') format('woff');
}
@font-face {
	font-family: 'IRANYekanX';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/IRANYekanX-Bold.woff2') format('woff2'),
	     url('../fonts/IRANYekanX-Bold.woff') format('woff');
}
@font-face {
	font-family: 'IRANYekanX';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/IRANYekanX-ExtraBold.woff2') format('woff2'),
	     url('../fonts/IRANYekanX-ExtraBold.woff') format('woff');
}
@font-face {
	font-family: 'IRANYekanX';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('../fonts/IRANYekanX-Black.woff2') format('woff2'),
	     url('../fonts/IRANYekanX-Black.woff') format('woff');
}

:root {
	/* ── متن ── */
	--ink:        #0B1F3A;
	--ink-2:      #1C3557;
	--ink-3:      #3A5478;
	--muted:      #6B7F9E;
	--muted-2:    #94A8C4;

	/* ── سطح و خط ── */
	--bg:         #EEF3FA;
	--surface:    #FFFFFF;
	--surface-2:  #F6F9FE;
	--surface-3:  #EAF1FB;
	--line:       #DCE6F3;
	--line-2:     #C3D4E9;

	/* ── برند: سرمه‌ای عمیق ── */
	--brand:      #0A2447;
	--brand-2:    #113763;
	--brand-3:    #1B4E88;
	--brand-soft: #E4EDFA;

	/* ── تأکید: آبی روشن ── */
	--accent:      #1B6FE3;
	--accent-2:    #3F8BF0;
	--accent-3:    #0F55B8;
	--accent-soft: #E7F0FE;
	--accent-ring: rgba(27,111,227,.16);

	/* ── وضعیت ── */
	--ok:          #0E7C5A;
	--ok-bg:       #E6F7F0;
	--ok-line:     #A9E3CD;
	--warn:        #B4690E;
	--warn-bg:     #FFF6E6;
	--warn-line:   #F5D9A3;
	--danger:      #C62828;
	--danger-bg:   #FDECEC;
	--danger-line: #F3C0C0;
	--info:        #1B6FE3;
	--info-bg:     #E7F0FE;
	--info-line:   #B9D3F8;
	--dead:        #6B7F9E;
	--dead-bg:     #EEF3FA;

	/* ── هندسه ── */
	--r-sm: 8px;
	--r:    12px;
	--r-lg: 18px;
	--sh:    0 1px 2px rgba(11,31,58,.05), 0 4px 14px rgba(11,31,58,.06);
	--sh-lg: 0 10px 36px rgba(11,31,58,.18);

	--nav-w:  248px;
	--head-h: 60px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body.qk-body {
	font-family: 'IRANYekanX', 'Vazirmatn', 'IRANSans', Tahoma, sans-serif;
	background: var(--bg);
	color: var(--ink);
	font-size: 14px;
	line-height: 1.8;
	direction: rtl;
	font-variant-numeric: tabular-nums;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
}

a { color: var(--accent-3); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 14px; }

/* ═══════ صفحه ورود ═══════ */

.qk-gate {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 24px;
	background:
		radial-gradient(760px 420px at 82% -8%, #1B4E88 0%, transparent 62%),
		radial-gradient(620px 380px at 8% 108%, #113763 0%, transparent 60%),
		linear-gradient(158deg, #0A2447, #123763);
}
.qk-gate-card {
	width: 100%;
	max-width: 380px;
	background: var(--surface);
	border-radius: var(--r-lg);
	padding: 40px 28px;
	text-align: center;
	box-shadow: var(--sh-lg);
}
.qk-gate-logo {
	width: 64px; height: 64px;
	margin: 0 auto 18px;
	border-radius: 18px;
	display: grid; place-items: center;
	background: linear-gradient(140deg, var(--accent), var(--brand-3));
	color: #fff; font-weight: 700; font-size: 22px;
	box-shadow: 0 6px 18px var(--accent-ring);
}
.qk-gate-card h1 { margin: 0 0 4px; font-size: 20px; font-weight: 700; }
.qk-gate-sub { margin: 0 0 24px; color: var(--muted); font-size: 13px; }
.qk-gate-msg {
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 14px;
	font-size: 13px;
	color: var(--ink-3);
	margin-bottom: 18px;
}
.qk-gate-err { background: var(--danger-bg); border-color: var(--danger-line); color: #8E1F1F; }

.qk-gate-card .qk-field { text-align: right; }
.qk-gate-card .qk-btn-block { margin-top: 6px; }
.qk-gate-alt {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--line);
	font-size: 12.5px;
	color: var(--muted);
}
.qk-linkbtn {
	border: 0;
	background: none;
	color: var(--accent-3);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 500;
	padding: 2px 4px;
}
.qk-linkbtn:hover { text-decoration: underline; }
#qk-auth-msg .qk-alert { text-align: right; margin-bottom: 16px; }

/* ═══════ بارگذاری ═══════ */

.qk-boot {
	min-height: 100vh;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 16px;
	color: var(--muted);
}
.qk-boot-spin {
	width: 34px; height: 34px;
	border: 3px solid var(--line);
	border-top-color: var(--accent);
	border-radius: 50%;
	animation: qk-spin .8s linear infinite;
}
@keyframes qk-spin { to { transform: rotate(360deg); } }

/* ═══════ چیدمان ═══════ */

.qk-shell { display: flex; min-height: 100vh; }

.qk-nav {
	width: var(--nav-w);
	flex: 0 0 var(--nav-w);
	background: linear-gradient(180deg, var(--brand), var(--brand-2));
	color: #C7D8EE;
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 0;
	height: 100vh;
	overflow-y: auto;
}
.qk-nav-head {
	padding: 20px 18px 16px;
	border-bottom: 1px solid rgba(255,255,255,.10);
}
.qk-nav-brand { color: #fff; font-weight: 700; font-size: 15px; }
.qk-nav-me { font-size: 12px; color: #8FA9CA; margin-top: 4px; }
.qk-nav-role {
	display: inline-block;
	margin-top: 8px;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(63,139,240,.22);
	color: #A9CCFA;
	font-size: 11px;
}
.qk-nav-list { padding: 10px 10px 20px; flex: 1; }
.qk-nav-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: var(--r-sm);
	font-size: 13.5px;
	color: #C7D8EE;
	margin-bottom: 2px;
	border: 0;
	background: none;
	width: 100%;
	text-align: right;
	transition: background .15s, color .15s;
}
.qk-nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.qk-nav-item.on {
	background: linear-gradient(90deg, rgba(27,111,227,.42), rgba(27,111,227,.16));
	color: #fff;
	font-weight: 500;
	box-shadow: inset 3px 0 0 var(--accent-2);
}
.qk-nav-ico {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	display: grid;
	place-items: center;
	opacity: .9;
	text-align: center;
}

/* نشانه‌ی خطی — رنگش را از متنِ همان دکمه می‌گیرد، پس همه‌جا هماهنگ است. */
.qk-ico { width: 100%; height: 100%; display: block; }
.qk-ico-t { font-size: 15px; line-height: 1; }
.qk-nav-badge {
	margin-inline-start: auto;
	background: var(--danger);
	color: #fff;
	font-size: 11px;
	padding: 1px 7px;
	border-radius: 999px;
}
.qk-nav-foot {
	padding: 14px 16px;
	border-top: 1px solid rgba(255,255,255,.10);
	font-size: 12px;
}
.qk-nav-foot a { color: #8FA9CA; }
.qk-nav-foot a:hover { color: #fff; }
/* نسخه، برای اینکه بشود مطمئن شد به‌روزرسانی نشسته است. */
.qk-ver { margin-top: 6px; font-size: 10.5px; color: #6E86A8; letter-spacing: .02em; }

.qk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.qk-head {
	height: var(--head-h);
	background: var(--surface);
	border-bottom: 1px solid var(--line);
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 20px;
	position: sticky;
	top: 0;
	z-index: 30;
}
.qk-head h2 { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); }
.qk-head-sp { flex: 1; }
.qk-burger { display: none; background: none; border: 0; font-size: 20px; padding: 4px 8px; color: var(--ink-2); }

.qk-content { padding: 20px; flex: 1; max-width: 1400px; width: 100%; }

/* ═══════ کارت ═══════ */

.qk-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	box-shadow: var(--sh);
	margin-bottom: 16px;
	overflow: hidden;
}
.qk-card-head {
	padding: 14px 16px;
	border-bottom: 1px solid var(--line);
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--surface-2);
}
.qk-card-head h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.qk-card-body { padding: 16px; }
.qk-card-body.tight { padding: 0; }

/* ═══════ شبکه ═══════ */

.qk-grid { display: grid; gap: 14px; }
.qk-g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.qk-g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.qk-g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

/* ═══════ آمار ═══════ */

.qk-stat {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 14px 16px;
	box-shadow: var(--sh);
	position: relative;
	overflow: hidden;
}
.qk-stat::before {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	inset-block: 0;
	width: 3px;
	background: var(--accent);
	opacity: .55;
}
.qk-stat-label { font-size: 12px; color: var(--muted); }
/*
 * عددِ بلند از کارت بیرون نمی‌زند (۱.۸۳).
 *
 * «۷,۰۰۰,۰۰۰,۰۰۰» با ۲۲ پیکسل در کارتی ۱۵۰ پیکسلی (چهار کارت کنار ستونِ
 * کناری پرونده) روی کارت بغلی می‌افتاد — مالک: «باکس اعداد توی هم شده».
 */
.qk-stat { min-width: 0; }
.qk-stat-value { font-size: 22px; font-weight: 700; margin-top: 4px; color: var(--ink); line-height: 1.35; overflow-wrap: anywhere; }
.qk-stat-value small { font-size: 13px; font-weight: 500; color: var(--muted-2); }
.qk-stat-sub { font-size: 11.5px; color: var(--muted-2); margin-top: 2px; }


/* ═══════ کاشی‌های داشبورد ═══════ */

/*
 * هر کاری که کاربر اجازه‌اش را دارد، روی خودِ صفحه‌ی اول.
 *
 * منوی کناری روی گوشی بسته است و روی رایانه فهرستی از نوشته‌هاست؛ برای
 * پیدا کردن یک کار باید خط‌به‌خط خواند. کاشی‌ها با نشانه و فاصله‌ی زیاد،
 * هم زودتر پیدا می‌شوند هم با انگشت راحت‌تر زده می‌شوند.
 */
.qk-apps { margin-bottom: 18px; }

.qk-apps-cap {
	font-size: 12px;
	font-weight: 600;
	color: var(--muted);
	margin: 0 2px 8px;
}

.qk-apps-cap:not(:first-child) { margin-top: 16px; }

.qk-apps-row {
	display: grid;
	/* روی هر عرضی، کاشی‌ها هم‌اندازه می‌مانند و ردیف آخر کِش نمی‌آید. */
	grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
	gap: 10px;
}

.qk-app {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	padding: 14px 8px 12px;
	min-height: 96px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--surface);
	box-shadow: var(--sh);
	color: var(--ink);
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform .12s, box-shadow .12s, border-color .12s;
}

.qk-app:hover {
	transform: translateY(-2px);
	border-color: var(--accent);
	box-shadow: 0 6px 16px rgba(11,31,58,.10);
}

.qk-app:active { transform: none; }

.qk-app:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.qk-app-ico {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 13px;
	background: var(--info-bg, #E7F0FE);
	color: var(--accent, #1B6FE3);
}

/*
 * رنگِ هر دسته.
 *
 * با بیست‌وپنج کاشی، اسم‌خواندن کُند است؛ رنگ می‌گوید «این کار مالی
 * است» یا «این تنظیمات است» پیش از آنکه چشم به نوشته برسد. همان رنگ در
 * ردیفِ پرکاربردها هم با کاشی می‌آید تا جایش عوض شود، معنایش نه.
 */
.qk-app.t-money .qk-app-ico   { background: var(--ok-bg, #E6F6EE);     color: var(--ok, #118A52); }
.qk-app.t-admin .qk-app-ico   { background: #FFF1E3;                   color: #C2681B; }
.qk-app.t-sections .qk-app-ico { background: #E2F3F5;                  color: #0F6E7B; }

/* ── جست‌وجوی کارها ── */

.qk-apps-find { position: relative; margin-bottom: 14px; }

.qk-apps-find .qk-input {
	width: 100%;
	padding-inline-start: 38px;
}

.qk-apps-find-i {
	position: absolute;
	inset-inline-start: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	color: var(--muted);
	pointer-events: none;
}

.qk-apps-none {
	padding: 14px 16px;
	border: 1px dashed var(--line-2, var(--line));
	border-radius: var(--r);
	color: var(--muted);
	font-size: 13px;
}

.qk-app-ico .qk-ico { width: 24px; height: 24px; }

.qk-app-t { display: block; }

/* عددِ منتظرِ کار — همان نشانی که کنار منو هم می‌نشیند. */
.qk-app .qk-nav-badge {
	position: absolute;
	top: 8px;
	inset-inline-end: 8px;
	margin: 0;
}

@media (max-width: 640px) {
	.qk-apps-row { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
	.qk-app { min-height: 88px; padding: 12px 6px 10px; font-size: 11.5px; }
	.qk-app-ico { width: 38px; height: 38px; border-radius: 11px; }
	.qk-app-ico .qk-ico { width: 21px; height: 21px; }
}

/* ═══════ دکمه ═══════ */

.qk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 9px 16px;
	border-radius: var(--r-sm);
	border: 1px solid var(--line-2);
	background: var(--surface);
	color: var(--ink-2);
	font-size: 13px;
	font-weight: 500;
	transition: .15s;
	white-space: nowrap;
}
.qk-btn:hover { background: var(--surface-3); border-color: var(--accent-2); color: var(--accent-3); }
.qk-btn:disabled { opacity: .5; cursor: not-allowed; }
.qk-btn:disabled:hover { background: var(--surface); border-color: var(--line-2); color: var(--ink-2); }

.qk-btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.qk-btn-primary:hover { background: var(--brand-3); border-color: var(--brand-3); color: #fff; }

.qk-btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 2px 8px var(--accent-ring); }
.qk-btn-accent:hover { background: var(--accent-3); border-color: var(--accent-3); color: #fff; }

.qk-btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.qk-btn-danger:hover { background: #A81F1F; border-color: #A81F1F; color: #fff; }

.qk-btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.qk-btn-ghost:hover { background: var(--surface-3); border-color: transparent; }

.qk-btn-sm { padding: 5px 11px; font-size: 12px; }
.qk-btn-block { width: 100%; }

/* ═══════ فرم ═══════ */

.qk-field { margin-bottom: 14px; }
.qk-label {
	display: block;
	font-size: 12.5px;
	color: var(--ink-3);
	margin-bottom: 5px;
	font-weight: 500;
}
.qk-label .req { color: var(--danger); margin-inline-start: 2px; }

.qk-input, .qk-select, .qk-textarea {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--line-2);
	border-radius: var(--r-sm);
	background: var(--surface);
	color: var(--ink);
	transition: border-color .15s, box-shadow .15s;
}
.qk-input:hover, .qk-select:hover, .qk-textarea:hover { border-color: var(--accent-2); }
.qk-input:focus, .qk-select:focus, .qk-textarea:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-ring);
}
.qk-input:disabled, .qk-select:disabled, .qk-textarea:disabled {
	background: var(--surface-2);
	color: var(--muted);
	border-color: var(--line);
}
.qk-textarea { min-height: 84px; resize: vertical; line-height: 1.9; }
.qk-hint { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.qk-err-text { font-size: 11.5px; color: var(--danger); margin-top: 4px; }
.qk-money { text-align: left; direction: ltr; font-weight: 500; }
/* ۱.۹۰.۴ — «ریال» کنارِ هر خانه‌ی مبلغ؛ عدد از چپ می‌نشیند و واحد در راستِ دیگر. */
.qk-mi { position: relative; display: block; }
.qk-mi .qk-input { padding-right: 46px; }
.qk-mi > i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 11.5px; color: var(--muted); pointer-events: none; }
.qk-ltr { direction: ltr; text-align: left; }

.qk-check {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	cursor: pointer;
	padding: 7px 0;
}
.qk-check input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }

/* ═══════ پیوست درخواست ═══════ */
.qk-tk-files {
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 10px 12px;
	margin-bottom: 12px;
}
.qk-tk-files-h {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
	font-size: 13px;
}
.qk-tk-up { cursor: pointer; }
.qk-tk-files-l { display: grid; gap: 5px; }
.qk-tk-file {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 12.5px;
	padding: 5px 8px;
	border-radius: 7px;
	background: var(--bg);
}
.qk-tk-file > a { flex: 1; min-width: 140px; text-decoration: none; color: var(--accent); }
.qk-tk-file > span { font-size: 11px; }

/* متن پترن، همان‌طور که باید ثبت شود — با شکست خطها. */
.qk-pat {
	margin: 0;
	font-family: inherit;
	font-size: 12px;
	line-height: 1.8;
	white-space: pre-wrap;
	background: var(--bg);
	padding: 6px 8px;
	border-radius: 6px;
}

/* ═══════ یادآورها و گیرندگانشان ═══════ */
.qk-remind-k {
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 10px 12px;
	margin-bottom: 10px;
}
.qk-remind-h { font-size: 13px; margin-bottom: 8px; }
.qk-remind-rows { display: grid; gap: 4px; margin-bottom: 8px; }
.qk-remind-row {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	padding: 5px 8px;
	border-radius: 7px;
	background: var(--bg);
}
.qk-remind-row > span:first-child { flex: 1; }
.qk-remind-sms {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	color: var(--muted);
	cursor: pointer;
}
.qk-remind-add { max-width: 280px; }

/* ═══════ مسیر ارجاع تیکت ═══════ */
.qk-tk-chain {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--line);
}
.qk-tk-chain-h {
	font-size: 12px;
	color: var(--muted);
	margin-bottom: 6px;
}
.qk-tk-hop {
	position: relative;
	padding: 5px 14px 5px 0;
	font-size: 12.5px;
	line-height: 1.7;
}
/* خطِ عمودیِ زنجیره — تا پله‌ها یک مسیر دیده شوند، نه چند سطر جدا. */
.qk-tk-hop::before {
	content: '';
	position: absolute;
	inset-inline-start: 4px;
	top: 12px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--accent);
}
.qk-tk-hop:not(:last-child)::after {
	content: '';
	position: absolute;
	inset-inline-start: 6px;
	top: 19px;
	bottom: -5px;
	width: 1px;
	background: var(--line);
}
.qk-tk-hop-w { font-weight: 600; }
.qk-tk-hop-t { color: var(--muted); font-size: 11px; margin-inline-start: 6px; }
.qk-tk-hop-n { color: var(--muted); font-size: 12px; }

/* ═══════ خبرِ دو سامانه‌ی دیگر روی پرونده ═══════ */
.qk-links {
	margin-top: 12px;
	border-top: 1px solid var(--line);
	padding-top: 10px;
	display: grid;
	gap: 7px;
}
.qk-link-row {
	display: flex;
	gap: 10px;
	align-items: baseline;
	flex-wrap: wrap;
	font-size: 13px;
}
.qk-link-k {
	flex: 0 0 82px;
	color: var(--muted);
	font-size: 12px;
}
.qk-link-v { flex: 1; min-width: 0; }
.qk-link-go {
	font-size: 12px;
	text-decoration: none;
	color: var(--accent);
	white-space: nowrap;
}
.qk-link-go:hover { text-decoration: underline; }

/*
 * متن کم‌رنگ.
 *
 * تا امروز هر جا لازم می‌شد، style درجا نوشته می‌شد — که یعنی رنگِ
 * «کم‌اهمیت» در بیست جا بیست بار تکرار شده و هیچ‌کدام با هم عوض
 * نمی‌شوند.
 */
.qk-muted { color: var(--muted); }

/* گروه انتخاب چندتایی — دو ستون تا فهرست بلندِ نقش‌ها صفحه را نکشد. */
.qk-checks {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 14px;
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 4px 10px;
}
.qk-checks .qk-check { padding: 6px 0; }
@media (max-width: 560px) {
	.qk-checks { grid-template-columns: 1fr; }
}

/* ═══════ جدول ═══════ */

.qk-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.qk-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.qk-table th {
	background: var(--surface-3);
	padding: 10px 12px;
	text-align: right;
	font-weight: 500;
	color: var(--ink-3);
	border-bottom: 1px solid var(--line-2);
	white-space: nowrap;
	font-size: 12.5px;
}
.qk-table td {
	padding: 11px 12px;
	border-bottom: 1px solid var(--line);
	vertical-align: middle;
}
.qk-table tbody tr:last-child td { border-bottom: 0; }
.qk-table tbody tr:hover { background: var(--surface-2); }
.qk-table tbody tr.clickable { cursor: pointer; }
.qk-table tbody tr.clickable:hover { background: var(--accent-soft); }
.qk-table .num { direction: ltr; text-align: left; }

/* ═══════ نشان ═══════ */

.qk-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 500;
	white-space: nowrap;
	border: 1px solid transparent;
}
.qk-badge.ok     { background: var(--ok-bg);     color: var(--ok);     border-color: var(--ok-line); }
.qk-badge.warn   { background: var(--warn-bg);   color: var(--warn);   border-color: var(--warn-line); }
.qk-badge.info   { background: var(--info-bg);   color: var(--info);   border-color: var(--info-line); }
.qk-badge.dead   { background: var(--dead-bg);   color: var(--dead);   border-color: var(--line-2); }
.qk-badge.done   { background: var(--ok-bg);     color: var(--ok);     border-color: var(--ok-line); }
.qk-badge.danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); }

/* ═══════ مهلت ═══════ */

.qk-deadline {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	padding: 3px 9px;
	border-radius: 999px;
	border: 1px solid transparent;
}
.qk-deadline.safe   { background: var(--ok-bg);     color: var(--ok);     border-color: var(--ok-line); }
.qk-deadline.soon   { background: var(--warn-bg);   color: var(--warn);   border-color: var(--warn-line); }
.qk-deadline.urgent { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); font-weight: 500; }
.qk-deadline.over   { background: var(--danger);    color: #fff; }

/* ═══════ هشدار ═══════ */

.qk-alert {
	border-radius: var(--r);
	padding: 13px 15px;
	font-size: 13px;
	margin-bottom: 14px;
	border: 1px solid;
	line-height: 1.9;
}
.qk-alert.warn   { background: var(--warn-bg);   border-color: var(--warn-line);   color: #8A5109; }
.qk-alert.danger { background: var(--danger-bg); border-color: var(--danger-line); color: #8E1F1F; }
.qk-alert.info   { background: var(--info-bg);   border-color: var(--info-line);   color: var(--accent-3); }
.qk-alert.ok     { background: var(--ok-bg);     border-color: var(--ok-line);     color: #0A5C43; }
.qk-alert.dead   { background: var(--dead-bg);   border-color: var(--line-2);      color: var(--ink-3); }

/* ═══════ تب ═══════ */

.qk-tabs {
	display: flex;
	gap: 2px;
	border-bottom: 1px solid var(--line);
	overflow-x: auto;
	background: var(--surface);
	padding: 6px 8px;
	scroll-behavior: smooth;
	scroll-padding-inline: 24px;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.qk-tabs::-webkit-scrollbar { display: none; }

/*
 * وقتی تب‌ها از عرض صفحه بیشتر شوند، دو لبه محو می‌شوند تا معلوم باشد
 * چیزی آن‌طرف هست. مدیر کل ده تب دارد و روی گوشی نصفشان بیرون کادرند؛
 * بدون این نشانه کاربر اصلاً نمی‌فهمد می‌تواند بکشد.
 */
.qk-tabs.is-scroll {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
}
.qk-tab {
	padding: 11px 15px;
	border: 0;
	background: none;
	font-size: 13px;
	color: var(--muted);
	border-bottom: 2px solid transparent;
	white-space: nowrap;
	transition: .15s;
}
.qk-tab:hover { color: var(--accent-3); background: var(--surface-2); }
.qk-tab.on { color: var(--accent-3); border-bottom-color: var(--accent); font-weight: 600; }
.qk-tab-lock { opacity: .45; }

/* دلیلِ غیرفعال بودن دکمه‌ی اصلی، کنار خودش — نه فقط در tooltip (UX-2) */
.qk-why {
	display: inline-block;
	margin-inline-start: 8px;
	max-width: 46ch;
	font-size: 12px;
	line-height: 1.6;
	color: var(--muted);
	vertical-align: middle;
}

/* فرمی که مرحله‌اش نرسیده — دیده می‌شود ولی با کار حالا اشتباه گرفته نمی‌شود (UX-5) */
.qk-form-closed td { opacity: .6; }
.qk-form-closed td:last-child { opacity: 1; }
.qk-open-note {
	display: block;
	margin-top: 3px;
	font-size: 11px;
	color: var(--muted);
}

/* شماره کوتاه پرونده کنار نام مشتری — برای گفتن پشت تلفن */
.qk-deal-no {
	display: inline-block;
	margin-inline-start: 8px;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--surface-2);
	border: 1px solid var(--line);
	color: var(--accent-3);
	font-size: 13px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	vertical-align: middle;
}

/* ═══════ زیرتب‌های پیوست‌ها ═══════ */

.qk-subtabs {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}
.qk-subtab {
	padding: 7px 14px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface);
	color: var(--muted);
	font-size: 12.5px;
	font-family: inherit;
	cursor: pointer;
	transition: .15s;
}
.qk-subtab:hover { border-color: var(--accent); color: var(--accent-3); }
.qk-subtab.on {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
	font-weight: 600;
}

/*
 * ═══════ آکاردئون بخش‌های پرونده ═══════
 *
 * پنج دپارتمان زیر یک تب. بخشِ خودِ کاربر باز است و بقیه بسته —
 * دیده می‌شوند که هستند، ولی جلوی چشم را نمی‌گیرند.
 */

.qk-acc { display: flex; flex-direction: column; gap: 10px; }

.qk-acc-item {
	border: 1px solid var(--line);
	border-radius: 12px;
	overflow: hidden;
	background: var(--surface);
}
.qk-acc-item.is-open { border-color: var(--accent); }

.qk-acc-head {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 15px;
	border: 0;
	background: var(--surface-2);
	font-family: inherit;
	font-size: 13.5px;
	color: var(--ink);
	text-align: start;
	cursor: pointer;
	transition: .15s;
}
.qk-acc-head:hover { background: var(--line); }
.qk-acc-item.is-open .qk-acc-head { background: var(--surface); font-weight: 600; }

.qk-acc-ico { font-size: 15px; line-height: 1; }
.qk-acc-name { flex: 1; }

.qk-acc-tag {
	font-size: 11px;
	font-weight: 700;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--accent);
	color: #fff;
}
.qk-acc-lock { opacity: .5; font-size: 12px; }

.qk-acc-arrow {
	font-size: 11px;
	color: var(--muted);
	transition: transform .18s;
}
.qk-acc-item.is-open .qk-acc-arrow { transform: rotate(180deg); }

.qk-acc-body:not(:empty) { padding: 16px 15px 18px; }

@media (prefers-reduced-motion: reduce) {
	.qk-acc-arrow, .qk-subtab, .qk-acc-head { transition: none; }
}

/* ═══════ فیلتر ═══════ */

.qk-filters {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 14px;
}
.qk-filters .qk-input, .qk-filters .qk-select { width: auto; min-width: 150px; }
.qk-search { flex: 1; min-width: 200px !important; }

/* ═══════ مودال ═══════ */

.qk-modal-bg {
	position: fixed;
	inset: 0;
	background: rgba(10,36,71,.58);
	display: grid;
	place-items: center;
	z-index: 200;
	padding: 16px;
	overflow-y: auto;
}
.qk-modal {
	background: var(--surface);
	border-radius: var(--r-lg);
	width: 100%;
	max-width: 560px;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: var(--sh-lg);
	margin: auto;
}
.qk-modal.wide { max-width: 860px; }
.qk-modal-head {
	padding: 16px 20px;
	border-bottom: 1px solid var(--line);
	display: flex;
	align-items: center;
	position: sticky;
	top: 0;
	background: var(--surface);
	z-index: 2;
}
.qk-modal-head h3 { margin: 0; font-size: 15px; flex: 1; font-weight: 600; color: var(--ink); }
.qk-modal-x { border: 0; background: none; font-size: 22px; color: var(--muted); line-height: 1; padding: 0 4px; }
.qk-modal-x:hover { color: var(--danger); }
.qk-modal-body { padding: 20px; }
.qk-modal-foot {
	padding: 14px 20px;
	border-top: 1px solid var(--line);
	display: flex;
	gap: 8px;
	justify-content: flex-start;
	position: sticky;
	bottom: 0;
	background: var(--surface);
}

/* ═══════ فهرست تعریف ═══════ */

.qk-dl { display: grid; grid-template-columns: 130px 1fr; gap: 8px 14px; font-size: 13px; }
.qk-dl dt { color: var(--muted); }
.qk-dl dd { margin: 0; color: var(--ink-2); }

/* ═══════ خط زمان ═══════ */

.qk-timeline { position: relative; padding-inline-start: 22px; }
.qk-timeline::before {
	content: '';
	position: absolute;
	inset-inline-start: 5px;
	top: 6px;
	bottom: 6px;
	width: 2px;
	background: var(--line-2);
}
.qk-tl-item { position: relative; padding-bottom: 16px; }
.qk-tl-item::before {
	content: '';
	position: absolute;
	inset-inline-start: -21px;
	top: 6px;
	width: 10px; height: 10px;
	border-radius: 50%;
	background: var(--line-2);
	border: 2px solid var(--surface);
	box-shadow: 0 0 0 2px var(--line-2);
}
.qk-tl-item.on::before { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.qk-tl-title { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.qk-tl-meta { font-size: 11.5px; color: var(--muted); }

/* ═══════ چک‌لیست مدارک ═══════ */

.qk-doc-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 0;
	border-bottom: 1px solid var(--line);
}
.qk-doc-row:last-child { border-bottom: 0; }
.qk-doc-name { flex: 1; font-size: 13px; }
/* ۱.۹۹.۱: عوض کردن نام مدرک از روی پرونده (فقط آی‌تی) */
.qk-rename { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 2px 6px; border-radius: 6px; vertical-align: middle; }
.qk-rename:hover { background: var(--line); color: var(--ink, inherit); }
/* ۱.۹۹.۱: دوربینِ داخل صفحه برای عکسِ مدرک */
.qk-cam { position: fixed; inset: 0; z-index: 100000; background: #000; display: flex; flex-direction: column; }
.qk-cam video { flex: 1; min-height: 0; width: 100%; object-fit: contain; background: #000; }
.qk-cam.flash video { opacity: .35; }
.qk-cam-msg { position: absolute; top: 18px; inset-inline: 16px; background: rgba(0,0,0,.72); color: #fff; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; line-height: 1.9; text-align: center; }
.qk-cam-strip { display: flex; gap: 8px; overflow-x: auto; padding: 8px 12px 0; min-height: 0; }
.qk-cam-th { position: relative; flex: none; }
.qk-cam-th img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 2px solid #fff; display: block; }
.qk-cam-th button { position: absolute; top: -6px; inset-inline-end: -6px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: #e5484d; color: #fff; font-size: 15px; line-height: 1; }
.qk-cam-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); }
.qk-cam-btn { min-width: 96px; min-height: 44px; border-radius: 22px; border: 1px solid rgba(255,255,255,.5); background: transparent; color: #fff; font: inherit; font-size: 14px; }
.qk-cam-done { background: #2563eb; border-color: #2563eb; }
.qk-cam-done:disabled { opacity: .45; background: transparent; border-color: rgba(255,255,255,.5); }
.qk-cam-shoot { width: 72px; height: 72px; border-radius: 50%; border: 5px solid #fff; background: rgba(255,255,255,.25); flex: none; }
.qk-cam-shoot:active { background: #fff; }
/*
 * ۱.۹۹.۱: روی گوشی نامِ مدرک یک سطرِ کامل می‌گیرد و دکمه‌ها زیرش.
 * با سه دکمه (عکس، فایل، تأیید بدون فایل) نام در ستونی باریک کلمه‌به‌کلمه می‌شکست.
 */
@media (max-width: 560px) {
	.qk-doc-block .qk-doc-row { flex-wrap: wrap; }
	.qk-doc-block .qk-doc-row > .qk-doc-name { flex: 1 1 calc(100% - 40px); min-width: 0; }
	.qk-doc-block .qk-doc-row > .qk-actions { flex: 1 1 100%; flex-direction: row; }
	.qk-doc-block .qk-doc-row > .qk-actions .qk-btn { flex: 1 1 calc(50% - 4px); min-width: 0; min-height: 42px; }
}
.qk-cam-native { position: absolute; top: calc(12px + env(safe-area-inset-top)); inset-inline-start: 12px; border: 0; border-radius: 16px; padding: 7px 12px; background: rgba(0,0,0,.55); color: #fff; font: inherit; font-size: 12.5px; }
.qk-doc-meta { font-size: 11px; color: var(--muted-2); }

/* ── پیوست‌های چندگانه ── */
.qk-doc-block { border-bottom: 1px solid var(--line); padding: 4px 0; }
.qk-doc-block:last-child { border-bottom: 0; }
.qk-doc-block .qk-doc-row { border-bottom: 0; align-items: flex-start; }
.qk-doc-block.need .qk-doc-row { background: var(--warn-bg); border-radius: var(--r-sm); }

.qk-doc-mark {
	width: 20px; height: 20px;
	flex: 0 0 20px;
	border-radius: 6px;
	display: grid;
	place-items: center;
	font-size: 12px;
	margin-top: 2px;
}
.qk-doc-mark.done { background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-line); }
.qk-doc-mark.todo { background: #fff; border: 1px dashed var(--line-2); }
.qk-doc-mark.opt  { background: var(--surface-3); color: var(--muted); }

/* کارت فایل — باید در یک نگاه معلوم باشد چه چیزی بارگذاری شده */
.qk-fc-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 8px;
	padding: 4px 0 12px;
	padding-inline-start: 30px;
}
.qk-fc {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 6px;
	background: var(--surface-2);
	cursor: pointer;
	transition: .15s;
	min-width: 0;
}
.qk-fc:hover { border-color: var(--accent-2); background: var(--accent-soft); }
.qk-fc-thumb {
	width: 44px; height: 44px;
	flex: 0 0 44px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--surface-3);
	display: grid;
	place-items: center;
}
.qk-fc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qk-fc-ico {
	font-size: 10px;
	font-weight: 700;
	color: var(--danger);
	letter-spacing: .5px;
}
.qk-fc-body { flex: 1; min-width: 0; }
.qk-fc-name {
	font-size: 12px;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	direction: ltr;
	text-align: right;
}
.qk-fc-meta { font-size: 10.5px; color: var(--muted-2); }
.qk-fc-act { display: flex; flex-direction: column; gap: 2px; }
.qk-fc-act a, .qk-fc-act button {
	border: 0;
	background: none;
	color: var(--muted);
	font-size: 14px;
	line-height: 1;
	padding: 2px 4px;
	text-decoration: none;
}
.qk-fc-act a:hover { color: var(--accent); }
.qk-fc-act button:hover { color: var(--danger); }

/* ═══════ خالی و بارگذاری ═══════ */

.qk-empty {
	text-align: center;
	padding: 46px 20px;
	color: var(--muted);
	font-size: 13px;
}
.qk-empty-ico { font-size: 34px; opacity: .28; margin-bottom: 8px; }
.qk-loading { text-align: center; padding: 34px; color: var(--muted); font-size: 13px; }

.qk-pager {
	display: flex;
	gap: 6px;
	align-items: center;
	justify-content: center;
	padding: 14px;
	font-size: 13px;
	border-top: 1px solid var(--line);
}

/* ═══════ نان ═══════ */

.qk-toast-wrap {
	position: fixed;
	bottom: 18px;
	inset-inline-start: 18px;
	z-index: 500;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.qk-toast {
	background: var(--brand);
	color: #fff;
	padding: 11px 16px;
	border-radius: var(--r-sm);
	font-size: 13px;
	box-shadow: var(--sh-lg);
	max-width: 340px;
	animation: qk-in .2s ease;
}
.qk-toast.err { background: var(--danger); }
.qk-toast.ok  { background: var(--ok); }
.qk-toast.warn { background: var(--warn); }
@keyframes qk-in { from { opacity: 0; transform: translateY(8px); } }

/* ═══════ اعلان ═══════ */

.qk-notif-btn { position: relative; border: 0; background: none; font-size: 19px; padding: 5px 8px; }
.qk-notif-dot {
	position: absolute;
	top: 2px; inset-inline-end: 2px;
	min-width: 16px;
	height: 16px;
	background: var(--danger);
	color: #fff;
	border-radius: 999px;
	font-size: 10px;
	display: grid;
	place-items: center;
	padding: 0 4px;
}
.qk-notif-pop {
	position: absolute;
	top: calc(var(--head-h) - 6px);
	inset-inline-end: 16px;
	width: 330px;
	max-height: 420px;
	overflow-y: auto;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	box-shadow: var(--sh-lg);
	z-index: 90;
}
.qk-notif-item { padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.qk-notif-item:hover { background: var(--surface-2); }
.qk-notif-item.unseen { background: var(--accent-soft); }
.qk-notif-item b { display: block; font-size: 13px; margin-bottom: 2px; font-weight: 600; color: var(--ink-2); }
.qk-notif-time { color: var(--muted-2); font-size: 11px; margin-top: 3px; }

/* ═══════ نوار پیشرفت ═══════ */

.qk-bar { height: 7px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.qk-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 999px; }

/* ═══════ قفل کاربر ═══════ */

.qk-locked-banner {
	background: linear-gradient(135deg, #8E1F1F, var(--danger));
	color: #fff;
	padding: 13px 20px;
	font-size: 13px;
	line-height: 1.9;
}
.qk-locked-banner b { display: block; font-size: 14px; }

/* ═══════ واکنش‌گرا ═══════ */

@media (max-width: 1100px) {
	.qk-g4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.qk-g3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 900px) {
	/*
	 * کشو به لبه راست می‌چسبد و از همان‌جا بیرون می‌رود.
	 *
	 * قبلاً inset-inline-end بود که در چیدمان راست‌چین یعنی لبه چپ؛
	 * ترنسفورم هم به‌جای پنهان‌کردن، کشو را نصفه وسط صفحه می‌آورد.
	 * translateX جهت‌آگاه نیست، پس لبه و جهت باید با هم بخوانند.
	 */
	.qk-nav {
		position: fixed;
		inset-block: 0;
		inset-inline-start: 0;
		z-index: 120;
		transform: translateX(100%);
		transition: transform .22s ease;
		box-shadow: var(--sh-lg);
	}
	body.qk-nav-open .qk-nav { transform: translateX(0); }
	.qk-burger { display: block; }
	.qk-content { padding: 14px; }
	.qk-g2, .qk-g3, .qk-g4 { grid-template-columns: 1fr; }
	.qk-dl { grid-template-columns: 110px 1fr; }
	.qk-notif-pop { inset-inline: 10px auto; width: calc(100vw - 20px); max-width: 340px; }
	.qk-filters .qk-input, .qk-filters .qk-select { min-width: 0; flex: 1 1 130px; }
	.qk-head h2 { font-size: 14px; }
	.qk-modal-body { padding: 16px; }

	/* نوار تب زیر سربرگ می‌چسبد تا با اسکرول محتوا گم نشود. */
	.qk-tabs {
		position: sticky;
		top: var(--head-h);
		z-index: 20;
		padding: 0 4px;
		box-shadow: 0 1px 0 var(--line);
	}
	.qk-tab { padding: 10px 12px; font-size: 12.5px; }
}

/* ═══════ جدول کارتی روی موبایل ═══════
   زیر ۶۴۰ پیکسل هر ردیف یک کارت می‌شود و نام ستون کنار مقدار
   می‌آید. جدول‌های افقی روی گوشی عملاً غیرقابل استفاده‌اند. */

@media (max-width: 640px) {
	.qk-table-wrap { overflow: visible; }
	.qk-table { display: block; }
	.qk-table thead { display: none; }
	.qk-table tbody { display: block; }
	.qk-table tbody tr {
		display: block;
		border: 1px solid var(--line);
		border-radius: var(--r);
		margin: 10px;
		padding: 4px 2px;
		background: var(--surface);
		box-shadow: 0 1px 3px rgba(11,31,58,.05);
	}
	.qk-table tbody tr:hover,
	.qk-table tbody tr.clickable:hover { background: var(--accent-soft); }
	.qk-table td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		border: 0;
		border-bottom: 1px dashed var(--line);
		padding: 7px 12px;
		text-align: right;
		direction: rtl;
	}
	.qk-table tbody tr td:last-child { border-bottom: 0; }
	.qk-table td::before {
		content: attr(data-l);
		color: var(--muted);
		font-size: 11.5px;
		flex: 0 0 auto;
		font-weight: 500;
	}
	.qk-table td:not([data-l])::before { content: ''; }
	.qk-table td.num { direction: rtl; text-align: right; }
	.qk-table td > div { text-align: left; }
	.qk-pager { border-top: 0; }
}

/* ═══════ ریزتنظیم‌های لمسی ═══════ */

@media (max-width: 640px) {
	.qk-btn { padding: 10px 16px; }
	.qk-btn-sm { padding: 7px 12px; }
	.qk-input, .qk-select, .qk-textarea { padding: 11px 12px; font-size: 16px; }
	.qk-tab { padding: 12px 14px; }
	.qk-check input { width: 20px; height: 20px; }
	.qk-stat-value { font-size: 19px; }
	.qk-card { border-radius: 10px; }
	.qk-modal { max-height: 94vh; border-radius: 14px; }
}

/* ═══════ راهنمای کار ═══════ */

/*
 * مسیر پرونده می‌پیچد، نه اینکه پهلو برود.
 *
 * هشت مرحله با کمینه‌ی ۱۳۰ پیکسل از عرضِ صفحه بیشتر می‌شود. با
 * overflow-x دو مرحله‌ی آخر بیرون از دید می‌ماندند و تا کسی نوار را
 * پهلو نمی‌کشید نمی‌دیدشان — و کل فایده‌ی این نوار «دیدنِ یک‌باره‌ی
 * مسیر» است.
 */
.qk-pipe {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	gap: 6px;
	padding: 4px 2px 10px;
}
.qk-pipe-node {
	flex: 1 1 130px;
	min-width: 130px;
	/* ردیفِ آخر با دو مرحله نباید کش بیاید و سه برابرِ بقیه شود. */
	max-width: 220px;
	border: 1px solid var(--line-2);
	background: var(--surface);
	border-radius: var(--r);
	padding: 12px 10px;
	text-align: center;
	font-family: inherit;
	transition: .15s;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.qk-pipe-node:hover { border-color: var(--accent-2); background: var(--surface-2); }
.qk-pipe-node.on {
	border-color: var(--accent);
	background: var(--accent-soft);
	box-shadow: 0 0 0 3px var(--accent-ring);
}
.qk-pipe-ico { font-size: 20px; color: var(--accent); line-height: 1.2; }
.qk-pipe-n { font-size: 13px; font-weight: 600; color: var(--ink); }
.qk-pipe-c { font-size: 11px; color: var(--muted); line-height: 1.6; }
.qk-pipe-arrow {
	align-self: center;
	color: var(--line-2);
	font-size: 16px;
	flex: 0 0 auto;
}

/* فهرست عمودی مرحله‌ها در صفحه «راهنمای کار» — جدا از نوار پیشرفت پرونده. */
.qk-guide-steps { display: flex; flex-direction: column; gap: 2px; }
.qk-guide-step {
	display: flex;
	gap: 12px;
	padding: 14px 0;
	border-bottom: 1px solid var(--line);
}
.qk-guide-step:last-child { border-bottom: 0; }
.qk-guide-num {
	flex: 0 0 30px;
	width: 30px; height: 30px;
	border-radius: 50%;
	background: var(--brand);
	color: #fff;
	display: grid;
	place-items: center;
	font-size: 13px;
	font-weight: 600;
}
.qk-guide-body { flex: 1; min-width: 0; }
.qk-guide-t { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.qk-guide-d { font-size: 13px; line-height: 2; color: var(--ink-3); }
.qk-guide-w {
	margin-top: 8px;
	background: var(--warn-bg);
	border: 1px solid var(--warn-line);
	color: #8A5109;
	border-radius: var(--r-sm);
	padding: 8px 12px;
	font-size: 12.5px;
	line-height: 1.9;
}
.qk-dont { margin: 0; padding-inline-start: 20px; font-size: 13px; line-height: 2.1; color: var(--ink-3); }
.qk-dont li::marker { color: var(--danger); }

@media (max-width: 640px) {
	.qk-pipe { flex-direction: column; }
	.qk-pipe-arrow { transform: rotate(-90deg); }
	.qk-pipe-node { min-width: 0; }
}

/* ═══════ نوار پایین موبایل ═══════
   روی گوشی، کشوی کناری یعنی دو کلیک برای هر کار. این نوار همیشه
   دم دست است؛ روی دسکتاپ اصلاً نمایش داده نمی‌شود. */

.qk-tabbar { display: none; }
.qk-nav-veil { display: none; }

@media (max-width: 900px) {
	.qk-tabbar {
		display: flex;
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 120;
		background: var(--surface);
		border-top: 1px solid var(--line);
		box-shadow: 0 -2px 14px rgba(11,31,58,.07);
		/* آیفون: نوار خانه‌ی خودِ گوشی نباید روی دکمه‌ها بیفتد. */
		padding-bottom: env(safe-area-inset-bottom, 0px);
		padding-bottom: env(safe-area-inset-bottom, 0);
	}
	.qk-tabbar-item {
		flex: 1;
		min-width: 0;
		/* هدفِ انگشت، نه هدفِ نشانگر: دست‌کم ۵۶ پیکسل ارتفاع. */
		min-height: 56px;
		border: 0;
		background: none;
		padding: 8px 2px 7px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		color: var(--muted);
		font-family: inherit;
		min-height: 56px;
		justify-content: center;
	}
	/*
	 * حالت روشن فقط رنگ نبود کافی.
	 *
	 * با رنگِ تنها، روی صفحه‌ی آفتابی یا چشمِ خسته معلوم نبود کجاییم.
	 * حالا پشت نشانه یک قرصِ رنگی می‌نشیند.
	 */
	.qk-tabbar-item.on { color: var(--accent); }
	.qk-tabbar-item.on .qk-tabbar-ico::before {
		content: '';
		position: absolute;
		/* فقط پشتِ نشانه — تا ۱.۷۱ هفت پیکسل پایین‌تر می‌رفت و نیمه‌ی بالای برچسب را می‌پوشاند (۱.۷۲). */
		inset: -5px -14px;
		border-radius: 999px;
		background: var(--info-bg, #E7F0FE);
		z-index: -1;
	}
	.qk-tabbar-item.on .qk-tabbar-t { font-weight: 700; }

	/*
	 * کارِ اصلی: یک دکمه‌ی برجسته در وسط.
	 *
	 * «ثبت پرونده» برای کارشناس فروش پرتکرارترین کار روز است و بین پنج
	 * دکمه‌ی هم‌شکل گم می‌شد.
	 */
	.qk-tabbar-item.is-cta { color: var(--accent); }

	.qk-tabbar-item.is-cta .qk-tabbar-ico {
		width: 52px;
		height: 52px;
		margin-top: -22px;
		border-radius: 50%;
		background: var(--accent, #1B6FE3);
		color: #fff;
		box-shadow: 0 6px 16px rgba(27,111,227,.40);
		border: 3px solid var(--surface, #fff);
	}

	.qk-tabbar-item.is-cta .qk-tabbar-ico .qk-ico { width: 24px; height: 24px; stroke-width: 2.1; }
	.qk-tabbar-item.is-cta .qk-tabbar-t { margin-top: -2px; font-weight: 700; }
	.qk-tabbar-item.is-cta:active .qk-tabbar-ico { transform: scale(.94); }
	/* روی دکمه‌ی وسط، قرصِ حالتِ روشن لازم نیست — خودش برجسته است. */
	.qk-tabbar-item.is-cta.on .qk-tabbar-ico::before { content: none; }
	.qk-tabbar-ico {
		width: 21px;
		height: 21px;
		display: grid;
		place-items: center;
		position: relative;
		isolation: isolate;
		transition: transform .12s;
	}
	.qk-tabbar-ico .qk-nav-badge { position: absolute; top: -7px; inset-inline-end: -11px; margin: 0; padding: 0 5px; font-size: 10px; }
	.qk-tabbar-t { font-size: 10.5px; font-weight: 500; position: relative; z-index: 1; margin-top: 3px; }

	/* جا برای نوار (و نوار خانه‌ی آیفون)، تا محتوا زیرش نرود */
	.qk-content { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }

	/* پرده پشت کشو */
	body.qk-nav-open .qk-nav-veil {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 105;
		background: rgba(10,36,71,.5);
	}
}

/* ═══════ رفتار اپلیکیشنی روی گوشی ═══════
   هدف این بخش این است که پنل روی موبایل مثل یک اپ حس شود، نه مثل
   یک سایت دسکتاپی که کوچک شده. */

.qk-tab-ico { font-size: 13px; opacity: .8; }
.qk-actions { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 900px) {

	/*
	 * انگشت از موشواره خیلی بزرگ‌تر است. هر چیزی که لمس می‌شود دست‌کم
	 * ۴۲ پیکسل ارتفاع می‌گیرد، وگرنه کاربر چند بار خطا می‌زند.
	 */
	.qk-btn { min-height: 42px; padding: 10px 16px; }
	.qk-btn-sm { min-height: 36px; }
	.qk-modal-x { min-width: 40px; min-height: 40px; }

	/*
	 * سافاری آیفون روی هر فیلدی که فونتش زیر ۱۶ پیکسل باشد، هنگام تایپ
	 * صفحه را زوم می‌کند و دیگر برنمی‌گردد. این یکی از آزاردهنده‌ترین
	 * چیزها در فرم‌های طولانی است.
	 */
	.qk-input, .qk-select, .qk-textarea {
		font-size: 16px;
		padding: 11px 12px;
	}

	/*
	 * دکمه‌های عملیات روی صفحه باریک دو‌ستونه می‌شوند و هرکدام تمام
	 * پهنای سهم خودش را می‌گیرد؛ دکمه‌های ریز کنار هم قابل زدن نیستند.
	 */
	.qk-actions .qk-btn { flex: 1 1 calc(50% - 4px); }
	.qk-actions .qk-btn:only-child { flex-basis: 100%; }

	/*
	 * مودال از پایین بالا می‌آید و تمام عرض را می‌گیرد — الگوی آشنای
	 * «شیت» در اپ‌های موبایل. وسط‌چین شناور روی گوشی هم جا را هدر
	 * می‌دهد هم دکمه‌ها را از دسترس شست دور می‌کند.
	 */
	.qk-modal-bg { padding: 0; place-items: end stretch; }
	.qk-modal, .qk-modal.wide {
		max-width: none;
		max-height: 92vh;
		border-radius: var(--r-lg) var(--r-lg) 0 0;
		margin: 0;
		animation: qk-sheet .2s ease-out;
	}
	.qk-modal-foot {
		position: sticky;
		bottom: 0;
		background: var(--surface);
		padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
		z-index: 2;
	}
	.qk-modal-foot .qk-btn { flex: 1 1 auto; }
}

@keyframes qk-sheet { from { transform: translateY(14px); opacity: .6; } }

@media (prefers-reduced-motion: reduce) {
	.qk-modal, .qk-nav { animation: none !important; transition: none !important; }
}

/* ── قفل فروش خودرو ── */
.qk-bulk {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	background: var(--warn-bg);
	border: 1px solid var(--warn-line);
	border-radius: var(--r-sm);
	padding: 4px 10px;
}
.qk-locknote { font-size: 11px; color: var(--danger); margin-top: 3px; line-height: 1.7; }

/* ── تیک‌های مسیر ارجاع ── */
.qk-routecell { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.qk-routepick { font-size: 12px; margin: 0; white-space: nowrap; }

/* ═══════ ضامن‌ها ═══════
   هر ضامن یک کارت است، نه یک ردیف جدول: اطلاعاتش زیاد است و روی
   گوشی جدول افقی خوانده نمی‌شود. */

.qk-guar { margin-top: 14px; }
.qk-guar-head {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 10px;
}
.qk-guar-head b { font-size: 13.5px; }

.qk-guar-list { display: grid; gap: 10px; }
.qk-guar-card {
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--surface-2);
	padding: 12px 14px;
}
.qk-guar-t {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}
.qk-guar-t b { font-size: 13.5px; }
.qk-guar-d {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	font-size: 12.5px;
	color: var(--ink-2);
}
.qk-guar-d span { white-space: nowrap; }
.qk-guar-d i { color: var(--muted); font-style: normal; }
.qk-guar-n {
	margin-top: 8px;
	font-size: 12px;
	color: var(--ink-3);
	border-inline-start: 2px solid var(--line-2);
	padding-inline-start: 8px;
}

@media (min-width: 900px) {
	.qk-guar-list { grid-template-columns: 1fr 1fr; }
}

/* ═══════ نمودارها ═══════
   محورها و خط‌های راهنما عمداً کم‌رنگ‌اند تا داده جلو بیاید. زمان از
   چپ به راست می‌رود، پس ظرف نمودار ltr است حتی در پنل راست‌چین. */

.qk-chart {
	position: relative;
	direction: ltr;
	margin-top: 4px;
}
.qk-chart-svg { width: 100%; height: 168px; display: block; overflow: visible; }
.qk-chart-grid { stroke: var(--line); stroke-width: 1; }
.qk-chart-cross { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 3; }
.qk-chart-xlab { font-size: 10px; fill: var(--muted); font-family: inherit; }
.qk-chart-band { cursor: crosshair; }
.qk-chart-empty {
	padding: 26px 10px;
	text-align: center;
	color: var(--muted);
	font-size: 12.5px;
	direction: rtl;
}

.qk-chart-tip {
	position: absolute;
	top: 4px;
	transform: translateX(-50%);
	background: var(--ink);
	color: #fff;
	border-radius: 8px;
	padding: 7px 10px;
	font-size: 11.5px;
	line-height: 1.8;
	pointer-events: none;
	white-space: nowrap;
	direction: rtl;
	z-index: 4;
	box-shadow: var(--sh-lg);
}
.qk-chart-tip-t { opacity: .7; font-size: 10.5px; margin-bottom: 2px; }
.qk-chart-tip-r { display: flex; align-items: center; gap: 6px; }
.qk-chart-tip-r i { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 8px; }
.qk-chart-tip-r b { font-weight: 600; }

/* ── میله افقی ── */
.qk-barrow { margin-bottom: 11px; }
.qk-barrow:last-child { margin-bottom: 0; }
.qk-barrow-h {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 12.5px;
	margin-bottom: 4px;
}
.qk-barrow-h b { font-weight: 600; direction: ltr; }
.qk-barrow-t { height: 8px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.qk-barrow-t i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.qk-barrow-s { font-size: 11px; color: var(--muted); margin-top: 3px; }

/* ── راهنمای سری‌ها ── */
.qk-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); margin-bottom: 6px; }
.qk-legend span { display: inline-flex; align-items: center; gap: 6px; }
.qk-legend i { width: 10px; height: 10px; border-radius: 3px; }

/* ── تغییر نسبت به میانگین ── */
.qk-delta { font-size: 11.5px; font-weight: 600; }
.qk-delta.up { color: var(--ok); }
.qk-delta.down { color: var(--danger); }
.qk-delta.flat { color: var(--muted); }

/* ── قاب هر نمودار روند ── */
.qk-trend {
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 12px 12px 6px;
	background: var(--surface);
}
.qk-trend-h {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink-2);
}

/* ═══════ متن راهنمای حالت خالی ═══════ */

.qk-empty-t { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.qk-empty-d {
	font-size: 12.5px;
	color: var(--muted);
	line-height: 2;
	max-width: 46ch;
	margin: 6px auto 0;
}
.qk-empty-a { margin-top: 14px; }

/* ═══════ بخشی که بارگذاری نشد ═══════
   جای اسپینری که هرگز تمام نشد. می‌ماند تا کاربر ببیند، و راه
   بیرون آمدن هم می‌دهد. */

.qk-failbox {
	border: 1px dashed var(--danger-line, var(--line-2));
	background: var(--danger-bg, var(--surface-2));
	border-radius: var(--r-sm);
	padding: 18px;
	text-align: center;
}
.qk-failbox-t { font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.qk-failbox-d { font-size: 12.5px; color: var(--ink-3); line-height: 1.9; margin-bottom: 10px; }

/* ═══════ تصویر پیوست (مصوبه) ═══════ */

.qk-doc-shot { margin-bottom: 10px; }
.qk-doc-shot img {
	max-height: 190px;
	max-width: 100%;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: #fff;
	padding: 4px;
	display: block;
}
.qk-doc-act { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* ═══════ نوار پیشرفت پرونده ═══════ */

/*
 * هشت ایستگاه (۱.۷۵) — شبکه‌ی هشت‌ستونی، نه نوار افقیِ اسکرول‌دار.
 * روی گوشیِ ۳۷۵ پیکسلی هم هر هشت دیده می‌شوند؛ نام بلندِ ایستگاه
 * («تأییدیه مدیریت پیش از خرید») داخل خانه‌ی خودش می‌شکند، نه بیرونش.
 */
.qk-steps {
	display: grid;
	grid-template-columns: repeat(9, minmax(0, 1fr));
	align-items: start;
	gap: 2px;
	margin-bottom: 0;
	padding: 14px 10px 10px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-bottom: 0;
	border-radius: var(--r) var(--r) 0 0;
}

/* وضعیت دقیق، زیر ایستگاه‌ها */
.qk-steps-now {
	margin-bottom: 14px;
	padding: 8px 14px 10px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-top: 0;
	border-radius: 0 0 var(--r) var(--r);
	font-size: 12.5px;
	color: var(--muted);
	text-align: center;
}
.qk-step {
	display: block;
	border-bottom: 0;
	min-width: 0;
	text-align: center;
	position: relative;
	font-size: 11px;
	line-height: 1.55;
	color: var(--muted);
	overflow-wrap: anywhere;
}
.qk-step span { display: block; padding: 0 1px; }
.qk-step i {
	display: block;
	width: 11px;
	height: 11px;
	margin: 0 auto 7px;
	border-radius: 50%;
	background: var(--line-2);
	position: relative;
	z-index: 1;
}
/* خط رابط بین نقطه‌ها */
.qk-step::before {
	content: '';
	position: absolute;
	top: 5px;
	inset-inline-end: 50%;
	width: 100%;
	height: 2px;
	background: var(--line);
}
.qk-step:first-child::before { display: none; }
.qk-step.done i { background: var(--ok); }
.qk-step.done::before { background: var(--ok); }
.qk-step.on i {
	background: var(--accent);
	box-shadow: 0 0 0 4px var(--accent-ring);
}
.qk-step.on { color: var(--accent-3); font-weight: 600; }
.qk-step.done { color: var(--ink-3); }
/* ایستگاهی که مسیرِ این پرونده از آن نمی‌گذرد — خط تیره، کم‌رنگ (۱.۷۵). */
.qk-step.skip { color: var(--muted-2); }
.qk-step.skip i {
	width: 12px;
	height: 0;
	margin: 5px auto 13px;
	border-radius: 0;
	background: none;
	border-top: 2px dashed var(--muted-2);
}
.qk-step.skip::before { background: var(--line); }
/* وضعیت دقیق و یادداشتِ مسیر — یک قاب، دو ردیف. */
.qk-steps-now.has-note { margin-bottom: 0; border-radius: 0; }
.qk-steps-note {
	margin-bottom: 14px;
	padding: 0 14px 10px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-top: 0;
	border-radius: 0 0 var(--r) var(--r);
	font-size: 12px;
	line-height: 1.9;
	color: var(--warn);
	text-align: center;
}

/* ═══════ بنر «نوبت شما» ═══════
   مهم‌ترین چیز روی صفحه پرونده: یک جمله که می‌گوید همین حالا چه
   کاری از این کاربر خواسته شده. */

.qk-next {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	padding: 16px 18px;
	border-radius: var(--r);
	margin-bottom: 14px;
	border: 1px solid var(--line);
	background: var(--surface);
}
.qk-next-b { flex: 1; min-width: 200px; }
.qk-next-b b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
.qk-next-b p { margin: 3px 0 0; font-size: 13px; color: var(--ink-3); line-height: 1.85; }
.qk-next-go { flex: 0 0 auto; }

.qk-next.go {
	border-color: var(--accent-2);
	background: linear-gradient(90deg, var(--accent-soft), var(--surface));
}
.qk-next.urgent {
	border-color: var(--danger-line);
	background: linear-gradient(90deg, var(--danger-bg), var(--surface));
}
.qk-next.urgent .qk-next-b b { color: #8E1F1F; }
.qk-next.calm { background: var(--surface-2); }
.qk-next.calm .qk-next-b b { color: var(--ink-2); font-weight: 500; }
.qk-next.dead { background: var(--dead-bg); border-color: var(--line-2); }

@media (max-width: 640px) {
	.qk-next { padding: 14px; gap: 10px; }
	.qk-next-go { width: 100%; }
	.qk-steps { padding: 12px 6px 8px; }
	.qk-step { font-size: 10.5px; }
}
@media (max-width: 480px) {
	.qk-steps { padding: 10px 2px 8px; gap: 0; }
	.qk-step { font-size: 10px; line-height: 1.45; }
	.qk-step span { padding: 0; }
	.qk-steps-note { padding: 0 10px 10px; font-size: 11.5px; }
}

/* ═══════ راهنمای تعاملی ═══════ */

.qk-tour-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 30px;
	padding: 0 12px;
	border-radius: 999px;
	border: 1px solid var(--accent-2);
	background: var(--accent-soft);
	color: var(--accent-3);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	flex: 0 0 auto;
	margin-inline-end: 8px;
}
.qk-tour-btn span { font-size: 14px; font-weight: 700; }
.qk-tour-btn b { font-weight: 600; }
.qk-tour-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
@media (max-width: 560px) {
	.qk-tour-btn b { display: none; }
	/* هدفِ انگشت: ۳۶ پیکسل، نه ۲۸. */
	.qk-tour-btn { padding: 0; width: 36px; height: 36px; justify-content: center; border-radius: 50%; }
}

#qk-tour { position: fixed; inset: 0; z-index: 600; }

/* پرده تیره — فقط وقتی مرحله به جایی اشاره نمی‌کند.
   وقتی حفره هست، تیرگی از سایه‌ی خودِ حفره می‌آید و این پرده با
   جاوااسکریپت خاموش می‌شود؛ وگرنه صفحه دوبار تیره می‌شد. */
.qk-tour-veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(10, 36, 71, .58);
}

/* حفره: عنصر هدف روشن می‌ماند و بقیه صفحه با سایه‌ی بیرونی تیره می‌شود. */
/* پرده شفاف: دیده نمی‌شود ولی همچنان کلیک را می‌گیرد. */
.qk-tour-veil.clear { background: transparent; }

.qk-tour-hole {
	position: absolute;
	z-index: 2;
	border-radius: 8px;
	box-shadow: 0 0 0 9999px rgba(10, 36, 71, .58), 0 0 0 3px var(--accent-2);
	pointer-events: none;
}
/* نرمیِ جابه‌جایی فقط هنگام عوض شدن گام — نه هنگام اسکرول. */
.qk-tour-hole.anim {
	transition: top .22s ease, left .22s ease, width .22s ease, height .22s ease;
}

.qk-tour-pop {
	position: absolute;
	z-index: 3;
	/* کف عرض لازم است: روی نمایشگر باریک، calc منفی باکس را جمع می‌کرد. */
	width: max(268px, min(330px, calc(100vw - 24px)));
	background: var(--surface);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(10, 36, 71, .08), 0 18px 44px -14px rgba(10, 36, 71, .38);
	padding: 20px 20px 14px;
	font-size: 13.5px;
	line-height: 1.95;
	animation: qk-tour-in .18s ease-out;
}
@keyframes qk-tour-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: none; }
}

/* نوک کوچک که باکس را به عنصر وصل می‌کند */
.qk-tour-arrow {
	position: absolute;
	width: 12px;
	height: 12px;
	background: var(--surface);
	transform: rotate(45deg);
	margin-inline-start: -6px;
}
.qk-tour-arrow.up   { top: -6px; }
.qk-tour-arrow.down { bottom: -6px; }

/* بستن — گوشه، کم‌رنگ تا از متن نگیرد */
.qk-tour-x {
	position: absolute;
	inset-inline-end: 12px;
	top: 10px;
	border: 0;
	background: none;
	color: var(--muted-2);
	font-size: 19px;
	line-height: 1;
	padding: 2px 4px;
	cursor: pointer;
	border-radius: 6px;
}
.qk-tour-x:hover { color: var(--ink); background: var(--surface-3); }

.qk-tour-body { padding-inline-end: 20px; }
.qk-tour-pop h4 {
	margin: 0 0 5px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ink);
	line-height: 1.7;
}
.qk-tour-pop p { margin: 0; color: var(--ink-2); }

.qk-tour-w {
	margin-top: 11px;
	padding: 9px 11px;
	border-radius: 8px;
	background: var(--warn-bg);
	color: #7A5200;
	font-size: 12.5px;
	line-height: 1.85;
}

/* پاورقی: نقطه‌های پیشرفت سمت راست، دکمه‌ها سمت چپ */
.qk-tour-foot {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px solid var(--line);
}
.qk-tour-track {
	flex: 1;
	height: 4px;
	border-radius: 999px;
	background: var(--surface-3);
	overflow: hidden;
	margin-inline-end: 4px;
}
.qk-tour-track i {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--accent);
	transition: width .22s ease;
}
.qk-tour-back, .qk-tour-go {
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	border-radius: 8px;
	padding: 7px 15px;
	cursor: pointer;
	line-height: 1.6;
	border: 1px solid transparent;
}
.qk-tour-back {
	background: none;
	color: var(--ink-3);
	padding-inline: 8px;
}
.qk-tour-back:hover { color: var(--ink); }
.qk-tour-go {
	background: var(--accent);
	color: #fff;
}
.qk-tour-go:hover { background: var(--accent-3); }

/* مرحله مقدماتی — به جایی اشاره نمی‌کند، پس بزرگ‌تر و بدون نوک است. */
.qk-tour-pop.intro {
	width: min(400px, calc(100vw - 24px));
	padding: 26px 26px 16px;
}
.qk-tour-pop.intro h4 { font-size: 17.5px; margin-bottom: 8px; line-height: 1.6; }
.qk-tour-pop.intro p { font-size: 14px; }

/*
 * صفحه هنگام راهنما قفل نمی‌شود.
 *
 * قبلاً اینجا overflow: hidden بود و دقیقاً همان چیزی را می‌شکست که
 * راهنما به آن نیاز دارد: scrollIntoView نمی‌توانست هدفِ پایین صفحه را
 * بالا بیاورد، پس حفره و باکس بیرون کادر دید می‌نشستند و کاربر یک
 * صفحه تیره بدون هیچ دکمه‌ای می‌دید — با موس هم راه بیرون آمدن نبود.
 *
 * حالا صفحه می‌چرخد و باکس دنبال هدف می‌آید؛ پرده هم جلوی کلیک روی
 * محتوای پشت را می‌گیرد، که همان چیزی است که واقعاً لازم بود.
 */
.qk-tour-n {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--accent);
	margin-bottom: 6px;
}

/*
 * روی گوشی، باکس از پایین بالا می‌آید و تمام عرض را می‌گیرد.
 * باکس شناور کنار یک عنصر کوچک روی صفحه باریک، هم جا را تنگ می‌کند
 * هم نصفش بیرون می‌افتد.
 */
.qk-tour-pop.sheet {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	top: auto !important;
	left: 0 !important;
	width: 100% !important;
	border-radius: 16px 16px 0 0;
	padding: 20px 18px calc(14px + env(safe-area-inset-bottom, 0px));
	animation: qk-sheet .2s ease-out;
}
.qk-tour-pop.sheet .qk-tour-arrow { display: none !important; }

@media (max-width: 600px) {
	.qk-tour-pop { width: calc(100vw - 20px); font-size: 13px; padding: 18px 18px 12px; }
	.qk-tour-pop.intro { width: calc(100vw - 20px); padding: 22px 20px 14px; }
	/* انگشت از موشواره بزرگ‌تر است — دکمه‌های راهنما هم باید جا داشته باشند. */
	.qk-tour-back, .qk-tour-go { min-height: 40px; padding: 9px 18px; }
	.qk-tour-x { min-width: 40px; min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
	.qk-tour-hole, .qk-tour-hole.anim { transition: none; }
	.qk-tour-pop, .qk-tour-pop.sheet { animation: none; }
	.qk-tour-track i { transition: none; }
}

/* ═══════ انتخابگر تاریخ ═══════ */

.qk-jdp {
	position: absolute;
	z-index: 400;
	background: var(--surface);
	border: 1px solid var(--line-2);
	border-radius: var(--r);
	box-shadow: var(--sh-lg);
	padding: 10px;
	width: 258px;
	font-family: 'IRANYekanX', Tahoma, sans-serif;
	font-size: 12.5px;
}
.qk-jdp-head {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 8px;
}
.qk-jdp-head > button[data-nav] {
	border: 1px solid var(--line);
	background: var(--surface-2);
	border-radius: 7px;
	font-size: 15px;
	line-height: 1;
	padding: 5px 9px;
	color: var(--ink-3);
}
.qk-jdp-head > button[data-nav]:hover { background: var(--accent-soft); color: var(--accent-3); border-color: var(--accent-2); }
.qk-jdp-title {
	flex: 1;
	border: 1px solid transparent;
	background: none;
	border-radius: 7px;
	padding: 4px 6px;
	font-family: inherit;
	font-weight: 600;
	font-size: 13px;
	color: var(--ink);
	line-height: 1.4;
}
.qk-jdp-title:hover { background: var(--surface-3); border-color: var(--line); }
.qk-jdp-title span {
	display: block;
	font-size: 10px;
	font-weight: 400;
	color: var(--muted-2);
}
/* فهرست سال — بلند و اسکرول‌شونده، تا تاریخ تولد یک‌جا پیدا شود */
.qk-jdp-years {
	max-height: 240px;
	overflow-y: auto;
	overscroll-behavior: contain;
	margin: 0 -2px;
	padding: 0 2px;
}
.qk-jdp-years::-webkit-scrollbar { width: 8px; }
.qk-jdp-years::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }

/* پیام زیر ورودی تاریخ: سن، یا خطای تاریخ نامعتبر */
.qk-jdp-note {
	font-size: 11.5px;
	margin-top: 4px;
	color: var(--ok);
}
.qk-jdp-note.bad { color: var(--danger); }
.qk-input.qk-bad { border-color: var(--danger); background: var(--danger-bg); }

.qk-jdp-grid { display: grid; gap: 3px; text-align: center; }
.qk-jdp-grid.week { grid-template-columns: repeat(7, 1fr); }
.qk-jdp-grid.m3 { grid-template-columns: repeat(3, 1fr); }
.qk-jdp-wd { color: var(--muted-2); font-size: 11px; padding: 3px 0; }
.qk-jdp-c {
	border: 1px solid transparent;
	background: none;
	border-radius: 7px;
	padding: 6px 0;
	font-family: inherit;
	font-size: 12.5px;
	color: var(--ink-2);
}
.qk-jdp-c.wide { padding: 9px 2px; }
.qk-jdp-c:hover { background: var(--accent-soft); border-color: var(--accent-2); }
.qk-jdp-c.today { background: var(--surface-3); font-weight: 600; }
.qk-jdp-c.sel { background: var(--accent); color: #fff; font-weight: 600; }
.qk-jdp-foot {
	display: flex;
	gap: 6px;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--line);
}
.qk-jdp-foot .qk-btn { flex: 1; }

@media (max-width: 640px) {
	.qk-jdp { width: calc(100vw - 24px); max-width: 300px; padding: 12px; }
	.qk-jdp-c { padding: 9px 0; font-size: 13.5px; }
	.qk-jdp-c.wide { padding: 12px 2px; }
}

/* سربرگ چاپ — فقط روی کاغذ دیده می‌شود. */
.qk-print-head { display: none; }

@media print {
	.qk-nav, .qk-head, .qk-btn, .qk-filters, .qk-toast-wrap,
	.qk-tabbar, .qk-nav-veil, #qk-tour, .qk-tour-btn { display: none !important; }

	.qk-card { box-shadow: none; border-color: #ccc; }
	body.qk-body { background: #fff; }
	.qk-content { padding: 0 !important; }

	/*
	 * مرورگر پس‌زمینه‌ها را برای صرفه‌جویی جوهر حذف می‌کند. برای متن
	 * درست است، ولی میله‌ی نمودار بدون رنگش یعنی هیچ — کاغذ یک ردیف
	 * مستطیل خالی می‌شود.
	 */
	.qk-bar, .qk-bar i, .qk-barrow-t, .qk-barrow-t i,
	.qk-badge, .qk-alert, .qk-chart-svg, .qk-trend {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	/* کارت نصفه بین دو صفحه بدترین حالت خواندن است. */
	.qk-card, .qk-trend { break-inside: avoid; page-break-inside: avoid; }
	.qk-table { font-size: 10.5px; }

	.qk-print-head {
		display: block;
		margin-bottom: 14px;
		padding-bottom: 10px;
		border-bottom: 2px solid #333;
	}
	.qk-print-head h1 { font-size: 17px; margin: 0 0 4px; }
	.qk-print-head div { font-size: 11px; color: #555; }

	@page { margin: 14mm; }
}

/* ═══════════════════════════════════════════════════════
   درخواست‌های داخلی

   ساختار موبایل‌اول: کارت به‌جای جدول، گفتگو به شکل حباب،
   و کادر پاسخ چسبیده به پایین. روی دسکتاپ همین‌ها با فضای
   بیشتر پخش می‌شوند — دو طرح جدا نگه نمی‌داریم.
   ═══════════════════════════════════════════════════════ */

.qk-tk-top {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

/* دکمه‌های بخش — روی گوشی افقی اسکرول می‌شوند تا هیچ‌کدام بریده نشود */
.qk-seg {
	display: flex;
	gap: 4px;
	padding: 3px;
	background: var(--surface-3);
	border: 1px solid var(--line);
	border-radius: 10px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	max-width: 100%;
}
.qk-seg::-webkit-scrollbar { display: none; }

.qk-seg-b {
	flex: 0 0 auto;
	min-height: 36px;
	padding: 6px 14px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--ink-3);
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
	transition: background .14s, color .14s;
}
.qk-seg-b:hover { color: var(--ink); }
.qk-seg-b.is-on {
	background: var(--surface);
	color: var(--accent-3);
	font-weight: 700;
	box-shadow: 0 1px 3px rgba(11,31,58,.1);
}

.qk-tk-new { flex: 0 0 auto; }

.qk-tk-filters {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	margin-bottom: 12px;
}
@media (min-width: 640px) {
	.qk-tk-filters { grid-template-columns: 2fr 1fr 1fr; }
}

/* ── فهرست کارتی ── */
.qk-tk-cards { display: flex; flex-direction: column; gap: 8px; }

.qk-tk-card {
	display: block;
	padding: 12px 14px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	text-decoration: none;
	color: inherit;
	transition: border-color .14s, box-shadow .14s;
}
.qk-tk-card:hover {
	border-color: var(--accent);
	box-shadow: 0 2px 10px -4px var(--accent-ring);
}
.qk-tk-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* نخوانده: نوار کناری، نه رنگِ کلِ کارت — رنگ کل کارت فهرست را
   شلوغ می‌کند و وقتی همه‌چیز نخوانده باشد اصلاً معنایش می‌رود */
.qk-tk-card.is-unread { border-inline-start: 3px solid var(--accent); }

.qk-tk-row1 {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	justify-content: space-between;
}
.qk-tk-subj {
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--ink);
}
.qk-tk-dot {
	flex: 0 0 auto;
	width: 8px; height: 8px;
	margin-top: 7px;
	border-radius: 50%;
	background: var(--accent);
}

.qk-tk-row2 {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	margin-top: 7px;
}
.qk-tk-type {
	font-size: 12px;
	color: var(--muted);
	padding: 2px 8px;
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: 999px;
}

.qk-tk-row3 {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin-top: 8px;
	font-size: 12px;
	color: var(--muted);
}
.qk-tk-code { font-family: ui-monospace, Consolas, monospace; }
.qk-tk-when { margin-inline-start: auto; }

/* ── ثبت درخواست ── */
.qk-tk-dest { margin: -6px 0 14px; }
.qk-tk-dest-in {
	padding: 9px 12px;
	background: var(--accent-soft);
	border-inline-start: 3px solid var(--accent);
	border-radius: 8px;
	font-size: 13px;
	color: var(--ink-2);
}
/* مقصدی که هنوز کسی را ندارد، یا موضوعِ آزادی که واحدش انتخاب نشده. */
.qk-tk-dest-in.warn {
	background: var(--warn-bg);
	border-inline-start-color: var(--warn);
	color: var(--ink);
}
.qk-tk-adv { margin: 8px 0 4px; }
.qk-tk-adv > summary {
	cursor: pointer;
	font-size: 13px;
	color: var(--accent-3);
	padding: 8px 0;
	min-height: 36px;
	display: flex;
	align-items: center;
}

/* ── سربرگ یک درخواست ── */
.qk-tk-h1 {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--ink);
}
.qk-tk-h2 {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	margin-top: 8px;
}

.qk-tk-facts {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin: 14px 0 0;
	border-top: 1px solid var(--line);
}
@media (min-width: 560px) {
	.qk-tk-facts { grid-template-columns: 1fr 1fr; }
}
.qk-tk-fact {
	display: flex;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid var(--line);
	font-size: 13px;
}
.qk-tk-fact dt { color: var(--muted); min-width: 84px; flex: 0 0 auto; }
.qk-tk-fact dd { margin: 0; color: var(--ink-2); }

.qk-tk-seen {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px dashed var(--line-2);
	font-size: 12.5px;
	color: var(--muted);
	line-height: 1.9;
}

/* ── نوار اقدام ── */
.qk-tk-acts { margin: 12px 0; }
.qk-tk-acts-in {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.qk-tk-acts-in .qk-btn { flex: 1 1 auto; min-width: 130px; }
@media (min-width: 560px) {
	.qk-tk-acts-in .qk-btn { flex: 0 0 auto; }
}

/* ── گفتگو ── */
.qk-tk-thread {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 14px 0 96px;
}

.qk-tk-msg {
	max-width: 86%;
	padding: 10px 13px;
	border-radius: 14px;
	background: var(--surface);
	border: 1px solid var(--line);
}
@media (min-width: 700px) { .qk-tk-msg { max-width: 68%; } }

.qk-tk-msg.is-them { align-self: flex-start; border-start-start-radius: 4px; }
.qk-tk-msg.is-me {
	align-self: flex-end;
	background: var(--accent-soft);
	border-color: transparent;
	border-start-end-radius: 4px;
}
/* یادداشت داخلی باید در یک نگاه از پاسخ جدا باشد — فرستنده
   اصلاً آن را نمی‌بیند و نباید با پاسخ اشتباه گرفته شود */
.qk-tk-msg.is-note {
	background: var(--warn-bg);
	border: 1px dashed var(--warn-line);
}

.qk-tk-msg-who {
	font-size: 11.5px;
	font-weight: 700;
	color: var(--muted);
	margin-bottom: 4px;
}
.qk-tk-msg-b {
	font-size: 14px;
	line-height: 1.9;
	color: var(--ink);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
.qk-tk-msg-t { margin-top: 5px; font-size: 11px; color: var(--muted-2); }

.qk-tk-sys {
	align-self: center;
	max-width: 90%;
	text-align: center;
	font-size: 12px;
	color: var(--muted);
	padding: 5px 12px;
	background: var(--surface-2);
	border-radius: 999px;
}

/* ── کادر پاسخ، چسبیده به پایین ──
   روی گوشی نباید برای پاسخ دادن تا ته گفتگو اسکرول کرد */
.qk-tk-reply {
	position: sticky;
	bottom: 0;
	z-index: 5;
	padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
	margin: 0 -12px -12px;
	background: var(--surface);
	border-top: 1px solid var(--line);
}
.qk-tk-reply .qk-textarea { min-height: 46px; }
.qk-tk-reply-b {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 8px;
}
.qk-tk-note {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	color: var(--muted);
	cursor: pointer;
	min-height: 36px;
}

/* روی گوشی نوار پایین اپ زیر کادر پاسخ است — فاصله لازم دارد */
@media (max-width: 900px) {
	.qk-tk-reply { bottom: var(--tabbar-h, 58px); }
}

/* ── پروفایل ── */
.qk-prof-top {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding-bottom: 16px;
	margin-bottom: 6px;
	border-bottom: 1px solid var(--line);
}
.qk-prof-ava {
	flex: 0 0 auto;
	width: 68px; height: 68px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--brand-soft);
	display: grid;
	place-items: center;
	font-size: 26px;
	font-weight: 700;
	color: var(--brand-3);
}
.qk-prof-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qk-prof-id { min-width: 0; }
.qk-prof-n { font-size: 16px; font-weight: 700; color: var(--ink); }
.qk-prof-r { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.qk-prof-l { font-size: 12px; color: var(--muted); margin-top: 4px; }
.qk-prof-up { margin-top: 9px; display: inline-flex; cursor: pointer; }

.qk-prof-fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 18px;
}
@media (min-width: 620px) {
	.qk-prof-fields { grid-template-columns: 1fr 1fr; }
}

/* ── رصد روزانه ──
   شبکه‌ای از عددهای کوچک. رنگ فقط روی خطِ تغییر می‌نشیند نه روی
   کل خانه: وقتی ده خانه سبز و قرمز شوند، چشم دیگر تفکیک نمی‌کند. */
.qk-bd-grp + .qk-bd-grp { margin-top: 16px; }
.qk-bd-gt {
	font-size: 12px;
	font-weight: 700;
	color: var(--muted);
	margin-bottom: 8px;
}
/*
 * هر دسته یک سطر.
 *
 * تا ۱.۶۵ چهار ستونِ ثابت بود: دسته‌ی شش‌تایی دو سطرِ نیمه‌پر می‌شد و
 * دسته‌ی دوتایی نصفِ عرض را خالی می‌گذاشت. حالا خانه‌ها تا جا هست کنارِ
 * هم می‌نشینند؛ روی گوشی دوتا دوتا.
 */
.qk-bd-row {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 8px;
}

.qk-bd-cell {
	padding: 10px 12px;
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: 10px;
	min-width: 0;
}
.qk-bd-v {
	font-size: 19px;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.25;
	font-variant-numeric: tabular-nums;
}
.qk-bd-l {
	font-size: 12px;
	color: var(--ink-3);
	margin-top: 3px;
	line-height: 1.6;
	overflow-wrap: anywhere;
}
.qk-bd-d { font-size: 11.5px; color: var(--muted); margin-top: 5px; }
.qk-bd-cell.is-better .qk-bd-d { color: var(--ok); font-weight: 600; }
.qk-bd-cell.is-worse  .qk-bd-d { color: var(--danger); font-weight: 600; }
.qk-bd-when { font-size: 12px; color: var(--muted); }

/* ══════════ انتخاب دسترسی نقش ══════════ */
.qk-caps-group {
	margin-bottom: 14px;
	border: 1px solid var(--line);
	border-radius: 10px;
	overflow: hidden;
}
.qk-caps-title {
	padding: 8px 12px;
	background: var(--surface-2);
	border-bottom: 1px solid var(--line);
	font-size: 12px;
	font-weight: 600;
	color: var(--ink-2);
}
.qk-cap {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 9px 12px;
	font-size: 13.5px;
	border-bottom: 1px solid var(--line-2, var(--line));
	cursor: pointer;
}
.qk-cap:last-child { border-bottom: 0; }
.qk-cap:hover { background: var(--surface-2); }
.qk-cap input { flex: 0 0 auto; width: 17px; height: 17px; }
.qk-cap > span:first-of-type { flex: 1; }

/* اختیارهای سنگین باید پیش از تیک‌خوردن دیده شوند، نه بعدش. */
.qk-cap-flag {
	flex: 0 0 auto;
	font-size: 10.5px;
	font-weight: 600;
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--warn-bg, #FDF0DC);
	color: var(--warn, #9A5A0B);
}
.qk-cap.is-risky input:checked + span { font-weight: 600; }

/* ══════════ بخش‌های تاشو پرونده ══════════ */

/* نوار خلاصه: چهار عددی که همیشه دیده می‌شوند. */
.qk-sum {
	margin-bottom: 18px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--line);
}
/*
 * چهار ستون اگر جا هست، وگرنه دو — نه سه‌تا و یکی (۱.۸۳).
 *
 * clamp با ضربِ ۹۹۹ کلید است: پهنای ظرف از ۷۸۰ پیکسل بیشتر باشد کمینه‌ی
 * ستون یک‌چهارم می‌شود، کمتر باشد نصف. هر کارت این‌طور جای یک مبلغِ
 * میلیاردی را دارد؛ گوشی (زیر ۶۰۰) قاعده‌ی خودش را دارد.
 */
.qk-grid.qk-sum.qk-g4 {
	grid-template-columns: repeat(auto-fill, minmax(clamp(calc(25% - 12px), calc((780px - 100%) * 999), calc(50% - 12px)), 1fr));
}
.qk-sum .qk-stat-value { font-size: 19px; }

.qk-sect {
	border: 1px solid var(--line);
	border-radius: 12px;
	margin-bottom: 12px;
	background: var(--surface);
	overflow: hidden;
}
.qk-sect[open] { border-color: var(--line-2, var(--line)); }

/*
 * summary دست‌نخورده می‌ماند.
 *
 * گذاشتن display:flex روی خودِ summary، در وب‌کیت (سافاری آیفون و
 * وب‌ویوی اندروید) مکانیزم باز و بسته شدن details را از کار می‌اندازد.
 * چیدمان به span داخلی منتقل شده تا هم ظاهر درست باشد هم کلیک کار کند.
 */
.qk-sect-head {
	display: list-item;
	list-style: none;
	padding: 12px 14px;
	cursor: pointer;
	user-select: none;
	background: var(--surface-2);
	transition: background .12s;
}
.qk-sect-head::-webkit-details-marker { display: none; }
.qk-sect-head::marker { content: ''; }

.qk-sect-row {
	display: flex;
	align-items: center;
	gap: 9px;
}

/*
 * فلش انتهای مخالفِ متن می‌نشیند.
 *
 * کنار عنوان بودنش باعث می‌شد نگاه اول روی فلش بیفتد نه روی نام
 * بخش. حالا عنوان اول است و فلش ته خط — همان‌جایی که چشم در
 * فهرست‌های تاشو دنبالش می‌گردد.
 */
.qk-sect-row .qk-sect-arrow { order: 9; margin-inline-start: auto; }
.qk-sect-row .qk-sect-hint { margin-inline-start: 0; order: 8; }
.qk-sect-head:hover { background: var(--surface-3); }
.qk-sect-head:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: -2px;
}

/*
 * فلش با CSS، نه با نویسه — در همه فونت‌ها یک شکل است.
 *
 * بسته «‹» (رو به جلوی متن فارسی)، باز «⌄» (۱.۸۳). تا ۱.۸۲ برعکس بود:
 * بخشِ بسته رو به پایین و بخشِ باز رو به راست — مالک: «برعکس هستند».
 */
.qk-sect-arrow {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-inline-start: 2px solid var(--muted);
	border-bottom: 2px solid var(--muted);
	transform: rotate(135deg);
	transition: transform .16s;
	margin-top: 0;
}
.qk-sect[open] > .qk-sect-head .qk-sect-arrow,
.qk-sect.is-open > .qk-sect-head .qk-sect-arrow {
	transform: rotate(45deg);
	margin-top: -4px;
}

.qk-sect-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
}

/* نشان کنار سرفصل: خلاصه‌ی محتوای بسته، تا لازم نباشد بازش کنی. */
.qk-sect-badge {
	font-size: 11.5px;
	font-weight: 500;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--surface-3);
	color: var(--ink-3);
}
.qk-sect-badge-warn {
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--warn-bg, #FDF0DC);
	color: var(--warn);
	font-weight: 600;
}
.qk-sect-badge-ok {
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--ok-bg, #E4F5EC);
	color: var(--ok, #157A54);
	font-weight: 600;
}
.qk-sect-hint {
	font-size: 11.5px;
	color: var(--muted);
	margin-inline-start: auto;
	text-align: end;
}

.qk-sect-body { padding: 16px 14px 6px; }

/*
 * خانه‌های خالیِ فقط‌خواندنی.
 *
 * پنهان‌شان می‌کنیم نه حذف — با یک کلید برمی‌گردند، و کسی که واقعاً
 * دنبال یک خانه‌ی خالی می‌گردد گمش نمی‌کند.
 */
.qk-hide-empty .qk-field.is-empty { display: none; }

/* بخشی که همه‌ی خانه‌هایش پنهان شده، خودش هم جا نگیرد. */
.qk-hide-empty .qk-sect:not(:has(.qk-field:not(.is-empty))) .qk-sect-body {
	padding-block: 10px;
}

@media (max-width: 600px) {
	.qk-sect-hint { display: none; }
	.qk-sect-head { padding: 11px 12px; }
	.qk-sect-body { padding: 14px 12px 4px; }
	.qk-sum { margin-bottom: 14px; padding-bottom: 14px; }
}

@media print {
	.qk-sect { break-inside: avoid; }
	.qk-sect-body { display: block !important; }
	.qk-hide-empty .qk-field.is-empty { display: block; }
	[data-toggle-empty] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.qk-sect-arrow, .qk-sect-head { transition: none; }
}


/* ══════════ فشرده‌سازی بالای صفحه پرونده ══════════ */

.qk-blockers-sect {
	border-color: var(--warn-line, var(--warn));
	margin-bottom: 14px;
}
.qk-blockers-sect > .qk-sect-head { background: var(--warn-bg, #FFF6E6); }
.qk-blockers-sect > .qk-sect-head:hover { background: var(--warn-bg, #FFF6E6); filter: brightness(.97); }
.qk-blockers-sect .qk-sect-arrow { border-color: var(--warn); }

/*
 * نوار تب عمداً نمی‌چسبد.
 *
 * چسباندنش را امتحان کردیم: نوار روی محتوایی که زیرش می‌رفت
 * می‌نشست و برچسب کارت‌های خلاصه نصفه دیده می‌شد — کاربر آن را
 * «بریدگی» می‌دید، نه یک نوار شناور. سودش به این هزینه نمی‌ارزید.
 */
@media (max-width: 600px) {
	/* روی گوشی، جعبه پورسانت زیر مشخصات می‌رود نه کنارش. */
	.qk-deal-head-grid { flex-direction: column; gap: 8px !important; }
	.qk-deal-head-grid > div { min-width: 0 !important; text-align: start !important; }

	/* عددهای خلاصه دو ستونه، نه چهار ستون فشرده. */
	.qk-sum.qk-g4 { grid-template-columns: 1fr 1fr; }
}


/*
 * جعبه پورسانت در سربرگ پرونده، روی گوشی.
 *
 * ۱۳۳ پیکسل از بالای صفحه را می‌گرفت. وقتی پرونده‌ای را باز می‌کنی،
 * سهم پورسانت خودت اولین چیزی نیست که لازم داری — و تب پورسانت
 * همه‌اش را کامل نشان می‌دهد. اینجا یک خط می‌شود، نه حذف.
 */
@media (max-width: 600px) {
	.qk-deal-comm {
		width: 100%;
		text-align: start !important;
		min-width: 0 !important;
	}
	.qk-deal-comm .qk-stat {
		display: flex;
		align-items: baseline;
		gap: 8px;
		padding: 8px 10px;
		box-shadow: none;
		border: 1px solid var(--line);
		border-radius: 8px;
	}
	.qk-deal-comm .qk-stat-label {
		margin: 0;
		font-size: 11.5px;
		white-space: nowrap;
	}
	.qk-deal-comm .qk-stat-value {
		margin: 0;
		font-size: 14px;
		margin-inline-start: auto;
	}
	.qk-deal-comm .qk-stat-sub { display: none; }
}


/*
 * مرورگری که details را نمی‌شناسد، همه‌ی محتوا را باز نشان می‌دهد.
 * با کلاسی که جاوااسکریپت می‌گذارد، خودمان کنترلش می‌کنیم.
 */
.qk-sect:not([open]) > .qk-sect-body { display: none; }
.qk-sect.is-open > .qk-sect-body { display: block; }


/*
 * فلش‌های ناوبری، کشیده‌شده با CSS.
 *
 * وابسته به فونت نیستند و در RTL خودشان درست می‌چرخند، چون جهت را
 * از margin منطقی نمی‌گیرند بلکه صریح تعریف شده.
 */
/*
 * مرزها عمداً فیزیکی‌اند (right)، نه منطقی (inline-end).
 *
 * inline-end در RTL به چپ می‌پرد و گوشه‌ی مثلث برعکس می‌شود؛ بعد هر
 * چرخشی که بنویسی در یکی از دو جهت غلط از آب درمی‌آید. با مرز
 * فیزیکی، شکل ثابت است و فقط زاویه را عوض می‌کنیم.
 *
 * شکل پایه: گوشه‌ی بالا-راست. با ۴۵ درجه به راست اشاره می‌کند و با
 * ۱۳۵- درجه به چپ.
 */
.qk-chev {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	vertical-align: middle;
}

/* در فارسی «قبلی» به راست اشاره می‌کند و «بعدی» به چپ. */
.qk-chev-prev { transform: rotate(45deg); }
.qk-chev-next { transform: rotate(-135deg); }

[dir="ltr"] .qk-chev-prev { transform: rotate(-135deg); }
[dir="ltr"] .qk-chev-next { transform: rotate(45deg); }

.qk-jdp-head > button[data-nav] {
	display: grid;
	place-items: center;
}


/* ══════════ خالی‌سازی داده ══════════ */
.qk-purge-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px;
	border: 1px solid var(--line);
	border-radius: 10px;
	margin-bottom: 8px;
	cursor: pointer;
	background: var(--surface);
}
.qk-purge-row:hover { border-color: var(--danger); }
.qk-purge-row.is-empty { opacity: .5; cursor: default; }
.qk-purge-row.is-empty:hover { border-color: var(--line); }
.qk-purge-row > input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; }
.qk-purge-b { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.qk-purge-t {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 14px;
	font-weight: 600;
}
.qk-purge-n {
	font-size: 11.5px;
	font-weight: 500;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--surface-3);
	color: var(--ink-3);
}
.qk-purge-d { font-size: 12.5px; color: var(--muted); line-height: 1.8; }

/* ══════════ گوشی: جلوگیری از درهم‌رفتن ══════════ */
@media (max-width: 600px) {
	/*
	 * خانه‌های شبکه‌ای روی گوشی تک‌ستونی می‌شوند.
	 *
	 * qk-g3 و qk-g4 روی ۳۷۵ پیکسل ستون‌هایی به عرض ۹۰ پیکسل می‌سازند
	 * که برچسب‌های فارسی در آن‌ها روی هم می‌افتند.
	 */
	.qk-grid.qk-g3,
	.qk-grid.qk-g4 { grid-template-columns: 1fr; }

	/* عددهای خلاصه دو ستونه بمانند — کوتاه‌اند و جا می‌شوند. */
	.qk-grid.qk-sum.qk-g4 { grid-template-columns: 1fr 1fr; }

	/* برچسب و مقدارِ آمار روی هم نیفتند. */
	.qk-stat { min-width: 0; }
	.qk-stat-value { font-size: 15px; word-break: break-word; }
	.qk-stat-label, .qk-stat-sub { word-break: break-word; }

	/* دکمه‌های کنار هم، وقتی جا نیست، پایین هم بروند. */
	.qk-actions { flex-wrap: wrap; }
	.qk-actions > .qk-btn { flex: 1 1 auto; min-width: 45%; }

	/* سرِ کارت: عنوان و نشان و دکمه در سه سطر، نه فشرده در یک سطر. */
	.qk-card-head { flex-wrap: wrap; row-gap: 6px; }
	.qk-card-head > h3 { min-width: 0; }

	/* نشان و راهنمای سرفصل بخش‌ها روی گوشی جا نمی‌شوند. */
	.qk-sect-row { flex-wrap: wrap; row-gap: 4px; }
	.qk-sect-title { min-width: 0; }

	/* جدول‌های افقی همیشه ظرف خودشان را داشته باشند. */
	.qk-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

	/* ردیف خالی‌سازی روی گوشی. */
	.qk-purge-d { font-size: 12px; }
}

/* فهرست کارهای پاک‌سازی کش */
.qk-cache-list {
	margin: 0 0 4px;
	padding-inline-start: 18px;
	font-size: 13px;
	line-height: 2;
	color: var(--ink-2);
}
.qk-cache-list li { margin-bottom: 2px; }

/* ══════════ ضامن‌ها در فرم ثبت ══════════ */
.qk-guar-empty {
	padding: 14px;
	border: 1px dashed var(--line-2);
	border-radius: 10px;
	font-size: 13px;
	color: var(--muted);
	text-align: center;
}
.qk-guar-row {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: 10px;
	margin-bottom: 8px;
	background: var(--surface-2);
	flex-wrap: wrap;
}
.qk-guar-i {
	flex: 0 0 auto;
	width: 24px; height: 24px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--accent-soft);
	color: var(--accent-3);
	font-size: 12px; font-weight: 600;
}
.qk-guar-b { display: flex; flex-direction: column; gap: 2px; flex: 1 1 160px; min-width: 0; }
.qk-guar-name { font-size: 14px; font-weight: 600; }
.qk-guar-m { font-size: 12px; color: var(--muted); word-break: break-word; }

/* دسته‌بندی بخش‌های حذف داده */
.qk-purge-grp { margin-bottom: 18px; }
.qk-purge-h {
	font-size: 13px;
	font-weight: 600;
	padding: 7px 11px;
	border-radius: 8px;
	margin-bottom: 8px;
}
.qk-purge-h.ok  { background: var(--ok-bg); color: var(--ok); }
.qk-purge-h.bad { background: var(--danger-bg, #FDECEA); color: var(--danger); }
.qk-purge-row.is-safe:hover { border-color: var(--ok); }
.qk-purge-x {
	font-size: 11.5px;
	color: var(--ink-3);
	background: var(--surface-3);
	padding: 2px 8px;
	border-radius: 6px;
	align-self: flex-start;
	margin-top: 2px;
}

/* دکمه‌های بخش‌های غیرِ گردش پرونده در راهنما */
.qk-guide-extra {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--line);
}
.qk-guide-extra .qk-btn.is-on {
	background: var(--accent);
	color: #fff;
	border-color: var(--accent);
}

/* ═══════════════════ کار من ═══════════════════ */
/*
 * ستون گام‌ها. شماره سمت راستِ عنوان می‌نشیند (نه چپ) چون صفحه
 * راست‌به‌چپ است و چشم از همان‌جا شروع می‌کند.
 */
.qk-task {
	background: var(--surface);
	border: 1px solid var(--line);
	border-right: 3px solid var(--accent);
	border-radius: var(--r);
	box-shadow: var(--sh);
	margin-bottom: 14px;
	overflow: hidden;
}

.qk-task-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	background: var(--surface-2);
	border-bottom: 1px solid var(--line);
}

.qk-task-head h4 {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--ink);
}

.qk-task-n {
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	line-height: 26px;
	text-align: center;
	border-radius: 50%;
	background: var(--accent);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
}

.qk-task-body { padding: 16px; }

/* منتظر دیگران */
.qk-wait {
	margin: 0;
	padding: 0;
	list-style: none;
}

.qk-wait li {
	padding: 8px 12px;
	margin-bottom: 6px;
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: 8px;
	font-size: 13px;
	color: var(--ink-2);
}

/*
 * دکمه‌ی مرحله ته ستون. حاشیه‌ی پررنگ‌تر می‌گیرد تا وقتی صفحه بلند
 * است، چشم ته کار را پیدا کند.
 */
.qk-mine-go {
	border: 2px solid var(--accent);
	background: var(--accent-soft);
}

.qk-mine-go .qk-hint { color: var(--ink-2); }

@media (max-width: 640px) {
	.qk-task-body { padding: 12px; }
	.qk-task-head { padding: 10px 12px; }
}

/* ردیف رمز: جعبه و دکمه‌ی نمایش کنار هم */
.qk-pass-row { display: flex; gap: 6px; align-items: center; }
.qk-pass-row .qk-input { flex: 1 1 auto; min-width: 0; }
.qk-pass-row .qk-btn { flex: 0 0 auto; }

/*
 * خانه‌ی نادرست.
 *
 * فقط رنگ کافی نیست — کسی که رنگ را تشخیص نمی‌دهد باید از متن خطای
 * زیر خانه بفهمد، و آن متن همیشه همراهش می‌آید.
 */
.qk-input.is-bad,
.qk-select.is-bad,
.qk-textarea.is-bad {
	border-color: var(--danger);
	background: var(--danger-bg);
}

.qk-input.is-bad:focus,
.qk-select.is-bad:focus {
	outline: 2px solid var(--danger);
	outline-offset: 1px;
}

/* ═══════ امضای کارکنان ═══════
   کادر و تصویر امضا عمداً سفید می‌مانند، حتی در حالت تیره: امضا روی
   کاغذ سفید چاپ می‌شود و باید همان‌طور دیده شود. */

.qk-sig-card .qk-card-head { display: flex; align-items: center; gap: 10px; }
.qk-sig-now { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.qk-sig-img,
.qk-sig-thumb {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 8px;
}
.qk-sig-img { padding: 8px 14px; min-width: 160px; min-height: 64px; }
.qk-sig-img img { display: block; max-height: 80px; max-width: 260px; }
.qk-sig-thumb { padding: 3px 8px; }
.qk-sig-thumb img { display: block; max-height: 34px; max-width: 120px; }
.qk-sig-meta { font-size: 12px; color: var(--muted); }
.qk-sig-empty {
	font-size: 13px;
	color: var(--muted);
	padding: 10px 12px;
	border: 1px dashed var(--line);
	border-radius: 8px;
}
.qk-sig-mode { display: flex; gap: 6px; margin-bottom: 10px; }
.qk-sig-pad {
	display: block;
	width: 100%;
	max-width: 560px;
	height: 180px;
	background: #fff;
	border: 1px dashed var(--line);
	border-radius: 10px;
	touch-action: none;
	cursor: crosshair;
}
.qk-sig-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	max-width: 560px;
	margin-top: 6px;
}
.qk-sig-preview { margin-top: 10px; }
.qk-sig-preview img {
	max-height: 90px;
	max-width: 280px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 6px;
}
.qk-sig-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.qk-sig-h { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.qk-sig-h-t { font-size: 12px; color: var(--ink-3); margin-bottom: 6px; }
.qk-sig-h-imgs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qk-sig-arrow { color: var(--muted); }

/* ═══════ «منتظر دیگران» — نام و نوبت ═══════ */
.qk-wait-who { color: var(--ink-3); font-weight: 400; }
.qk-wait-who::before { content: "("; }
.qk-wait-who::after { content: ")"; }
.qk-wait-later {
	margin-top: 6px;
	padding: 6px 10px;
	border-radius: 6px;
	background: var(--warn-bg);
	color: #8A5109;
	font-size: 12.5px;
}
.qk-wait-none {
	margin-top: 6px;
	color: var(--danger);
	font-size: 12.5px;
}

/* ═══════ «کار من» — شرط‌های مرحله‌ی بعد ═══════ */
.qk-chk-card { border-right: 3px solid var(--warn); margin-bottom: 16px; }
.qk-chk-card.all-done { border-right-color: var(--ok, #0F8A63); }
.qk-chk-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.qk-chk-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.qk-chk-count { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.qk-chk-bar { margin: 10px 0 12px; }
.qk-chk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.qk-chk {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 9px 12px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--surface);
}
.qk-chk-ico {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	border-radius: 50%;
	font-weight: 700;
	font-size: 13px;
}
.qk-chk.done { background: var(--surface-2); }
.qk-chk.done .qk-chk-ico { background: var(--ok-bg); color: var(--ok, #0F8A63); }
.qk-chk.mine { border-color: var(--warn-line); background: var(--warn-bg); }
.qk-chk.mine .qk-chk-ico { background: var(--warn); color: #fff; }
.qk-chk.wait .qk-chk-ico { background: var(--line); color: var(--ink-3); }
.qk-chk.hard .qk-chk-ico { background: var(--danger); color: #fff; }
.qk-chk-body { flex: 1; min-width: 0; }
.qk-chk-t { font-size: 13.5px; font-weight: 600; color: var(--ink); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.qk-chk.done .qk-chk-t { color: var(--ink-3); font-weight: 400; }
.qk-chk-d { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.qk-chk-who { font-size: 12px; color: var(--muted); margin-top: 2px; }
.qk-chk-tag { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 10px; }
.qk-chk-tag.mine { background: var(--warn); color: #fff; }
.qk-chk-tag.wait { background: var(--surface-2); color: var(--ink-3); border: 1px solid var(--line); }
.qk-chk-tag.hard { background: var(--danger-bg, #FDECEC); color: var(--danger); }
.qk-chk-act { flex: 0 0 auto; align-self: center; }
.qk-chk-hint { font-size: 12px; color: var(--muted); white-space: nowrap; }
.qk-chk-rule { margin: 12px 0 0; font-size: 12.5px; color: var(--ink-2); }
.qk-mine-h { margin: 18px 0 10px; font-size: 14px; font-weight: 700; color: var(--ink); display: flex; gap: 8px; align-items: center; }
.qk-mine-h span { background: var(--warn); color: #fff; border-radius: 10px; padding: 0 8px; font-size: 12px; }
@media (max-width: 640px) {
	.qk-chk { flex-wrap: wrap; }
	.qk-chk-act { flex-basis: 100%; }
}

/* ═══════ ضامن‌ها — کنارگذاشته و مدارک ═══════ */
.qk-guar-card.out { opacity: .8; background: var(--surface-2); }
.qk-guar-out { margin-top: 12px; }
.qk-guar-out > summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
.qk-guar-why { font-size: 12px; color: var(--ink-3); margin-top: 6px; }
.qk-docs-g.inactive { opacity: .75; }

/* ═══════ تازه‌سازی زنده، صدا و پایان نشست ═══════ */

/* دکمه‌ی «داده‌ی تازه» — وقتی نمی‌شود بی‌اجازه صفحه را نو کرد. */
.qk-live-pill {
	border: 1px solid var(--accent);
	background: var(--accent-soft);
	color: var(--accent-2);
	border-radius: 999px;
	padding: 4px 12px;
	font-size: 12px;
	font-family: inherit;
	animation: qk-in .2s ease;
}
.qk-live-pill:hover { background: var(--accent); color: #fff; }

/* نوار هشدار نسخه یا تغییر دسترسی، زیر سربرگ. */
.qk-sysbar {
	background: var(--warn-bg);
	border-bottom: 1px solid var(--line);
	padding: 10px 20px;
	font-size: 12.5px;
	line-height: 1.9;
	color: var(--ink-2);
}

/* ردیفی که همین حالا به فهرست اضافه شده. */
.qk-row-new { animation: qk-row-new 3s ease; }
@keyframes qk-row-new {
	from { background: var(--accent-soft); }
	60%  { background: var(--accent-soft); }
	to   { background: transparent; }
}

/* کلید صدا، بالای فهرست اعلان‌ها. */
.qk-notif-bar {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 12px;
	background: var(--surface);
	border-bottom: 1px solid var(--line);
	font-size: 12px;
	color: var(--muted);
}
.qk-notif-snd {
	border: 1px solid var(--line);
	background: var(--surface-2);
	border-radius: 999px;
	padding: 3px 10px;
	font-size: 11.5px;
	font-family: inherit;
	color: var(--ink-2);
}

/* پیام اعلانِ تازه — کلیک‌شدنی، چون معمولاً باید جایی رفت. */
.qk-live-toast { cursor: pointer; }
.qk-live-toast b { display: block; font-size: 13px; margin-bottom: 3px; }
.qk-live-toast span { display: block; opacity: .92; }
.qk-live-toast u { display: inline-block; margin-top: 7px; font-size: 11.5px; opacity: .95; }

/* پرده‌ی پایان نشست. */
.qk-gone {
	position: fixed;
	inset: 0;
	background: rgba(10, 36, 71, .72);
	display: grid;
	place-items: center;
	z-index: 200;
	padding: 20px;
}
.qk-gone-box {
	background: var(--surface);
	border-radius: var(--r);
	box-shadow: var(--sh-lg);
	padding: 26px 22px;
	width: min(420px, 100%);
	text-align: center;
}
.qk-gone-t { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.qk-gone-d { font-size: 13px; color: var(--ink-3); line-height: 2; margin-bottom: 16px; }

/* ═══════════════════════════════════════════════════════════════
   ۱.۶۶ — یک زبانِ دیداری برای گزارش، داشبورد و منو

   تا ۱.۶۵ هر کارتِ گزارش شکلِ خودش را داشت: اندازه‌ی نوشته‌ی ۱۱.۵ و
   ۱۲ و ۱۲.۵ و ۱۳ پیکسل، فاصله‌های درون‌خطی، و «ردیفِ عدد» که در هر
   صفحه جورِ دیگری ساخته شده بود. مدیری که از داشبورد به گزارش می‌رفت،
   باید دوباره یاد می‌گرفت عدد کجاست و تغییرش کجا. از اینجا به بعد
   یک کارتِ عدد، یک برچسبِ تغییر، یک ردیفِ میله‌ای و یک ردیفِ کلید و
   مقدار هست — همه‌جا همان.
   ═══════════════════════════════════════════════════════════════ */

/* ── سرِ صفحه ── */
.qk-rhead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin-bottom: 14px;
}
.qk-rhead-t { flex: 1 1 260px; min-width: 0; }
.qk-rhead-t h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--ink); }
.qk-rhead-t p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); }
.qk-rhead-a { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ── انتخابِ بازه: قرص‌های کنار هم، یک لمس به‌جای بازکردنِ فهرست ── */
.qk-seg {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 2px;
	padding: 3px;
	border-radius: 999px;
	background: var(--surface-3);
}
.qk-seg button {
	border: 0;
	background: none;
	min-height: 34px;
	padding: 6px 13px;
	border-radius: 999px;
	font: inherit;
	font-size: 12.5px;
	color: var(--ink-3);
	cursor: pointer;
}
.qk-seg button:hover { color: var(--ink); }
.qk-seg button.on {
	background: var(--surface);
	color: var(--accent-3);
	font-weight: 600;
	box-shadow: 0 1px 3px rgba(11,31,58,.12);
}
.qk-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── زبانه‌ها ── */
.qk-rtabs {
	display: flex;
	gap: 4px;
	margin: 0 0 16px;
	border-bottom: 1px solid var(--line);
	overflow-x: auto;
	scrollbar-width: none;
}
.qk-rtabs::-webkit-scrollbar { display: none; }
.qk-rtab {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 44px;
	padding: 10px 14px;
	margin-bottom: -1px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	font: inherit;
	font-size: 13.5px;
	color: var(--muted);
	cursor: pointer;
}
.qk-rtab .qk-rtab-i { width: 17px; height: 17px; display: grid; place-items: center; }
.qk-rtab:hover { color: var(--ink); }
.qk-rtab.on { color: var(--accent-3); border-bottom-color: var(--accent); font-weight: 600; }
.qk-rtab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.qk-rtab-n {
	min-width: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--danger-bg);
	color: var(--danger);
	font-size: 11px;
	line-height: 18px;
	text-align: center;
}
.qk-rpanel[hidden] { display: none; }

/*
 * روی گوشی، پنج زبانه در یک ردیف جا نمی‌شوند.
 *
 * نوارِ افقیِ کشیدنی دو زبانه‌ی آخر («گردش کار»، «ارجاع‌ها») را بیرون از
 * صفحه نگه می‌داشت و مدیر هیچ نشانه‌ای نداشت که وجود دارند. حالا سه‌تا
 * در هر سطر، همه دیده می‌شوند و هر کدام به اندازه‌ی انگشت.
 */
@media (max-width: 600px) {
	.qk-rtabs {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 6px;
		overflow: visible;
		border-bottom: 0;
	}
	.qk-rtab {
		justify-content: center;
		min-width: 0;
		min-height: 42px;
		margin: 0;
		padding: 8px 6px;
		border: 1px solid var(--line);
		border-radius: 999px;
		background: var(--surface);
		font-size: 12.5px;
		white-space: nowrap;
	}
	.qk-rtab .qk-rtab-i { display: none; }
	.qk-rtab.on { background: var(--accent-soft); border-color: var(--accent); }

	/* ترتیبِ افراد: چهار گزینه، دوتا دوتا — نه سه‌تا و یکی تنها در سطرِ بعد. */
	.qk-psort .qk-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; border-radius: var(--r); }
	.qk-psort .qk-seg button { border-radius: var(--r-sm); }
}

/* ── جمله‌های تفسیری: اول چیزی که مدیر می‌خواند ── */
.qk-insights { display: grid; gap: 8px; margin-bottom: 16px; }
.qk-insight {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 11px 14px;
	border: 1px solid;
	border-radius: var(--r);
	font-size: 13px;
	line-height: 1.9;
}
.qk-insight .qk-ins-i { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 3px; }
.qk-insight.bad  { background: var(--danger-bg); border-color: var(--danger-line); color: #8E1F1F; }
.qk-insight.warn { background: var(--warn-bg);   border-color: var(--warn-line);   color: #8A5109; }
.qk-insight.ok   { background: var(--ok-bg);     border-color: var(--ok-line);     color: #0A5C43; }
.qk-insight.info { background: var(--info-bg);   border-color: var(--info-line);   color: var(--accent-3); }

/* ── کارتِ عدد: یک شکل برای داشبورد، گزارش و بازدهی ── */
.qk-kpis {
	display: grid;
	/* auto-fit: چهار کارت هم کلِ عرض را پر می‌کنند، نه چهار از شش خانه. */
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 12px;
	margin-bottom: 16px;
}
/*
 * نشانه و برچسب در سطرِ اول، عدد زیرشان با تمامِ عرض.
 *
 * نسخه‌ی اول نشانه را کنارِ عدد گذاشته بود و برای عدد فقط نود پیکسل
 * می‌ماند: «۲۲٫۷ میلیارد تومان» می‌شکست و روی رایانه‌ی ۱۲۸۰ پیکسلی کارتِ
 * پنجم تنها به سطرِ بعد می‌رفت.
 */
.qk-kpi {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas: "i l" "v v" "s s";
	align-items: center;
	gap: 0 10px;
	min-width: 0;
	padding: 14px 16px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--surface);
	box-shadow: var(--sh);
	color: inherit;
	font: inherit;
	text-align: right;
}
button.qk-kpi, .qk-kpi[data-go] { cursor: pointer; transition: border-color .12s, transform .12s; }
button.qk-kpi:hover, .qk-kpi[data-go]:hover { border-color: var(--accent); transform: translateY(-1px); }
.qk-kpi-i {
	grid-area: i;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 10px;
	background: var(--accent-soft);
	color: var(--accent-3);
}
.qk-kpi-i .qk-ico { width: 19px; height: 19px; }
.qk-kpi-v {
	grid-area: v;
	margin-top: 10px;
	font-size: 23px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ink);
	overflow-wrap: anywhere;
}
.qk-kpi-l { grid-area: l; font-size: 12.5px; color: var(--ink-3); line-height: 1.6; }
.qk-kpi-s {
	grid-area: s;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	font-size: 11.5px;
	color: var(--muted-2);
}
.qk-kpi.t-ok     .qk-kpi-i { background: var(--ok-bg);     color: var(--ok); }
.qk-kpi.t-warn   .qk-kpi-i { background: var(--warn-bg);   color: var(--warn); }
.qk-kpi.t-bad    .qk-kpi-i { background: var(--danger-bg); color: var(--danger); }
.qk-kpi.t-violet .qk-kpi-i { background: #EFE9FE;          color: #6D4AE0; }
.qk-kpi.t-teal   .qk-kpi-i { background: #E2F3F5;          color: #0F6E7B; }

/* ── تغییر نسبت به دوره‌ی قبل: سبز یعنی بهتر، نه یعنی بیشتر ── */
.qk-chg {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 1px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}
.qk-chg.better { background: var(--ok-bg);     color: var(--ok); }
.qk-chg.worse  { background: var(--danger-bg); color: var(--danger); }
.qk-chg.flat   { background: var(--surface-3); color: var(--muted); }

/* ── سرتیترِ بخش داخلِ گزارش ── */
.qk-sec-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 22px 0 10px; }
.qk-sec-h:first-child { margin-top: 0; }
.qk-sec-h h4 { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.qk-sec-h span { font-size: 12px; color: var(--muted); }

/* ── ردیفِ کلید و مقدار: جای همه‌ی flex های درون‌خطی ── */
.qk-kv {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 9px 0;
	border-bottom: 1px solid var(--line);
	font-size: 13px;
	color: var(--ink-2);
}
.qk-kv:last-child { border-bottom: 0; }
.qk-kv b { font-weight: 600; color: var(--ink); white-space: nowrap; }
.qk-kv[data-go], .qk-kv[data-status] { cursor: pointer; }
.qk-kv[data-go]:hover, .qk-kv[data-status]:hover { color: var(--accent-3); }
.qk-kv-sub { font-size: 11.5px; color: var(--muted); }

/* ── میله‌ی ردیفی: رنگ از معنا، نه از سلیقه‌ی هر صفحه ── */
.qk-barrow-t i.is-ok   { background: var(--ok); }
.qk-barrow-t i.is-warn { background: var(--warn); }
.qk-barrow-t i.is-bad  { background: var(--danger); }
.qk-barrow[data-status] { cursor: pointer; }
.qk-barrow[data-status]:hover .qk-barrow-h span { color: var(--accent-3); }
.qk-barrow-h span { color: var(--ink-2); }
.qk-barrow-h em { font-style: normal; color: var(--muted); font-size: 12px; }

/* ── چیپ: یک عدد با برچسبش ── */
.qk-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface-2);
	font-size: 12px;
	color: var(--ink-3);
	white-space: nowrap;
}
.qk-chip b { font-weight: 600; color: var(--ink); }
.qk-chip.warn { background: var(--warn-bg);   border-color: var(--warn-line);   color: #8A5109; }
.qk-chip.bad  { background: var(--danger-bg); border-color: var(--danger-line); color: #8E1F1F; }
.qk-chip.ok   { background: var(--ok-bg);     border-color: var(--ok-line);     color: #0A5C43; }

/* واحدِ کنارِ عدد («روز») کوچک‌تر از خودِ عدد. */
.qk-kpi-v small { font-size: 13px; font-weight: 600; color: var(--muted); }

/* دکمه یا زیرنویسِ سرِ کارت، آن سرِ سطر — نه چسبیده به عنوان. */
.qk-card-head > .qk-btn,
.qk-card-head > .qk-kv-sub { margin-inline-start: auto; }
.qk-insight + .qk-grid { margin-top: 14px; }

/* توضیحِ روشِ شمارش، زیرِ جدولِ افراد. */
.qk-rnote {
	margin-top: 14px;
	padding: 10px 14px;
	border-radius: var(--r);
	background: var(--surface-2);
	font-size: 12px;
	line-height: 1.9;
	color: var(--muted);
}

/* ═══════ بازدهی افراد ═══════ */

/* تمرکزِ کار: یک میله که با یک نگاه می‌گوید کار پخش است یا نه. */
.qk-conc {
	display: flex;
	height: 16px;
	margin: 4px 0 10px;
	border-radius: 999px;
	overflow: hidden;
	background: var(--surface-3);
}
.qk-conc i { display: block; height: 100%; min-width: 2px; }
.qk-conc i + i { box-shadow: inset 1px 0 0 rgba(255,255,255,.7); }
.qk-conc-lg { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--ink-3); }
.qk-conc-lg span { display: inline-flex; align-items: center; gap: 6px; }
.qk-conc-lg i { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 10px; }

.qk-psort { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.qk-psort > span { font-size: 12px; color: var(--muted); }

.qk-people { display: grid; gap: 10px; }
@media (min-width: 1100px) {
	.qk-people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.qk-person {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px 12px;
	padding: 14px 16px;
	border: 1px solid var(--line);
	border-inline-start: 3px solid transparent;
	border-radius: var(--r-lg);
	background: var(--surface);
	box-shadow: var(--sh);
	min-width: 0;
}
.qk-person.heavy { border-inline-start-color: var(--warn); }
.qk-person-av {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--brand-soft);
	color: var(--brand-3);
	font-size: 16px;
	font-weight: 700;
}
.qk-person-rank {
	position: relative;
}
.qk-person-rank::after {
	content: attr(data-rank);
	position: absolute;
	bottom: -3px;
	inset-inline-end: -3px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border: 2px solid var(--surface);
	border-radius: 999px;
	background: var(--brand-3);
	color: #fff;
	font-size: 10px;
	line-height: 14px;
	text-align: center;
}
.qk-person-n { font-size: 14px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.qk-person-r { font-size: 12px; color: var(--muted); }
.qk-person-share { text-align: left; }
.qk-person-share b { display: block; font-size: 18px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.qk-person-share span { font-size: 11px; color: var(--muted); }
.qk-person.heavy .qk-person-share b { color: var(--warn); }
.qk-meter {
	grid-column: 1 / -1;
	height: 6px;
	border-radius: 999px;
	overflow: hidden;
	background: var(--surface-3);
}
.qk-meter i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.qk-person.heavy .qk-meter i { background: var(--warn); }
.qk-person-m { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }

/* ═══════ منوی کناری: بخش‌های جدا، جمع‌شدنی ═══════ */

.qk-nav-sec + .qk-nav-sec {
	margin-top: 4px;
	padding-top: 4px;
	border-top: 1px solid rgba(255,255,255,.07);
}
.qk-nav-gh {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: 36px;
	padding: 8px 12px 6px;
	border: 0;
	border-radius: var(--r-sm);
	background: none;
	font: inherit;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .02em;
	color: #8FA9CA;
	text-align: right;
	cursor: pointer;
}
.qk-nav-gh:hover { color: #fff; background: rgba(255,255,255,.04); }
.qk-nav-gh:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -2px; }
.qk-nav-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #3F8BF0; }
.qk-nav-sec.t-crm     .qk-nav-dot { background: #38BDF8; }
.qk-nav-sec.t-money   .qk-nav-dot { background: #34D399; }
.qk-nav-sec.t-reports .qk-nav-dot { background: #A78BFA; }
.qk-nav-sec.t-admin   .qk-nav-dot { background: #FB923C; }
.qk-nav-sec.t-me      .qk-nav-dot { background: #94A3B8; }
.qk-nav-gt { flex: 1; min-width: 0; }
.qk-nav-gn {
	display: none;
	min-width: 18px;
	padding: 0 6px;
	border-radius: 999px;
	background: rgba(255,255,255,.08);
	font-size: 10.5px;
	line-height: 17px;
	text-align: center;
}
.qk-nav-sec.is-closed .qk-nav-gn { display: inline-block; }
.qk-nav-chev { width: 16px; height: 16px; flex: 0 0 16px; opacity: .7; transition: transform .15s; }
.qk-nav-sec.is-closed .qk-nav-chev { transform: rotate(90deg); }
.qk-nav-sec.is-closed .qk-nav-items { display: none; }
/* بخشِ جمع‌شده‌ای که چیزِ تازه دارد، باید بگوید. */
.qk-nav-sec.is-closed.has-badge .qk-nav-gn { background: var(--danger); color: #fff; }

/* ── دکمه‌ی جمع‌کردنِ منو روی رایانه ── */
.qk-nav-head { position: relative; }
.qk-rail-btn {
	display: none;
	position: absolute;
	top: 14px;
	inset-inline-end: 10px;
	width: 34px;
	height: 34px;
	place-items: center;
	border: 0;
	border-radius: var(--r-sm);
	background: rgba(255,255,255,.06);
	color: #A9C2E2;
	cursor: pointer;
}
.qk-rail-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.qk-rail-btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 1px; }
.qk-rail-btn .qk-ico { width: 18px; height: 18px; }

@media (min-width: 901px) {
	.qk-rail-btn { display: grid; }
	.qk-nav-head { padding-inline-end: 52px; }

	/*
	 * منوی باریک.
	 *
	 * روی رایانه، کاشی‌های داشبورد همان کارها را با نشانه نشان می‌دهند؛
	 * منوی کناریِ پهن فقط جا می‌گیرد. باریک‌شده، فقط نشانه‌ها می‌مانند و
	 * نامِ هر کدام با نگه‌داشتنِ نشانگر دیده می‌شود.
	 */
	.qk-shell.is-rail { --nav-w: 72px; }
	.qk-shell.is-rail .qk-nav-head { padding: 64px 8px 12px; text-align: center; }
	.qk-shell.is-rail .qk-rail-btn { inset-inline: 0; margin: 0 auto; }
	.qk-shell.is-rail .qk-rail-btn .qk-ico { transform: scaleX(-1); }
	.qk-shell.is-rail .qk-nav-brand { font-size: 0; }
	.qk-shell.is-rail .qk-nav-brand::first-letter { font-size: 18px; }
	.qk-shell.is-rail .qk-nav-me,
	.qk-shell.is-rail .qk-nav-role,
	.qk-shell.is-rail .qk-nav-gt,
	.qk-shell.is-rail .qk-nav-gn,
	.qk-shell.is-rail .qk-nav-chev,
	.qk-shell.is-rail .qk-nav-item > span:not(.qk-nav-ico):not(.qk-nav-badge),
	.qk-shell.is-rail .qk-nav-foot,
	.qk-shell.is-rail .qk-sec-cap,
	.qk-shell.is-rail .qk-sec-t,
	.qk-shell.is-rail .qk-sec-help { display: none; }
	.qk-shell.is-rail .qk-nav-list { padding: 8px 8px 16px; }
	.qk-shell.is-rail .qk-nav-gh { justify-content: center; padding: 10px 0 4px; min-height: 22px; cursor: default; }
	.qk-shell.is-rail .qk-nav-sec.is-closed .qk-nav-items { display: block; }
	.qk-shell.is-rail .qk-nav-item { position: relative; justify-content: center; padding: 10px 0; }
	.qk-shell.is-rail .qk-nav-ico { width: 20px; height: 20px; flex-basis: 20px; }
	.qk-shell.is-rail .qk-nav-item .qk-nav-badge {
		position: absolute;
		top: 3px;
		inset-inline-end: 6px;
		padding: 0 5px;
		font-size: 10px;
	}
	.qk-shell.is-rail .qk-sec-row { flex-direction: column; }
}

/* ═══════ داشبورد: روی رایانه دو ستون ═══════ */

.qk-hello {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin-bottom: 16px;
}
.qk-hello-t { flex: 1 1 240px; min-width: 0; }
.qk-hello-t h3 { margin: 0; font-size: 19px; font-weight: 700; color: var(--ink); }
.qk-hello-t p { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
.qk-hello-a { display: flex; flex-wrap: wrap; gap: 8px; }

/* کاشی‌ها، دسته‌دسته. روی گوشی همان مربع‌های بزرگ؛ روی رایانه کارت‌های کنار هم. */
.qk-apps-g[hidden] { display: none; }

/*
 * «hidden» باید واقعاً پنهان کند.
 *
 * .qk-app با display:flex و .qk-apps-row با display:grid ویژگیِ hidden را
 * خنثی می‌کردند: از ۱.۶۴ جست‌وجوی کاشی‌ها ۲۴ کاشی از ۲۵ را «پنهان» علامت
 * می‌زد و هر ۲۵ روی صفحه می‌ماندند. سنجه فقط علامت را می‌دید، نه صفحه را.
 */
.qk-apps [hidden] { display: none !important; }

@media (max-width: 600px) {
	.qk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.qk-kpi { grid-template-columns: minmax(0, 1fr); grid-template-areas: "l" "v" "s"; padding: 12px; }
	.qk-kpi-i { display: none; }
	.qk-kpi-v { margin-top: 4px; }
	.qk-kpi-v { font-size: 18px; }
	.qk-kpi-s { margin-top: 4px; }
}

@media (min-width: 1180px) {
	.qk-dash {
		display: grid;
		grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
		/* ردیفِ آخر کشسان است تا ستونِ کناری بلند، زیرِ کاشی‌ها جای خالی نیندازد. */
		grid-template-rows: auto auto auto 1fr;
		column-gap: 16px;
		align-items: start;
	}
	.qk-dash > .qk-hello      { grid-column: 1 / -1; grid-row: 1; }
	.qk-dash > .qk-dash-kpis  { grid-column: 1 / -1; grid-row: 2; }
	.qk-dash > .qk-apps       { grid-column: 1; grid-row: 3; }
	.qk-dash > .qk-dash-body  { grid-column: 1; grid-row: 4; }
	.qk-dash > .qk-dash-side  { grid-column: 2; grid-row: 3 / span 2; }

	.qk-dash .qk-apps-groups {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
		gap: 12px;
	}
	.qk-dash .qk-apps-g {
		padding: 12px;
		border: 1px solid var(--line);
		border-radius: var(--r-lg);
		background: var(--surface);
		box-shadow: var(--sh);
	}
	.qk-dash .qk-apps-g .qk-apps-cap { margin: 0 2px 10px; display: flex; align-items: center; gap: 7px; }
	.qk-dash .qk-apps-g .qk-apps-cap::before {
		content: '';
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: var(--accent);
	}
	.qk-dash .qk-apps-g.t-crm     .qk-apps-cap::before { background: #0EA5E9; }
	.qk-dash .qk-apps-g.t-money   .qk-apps-cap::before { background: var(--ok); }
	.qk-dash .qk-apps-g.t-reports .qk-apps-cap::before { background: #6D4AE0; }
	.qk-dash .qk-apps-g.t-admin   .qk-apps-cap::before { background: #C2681B; }
	.qk-dash .qk-apps-g.t-me      .qk-apps-cap::before { background: #64748B; }
	.qk-dash .qk-apps-g.t-sections .qk-apps-cap::before { background: #0F6E7B; }
	.qk-dash .qk-apps-g .qk-apps-cap:not(:first-child) { margin-top: 0; }
	.qk-dash .qk-apps-g .qk-apps-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }

	/* کاشیِ افقی: نشانه کنارِ نام، هم‌قدِ یک ردیفِ منو. */
	.qk-dash .qk-apps-g .qk-app {
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 10px;
		min-height: 50px;
		padding: 7px 10px;
		border-color: transparent;
		box-shadow: none;
		background: var(--surface-2);
		text-align: right;
		font-size: 12.5px;
	}
	.qk-dash .qk-apps-g .qk-app:hover { transform: none; border-color: var(--line-2); background: var(--surface-3); box-shadow: none; }
	.qk-dash .qk-apps-g .qk-app-ico { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; }
	.qk-dash .qk-apps-g .qk-app-ico .qk-ico { width: 19px; height: 19px; }
	.qk-dash .qk-apps-g .qk-app .qk-nav-badge { position: static; margin-inline-start: auto; }
}

.qk-app.t-crm .qk-app-ico     { background: #E0F2FE; color: #0369A1; }
.qk-app.t-reports .qk-app-ico { background: #EFE9FE; color: #6D4AE0; }
.qk-app.t-me .qk-app-ico      { background: #F1F5F9; color: #475569; }

/* فهرستِ کوتاهِ «نیاز به اقدام» و پیوندِ دیدنِ همه. */
.qk-more-link {
	display: block;
	width: 100%;
	padding: 11px 16px;
	border: 0;
	border-top: 1px solid var(--line);
	background: var(--surface-2);
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--accent-3);
	text-align: center;
	cursor: pointer;
}
.qk-more-link:hover { background: var(--surface-3); }

/* ═══════ چاپِ گزارش: همه‌ی زبانه‌ها روی کاغذ ═══════ */
@media print {
	.qk-rtabs, .qk-seg, .qk-rhead-a, .qk-psort { display: none !important; }
	.qk-rpanel[hidden] { display: block !important; }
	.qk-rpanel { break-inside: auto; }
	.qk-rpanel + .qk-rpanel { margin-top: 18px; }
	.qk-kpi, .qk-person { box-shadow: none; break-inside: avoid; }
}

/* ═══════ سطل بازیافت و دکمه‌ی حذف (۱.۶۸) ═══════ */
.qk-trash-btn { color: var(--danger); }
.qk-trash-btn:hover { background: var(--danger-bg); color: var(--danger); }
.qk-trash-x {
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	font-size: inherit;
	color: var(--danger);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.qk-trash-what { font-size: 15px; font-weight: 700; color: var(--ink); }
.qk-trash-k { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.qk-trash-acts { white-space: nowrap; }
.qk-trash-acts .qk-btn + .qk-btn { margin-inline-start: 6px; }

/* ═══════ انبار خودرو: قرصِ وضعیت و مغایرتِ جمع‌شده (۱.۶۸) ═══════ */
.qk-vseg { margin: 0 0 12px; }
.qk-vseg b, #qk-trseg b { font-weight: 600; margin-inline-start: 3px; }
.qk-vsync { margin-bottom: 12px; border-color: var(--warn-line); }
.qk-vsync > summary {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	justify-content: space-between;
	padding: 11px 16px;
	font-size: 13px;
	color: var(--warn);
	background: var(--warn-bg);
	cursor: pointer;
	list-style: none;
	border-radius: inherit;
}
.qk-vsync > summary::-webkit-details-marker { display: none; }
.qk-vsync[open] > summary { border-bottom: 1px solid var(--warn-line); border-radius: 12px 12px 0 0; }
.qk-vsync-sub { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.qk-vsync-more { font-size: 12px; font-weight: 600; color: var(--accent-3); }
.qk-vsync[open] .qk-vsync-more { visibility: hidden; }

/* نوارِ اقدامِ گروهیِ انبار تا چیزی انتخاب نشده پنهان است — display:flex بالا ویژگیِ hidden را خنثی می‌کرد (۱.۶۸). */
.qk-bulk[hidden] { display: none; }

/* ═══════ ۱.۶۹: گزارش از هر سه بخش — هر بخش رنگِ خودش ═══════ */
.is-crm { --sec: #1B6FE3; --sec-bg: #E7F0FE; --sec-ink: #0F55B8; }
.is-vkl { --sec: #6D4AE0; --sec-bg: #EFE9FE; --sec-ink: #5134B8; }
.is-qkt { --sec: #0F6E7B; --sec-bg: #E2F3F5; --sec-ink: #0B5761; }
.qk-glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 0 0 14px; }
.qk-gl {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px 16px;
	border: 1px solid var(--line);
	border-top: 4px solid var(--sec);
	border-radius: var(--r-lg);
	background: var(--surface);
	box-shadow: var(--sh);
	font: inherit;
	color: inherit;
	text-align: right;
}
button.qk-gl { cursor: pointer; transition: transform .12s, border-color .12s; }
button.qk-gl:hover { transform: translateY(-1px); border-color: var(--sec); border-top-color: var(--sec); }
.qk-gl-h { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--sec-ink); }
.qk-gl-h i { margin-inline-start: auto; font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--muted); }
/* ۱.۹۱ — ردیفِ پیوند‌دار به فهرستِ همان در بخشِ خودش؛ «جزئیات ←» دکمه‌ی گزارش. */
.qk-gl-more { margin-inline-start: auto; font: inherit; font-size: 11.5px; font-weight: 500; color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer; }
.qk-gl-more:hover { color: var(--sec-ink); }
a.qk-gl-r { border-radius: 8px; transition: background .12s; }
a.qk-gl-r:hover { background: var(--sec-bg); }
.qk-gl-i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--sec-bg); color: var(--sec); }
.qk-gl-i .qk-ico { width: 17px; height: 17px; }
.qk-gl-r { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; color: var(--ink-3); }
.qk-gl-r b { min-width: 3.2em; font-size: 20px; font-weight: 700; color: var(--ink); }
.qk-gl-r.is-bad b { color: var(--danger); }
.qk-gl-r.is-warn b { color: var(--warn); }
.qk-gl-r.is-ok b { color: var(--ok); }
.qk-sech {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	padding: 9px 14px;
	margin: 4px 0 14px;
	border-radius: var(--r);
	border-inline-start: 4px solid var(--sec);
	background: var(--sec-bg);
	color: var(--sec-ink);
}
.qk-sech b { font-size: 14.5px; }
.qk-sech > span:last-child { font-size: 12px; color: var(--ink-3); }
.qk-sech-i { width: 22px; height: 22px; display: grid; place-items: center; color: var(--sec); }
.qk-sech-i .qk-ico { width: 19px; height: 19px; }
.qk-tag {
	display: inline-block;
	padding: 0 8px;
	margin-inline-end: 6px;
	border-radius: 999px;
	background: var(--sec-bg);
	color: var(--sec-ink);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.9;
	white-space: nowrap;
}
.qk-rtab.is-vkl .qk-rtab-i, .qk-rtab.is-qkt .qk-rtab-i, .qk-rtab.is-crm .qk-rtab-i { color: var(--sec); }
.qk-rtab.is-vkl.on, .qk-rtab.is-qkt.on { box-shadow: inset 0 -3px 0 var(--sec); color: var(--sec-ink); }
.qk-trashline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	padding: 8px 12px;
	margin: 0 0 14px;
	border: 1px dashed var(--line-2);
	border-radius: var(--r);
	font-size: 12.5px;
	color: var(--ink-3);
}
.qk-trashline-h { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.qk-trashline-h .qk-ico { width: 16px; height: 16px; }
.qk-trashline-r { color: var(--muted); }
.qk-trashline .qk-btn { margin-inline-start: auto; }
@media print {
	.qk-gl, .qk-sech, .qk-tag { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.qk-glance { break-inside: avoid; }
}
.qk-barrow-t i.is-teal { background: #0F6E7B; }
.qk-barrow-t i.is-violet { background: #6D4AE0; }
.qk-glance-dash { margin-top: -4px; }

/* ═══════ ۱.۷۰: چشمِ رمز، و صفحه‌ی ورود با کدِ پیامکی ═══════ */
.qk-eye-wrap { position: relative; display: block; }
.qk-eye-wrap > input { padding-inline-end: 42px; }
.qk-eye-wrap > input[dir="ltr"], .qk-eye-wrap > input.qk-ltr { padding-left: 42px; padding-right: 12px; }
.qk-eye {
	position: absolute;
	top: 50%;
	left: 6px;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--muted);
	cursor: pointer;
}
.qk-eye:hover { background: var(--surface-3); color: var(--ink); }
.qk-eye svg { width: 19px; height: 19px; }
.qk-eye .qk-eye-x { display: none; }
.qk-eye.on { color: var(--accent-3); }
.qk-eye.on .qk-eye-x { display: inline; }
.qk-gate-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3px;
	padding: 3px;
	margin: 0 0 14px;
	border-radius: 10px;
	background: var(--surface-3);
}
.qk-gate-tabs button {
	min-height: 38px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	font: inherit;
	font-size: 13px;
	color: var(--ink-3);
	cursor: pointer;
}
.qk-gate-tabs button.on { background: var(--surface); color: var(--accent-3); font-weight: 700; box-shadow: 0 1px 3px rgba(11,31,58,.12); }
.qk-otp-row { display: flex; gap: 8px; }
.qk-otp-row .qk-input { flex: 1 1 auto; min-width: 0; }
.qk-otp-row .qk-btn { flex: 0 0 auto; white-space: nowrap; }
.qk-otp-code { font-size: 22px; letter-spacing: .5em; text-align: center; }

/* ── نقش‌ها، دسته‌بندی‌شده با یک خط توضیح (۱.۷۲) ── */
.qk-roles { display: grid; gap: 10px; }
.qk-roleg { border: 1px solid var(--line); border-radius: 10px; padding: 6px 12px; }
.qk-roleg-t { font-size: 11.5px; font-weight: 700; color: var(--muted); padding: 4px 0; }
.qk-rolec { display: flex; gap: 10px; align-items: flex-start; padding: 8px 2px; cursor: pointer; border-top: 1px dashed var(--line); }
.qk-roleg-t + .qk-rolec { border-top: 0; }
.qk-rolec input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--accent); cursor: pointer; }
.qk-rolec b { display: block; font-size: 13px; font-weight: 600; }
.qk-rolec small { display: block; font-size: 11.5px; line-height: 1.8; color: var(--muted); }
.qk-rolec:has(input:checked) b { color: var(--accent); }
.qk-row-acts { display: inline-flex; gap: 6px; flex-wrap: wrap; }

/* زنگِ اعلان به‌صورتِ نشانه‌ی خطی (۱.۷۲). */
.qk-notif-btn .qk-ico { width: 22px; height: 22px; display: block; }

/* ── «تغییرها ذخیره نشده‌اند» درونِ پنجره (۱.۷۲) ── */
.qk-discard { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 10px 16px;
	background: var(--warn-bg, #FFF7E6); border-top: 1px solid var(--line); color: var(--warn, #8A5A00); font-size: 13px; }
.qk-discard span { flex: 1 1 160px; font-weight: 600; }

/* ── صفحه‌ی کاربران: جست‌وجو و صافی، ردیفِ تازه‌ویرایش، و زبانه‌های «مدیریت» (۱.۷۲) ── */
.qk-table tr[hidden] { display: none !important; }
.qk-staff-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.qk-staff-tools .qk-input { flex: 1 1 220px; min-width: 0; }
.qk-staff-tools .qk-select { flex: 0 0 auto; width: auto; }
.qk-row-flash td { animation: qk-flash 2.4s ease-out; }
@keyframes qk-flash { 0%, 30% { background: var(--info-bg, #E7F0FE); } 100% { background: transparent; } }
.qk-msum { font-size: 12.5px; color: var(--muted); margin: -4px 0 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.qk-mtabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); margin: 0 0 14px; scrollbar-width: none; }
.qk-mtabs::-webkit-scrollbar { display: none; }
.qk-mtabs button { flex: 0 0 auto; border: 0; background: none; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--muted);
	padding: 9px 12px; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.qk-mtabs button.on { color: var(--accent); border-bottom-color: var(--accent); }
@media (max-width: 480px) {
	.qk-mtabs button { padding: 9px 7px; font-size: 12.5px; }
}

/* ── فیش‌ها (۱.۷۳): فروش می‌گذارد، مالی ثبت یا رد می‌کند ── */
.qk-rcpt-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 10px; }
.qk-rcpt-add .qk-hint { margin: 0; }
.qk-rcpt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.qk-rcpt { border: 1px solid var(--line); border-inline-start: 3px solid var(--line); border-radius: 10px;
	padding: 9px 12px; background: var(--surface); display: grid; gap: 4px; }
.qk-rcpt.ok { border-inline-start-color: var(--ok); }
.qk-rcpt.warn { border-inline-start-color: var(--warn); background: var(--warn-bg); }
.qk-rcpt.danger { border-inline-start-color: var(--danger); }
.qk-rcpt-t { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.qk-rcpt-d { font-size: 12px; color: var(--ink-3); }
.qk-rcpt-why { font-size: 12.5px; color: var(--danger); }
.qk-rcpt-a { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.qk-table tr.qk-pay-pending td { background: var(--warn-bg); }
.qk-table tr.qk-pay-rejected td { opacity: .75; }
@media (max-width: 480px) {
	.qk-rcpt-a .qk-btn { flex: 1 1 auto; justify-content: center; }
}

/* ── روند تازه‌ی پرونده (۱.۷۵): کارت مالی، کارت مدیریت، بایگانی ── */
.qk-kv.qk-kv-strong span, .qk-kv.qk-kv-strong b { font-weight: 700; color: var(--ink); }
.qk-kv.is-bad b { color: var(--danger); }
.qk-kv.qk-kv-wrap { align-items: flex-start; }
.qk-kv.qk-kv-wrap b { white-space: normal; text-align: end; font-weight: 500; line-height: 1.8; }
.qk-kv-a { font-size: 12px; font-weight: 500; margin-inline-start: 6px; }
.qk-fin-rows { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0 12px; background: var(--surface); }
.qk-mg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.qk-mg-wide { grid-column: 1 / -1; }
.qk-mg-card { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px 12px 6px; background: var(--surface); min-width: 0; }
.qk-mg-card h4 { margin: 8px 0 2px; font-size: 13px; color: var(--ink-2); }
.qk-mg-card .qk-kv span { min-width: 0; }
.qk-mg-list { margin: 6px 0; padding-inline-start: 18px; font-size: 12.5px; line-height: 2; color: var(--ink-2); }
.qk-mgmt > .qk-mg { margin-top: 12px; }
.qk-doclist { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.qk-doclist li { display: flex; gap: 8px; align-items: center; color: var(--ink-2); }
.qk-doclist li.done span { color: var(--ok); font-weight: 700; }
.qk-doclist li.todo span { color: var(--danger); font-weight: 700; }
.qk-doc-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; color: var(--ink-3); }
.qk-arch-card .qk-card-head { gap: 10px; }
.qk-arch-ref .qk-input { min-width: 0; width: 180px; max-width: 100%; }
.qk-arch-conds { box-shadow: none; margin-bottom: 12px; }
.qk-check[hidden], [data-install][hidden] { display: none; }
.qk-fc.is-hidden { cursor: default; opacity: .8; }
.qk-fc.is-hidden:hover { border-color: var(--line); background: inherit; }
@media (max-width: 640px) {
	.qk-mg { grid-template-columns: minmax(0, 1fr); }
	.qk-arch-ref .qk-input { width: 140px; }
}

/* ═══════ ۱.۷۹ — صفحه‌ی پرونده: سرِ فشرده، نوار «الان چه کنم»، دو ستون ═══════ */
.qk-dhead .qk-card-body { padding: 14px 16px 12px; }
.qk-dhead-top { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 16px; }
.qk-dhead-who { flex: 1 1 320px; min-width: 0; }
.qk-dhead-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.qk-dhead-name > b { font-size: 17px; font-weight: 700; color: var(--ink); }
.qk-dhead-name .qk-deal-no { margin: 0; }
.qk-dhead-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.qk-dhead-meta .qk-ltr { direction: ltr; unicode-bidi: isolate; color: var(--ink-3); font-weight: 600; }
.qk-dhead-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.qk-dhead-side { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.qk-dhead .qk-steps { border: 0; background: transparent; border-top: 1px solid var(--line); border-radius: 0; margin-top: 12px; padding: 12px 0 4px; }
.qk-dhead .qk-steps-now, .qk-dhead .qk-steps-note { border: 0; background: transparent; margin: 0; padding: 0 0 2px; border-radius: 0; }

/* پورسانت — یک برچسب، با کلیک به جزئیات. */
.qk-cchip {
	display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px;
	padding: 6px 12px; border-radius: 10px; border: 1px solid var(--line);
	background: var(--surface-2); font: inherit; font-size: 12px; color: var(--ink-3); cursor: pointer; text-align: start;
}
.qk-cchip b { font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }
.qk-cchip em { font-style: normal; font-size: 11px; color: var(--muted); }
.qk-cchip.is-ok { background: var(--ok-bg); border-color: var(--ok-line); }
.qk-cchip.is-warn { background: var(--warn-bg); border-color: var(--warn-line); }
.qk-cchip.is-dead { cursor: default; }

/* نوار «الان چه کنم» — یک جمله و دکمه‌ی اصلی، بالای همه‌ی تب‌ها. */
.qk-nextbar {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
	margin-bottom: 14px; padding: 12px 16px;
	border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
	border-inline-start: 4px solid var(--line-2);
}
.qk-nextbar-t { flex: 1 1 280px; min-width: 0; }
.qk-nextbar-t b { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.qk-nextbar-t p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.8; }
.qk-nextbar-a { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.qk-nextbar > .qk-hint, .qk-nextbar > .qk-why-box { flex: 1 1 100%; margin-top: 0 !important; }
.qk-nextbar.t-go { border-inline-start-color: var(--accent); background: linear-gradient(90deg, var(--accent-soft), var(--surface) 60%); }
.qk-nextbar.t-urgent { border-inline-start-color: var(--danger); background: linear-gradient(90deg, var(--danger-bg), var(--surface) 60%); }
.qk-nextbar.t-urgent .qk-nextbar-t b { color: #8E1F1F; }
.qk-nextbar.t-calm { background: var(--surface-2); }
.qk-nextbar.t-calm .qk-nextbar-t b { font-weight: 600; color: var(--ink-2); }
.qk-nextbar.t-dead { background: var(--dead-bg); }

/* دو ستون: کارِ اصلی پهن؛ کارهای باز و گردش پرونده کنارش. روی گوشی: کارها، تب‌ها، گردش. */
.qk-dgrid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "tasks" "main" "tl" "rest"; column-gap: 16px; align-items: start; }
.qk-dgrid-tasks.is-others { grid-area: rest; }
.qk-dgrid-tasks { grid-area: tasks; min-width: 0; }
.qk-dgrid-main { grid-area: main; min-width: 0; }
.qk-dgrid-tl { grid-area: tl; min-width: 0; }
@media (min-width: 1280px) {
	.qk-dgrid { grid-template-columns: minmax(0, 1fr) 370px; grid-template-areas: "main tasks" "main tl"; grid-template-rows: auto 1fr; }
	.qk-dgrid-tasks.is-others { grid-area: tasks; }
}

/* کارهای باز */
.qk-jobs .qk-card-head { justify-content: space-between; }
.qk-jobs .qk-card-body { padding: 10px; display: grid; gap: 8px; }
.qk-job { padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); border-inline-start: 3px solid var(--info-line); }
.qk-job.is-mine { border-inline-start-color: var(--warn); background: var(--warn-bg); }
.qk-job.is-late { border-inline-start-color: var(--danger); }
.qk-job-h { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.qk-job-h b { font-size: 13.5px; color: var(--ink); }
.qk-job-m { margin-top: 3px; font-size: 12px; color: var(--ink-3); }
.qk-job-n { margin-top: 4px; font-size: 12.5px; color: var(--ink-2); white-space: pre-wrap; }
.qk-job-f { margin-top: 3px; font-size: 11px; color: var(--muted); }
.qk-job-a { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* گردش پرونده */
.qk-tlc .qk-card-head { justify-content: space-between; flex-wrap: wrap; }
.qk-tlc-b { display: flex; gap: 6px; }
.qk-tlc .qk-card-body { padding: 4px 14px 12px; }
.qk-tli { position: relative; padding: 8px 14px 8px 0; border-bottom: 1px solid var(--line); }
.qk-tli:last-of-type { border-bottom: 0; }
.qk-tli::before { content: ''; position: absolute; inset-inline-start: 0; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); }
.qk-tli { padding-inline-start: 16px; padding-inline-end: 0; }
.qk-tli.is-note::before { background: var(--accent); }
.qk-tli.is-task::before { background: var(--warn); }
.qk-tli.is-task_done::before { background: var(--ok); }
.qk-tli.is-stage::before { background: var(--brand-3); }
.qk-tli-m { font-size: 11.5px; color: var(--muted); }
.qk-tli-t { margin-top: 2px; font-size: 12.5px; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.qk-tli-t.is-stage { color: var(--ink-3); }

/* متن بلند دو خط؛ با کلیک کامل. */
.qk-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.qk-clamp.is-open { display: block; -webkit-line-clamp: unset; }

/* الگوهای کار در پنجره‌ی ارجاع */
.qk-tpls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
.qk-tpl {
	display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px;
	padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2);
	font: inherit; font-size: 12.5px; color: var(--ink-2); cursor: pointer; text-align: start;
}
.qk-tpl em { font-style: normal; font-size: 10.5px; color: var(--muted); }
.qk-tpl:hover { border-color: var(--accent-2); }
.qk-tpl.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-3); }

@media (max-width: 640px) {
	.qk-nextbar { padding: 12px; }
	.qk-nextbar-a { width: 100%; }
	.qk-nextbar-a .qk-btn { flex: 1 1 auto; }
	.qk-dhead-side { width: 100%; }
	.qk-tlc-b .qk-btn { padding-inline: 10px; }
}

/* ═══════ ۱.۷۹ — گزارش مدیریت: دوره‌ی تقویمی و رصد ═══════ */
.qk-period { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.qk-period .qk-btn[disabled] { opacity: .45; cursor: default; }
.qk-wlist { display: grid; gap: 0; }
.qk-wrow {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "b e" "s e"; gap: 2px 12px;
	width: 100%; padding: 9px 2px; border: 0; border-bottom: 1px solid var(--line); background: transparent;
	font: inherit; text-align: start; color: var(--ink-2); cursor: pointer;
}
.qk-wrow:last-child { border-bottom: 0; }
.qk-wrow:hover { background: var(--surface-2); }
.qk-wrow b { grid-area: b; font-size: 13px; font-weight: 600; color: var(--ink); }
.qk-wrow > span { grid-area: s; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.qk-wrow em { grid-area: e; align-self: center; font-style: normal; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.qk-wrow em.is-bad { color: var(--danger); font-weight: 700; }
.qk-wrow em.is-warn { color: var(--warn); font-weight: 700; }
.qk-wrow.is-ev em { font-size: 11px; color: var(--muted); }
@media (max-width: 640px) {
	.qk-wrow { grid-template-columns: minmax(0, 1fr); grid-template-areas: "b" "s" "e"; }
	.qk-wrow em { justify-self: start; }
}

/* ═══════ ۱.۷۹ — داشبورد: «کارهای من» و خلاصه‌ی دوره برای مدیریت ═══════ */
.qk-mywork .qk-card-head { justify-content: space-between; flex-wrap: wrap; }
.qk-mywork .qk-card-body { padding: 4px 14px 8px; }
.qk-dsum .qk-card-head { justify-content: space-between; flex-wrap: wrap; }
.qk-dsum-g { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.qk-dsum-c {
	display: flex; flex-direction: column; gap: 2px; padding: 10px 12px;
	border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); min-width: 0;
}
.qk-dsum-c b { font-size: 18px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.qk-dsum-c b small { font-size: 11px; font-weight: 500; color: var(--ink-3); }
.qk-dsum-c span { font-size: 12px; color: var(--ink-3); }
.qk-dsum-c .qk-chg { font-size: 11px; }
.qk-dsum-c.is-bad b { color: var(--danger); }
.qk-dsum-c.is-warn b { color: var(--warn); }
.qk-dsum .qk-seg-b { min-height: 30px; padding: 4px 12px; font-size: 12.5px; }
@media (max-width: 900px) { .qk-dsum-g { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .qk-dsum-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* روی رایانه منوی کناری همه‌ی راه‌ها را دارد؛ کاشی‌های داشبورد فقط تکرارش بودند. */
@media (min-width: 901px) {
	.qk-dash > .qk-apps { display: none; }
}
@media (min-width: 1180px) {
	.qk-dash { grid-template-rows: auto auto auto auto 1fr; }
	.qk-dash > .qk-dash-mine  { grid-column: 1 / -1; grid-row: 2; }
	.qk-dash > .qk-dash-kpis  { grid-column: 1 / -1; grid-row: 3; }
	.qk-dash > .qk-dash-body  { grid-column: 1; grid-row: 4 / span 2; }
	.qk-dash > .qk-dash-side  { grid-column: 2; grid-row: 4 / span 2; }
}

/* «برو به» (۱.۷۹) — همه‌ی بخش‌ها و پیوست‌ها با یک کلیک؛ بخشِ خودِ کاربر پررنگ. */
.qk-jump {
	display: flex; align-items: center; gap: 6px; padding: 8px 14px;
	border-bottom: 1px solid var(--line); background: var(--surface-2);
	overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.qk-jump::-webkit-scrollbar { display: none; }
.qk-jump-l { flex: 0 0 auto; font-size: 12px; color: var(--muted); }
.qk-jump-c {
	flex: 0 0 auto; padding: 4px 11px; border: 1px solid var(--line); border-radius: 999px;
	background: var(--surface); font: inherit; font-size: 12.5px; color: var(--ink-2); cursor: pointer; white-space: nowrap;
}
.qk-jump-c:hover { border-color: var(--accent-2); color: var(--accent-3); }
.qk-jump-c.is-own { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-3); font-weight: 700; }

/* ═══════ ۱.۷۹.۱ — صفحه‌ی پرونده: یک ردیف ناوبری، یک فهرست کار، رنگِ کمتر ═══════ */

/* یک ردیف: «کار من» | بخش‌ها | مدارک و فرم‌ها | تاریخچه. روی رایانه می‌شکند، روی گوشی می‌لغزد. */
.qk-dnav { align-items: center; gap: 2px; }
.qk-dnav .qk-tab { padding: 9px 11px; display: inline-flex; align-items: center; gap: 4px; }
.qk-dnav .qk-tab.is-own:not(.on) { color: var(--accent-3); font-weight: 600; }
.qk-dnav .qk-tab-mine { font-weight: 700; color: var(--ink-2); }
.qk-tab-n {
	display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px;
	border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; margin-inline-start: 4px;
}
.qk-tab-sep { flex: 0 0 1px; align-self: stretch; margin: 8px 4px; background: var(--line); }
@media (min-width: 641px) {
	.qk-dnav { flex-wrap: wrap; overflow-x: visible; }
}

/* سرِ بخشی که زیر «اطلاعات پرونده» باز است */
.qk-lhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.qk-lhead h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.qk-lhead-ro { font-size: 12px; color: var(--muted); }

/* «کار من» — یک فهرست؛ رنگ فقط برای شماره‌ی کار. */
.qk-todo .qk-card-body { padding: 14px 16px; }
.qk-todo-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.qk-todo-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.qk-todo-count { font-size: 12.5px; color: var(--muted); }
.qk-todo-bar { margin: 10px 0 4px; }
.qk-todo.all-done .qk-todo-bar i { background: var(--ok); }
.qk-todo-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.qk-todo-i { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.qk-todo-i.has-body { border-color: var(--accent-2); }
.qk-todo-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; }
.qk-todo-n {
	flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff;
	display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}
.qk-todo-t { flex: 1 1 auto; min-width: 0; }
.qk-todo-t b { font-size: 13.5px; color: var(--ink); }
.qk-todo-d { margin-top: 3px; font-size: 12.5px; color: var(--ink-3); line-height: 1.8; }
.qk-todo-a { flex: 0 0 auto; }
.qk-todo-tag { font-size: 11px; color: var(--danger); font-weight: 600; }
.qk-todo-body { padding: 4px 12px 12px; border-top: 1px solid var(--line); }
.qk-todo-body .qk-grid { margin-top: 10px; }
.qk-todo-save { margin-top: 10px; }
.qk-todo-empty { margin: 10px 0 0; }
.qk-todo-grp { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.qk-todo-grp summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-3); padding: 4px 0; }
.qk-todo-grp ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.qk-todo-grp ul li { padding: 6px 10px; background: var(--surface-2); border-radius: var(--r-sm); }
.qk-todo-grp ul.is-done li { color: var(--ok); background: transparent; padding: 2px 0; }
.qk-todo-who { color: var(--muted); }
.qk-todo-note { margin-top: 3px; color: var(--warn); font-size: 12px; }
.qk-todo-rule { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-3); }
.qk-todo-docs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; font-size: 12.5px; color: var(--muted); }
@media (max-width: 640px) {
	.qk-todo-row { flex-wrap: wrap; }
	.qk-todo-a { flex: 1 1 100%; padding-inline-start: 34px; }
}

/* نوار «الان چه کنم»: خطِ «مرحله‌ی بعد»؛ قرمز فقط برای مهلت. */
.qk-nextbar-p { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.qk-nextbar.t-go { background: var(--surface); }

/* نوار مراحل روی گوشی: یک خط، با لمس کامل. */
.qk-steps-mini { display: none; }
@media (max-width: 640px) {
	.qk-steps-mini {
		display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; width: 100%;
		margin-top: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm);
		background: var(--surface-2); font: inherit; font-size: 12.5px; color: var(--ink-3); text-align: start; cursor: pointer;
	}
	.qk-steps-mini b { color: var(--accent-3); }
	.qk-steps-mini span { order: 2; flex: 1 1 100%; font-size: 11.5px; color: var(--muted); }
	.qk-steps-mini i { order: 1; font-style: normal; margin-inline-start: auto; }
	.qk-steps-box:not(.is-open) .qk-steps,
	.qk-steps-box:not(.is-open) .qk-steps-now { display: none; }
	.qk-steps-box.is-open .qk-steps-mini i { transform: rotate(180deg); }
}

/* کارهای باز: کارِ خودم با قاب آبی، کارِ دیگران یک خط. */
.qk-jobs-n { font-size: 12px; color: var(--muted); }
.qk-job.is-mine { border-inline-start-color: var(--accent); background: var(--accent-soft); }
.qk-job.is-compact { padding: 7px 10px; background: var(--surface-2); border-inline-start-color: var(--line-2); }
.qk-job.is-compact .qk-job-h b { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.qk-job.is-compact .qk-job-a { margin-top: 4px; }
.qk-job.is-late { border-inline-start-color: var(--danger); }
.qk-jobs-more summary { cursor: pointer; font-size: 12.5px; color: var(--ink-3); padding: 4px 2px; }
.qk-jobs-more[open] summary { margin-bottom: 6px; }
.qk-jobs-more .qk-job + .qk-job { margin-top: 6px; }

/* ═══════ ۱.۸۱ — مدیریت واحدها ═══════ */
.qk-wu-grid th[scope="row"] { min-width: 150px; text-align: start; vertical-align: top; }
.qk-wu-grid td { vertical-align: top; min-width: 190px; }
.qk-wu-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.qk-wu-cell.is-empty { padding: 6px 8px; border-radius: var(--r-sm); background: var(--danger-bg); }
.qk-wu-warn { flex: 1 1 100%; font-size: 11.5px; color: var(--danger); }
.qk-wu-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.qk-wu-chip {
	display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px;
	background: var(--surface-2); border: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2);
}
.qk-wu-chip button { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; }
.qk-wu-chip button:hover { color: var(--danger); }
.qk-wu-chip.is-pin { background: var(--accent-soft); border-color: var(--accent-2); color: var(--accent-3); font-weight: 600; }
.qk-wu-chip small { font-weight: 400; color: var(--muted); }
.qk-wu-add { max-width: 160px; min-height: 30px; padding: 2px 8px; font-size: 12.5px; }
.qk-wu-cover { flex: 1 1 100%; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.qk-wu-cover .qk-select { max-width: 130px; min-height: 30px; padding: 2px 8px; font-size: 12.5px; }
.qk-wu-docs { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.qk-wu-unit.is-off { opacity: .65; }
.qk-wu-unit + .qk-wu-unit { margin-top: 12px; }
.qk-wu-rule { display: flex; align-items: flex-start; gap: 10px; padding: 12px 4px; border-bottom: 1px solid var(--line); cursor: pointer; }
.qk-wu-rule:last-child { border-bottom: 0; }
.qk-wu-rule input { margin-top: 4px; width: 18px; height: 18px; }
.qk-wu-rule span { display: flex; flex-direction: column; gap: 2px; }
.qk-wu-rule b { font-size: 13.5px; color: var(--ink); }
.qk-wu-rule small { font-size: 12px; color: var(--muted); line-height: 1.8; }

/* جدول محاسبه‌ی اقساط (۱.۹۱): ردیفِ مدتِ فعلیِ پرونده */
.qk-table tr.is-hit td { background: var(--accent-soft, #eef4ff); }
.qk-lc-table { font-size: 12px; }
.qk-lc-table th, .qk-lc-table td { padding: 7px 8px; white-space: nowrap; }

/* محاسبه‌ی اقساط و قوانین اقساط (۱.۹۲) */
.qk-lc-rows { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.qk-lc-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 12px; font-size: 13px; border-bottom: 1px solid var(--line); }
.qk-lc-row:last-child { border-bottom: 0; }
.qk-lc-row span { color: var(--ink-3); }
.qk-lc-row b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.qk-lc-row.is-hi { background: var(--accent-soft, #eef4ff); }
.qk-lc-row.is-total b { font-size: 14px; }
.qk-lc-table tr.clickable { cursor: pointer; }
.qk-range { accent-color: var(--accent, #2563eb); }
.qk-lr-rule { background: var(--surface-2); border-inline-start: 3px solid var(--accent, #2563eb); padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 2; margin-bottom: 12px; }
.qk-lr-row { display: grid; grid-template-columns: 220px 1fr; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.qk-lr-row label { font-size: 13px; color: var(--ink-2, var(--ink)); }
.qk-lr-special { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
.qk-lr-sp-head { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.qk-lr-bar { position: sticky; bottom: 0; display: flex; gap: 8px; padding: 12px 0; background: var(--bg, #f1f5fb); z-index: 2; }
@media (max-width: 700px) { .qk-lr-row { grid-template-columns: 1fr; } }

/* بررسی شعبه‌ها (۱.۹۶) */
.qk-bc-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.qk-bc-chip.is-ok { background: #e7f6ee; color: #1d7a46; }
.qk-bc-chip.is-warn { background: #fff4e0; color: #95611d; }
.qk-bc-chip.is-bad { background: #fdecec; color: #b42318; }
.qk-bc-n { font-size: 12.5px; margin-top: 4px; line-height: 1.8; }
.qk-bc-jump { white-space: nowrap; }