/* =========================================================================
   ارجان فیش — سیستم طراحی مشترک (مرحلهٔ ۱)
   فونت وزیرمتن + متغیرهای برند + یکدست‌سازی قالب قدیمی (Light Bootstrap)
   این فایل بعد از CSSهای قالب بارگذاری می‌شود، پس اولویت دارد.
   ========================================================================= */

/* ------------------------------ فونت وزیرمتن ------------------------------ */
@font-face {
	font-family: 'Vazirmatn';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/vazirmatn/Vazirmatn-Regular.woff2') format('woff2');
}

@font-face {
	font-family: 'Vazirmatn';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/vazirmatn/Vazirmatn-Medium.woff2') format('woff2');
}

@font-face {
	font-family: 'Vazirmatn';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/vazirmatn/Vazirmatn-Medium.woff2') format('woff2');
}

@font-face {
	font-family: 'Vazirmatn';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/vazirmatn/Vazirmatn-Bold.woff2') format('woff2');
}

/* ------------------------------ متغیرهای برند ------------------------------ */
:root {
	--af-brand-900: #062a35;
	--af-brand-800: #0b3d4f;
	--af-brand-700: #0f5468;
	--af-brand-600: #0f6e7d;
	--af-brand-100: #eef6f7;
	--af-gold-500: #f59e0b;
	--af-gold-400: #fbbf24;
	--af-gold-100: #fffbeb;
	--af-ink: #0f172a;
	--af-ink-2: #33556b;
	--af-muted: #64748b;
	--af-line: #e6edf2;
	--af-bg: #f4f7fa;
	--af-card: #ffffff;
	--af-ok: #059669;
	--af-warn: #d97706;
	--af-err: #dc2626;
	--af-info: #0284c7;
	--af-radius: 14px;
	--af-radius-sm: 10px;
	--af-shadow: 0 1px 2px rgba(15, 40, 60, .04), 0 8px 24px rgba(15, 40, 60, .06);
	--af-font: 'Vazirmatn', 'Shabnam', 'Segoe UI', Tahoma, sans-serif;
}

/* ------------------------------ پایه و تایپوگرافی ------------------------------ */
html,
body,
.main-panel,
.sidebar,
.navbar,
button,
input,
select,
textarea,
.dropdown-menu,
.modal {
	font-family: var(--af-font) !important;
}

body {
	color: var(--af-ink);
	background: var(--af-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6,
.title {
	color: var(--af-brand-800);
	font-weight: 700;
	letter-spacing: -.2px;
}

p,
li,
td,
th,
label,
span {
	line-height: 1.95;
}

a {
	color: var(--af-brand-600);
}

a:hover,
a:focus {
	color: var(--af-brand-700);
}

::selection {
	background: rgba(15, 110, 125, .18);
}

:focus-visible {
	outline: 3px solid rgba(15, 110, 125, .35);
	outline-offset: 2px;
}

/* اعداد هم‌عرض در جدول‌ها (ردیف‌ها هم‌تراز می‌شوند) */
table,
.form-control,
.mono,
.num {
	font-variant-numeric: tabular-nums;
}

/* ------------------------------ نوار اسکرول (ظریف) ------------------------------ */
html {
	scrollbar-width: thin;
	scrollbar-color: rgba(15, 60, 79, .28) transparent;
	scrollbar-gutter: stable;
}

::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: rgba(15, 60, 79, .22);
	border-radius: 999px;
	border: 2px solid transparent;
	background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
	background: rgba(15, 60, 79, .42);
	background-clip: content-box;
}

::-webkit-scrollbar-corner {
	background: transparent;
}

/* در سایدبار تیره (گرادیان برند) نباید خاکستری روشن دیده شود */
.sidebar-wrapper,
.sidebar {
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .3) transparent;
}

.sidebar-wrapper::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, .25);
	background-clip: content-box;
}

.sidebar-wrapper::-webkit-scrollbar-thumb:hover,
.sidebar::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, .5);
	background-clip: content-box;
}

/* نواحی اسکرول داخل کارت‌ها/جدول‌ها: هم‌خوان با محتوای روشن */
.card [style*="overflow"],
.content [style*="overflow"] {
	scrollbar-width: thin;
	scrollbar-color: rgba(15, 60, 79, .22) transparent;
}

/* ------------------------------ چیدمان پنل ------------------------------ */
.main-panel {
	background: var(--af-bg);
}

.main-panel > .content {
	padding: 22px 24px 40px;
}

/* سایدبار: به‌جای عکس، گرادیان عمیق برند */
.sidebar {
	background: linear-gradient(180deg, var(--af-brand-900) 0%, var(--af-brand-800) 55%, var(--af-brand-700) 130%) !important;
	box-shadow: 6px 0 26px rgba(6, 42, 53, .2);
}

.sidebar .sidebar-background {
	display: none;
}

.sidebar .sidebar-wrapper {
	padding-bottom: 24px;
}

.sidebar .nav li > a,
.sidebar .nav li a {
	border-radius: var(--af-radius-sm);
	margin: 3px 10px;
	padding: 10px 14px;
	transition: background .18s ease, transform .18s ease, color .18s ease;
}

.sidebar .nav li > a:hover,
.sidebar .nav li a:hover {
	background: rgba(255, 255, 255, .1);
	transform: translateX(-2px);
}

.sidebar .nav li.active > a,
.sidebar .nav li.active a,
.sidebar .nav li > a.active {
	background: linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .1));
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}

.sidebar .nav li.active > a i,
.sidebar .nav li.active a i {
	color: var(--af-gold-400);
}

.sidebar .nav p,
.sidebar .nav i {
	font-size: 14px;
}

.sidebar .nav > li > a > p {
	font-weight: 600;
}

.sidebar .logo,
.sidebar .logo-normal {
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}

/* نوار بالای صفحه: شیشه‌ای و نرم */
.navbar {
	background: rgba(255, 255, 255, .86) !important;
	backdrop-filter: blur(12px);
	border: 0;
	border-bottom: 1px solid var(--af-line);
	border-radius: 0;
	box-shadow: 0 2px 14px rgba(15, 40, 60, .05);
}

.navbar .navbar-brand,
.navbar-nav > li > a {
	color: var(--af-ink-2) !important;
}

.navbar-nav > li > a:hover {
	color: var(--af-brand-600) !important;
}

/* ------------------------------ کارت ------------------------------ */
.card {
	background: var(--af-card);
	border: 1px solid var(--af-line);
	border-radius: var(--af-radius);
	box-shadow: var(--af-shadow);
	overflow: hidden;
}

.card .header {
	padding: 18px 22px 8px;
	border-bottom: 1px solid var(--af-line);
	background: linear-gradient(180deg, #f9fcfd, var(--af-card));
}

.card .header .title {
	font-size: 16.5px;
	margin: 0 0 4px;
}

.card .header .category,
.card .category {
	color: var(--af-muted);
	font-size: 12.5px;
}

.card .content {
	padding: 16px 22px;
}

.card .footer {
	border-top: 1px solid var(--af-line);
	padding: 12px 22px;
}

.card .footer .legend {
	color: var(--af-muted);
}

/* کارت‌هایی که خودشان padding دارند (صفحات جدید) */
.card .content.no-pad,
.card .content[style*="padding:0"] {
	padding: 0 0 8px;
}

/* ------------------------------ دکمه‌ها ------------------------------ */
.btn {
	border: 0;
	border-radius: var(--af-radius-sm);
	font-family: var(--af-font);
	font-weight: 700;
	font-size: 13.5px;
	padding: 10px 18px;
	transition: transform .16s ease, filter .16s ease, background .16s ease;
	box-shadow: none;
}

.btn:hover {
	transform: translateY(-1px);
	filter: brightness(1.04);
}

.btn:active {
	transform: translateY(0);
}

.btn.btn-fill,
.btn.btn-info,
.btn.btn-primary {
	background: linear-gradient(135deg, var(--af-brand-800), var(--af-brand-600)) !important;
	color: #fff !important;
	box-shadow: 0 8px 18px rgba(11, 61, 79, .2) !important;
}

.btn.btn-default,
.btn.btn-ghost,
.btn.btn-simple {
	background: transparent !important;
	color: var(--af-ink-2) !important;
	box-shadow: inset 0 0 0 1.5px var(--af-line) !important;
}

.btn.btn-default:hover,
.btn.btn-ghost:hover,
.btn.btn-simple:hover {
	background: var(--af-brand-100) !important;
	color: var(--af-brand-700) !important;
	box-shadow: inset 0 0 0 1.5px rgba(15, 110, 125, .35) !important;
}

.btn.btn-success {
	background: linear-gradient(135deg, #047857, #10b981) !important;
	color: #fff !important;
}

.btn.btn-danger {
	background: linear-gradient(135deg, #b91c1c, var(--af-err)) !important;
	color: #fff !important;
}

.btn.btn-warning {
	background: linear-gradient(135deg, var(--af-gold-500), var(--af-gold-400)) !important;
	color: #2b1a02 !important;
}

.btn[disabled],
.btn.disabled {
	opacity: .55;
	transform: none;
	filter: none;
}

.btn-sm,
.btn.btn-sm {
	padding: 7px 14px;
	font-size: 12.5px;
}

/* ------------------------------ فرم‌ها ------------------------------ */
.form-control,
select.form-control,
textarea.form-control,
input.form-control {
	height: auto;
	min-height: 44px;
	font-family: var(--af-font);
	font-size: 14px;
	color: var(--af-ink);
	background: #f8fbfc;
	border: 1.5px solid #cfdbe3;
	border-radius: var(--af-radius-sm);
	padding: 9px 13px;
	box-shadow: none;
	transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

textarea.form-control {
	min-height: 96px;
}

.form-control:focus {
	background: #fff;
	border-color: var(--af-brand-600);
	box-shadow: 0 0 0 4px rgba(15, 110, 125, .12);
}

.form-control::placeholder {
	color: #9fb4c0;
}

.form-control[disabled],
.form-control[readonly] {
	background: #eef2f6;
	color: var(--af-muted);
}

label {
	color: var(--af-ink-2);
	font-weight: 600;
	font-size: 13px;
}

.form-group {
	margin-bottom: 14px;
}

.help-block,
.form-text {
	color: var(--af-muted);
	font-size: 12px;
}

/* ------------------------------ جدول‌ها ------------------------------ */
.table {
	font-size: 13.5px;
	color: var(--af-ink);
	margin-bottom: 0;
}

.table > thead > tr > th {
	background: #f1f6f8;
	color: var(--af-ink-2);
	font-size: 12px;
	font-weight: 700;
	border-bottom: 1.5px solid var(--af-line);
	padding: 12px 14px;
	white-space: nowrap;
}

.table > tbody > tr > td,
.table > tbody > tr > th {
	padding: 12px 14px;
	border-bottom: 1px solid #f0f4f7;
	vertical-align: middle;
}

.table > tbody > tr {
	transition: background .15s ease;
}

.table > tbody > tr:hover {
	background: #f7fbfc;
}

.table-striped > tbody > tr:nth-of-type(odd) {
	background: #fcfdfe;
}

.table > tbody > tr:last-child > td {
	border-bottom: 0;
}

/* ------------------------------ برچسب‌ها و پیام‌ها ------------------------------ */
.badge,
.label {
	border-radius: 999px;
	font-family: var(--af-font);
	font-size: 11.5px;
	font-weight: 700;
	padding: 3px 11px;
	border: 1px solid transparent;
}

.badge-success,
.label-success {
	background: rgba(5, 150, 105, .12);
	color: var(--af-ok);
	border-color: rgba(5, 150, 105, .28);
}

.badge-warning,
.label-warning {
	background: rgba(217, 119, 6, .14);
	color: var(--af-warn);
	border-color: rgba(217, 119, 6, .3);
}

.badge-danger,
.label-danger {
	background: rgba(220, 38, 38, .12);
	color: var(--af-err);
	border-color: rgba(220, 38, 38, .28);
}

.badge-info,
.label-info {
	background: rgba(2, 132, 199, .12);
	color: var(--af-info);
	border-color: rgba(2, 132, 199, .28);
}

.alert {
	border: 1px solid var(--af-line);
	border-radius: var(--af-radius-sm);
	font-size: 13.5px;
}

.alert-success {
	background: #f0fdf4;
	border-color: #86efac;
	color: #166534;
}

.alert-danger {
	background: #fef2f2;
	border-color: #fecaca;
	color: #b91c1c;
}

.alert-warning {
	background: var(--af-gold-100);
	border-color: #fcd34d;
	color: #92400e;
}

.alert-info {
	background: var(--af-brand-100);
	border-color: #b9dde3;
	color: var(--af-brand-800);
}

/* ------------------------------ سایر اجزا ------------------------------ */
.modal-content,
.dropdown-menu {
	border: 1px solid var(--af-line);
	border-radius: var(--af-radius);
	box-shadow: 0 18px 48px rgba(15, 40, 60, .18);
	font-family: var(--af-font);
}

.dropdown-menu > li > a {
	padding: 8px 16px;
	border-radius: 8px;
	margin: 2px 6px;
	color: var(--af-ink-2);
}

.dropdown-menu > li > a:hover {
	background: var(--af-brand-100);
	color: var(--af-brand-700);
}

.progress {
	border-radius: 999px;
	background: rgba(15, 110, 125, .1);
	box-shadow: none;
	height: 10px;
}

.progress-bar {
	border-radius: 999px;
	box-shadow: none;
}

.pagination > li > a,
.pagination > li > span {
	border-radius: 8px !important;
	margin: 0 2px;
	border-color: var(--af-line);
	color: var(--af-ink-2);
	font-weight: 600;
}

.pagination > .active > a {
	background: var(--af-brand-600) !important;
	border-color: var(--af-brand-600) !important;
}

.panel {
	border: 1px solid var(--af-line);
	border-radius: var(--af-radius);
	box-shadow: var(--af-shadow);
}

.nav-tabs {
	border-bottom: 1px solid var(--af-line);
}

.nav-tabs > li > a {
	border-radius: 10px 10px 0 0;
	color: var(--af-muted);
	font-weight: 600;
}

.nav-tabs > li.active > a {
	color: var(--af-brand-700);
	font-weight: 700;
}

/* ------------------------------ اجزای مشترک (Design System) ------------------------------ */
/* سرصفحهٔ صفحه: عنوان + توضیح + اکشن */
.af-page-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 2px 16px}
.af-page-head .t{font-size:19px;font-weight:800;color:var(--af-brand-800);margin:0}
.af-page-head .d{font-size:12.5px;color:var(--af-muted);margin:2px 0 0}
.af-page-head .sp{flex:1}

/* حالت خالی یکدست */
.af-empty{text-align:center;padding:52px 20px;color:var(--af-muted)}
.af-empty .ic{font-size:48px;margin-bottom:10px;opacity:.85}
.af-empty h4{color:var(--af-ink);margin:0 0 6px;font-size:16.5px}
.af-empty p{margin:0;font-size:13.5px}
.af-empty .cta{margin-top:14px}

/* ------------------------------ توست (آگاه‌سازی) ------------------------------ */
#afToasts{position:fixed;top:14px;left:14px;z-index:100000;display:flex;flex-direction:column;gap:10px;max-width:min(380px,92vw)}

.af-toast{display:flex;align-items:flex-start;gap:11px;background:var(--af-card);color:var(--af-ink);
	border:1px solid var(--af-line);border-left:5px solid var(--af-info);border-radius:12px;
	box-shadow:0 14px 38px rgba(15,40,60,.18);padding:12px 14px;font-size:13.5px;line-height:1.9;
	animation:af-toast-in .28s cubic-bezier(.2,.8,.3,1);position:relative;overflow:hidden}

.af-toast.out{animation:af-toast-out .22s ease forwards}
.af-toast .ic{font-size:17px;line-height:1.4;flex:0 0 auto}
.af-toast .tx{flex:1;word-break:break-word}
.af-toast .x{border:0;background:transparent;color:var(--af-muted);cursor:pointer;font-size:15px;line-height:1;padding:2px 4px;border-radius:6px}
.af-toast .x:hover{background:#f1f5f9;color:var(--af-ink)}
.af-toast::after{content:'';position:absolute;bottom:0;right:0;height:3px;width:100%;background:currentColor;opacity:.25;animation:af-toast-bar linear forwards;animation-duration:inherit}

.af-toast.success{border-left-color:var(--af-ok)}
.af-toast.success .ic{color:var(--af-ok)}
.af-toast.info{border-left-color:var(--af-info)}
.af-toast.info .ic{color:var(--af-info)}
.af-toast.warning{border-left-color:var(--af-warn)}
.af-toast.warning .ic{color:var(--af-warn)}
.af-toast.danger{border-left-color:var(--af-err)}
.af-toast.danger .ic{color:var(--af-err)}

@keyframes af-toast-in{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes af-toast-out{to{opacity:0;transform:translateY(-8px) scale(.98)}}
@keyframes af-toast-bar{from{transform:translateX(0)}to{transform:translateX(-100%)}}

@media print{#afToasts{display:none !important}}

/* ------------------------------ اسکلتون بارگذاری ------------------------------ */
.af-skel {
	position: relative;
	overflow: hidden;
	height: 12px;
	border-radius: 6px;
	background: rgba(15, 110, 125, .1);
}

.af-skel::after {
	content: '';
	position: absolute;
	inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent);
	animation: af-skel 1.15s infinite;
}

@keyframes af-skel {
	100% {
		transform: translateX(100%);
	}
}

/* ------------------------------ ابزارهای فیلد متنی (میکروفن + پاک‌کردن) ------------------------------ */
.af-tools-wrap {
	position: relative;
	display: block;
}

.af-tools {
	position: absolute;
	left: 8px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	gap: 4px;
	z-index: 4;
}

.af-tool {
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 50%;
	background: rgba(15, 110, 125, .1);
	color: var(--af-brand-700);
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: .15s;
	padding: 0;
}

.af-tool:hover {
	background: rgba(15, 110, 125, .2);
	transform: scale(1.06);
}

.af-tool.af-mic.rec {
	background: rgba(220, 38, 38, .15);
	color: var(--af-err);
	animation: af-mic-pulse 1.1s infinite;
}

.af-tool.af-x {
	background: rgba(100, 116, 139, .12);
	color: var(--af-muted);
}

.af-tool.af-x:hover {
	background: rgba(100, 116, 139, .22);
	color: var(--af-ink);
}

/* میکروفن بدون پشتیبانی مرورگر: کمرنگ ولی قابل کلیک (راهنما می‌دهد) */
.af-tool.af-mic.off {
	opacity: .45;
	background: rgba(148, 163, 184, .14);
	color: var(--af-muted);
}

@keyframes af-mic-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(220, 38, 38, .45);
	}

	70% {
		box-shadow: 0 0 0 8px rgba(220, 38, 38, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
	}
}

/* فاصلهٔ متن از ابزارها */
.af-has-tools {
	padding-left: 74px !important;
}

.af-has-tools.af-one-tool {
	padding-left: 42px !important;
}

html[data-theme="dark"] .af-tool {
	background: rgba(255, 255, 255, .1);
	color: #cfe6ea;
}

html[data-theme="dark"] .af-tool:hover {
	background: rgba(255, 255, 255, .2);
}

html[data-theme="dark"] .af-tool.af-x {
	background: rgba(255, 255, 255, .08);
	color: var(--af-muted);
}

@media print {

	.af-tools {
		display: none !important;
	}
}

/* ------------------------------ حالت تاریک (Dark) ------------------------------ */
html[data-theme="dark"] {
	--af-ink: #e6eef2;
	--af-ink-2: #c3d2dc;
	--af-muted: #90a4b0;
	--af-line: #1e2f3a;
	--af-bg: #09131a;
	--af-card: #101d26;
	--af-brand-100: #12242c;
	--af-gold-100: #2a2113;
	--af-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
}

html[data-theme="dark"] body {
	background: var(--af-bg);
	color: var(--af-ink);
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .title {
	color: #cfe6ea;
}

html[data-theme="dark"] .main-panel {
	background: var(--af-bg);
}

html[data-theme="dark"] .navbar {
	background: rgba(16, 29, 38, .88) !important;
	border-bottom-color: var(--af-line) !important;
}

html[data-theme="dark"] .navbar .navbar-brand,
html[data-theme="dark"] .navbar-nav > li > a,
html[data-theme="dark"] .nv-title,
html[data-theme="dark"] .nv-sep {
	color: var(--af-ink-2) !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu {
	background: var(--af-card);
	border-color: var(--af-line);
	color: var(--af-ink);
}

html[data-theme="dark"] .card .header {
	background: linear-gradient(180deg, #0e1b24, var(--af-card));
	border-bottom-color: var(--af-line);
}

html[data-theme="dark"] .card .footer {
	border-top-color: var(--af-line);
}

html[data-theme="dark"] .table > thead > tr > th,
html[data-theme="dark"] .em-table thead th,
html[data-theme="dark"] .subs-table thead th,
html[data-theme="dark"] .sm-table thead th,
html[data-theme="dark"] .dp-table thead th,
html[data-theme="dark"] .ud-table thead th {
	background: #132430 !important;
	color: #a9bcc7 !important;
	border-bottom-color: var(--af-line) !important;
}

html[data-theme="dark"] .table > tbody > tr > td,
html[data-theme="dark"] .em-table tbody td,
html[data-theme="dark"] .subs-table tbody td,
html[data-theme="dark"] .sm-table tbody td,
html[data-theme="dark"] .dp-table tbody td {
	border-bottom-color: #17262f !important;
}

html[data-theme="dark"] .table > tbody > tr:hover,
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
	background: #15242e;
}

/* ---- صفحهٔ «اعضای ویژه»: هماهنگی با حالت تاریک ---- */
html[data-theme="dark"] .subs-table tbody tr:nth-child(even) {
	background: rgba(255, 255, 255, .028);
}

html[data-theme="dark"] .subs-table tbody tr:hover {
	background: #15242e;
}

html[data-theme="dark"] .subs-table tbody td {
	color: var(--af-ink) !important;
}

html[data-theme="dark"] .subs-name {
	color: #e6eef2 !important;
}

html[data-theme="dark"] .subs-mono {
	color: var(--af-ink-2) !important;
}

html[data-theme="dark"] .subs-filter,
html[data-theme="dark"] .subs-org {
	background: var(--af-card) !important;
	border-color: var(--af-line) !important;
	box-shadow: none !important;
}

html[data-theme="dark"] .subs-filter .lbl,
html[data-theme="dark"] .subs-filter .res {
	color: var(--af-ink-2) !important;
}

html[data-theme="dark"] .subs-org .t {
	color: var(--af-ink) !important;
}

html[data-theme="dark"] .subs-org.on,
html[data-theme="dark"] .subs-org:hover {
	background: #14262f !important;
	border-color: var(--af-brand-600) !important;
}

html[data-theme="dark"] .pill-total {
	background: #1b2c36 !important;
	color: #cbd5e1 !important;
	border-color: #33475a !important;
}

html[data-theme="dark"] .subs-pager {
	border-top-color: var(--af-line) !important;
}

html[data-theme="dark"] .subs-pager .cur {
	color: var(--af-ink-2) !important;
}

html[data-theme="dark"] .subs-pager .dis {
	color: #566a76 !important;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] select.form-control,
html[data-theme="dark"] textarea.form-control,
html[data-theme="dark"] .em-sort,
html[data-theme="dark"] .em-pay,
html[data-theme="dark"] .subs-filter select,
html[data-theme="dark"] .mon-filter select,
html[data-theme="dark"] .dp-combo {
	background: #0f1c25 !important;
	border-color: #243a47 !important;
	color: var(--af-ink) !important;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .em-sort:focus {
	background: #122230 !important;
	border-color: var(--af-brand-600) !important;
}

html[data-theme="dark"] .btn.btn-default,
html[data-theme="dark"] .btn.btn-ghost {
	color: var(--af-ink-2) !important;
	box-shadow: inset 0 0 0 1.5px #243a47 !important;
}

html[data-theme="dark"] .btn.btn-default:hover {
	background: #16303a !important;
	color: #d7ecf0 !important;
}

html[data-theme="dark"] .dropdown-menu > li > a {
	color: var(--af-ink-2);
}

html[data-theme="dark"] .dropdown-menu > li > a:hover {
	background: #17303a;
	color: #d7ecf0;
}

html[data-theme="dark"] .af-toast {
	background: #13222c;
	color: var(--af-ink);
	border-color: #243a47;
}

html[data-theme="dark"] .af-empty,
html[data-theme="dark"] .em-empty {
	color: var(--af-muted);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, .2);
	background-clip: content-box;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, .38);
	background-clip: content-box;
}

/* دکمهٔ تغییر تم در نوار بالا */
.af-theme-btn {
	border: 1.5px solid var(--af-line);
	background: transparent;
	color: var(--af-ink-2);
	border-radius: 999px;
	padding: 7px 13px;
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 700;
	cursor: pointer;
	margin-top: 7px;
	transition: .16s;
	white-space: nowrap;
}

.af-theme-btn:hover {
	border-color: var(--af-brand-600);
	color: var(--af-brand-700);
	transform: translateY(-1px);
}

html[data-theme="dark"] .af-theme-btn:hover {
	color: #d7ecf0;
}

/* =========================================================================
   تجربهٔ موبایل
   ========================================================================= */
@media (max-width: 991px) {

	/* نوار بالا: دکمه‌ها فشرده و لمسی */
	.navbar-nav > li > a {
		padding: 10px 12px;
		font-size: 13px;
	}

	.navbar .navbar-brand {
		font-size: 13px;
	}

	.nv-title,
	.nv-sep {
		display: none;
	}

	/* سرصفحهٔ صفحه: زیر هم */
	.af-page-head {
		display: block;
		margin-bottom: 12px;
	}

	.af-page-head .t {
		font-size: 17px;
	}

	/* نوارهای ابزار: تمام‌عرض و لمسی */
	.em-bar,
	.subs-filter,
	.mon-filter,
	.dp-sort {
		gap: 8px;
		padding: 12px 12px;
	}

	.em-sort-wrap {
		width: 100%;
	}

	.em-sort,
	.em-pay,
	.subs-filter select,
	.mon-filter select,
	.dp-combo {
		width: 100% !important;
		min-width: 0 !important;
		min-height: 44px;
	}

	.em-pay {
		justify-content: center;
	}

	.em-count {
		width: 100%;
		text-align: center;
	}

	/* جدول‌ها: فشرده + ستون اول چسبان تا نام همیشه دیده شود */
	.em-table thead th,
	.em-table tbody td,
	.subs-table thead th,
	.subs-table tbody td,
	.sm-table thead th,
	.sm-table tbody td,
	.dp-table thead th,
	.dp-table tbody td {
		padding: 9px 8px !important;
		font-size: 12.5px !important;
	}

	.em-table td:first-child,
	.em-table th:first-child,
	.subs-table td:first-child,
	.subs-table th:first-child,
	.dp-table td:first-child,
	.dp-table th:first-child {
		position: sticky;
		right: 0;
		z-index: 2;
		box-shadow: -6px 0 12px rgba(15, 40, 60, .06);
	}

	html[data-theme="dark"] .em-table td:first-child,
	html[data-theme="dark"] .subs-table td:first-child,
	html[data-theme="dark"] .dp-table td:first-child {
		box-shadow: -6px 0 12px rgba(0, 0, 0, .3);
	}

	/* صفحه‌بندی: دکمه‌های بزرگ‌تر برای لمس */
	.em-pager a,
	.subs-pager a {
		padding: 10px 16px;
	}

	.subs-pager {
		gap: 8px;
	}

	/* فیلترهای صفحهٔ کارکنان: ۲ ستونه */
	.em-sort-wrap+.em-sort-wrap {
		margin-top: 2px;
	}
}

/* ------------------------------ چاپ (Print) ------------------------------ */
@media print {

	/* چاپ تمیز: منو، دکمه‌ها و ابزارها حذف می‌شوند */
	.sidebar,
	.navbar,
	.navbar-header,
	.nv-alert,
	.btn,
	button,
	.em-bar,
	.em-pager,
	.em-count,
	.subs-filter,
	.subs-stats,
	.mon-filter,
	.mon-stats,
	.dp-stats,
	.dp-sort,
	.pagination,
	.no-print,
	footer {
		display: none !important;
	}

	body {
		background: #fff !important;
		color: #000 !important;
		font-size: 11.5pt;
	}

	.main-panel {
		margin: 0 !important;
		width: 100% !important;
		float: none !important;
	}

	.main-panel > .content {
		padding: 0 !important;
	}

	.card,
	.slip,
	.kv,
	.panel {
		box-shadow: none !important;
		border: 1px solid #d0d7dd !important;
		border-radius: 6px !important;
	}

	.card .header {
		background: #fff !important;
		border-bottom: 1px solid #d0d7dd !important;
	}

	/* جدول‌های اسکرول‌دار، در چاپ کامل باز شوند */
	.em-scroll,
	.subs-scroll,
	.sm-scroll,
	.dp-scroll {
		max-height: none !important;
		overflow: visible !important;
	}

	.table > thead > tr > th,
	.em-table thead th,
	.subs-table thead th,
	.sm-table thead th,
	.dp-table thead th {
		position: static !important;
		background: #f2f5f7 !important;
		color: #000 !important;
	}

	/* تکرار سرستون‌ها در صفحه‌های بعدی */
	thead {
		display: table-header-group;
	}

	tr,
	.card,
	.slip {
		break-inside: avoid;
	}

	a {
		color: #000 !important;
		text-decoration: none !important;
	}

	@page {
		size: A4;
		margin: 12mm 10mm;
	}
}

/* ------------------------------ شبکهٔ داده: اسکرول داخلی ------------------------------ */
/* جدول‌های طولانی داخل کادر خودشان اسکرول می‌شوند تا ارتفاع صفحه یک‌کادر بماند */
.em-scroll,
.subs-scroll,
.sm-scroll,
.dp-scroll {
	scrollbar-width: thin;
}

@media (max-width: 900px) {

	/* روی موبایل اسکرول تودرتو آزاردهنده است؛ جدول آزاد شود */
	.em-scroll,
	.subs-scroll,
	.sm-scroll,
	.dp-scroll {
		max-height: none !important;
		min-height: 0 !important;
	}
}

/* ------------------------------ موبایل ------------------------------ */
@media (max-width: 991px) {
	.main-panel > .content {
		padding: 16px 12px 32px;
	}

	.card .header,
	.card .content {
		padding-left: 14px;
		padding-right: 14px;
	}

	.btn {
		padding: 9px 15px;
	}
}

/* ------------------------------ نوار ثابت تاریخ و ساعت (بالای همهٔ صفحات) ------------------------------ */
body.af-panel {
	padding-top: 34px;
}

body.af-panel > .wrapper {
	height: calc(100vh - 34px);
}

#afTopbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 34px;
	z-index: 1200;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 0 12px;
	white-space: nowrap;
	overflow: hidden;
	background: linear-gradient(90deg, #0b3d4f, #0f6e7d 50%, #0b3d4f);
	color: #eaf6f8;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .2px;
	font-variant-numeric: tabular-nums;
	box-shadow: 0 2px 12px rgba(6, 42, 53, .28);
}

#afTopbar .af-tb-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

#afTopbar .af-tb-ico {
	font-size: 13px;
	opacity: .9;
}

#afTopbar .af-tb-sep {
	width: 1px;
	height: 16px;
	background: rgba(255, 255, 255, .3);
}

#afTopbar #afTbClock {
	color: #fff;
}

@media (max-width: 560px) {
	#afTopbar {
		font-size: 11.5px;
		gap: 8px;
		justify-content: space-between;
	}

	#afTopbar .af-tb-ico {
		display: none;
	}
}

@media print {

	#afTopbar {
		display: none !important;
	}

	body.af-panel {
		padding-top: 0 !important;
	}

	body.af-panel > .wrapper {
		height: auto !important;
	}
}

/* ------------------------------ مرکز پیام (گفتگوها) ------------------------------ */
.msg-wrap {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 16px;
	align-items: stretch;
	min-height: calc(100vh - 210px);
}

.msg-side,
.msg-main {
	background: var(--af-card);
	border: 1px solid var(--af-line);
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--af-shadow);
}

.msg-side-head,
.msg-head {
	padding: 12px 16px;
	border-bottom: 1px solid var(--af-line);
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.msg-side-head h5,
.msg-head h5 {
	margin: 0;
	font-size: 15px;
	font-weight: 800;
	color: var(--af-brand-800);
}

html[data-theme="dark"] .msg-side-head h5,
html[data-theme="dark"] .msg-head h5 {
	color: #cfe6ea;
}

.msg-side-head .cnt {
	font-size: 12px;
	color: var(--af-muted);
	font-weight: 700;
}

.msg-list {
	overflow: auto;
	flex: 1;
	max-height: calc(100vh - 265px);
}

.msg-new {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	align-items: center;
	padding: 10px 14px;
	border-bottom: 1px solid var(--af-line);
	background: var(--af-bg);
}

.msg-new .lbl {
	font-size: 12px;
	color: var(--af-muted);
	font-weight: 700;
}

.msg-new a {
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none;
	color: var(--af-brand-700);
	background: var(--af-brand-100);
	border: 1px solid var(--af-line);
	border-radius: 999px;
	padding: 4px 11px;
	transition: .15s;
}

.msg-new a:hover {
	background: #d9edf1;
	color: var(--af-brand-800);
}

html[data-theme="dark"] .msg-new a {
	color: #9fdfe8;
}

html[data-theme="dark"] .msg-new a:hover {
	background: #14262f;
}

.msg-alert {
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 13.5px;
	font-weight: 700;
	margin-bottom: 14px;
}

.msg-alert.err {
	background: #fef2f2;
	color: #b91c1c;
	border: 1px solid #fecaca;
}

html[data-theme="dark"] .msg-alert.err {
	background: #2a1414;
	border-color: #5b2323;
	color: #fca5a5;
}

.msg-newform {
	display: flex;
	gap: 10px;
	align-items: flex-end;
	flex-wrap: wrap;
	background: var(--af-card);
	border: 1px solid var(--af-line);
	border-radius: 14px;
	padding: 12px 16px;
	margin-bottom: 16px;
	box-shadow: var(--af-shadow);
}

.msg-newform .fld {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.msg-newform label {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--af-ink-2);
}

.msg-newform .hint {
	font-size: 12px;
	color: var(--af-muted);
	max-width: 340px;
}

.msg-newform input,
.msg-newform select {
	font-family: inherit;
	font-size: 13.5px;
	padding: 9px 12px;
	border: 1.5px solid var(--af-line);
	border-radius: 10px;
	background: var(--af-bg);
	color: var(--af-ink);
	outline: none;
}

.msg-newform input:focus,
.msg-newform select:focus {
	border-color: var(--af-brand-600);
}

.msg-filters {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.msg-filters input,
.msg-filters select {
	font-family: inherit;
	font-size: 13.5px;
	padding: 9px 12px;
	border: 1.5px solid var(--af-line);
	border-radius: 10px;
	background: var(--af-card);
	color: var(--af-ink);
	outline: none;
}

.msg-filters input[type="text"] {
	min-width: 260px;
}

.msg-filters label.chk {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--af-ink-2);
	cursor: pointer;
}

.msg-reset {
	font-size: 12.5px;
	font-weight: 700;
	color: #b91c1c;
	text-decoration: none;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 8px;
	padding: 8px 12px;
}

.msg-cnt {
	font-size: 12.5px;
	color: var(--af-muted);
	font-weight: 700;
	margin-inline-start: auto;
}

html[data-theme="dark"] .msg-reset {
	background: #2a1414;
	border-color: #5b2323;
	color: #fca5a5;
}

.msg-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 14px 16px;
	border-top: 1px solid var(--af-line);
	font-size: 13.5px;
}

.msg-pager a {
	font-weight: 800;
	color: var(--af-brand-700);
	text-decoration: none;
	background: var(--af-brand-100);
	border: 1px solid var(--af-line);
	border-radius: 10px;
	padding: 9px 17px;
	transition: .15s;
}

.msg-pager a:hover {
	background: #d9edf1;
}

.msg-pager .cur {
	color: var(--af-ink-2);
	font-weight: 700;
	font-size: 13px;
}

.msg-pager .dis {
	color: var(--af-muted);
	border: 1px solid var(--af-line);
	border-radius: 10px;
	padding: 9px 17px;
}

html[data-theme="dark"] .msg-pager a {
	color: #9fdfe8;
}

html[data-theme="dark"] .msg-pager a:hover {
	background: #14262f;
}

.msg-item {
	display: block;
	padding: 12px 15px;
	border-bottom: 1px solid var(--af-line);
	text-decoration: none;
	color: inherit;
	transition: .15s;
}

.msg-item:hover {
	background: var(--af-brand-100);
	color: inherit;
}

.msg-item.on {
	background: var(--af-brand-100);
	box-shadow: inset 3px 0 0 var(--af-brand-600);
}

.msg-item .top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.msg-item .who {
	font-weight: 800;
	color: var(--af-ink);
	font-size: 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.msg-item .when {
	font-size: 11.5px;
	color: var(--af-muted);
	white-space: nowrap;
}

.msg-item .snippet {
	font-size: 12.5px;
	color: var(--af-muted);
	margin-top: 3px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.msg-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: #ef4444;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	flex: 0 0 auto;
}

.msg-role {
	display: inline-block;
	border-radius: 999px;
	padding: 2px 10px;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
}

.msg-role.admin {
	background: #e0f2fe;
	color: #075985;
}

.msg-role.department {
	background: #f1f5f9;
	color: #334155;
}

.msg-role.employee {
	background: #d1fae5;
	color: #065f46;
}

.msg-role.pair {
	background: #ede9fe;
	color: #5b21b6;
}

.msg-sender {
	font-size: 12px;
	font-weight: 800;
	color: var(--af-brand-700);
	margin-bottom: 4px;
}

/* پیام خوانده‌نشده: متن تا کلیک کاربر پنهان است */
.bubble.locked {
	background: var(--af-bg);
	border: 1.5px dashed var(--af-line);
	color: var(--af-muted);
}

.msg-locked {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	font-size: 13.5px;
	color: var(--af-muted);
}

.msg-locked-ico {
	font-size: 20px;
}

.msg-open {
	display: inline-block;
	margin-top: 2px;
	font-size: 12.5px;
	font-weight: 800;
	text-decoration: none;
	color: #fff;
	background: var(--af-brand-600);
	border-radius: 8px;
	padding: 6px 13px;
	transition: .15s;
}

.msg-open:hover {
	background: var(--af-brand-700);
	color: #fff;
}

.msg-unseen {
	color: #b45309;
	font-weight: 700;
}

html[data-theme="dark"] .msg-unseen {
	color: #fbbf24;
}

.snippet-hidden {
	color: var(--af-muted);
	font-style: italic;
	font-size: 12px;
}

.msg-compose.readonly {
	align-items: center;
	justify-content: center;
	color: var(--af-muted);
	text-align: center;
}

/* ------------------------------ اجزای مشترک صفحات مدیریت ------------------------------ */
.adm-card {
	border: none;
	border-radius: 16px;
	box-shadow: 0 4px 24px rgba(15, 40, 60, .08);
	overflow: hidden;
	margin-bottom: 18px;
}

.adm-card .header {
	padding: 20px 24px 6px;
	background: linear-gradient(180deg, #f8fbfc, #fff);
}

.adm-card .title {
	font-size: 17px;
	font-weight: 800;
	color: #0b3d4f;
	margin: 0;
}

.adm-card .description {
	font-size: 13px;
	color: #64748b;
	margin: 4px 0 0;
}

.adm-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 13.5px;
}

.adm-table thead th {
	background: #f1f6f8;
	color: #33556b;
	font-weight: 700;
	font-size: 12px;
	padding: 11px 13px;
	text-align: right;
	border-bottom: 2px solid #e2eaf0;
	white-space: nowrap;
}

.adm-table tbody td {
	padding: 11px 13px;
	border-bottom: 1px solid #f0f4f7;
}

.adm-table tbody tr:hover {
	background: #f7fbfc;
}

.adm-table tbody tr:last-child td {
	border-bottom: none;
}

.adm-monofull {
	font-family: Consolas, Menlo, monospace;
	font-size: 12.5px;
	color: #475569;
}

.vis-time {
	white-space: nowrap;
}

.vis-ago {
	color: #94a3b8;
	font-size: 11.5px;
}

.adm-empty {
	text-align: center;
	padding: 44px 20px;
	color: #64748b;
}

.bdg {
	display: inline-block;
	border-radius: 999px;
	padding: 3px 11px;
	font-size: 11.5px;
	font-weight: 700;
	white-space: nowrap;
}

.bdg-ok {
	background: #d1fae5;
	color: #065f46;
	border: 1px solid #6ee7b7;
}

.bdg-err {
	background: #fee2e2;
	color: #b91c1c;
	border: 1px solid #fca5a5;
}

.bdg-info {
	background: #e0f2fe;
	color: #075985;
	border: 1px solid #7dd3fc;
}

.bdg-mute {
	background: #f1f5f9;
	color: #64748b;
	border: 1px solid #cbd5e1;
}

/* نشان نوع اشتراک — هر نوع رنگ مشخص خودش را دارد */
.bdg-normal {
	background: #dbeafe;
	color: #1d4ed8;
	border: 1px solid #93c5fd;
}

.bdg-gold {
	background: #fef3c7;
	color: #92400e;
	border: 1px solid #fcd34d;
}

.bdg-nosub {
	background: #f1f5f9;
	color: #64748b;
	border: 1px dashed #cbd5e1;
}

html[data-theme="dark"] .adm-card .header {
	background: linear-gradient(180deg, #0e1b24, var(--af-card));
}

html[data-theme="dark"] .adm-card .title {
	color: #cfe6ea;
}

html[data-theme="dark"] .adm-table thead th {
	background: #132430;
	color: #a9bcc7;
	border-bottom-color: var(--af-line);
}

html[data-theme="dark"] .adm-table tbody td {
	border-bottom-color: #17262f;
}

html[data-theme="dark"] .adm-table tbody tr:hover {
	background: #15242e;
}

html[data-theme="dark"] .adm-monofull {
	color: #a9bcc7;
}

html[data-theme="dark"] .bdg-ok {
	background: #10291f;
	color: #6ee7b7;
	border-color: #1e5e46;
}

html[data-theme="dark"] .bdg-err {
	background: #2a1414;
	color: #fca5a5;
	border-color: #5b2323;
}

html[data-theme="dark"] .bdg-info {
	background: #0e2a3a;
	color: #7dd3fc;
	border-color: #1e4f66;
}

html[data-theme="dark"] .bdg-mute {
	background: #1b2c36;
	color: #cbd5e1;
	border-color: #33475a;
}

html[data-theme="dark"] .bdg-normal {
	background: #132a4a;
	color: #93c5fd;
	border-color: #2a4a7a;
}

html[data-theme="dark"] .bdg-gold {
	background: #2a2113;
	color: #fcd34d;
	border-color: #5b4a1f;
}

html[data-theme="dark"] .bdg-nosub {
	background: #1b2c36;
	color: #94a3b8;
	border-color: #33475a;
}

.msg-alert.warn-note {
	background: #fffbeb;
	color: #92400e;
	border: 1px solid #fde68a;
}

html[data-theme="dark"] .msg-alert.warn-note {
	background: #2a2113;
	border-color: #5b4a1f;
	color: #fcd34d;
}

html[data-theme="dark"] .msg-role.pair {
	background: #241a3a;
	color: #c4b5fd;
}

html[data-theme="dark"] .msg-sender {
	color: #9fdfe8;
}

.msg-body {
	flex: 1;
	overflow: auto;
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: var(--af-bg);
	min-height: 240px;
	max-height: calc(100vh - 375px);
}

.bubble {
	max-width: min(680px, 80%);
	border-radius: 14px;
	padding: 10px 14px;
	font-size: 14px;
	line-height: 1.9;
	box-shadow: 0 1px 2px rgba(15, 40, 60, .06);
	white-space: normal;
	word-break: break-word;
}

/* فقط متنِ پیام، شکست خط کاربر را حفظ می‌کند (نه فاصله‌های قالب) */
.bubble .msg-text {
	white-space: pre-wrap;
}

.bubble.me {
	align-self: flex-end;
	background: linear-gradient(135deg, #0f6e7d, #0b3d4f);
	color: #fff;
	border-bottom-left-radius: 4px;
}

.bubble.them {
	align-self: flex-start;
	background: var(--af-card);
	border: 1px solid var(--af-line);
	color: var(--af-ink);
	border-bottom-right-radius: 4px;
}

.bubble .msg-subject {
	display: inline-block;
	background: rgba(255, 255, 255, .22);
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 999px;
	padding: 1px 9px;
	font-size: 11px;
	font-weight: 700;
	margin-bottom: 5px;
}

.bubble.them .msg-subject {
	background: var(--af-brand-100);
	border-color: var(--af-line);
	color: var(--af-brand-700);
}

.bubble .msg-meta {
	font-size: 11px;
	opacity: .8;
	margin-top: 5px;
}

.msg-compose {
	border-top: 1px solid var(--af-line);
	padding: 12px 14px;
	background: var(--af-card);
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.msg-compose textarea {
	width: 100%;
	min-height: 62px;
	resize: vertical;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.9;
	padding: 10px 12px;
	border: 1.5px solid var(--af-line);
	border-radius: 10px;
	background: var(--af-bg);
	color: var(--af-ink);
	outline: none;
}

.msg-compose textarea:focus {
	border-color: var(--af-brand-600);
	box-shadow: 0 0 0 4px rgba(15, 110, 125, .12);
}

.msg-compose .row2 {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}

.msg-compose select {
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	padding: 9px 12px;
	border: 1.5px solid var(--af-line);
	border-radius: 10px;
	background: var(--af-bg);
	color: var(--af-ink);
	min-width: 210px;
	outline: none;
}

.msg-compose select:focus {
	border-color: var(--af-brand-600);
}

.msg-compose .hint {
	font-size: 12px;
	color: var(--af-muted);
}

.msg-empty {
	color: var(--af-muted);
	text-align: center;
	padding: 64px 20px;
}

.msg-empty .icon {
	font-size: 46px;
	margin-bottom: 10px;
}

@media (max-width: 900px) {
	.msg-wrap {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.msg-list {
		max-height: 320px;
	}

	.msg-body {
		max-height: none;
	}

	.bubble {
		max-width: 92%;
	}
}

html[data-theme="dark"] .msg-role.admin {
	background: #0e2a3a;
	color: #7dd3fc;
}

html[data-theme="dark"] .msg-role.department {
	background: #1b2c36;
	color: #cbd5e1;
}

html[data-theme="dark"] .msg-role.employee {
	background: #10291f;
	color: #6ee7b7;
}

/* ---------- mobile bottom nav (employees) ---------- */
.af-bottomnav { display: none; }
@media (max-width: 991px) {
	.af-bottomnav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1100; background: var(--af-card); border-top: 1px solid var(--af-line); box-shadow: 0 -2px 14px rgba(15,40,60,.10); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); }
	.af-bottomnav a { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10.5px; font-weight: 700; color: var(--af-muted); text-decoration: none; padding: 5px 2px; border-radius: 10px; position: relative; }
	.af-bottomnav a span { font-size: 17px; line-height: 1; }
	.af-bottomnav a.on { color: var(--af-brand-700); background: var(--af-brand-100); }
	.af-bottomnav a .dot { position: absolute; top: 2px; left: 50%; margin-left: 8px; background: #ef4444; color: #fff; border-radius: 999px; font-size: 10px; font-style: normal; padding: 0 5px; line-height: 15px; min-width: 15px; text-align: center; }
	body.af-panel .main-panel > .content { padding-bottom: 78px !important; }
}
@media print { .af-bottomnav { display: none !important; } }

/* ---------- global search palette (Ctrl+K) ---------- */
.af-palette { position: fixed; inset: 0; z-index: 2000; background: rgba(6,42,53,.45); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; }
.af-palette[hidden] { display: none; }
.af-palette-box { width: 100%; max-width: 560px; background: var(--af-card); border: 1px solid var(--af-line); border-radius: 16px; box-shadow: 0 20px 60px rgba(6,42,53,.35); overflow: hidden; }
.af-palette-box input { width: 100%; border: 0; border-bottom: 1px solid var(--af-line); background: transparent; color: var(--af-ink); font-family: inherit; font-size: 15px; padding: 15px 18px; outline: none; }
.af-palette-results { max-height: 46vh; overflow: auto; }
.af-palette-item { display: flex; align-items: center; gap: 10px; padding: 11px 16px; text-decoration: none; color: var(--af-ink); border-bottom: 1px solid var(--af-line); }
.af-palette-item:hover, .af-palette-item.on { background: var(--af-brand-100); color: var(--af-brand-700); }
.af-palette-item .ic { font-size: 16px; }
.af-palette-item .lbl { flex: 1 1 auto; font-weight: 700; font-size: 13.5px; }
.af-palette-item .ty { font-size: 11px; color: var(--af-muted); }
.af-palette-empty { padding: 18px; text-align: center; color: var(--af-muted); font-size: 13px; }
.af-palette-foot { padding: 9px 14px; font-size: 11.5px; color: var(--af-muted); border-top: 1px solid var(--af-line); }
.af-palette-foot kbd { background: var(--af-brand-100); border: 1px solid var(--af-line); border-radius: 5px; padding: 1px 6px; font-size: 11px; }
@media print { .af-palette { display: none !important; } }