/* ==========================================================================
   Absekoon HR — design system مشترک بین افزونه فیش حقوقی و افزونه مرخصی
   اصول: کاغذ سفید، خط مو به‌جای سایه، فضای خالی زیاد، یک لهجه‌ی گرم و کم‌مصرف.
   نام کلاس‌ها و متغیرها عمداً دست‌نخورده مانده‌اند چون افزونه مرخصی هم
   همین فایل را enqueue می‌کند.
   ========================================================================== */

:root {
	/* --primary سیاه است، نه آبی: در سندی که قرار است چاپ شود، رنگ اضافه نویز است */
	--primary: #171717;
	--primary-hover: #000;
	--accent: #a16207;          /* تنها لهجه‌ی رنگی: مبلغ خالص، وضعیت فعال */
	--accent-bg: #fdfaf3;
	--accent-line: #ead9b8;

	--success: #15803d;
	--warning: #b45309;
	--danger: #b91c1c;

	--text: #171717;
	--text-2: #404040;
	--muted: #737373;           /* روی سفید ۴٫۶:۱ — از حداقل WCAG رد می‌شود */

	--background: #fff;
	--card: #fff;
	--surface: #fafafa;
	--border: #e5e5e5;
	--border-soft: #f0f0f0;

	--radius: 10px;
	--radius-sm: 8px;
	--shadow: none;             /* admin.css از این استفاده می‌کند؛ خالی نگه داشته شده */

	/* هیچ @font-face ای اینجا نیست: پوشه fonts خالی بود و اعلانِ شکسته باعث می‌شد
	   حتی فونت نصب‌شده روی سیستم کاربر هم نادیده گرفته شود و همه‌چیز Tahoma شود */
	--font: "Vazirmatn", "Estedad", "IRANSansX", "IRANSans", "Segoe UI",
		"Noto Naskh Arabic", "SF Arabic", "Geeza Pro", Tahoma, sans-serif;
}

/* ---------- پایه ---------- */

.abs-portal,
.absl-wrap,
.abs-wrap,
.absl {
	direction: rtl;
	font-family: var(--font);
	color: var(--text);
	font-size: 15px;
	line-height: 1.8;
	/* letter-spacing روی خط فارسی حروف را از هم می‌اندازد — هیچ‌جا استفاده نشده */
	letter-spacing: normal;
}

.abs-portal {
	/* قبلاً یک جعبه‌ی خاکستری با سایه بود؛ حالا فقط ستون محتوا روی خود صفحه */
	box-sizing: border-box;
	max-width: 920px;
	margin: 40px auto;
	padding: 0 20px;
	background: none;
	border: 0;
}

.abs-portal h2,
.absl-wrap h3,
.absl h1,
.abs-wrap h1 {
	color: var(--text);
	font-weight: 600;
	letter-spacing: normal;
}
.abs-portal h2 { margin: 0 0 2px; font-size: 21px; line-height: 1.5; }
.abs-portal h3,
.absl-wrap h3 { margin: 0 0 14px; font-size: 16px; font-weight: 600; }

.abs-sub,
.abs-hint,
.absl-sub { color: var(--muted); font-size: 13px; }

.abs-brand {
	color: var(--muted);
	font-size: 11px;
	font-weight: 600;
	margin-bottom: 6px;
}

.abs-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--border);
	margin-bottom: 28px;
}

/* عکس پرسنل در سربرگ کارتابل */
.abs-avatar-box {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	margin: 0;
}

.abs-avatar-edit {
	font-size: 11px;
	color: var(--muted);
	cursor: pointer;
	text-decoration: underline;
}

.abs-avatar-edit input[type="file"] { display: none; }

.abs-portal .abs-avatar-del {
	font-size: 11px;
	min-height: 0;
	box-shadow: none;
	background: none;
	border: 0;
	padding: 0;
	color: var(--muted);
	cursor: pointer;
	text-decoration: underline;
}

.abs-avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid var(--border);
	background: var(--bg, #f3f4f6);
}

.abs-avatar-txt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	font-weight: 700;
	color: var(--muted);
}

/* لوگوی خروج ته سربرگ بماند */
.abs-head > .abs-avatar-box + div { margin-inline-end: auto; }

/* ---------- دکمه و لینک ---------- */

.abs-portal button,
.abs-print,
.absl-wrap button,
.abs-wrap .button-primary,
.absl .button-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 9px 20px;
	border: 1px solid var(--primary);
	border-radius: var(--radius-sm);
	background: var(--primary);
	color: #fff;
	font: 500 14px/1.4 var(--font);
	cursor: pointer;
	text-decoration: none;
	transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.abs-portal button:hover,
.abs-print:hover,
.absl-wrap button:hover,
.abs-wrap .button-primary:hover,
.absl .button-primary:hover {
	background: var(--primary-hover);
	border-color: var(--primary-hover);
	color: #fff;
}
.abs-portal button:disabled,
.absl-wrap button:disabled {
	background: #d4d4d4;
	border-color: #d4d4d4;
	color: #fff;
	cursor: not-allowed;
}

.abs-logout,
.abs-back,
.absl-wrap button.ghost,
.absl-rej-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 38px;
	padding: 7px 14px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: #fff;
	color: var(--text-2);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease;
}
.abs-logout:hover,
.abs-back:hover,
.absl-wrap button.ghost:hover,
.absl-rej-btn:hover {
	border-color: #a3a3a3;
	background: var(--surface);
	color: var(--text);
}

.absl-link { color: var(--accent); font-weight: 500; text-decoration: none; }
.absl-link:hover { text-decoration: underline; }
.abs-del { color: var(--danger); font-weight: 500; }

:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---------- فرم ---------- */

/* ورود: یک ستون باریک و وسط‌چین، بدون قاب */
.abs-login { max-width: 420px; margin: 72px auto; }
.abs-login-head { text-align: center; margin-bottom: 30px; }
.abs-login-head .abs-logo { height: 52px; margin-bottom: 18px; }
.abs-login-head h2 { font-size: 19px; }
.abs-login-head .abs-sub { display: block; margin-top: 8px; line-height: 1.9; }
.abs-login form { display: grid; gap: 18px; }
.abs-login form button { margin-top: 4px; width: 100%; }
.abs-login .abs-alert { margin-bottom: 20px; }
.abs-login-foot { margin-top: 24px; text-align: center; }

.abs-login label,
.absl-fields label,
.absl-modal-box label {
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: var(--text-2);
	font-size: 13px;
	font-weight: 500;
}

.abs-portal input,
.abs-portal select,
.abs-portal textarea,
.absl-wrap input,
.absl-wrap select,
.absl-wrap textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 10px 13px;
	border: 1px solid #d4d4d4;
	border-radius: var(--radius-sm);
	background: #fff;
	color: var(--text);
	font: 400 15px/1.6 var(--font);
	transition: border-color .18s ease, box-shadow .18s ease;
}

/* داخل wp-admin فیلدها فشرده‌ترند و عرض اجباری نمی‌گیرند */
.abs-wrap input,
.abs-wrap select,
.abs-wrap textarea,
.absl input,
.absl select,
.absl textarea {
	box-sizing: border-box;
	min-height: 36px;
	padding: 6px 11px;
	border: 1px solid #d4d4d4;
	border-radius: var(--radius-sm);
	background: #fff;
	color: var(--text);
	font: 400 14px/1.5 var(--font);
}
.abs-wrap input[type=checkbox],
.abs-wrap input[type=radio],
.absl input[type=checkbox],
.absl input[type=radio] { min-height: 0; padding: 0; }

.absl-fields input,
.absl-fields select,
.absl-fields textarea { width: 100%; }

/* کد پرسنلی و رمز همیشه لاتین‌اند */
.abs-login input { direction: ltr; text-align: right; }

.abs-portal textarea,
.absl-wrap textarea,
.absl textarea { min-height: 92px; resize: vertical; }

.abs-portal input:focus,
.abs-portal select:focus,
.abs-portal textarea:focus,
.absl-wrap input:focus,
.absl-wrap select:focus,
.absl-wrap textarea:focus,
.abs-wrap input:focus,
.abs-wrap select:focus,
.abs-wrap textarea:focus,
.absl input:focus,
.absl select:focus,
.absl textarea:focus {
	outline: 0;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(23, 23, 23, .08);
}

.absl-fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 18px;
	margin: 18px 0;
}
.absl-fields .full { grid-column: 1 / -1; }

.absl-rowform,
.absl-inline,
.abs-search,
.absl-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}
.absl-rowform input { min-width: 150px; flex: 1 1 150px; }

.absl-chk {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: #fff;
}
.absl-chk input { width: auto; min-height: 0; }

/* ---------- کارت و جعبه ---------- */

.abs-card,
.absl-card,
.absl-box,
.absl-pane {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 22px;
	margin: 18px 0;
}

.abs-cols { display: flex; flex-flow: row wrap; gap: 18px; direction: rtl; }
.abs-cols .abs-card { flex: 1 1 320px; }

.absl-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px;
	direction: rtl;
	margin-bottom: 26px;
}
.absl-cards .absl-card { margin: 0; text-align: center; color: var(--muted); font-size: 13px; }
.absl-card b {
	display: block;
	margin-top: 4px;
	color: var(--text);
	font-size: 24px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.absl-box { margin-bottom: 24px; }

/* ---------- پیام ---------- */

.abs-alert,
.abs-ok,
.absl-flash {
	border: 1px solid var(--border);
	border-right: 3px solid var(--muted);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--text-2);
	padding: 12px 15px;
	font-size: 14px;
}
.abs-alert { border-right-color: var(--danger); background: #fef6f6; color: #7f1d1d; }
.abs-ok { border-right-color: var(--success); background: #f5faf6; color: #14532d; }

.abs-empty,
.absl-empty {
	padding: 44px 20px;
	border: 1px dashed #d4d4d4;
	border-radius: var(--radius);
	background: none;
	color: var(--muted);
	text-align: center;
	font-size: 14px;
}

.abs-badge,
.absl-pill,
.absl-st {
	display: inline-block;
	padding: 3px 10px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: #fff;
	color: var(--muted);
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
}
.absl-st.ok, .absl-pill.p-ok, .abs-okc,
.status-approved, .status-paid { border-color: #bbe5c7; background: #f5faf6; color: var(--success); }
.absl-st.no, .absl-pill.p-no,
.status-rejected, .status-cancelled { border-color: #f3c2c2; background: #fef6f6; color: var(--danger); }
.absl-st.wait, .absl-pill.p-wait, .abs-warn,
.status-pending, .status-draft { border-color: #f0d9b5; background: var(--accent-bg); color: var(--warning); }

/* ---------- جدول ---------- */

.abs-table,
.absl-wrap table,
.absl table.widefat,
.absl-grid-tbl {
	width: 100%;
	border: 1px solid var(--border);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--radius);
	overflow: hidden;
	background: #fff;
	font-size: 14px;
}
.abs-table th, .abs-table td,
.absl-wrap th, .absl-wrap td,
.absl table.widefat th, .absl table.widefat td,
.absl-grid-tbl th, .absl-grid-tbl td {
	padding: 13px 16px;
	border-bottom: 1px solid var(--border-soft);
	text-align: right;
	vertical-align: middle;
}
.abs-table th,
.absl-wrap th,
.absl table.widefat th,
.absl-grid-tbl th {
	background: var(--surface);
	color: var(--muted);
	font-size: 12px;
	font-weight: 600;
	border-bottom-color: var(--border);
}
.abs-table tr:last-child td,
.absl-wrap tr:last-child td,
.absl table.widefat tr:last-child td,
.absl-grid-tbl tr:last-child td { border-bottom: 0; }
.abs-table tbody tr:hover td,
.absl-wrap tbody tr:hover td,
.absl table.widefat tbody tr:hover td,
.absl-grid-tbl tbody tr:hover td { background: #fcfcfc; }

.absl-num { direction: ltr; display: inline-block; font-variant-numeric: tabular-nums; }
.absl-scroll { max-height: 62vh; overflow: auto; }
.absl-days thead th { position: sticky; top: 0; z-index: 1; }

/* ---------- هاب پرتال ---------- */

.abs-hub-intro { margin: 6px 0 22px; }
.abs-hub-intro h3 { margin-bottom: 2px; }

.abs-hub-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	direction: rtl;
}

/* تصویرها خودشان برای همین کارت طراحی شده‌اند: نقاشی گوشه‌ی پایین‌چپ و بالای راست
   عمداً خالی است. پس تصویر با تمام رنگش می‌آید و به‌جای پرده‌ی سفید یکدست روی کل کارت
   (که رنگ‌ها را می‌کشت) فقط یک محو ملایم از گوشه‌ی متن پخش می‌شود. */
.abs-hub-card {
	position: relative;
	display: block;
	overflow: hidden;
	min-height: 225px;
	padding: 0;
	border: 1px solid rgba(23, 23, 23, .06);
	border-radius: 14px;
	background-image: var(--abs-hub-img, none);
	background-size: cover;
	background-position: left bottom;
	background-repeat: no-repeat;
	color: var(--text);
	text-decoration: none;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.abs-hub-payslip { --abs-hub-img: url(hub-payslip.png); background-color: #f8f4fc; }
.abs-hub-leave { --abs-hub-img: url(hub-leave.png); background-color: #fef8f3; }

/* محو خوانایی: از گوشه‌ی بالا-راست (جای عنوان در RTL) تا میانه‌ی کارت */
.abs-hub-card::before {
	content: "";
	position: absolute;
	inset: 0;
	/* نقاشی گوشه‌ی پایین-راست تصویر است و متن سمت چپ کارت می‌نشیند، پس فقط یک محو
	   ملایم قطری از گوشه‌ی متن لازم است — نه پرده‌ای که کل تصویر را بشوید */
	background: linear-gradient(to bottom right, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .45) 38%, rgba(255, 255, 255, 0) 68%);
}
.abs-hub-card:hover,
.abs-hub-card:focus-visible {
	border-color: #c4c4c4;
	box-shadow: 0 6px 20px rgba(23, 23, 23, .07);
}

.abs-hub-body {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	/* در RTL، flex-end یعنی سمت چپ: متن و دکمه از نقاشیِ گوشه‌ی راست فاصله می‌گیرند */
	align-items: flex-end;
	height: 100%;
	min-height: 225px;
	padding: 24px;
	text-align: left;
}
/* متن در نیمه‌ی بالای کارت می‌ماند و نیمه‌ی پایین برای خود نقاشی خالی می‌ماند.
   با margin-top:auto دکمه به کف می‌چسبید و درست روی تصویر می‌افتاد. */
.abs-hub-card strong { display: block; font-size: 18px; font-weight: 600; margin: 0 0 4px; }
.abs-hub-card small { display: block; font-size: 13px; color: var(--muted); margin-bottom: 0; }

.abs-hub-icon {
	display: inline-flex;
	width: 26px;
	height: 26px;
	margin-bottom: 16px;
	color: var(--accent);
}
.abs-hub-icon svg { width: 100%; height: 100%; }

.abs-hub-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	color: var(--accent);
	font-size: 13px;
	font-weight: 500;
}
.abs-hub-card:hover .abs-hub-btn { color: var(--primary); }

/* ---------- فهرست فیش‌ها ---------- */

.absl-portal-nav { margin-bottom: 18px; }

/* بعضی تم‌ها به details/summary قاب و پس‌زمینه می‌دهند؛ با این specificity خنثی می‌شود */
.abs-portal details.abs-year-group {
	border: 0;
	border-bottom: 1px solid var(--border);
	border-radius: 0;
	margin: 0;
	padding: 0;
	background: none;
	box-shadow: none;
}
.abs-portal details.abs-year-group:first-of-type { border-top: 1px solid var(--border); }
.abs-portal summary.abs-year {
	border: 0;
	background: none;
	box-shadow: none;
}
/* کلیک روی summary در کروم :focus می‌دهد نه :focus-visible، پس حلقه‌ی پیش‌فرض
   فقط برای موس خاموش می‌شود و برای کیبورد سر جایش می‌ماند */
.abs-portal summary.abs-year:focus { outline: none; }
.abs-portal summary.abs-year:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

summary.abs-year {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 2px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}
summary.abs-year::-webkit-details-marker { display: none; }
summary.abs-year::before {
	content: "";
	width: 7px;
	height: 7px;
	border-left: 1.5px solid var(--muted);
	border-bottom: 1.5px solid var(--muted);
	transform: rotate(45deg);
	transition: transform .2s ease;
}
.abs-year-group[open] > summary.abs-year::before { transform: rotate(-45deg); }
summary.abs-year small { color: var(--muted); font-weight: 400; font-size: 12px; }
.abs-year-icon { width: 24px; height: 24px; object-fit: contain; flex: none; }

.abs-slips {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
	gap: 12px;
	list-style: none;
	margin: 14px 0 0;
	padding: 0 0 22px;
	direction: rtl;
}

/* تصویر فصل در نیمه‌ی چپ کارت می‌نشیند و متن در RTL سمت راست است، پس روی هم
   نمی‌افتند. یک محو سفید از راست هم اضافه شده تا مبلغ همیشه خوانا بماند. */
.abs-slips li {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-height: 158px;
	padding: 16px 18px;
	overflow: hidden;
	border: 1px solid rgba(23, 23, 23, .06);
	border-radius: 14px;
	background-repeat: no-repeat;
	/* contain تا نقاشی بریده نشود؛ فضای باقی‌مانده با background-color هم‌رنگِ
	   خودِ تصویر پر می‌شود، پس کارت یکدست و جمع‌وجور می‌ماند */
	background-size: contain;
	background-position: left bottom;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.abs-slips li::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to left, #fff 12%, rgba(255, 255, 255, .72) 48%, rgba(255, 255, 255, 0) 88%);
}
.abs-slips li:not(.abs-slip-off):hover {
	border-color: #c4c4c4;
	box-shadow: 0 6px 18px rgba(23, 23, 23, .07);
}

/* background-color هم‌رنگِ خودِ تصویر است تا لبه/گوشه‌ی گردِ کارت سفیدی نشان ندهد */
.abs-month-1  { background-image: url(months/01.png); background-color: #fbf7f7; }
.abs-month-2  { background-image: url(months/02.png); background-color: #faf8f8; }
.abs-month-3  { background-image: url(months/03.png); background-color: #fcf8f6; }
.abs-month-4  { background-image: url(months/04.png); background-color: #fcf8f6; }
.abs-month-5  { background-image: url(months/05.png); background-color: #faf7fa; }
.abs-month-6  { background-image: url(months/06.png); background-color: #fbf8f8; }
.abs-month-7  { background-image: url(months/07.png); background-color: #fdf8f4; }
.abs-month-8  { background-image: url(months/08.png); background-color: #fcf8f6; }
.abs-month-9  { background-image: url(months/09.png); background-color: #fbf8f9; }
.abs-month-10 { background-image: url(months/10.png); background-color: #faf8f9; }
.abs-month-11 { background-image: url(months/11.png); background-color: #f9f7fb; }
.abs-month-12 { background-image: url(months/12.png); background-color: #fbf7f8; }

/* strong و span هر دو inline اند؛ بدون block نام ماه و مبلغ در یک خط می‌چسبند */
.abs-slips li strong {
	display: block;
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 3px;
}
.abs-slips li .abs-sub { display: block; font-size: 12.5px; }
.abs-slips li > div,
.abs-slips li > a,
.abs-slips li > span { position: relative; z-index: 1; }
.abs-slips li > div { min-width: 0; max-width: 78%; }

.abs-slips li a {
	align-self: flex-start;
	margin-top: auto;
	padding: 7px 15px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: #fff;
	color: var(--text);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	transition: border-color .18s ease, background .18s ease;
}
.abs-slips li a:hover { border-color: var(--primary); background: var(--primary); color: #fff; }

/* ماه‌هایی که فیش ندارند: تصویر فصل بی‌رنگ می‌شود تا با ماه‌های فعال اشتباه نشود */
.abs-slip-off { background-color: var(--surface); }
.abs-slip-off::before {
	background: linear-gradient(to left, #fafafa 30%, rgba(250, 250, 250, .88) 70%, rgba(250, 250, 250, .68) 100%);
}
.abs-slip-off strong,
.abs-slip-off .abs-sub { color: var(--muted); }
.abs-slip-na {
	align-self: flex-start;
	margin-top: auto;
	padding: 7px 15px;
	border: 1px dashed #d4d4d4;
	border-radius: 999px;
	color: var(--muted);
	font-size: 12.5px;
}

.abs-flash-box { max-width: 920px; margin: 32px auto -18px; padding: 0 20px; font-family: var(--font); direction: rtl; }

/* ---------- خود فیش ---------- */

.abs-slip-head {
	text-align: center;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--border);
	margin-bottom: 24px;
}
.abs-logo { display: block; height: 46px; width: auto; margin: 0 auto 14px; }
.abs-slip-head h2 { font-size: 18px; font-weight: 600; color: var(--text-2); }

.abs-fish-meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1px;
	direction: rtl;
	margin: 0 0 20px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--border);
}
.abs-fish-meta > div { padding: 11px 14px; background: #fff; min-width: 0; }
.abs-fish-meta dt { color: var(--muted); font-size: 11px; margin: 0; line-height: 1.6; }
.abs-fish-meta dd { margin: 1px 0 0; font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }

/* دو ستون، نه auto-fit: با ۴ بخش (کارکرد/مزایا/کسور/اقساط) یک شبکه‌ی ۲×۲ متوازن
   می‌دهد و با چیدمان چاپ هم یکی است، پس آنچه روی صفحه دیده می‌شود همان چیزی است
   که چاپ می‌شود. auto-fit سه‌ستونه می‌شد و کنار جدول چهارم یک حفره می‌ماند. */
.abs-fish-cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: 16px;
	direction: rtl;
}

.abs-fish {
	width: 100%;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-size: 13.5px;
	background: #fff;
	table-layout: fixed;
}
.abs-fish th {
	padding: 9px 12px;
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	color: var(--text-2);
	text-align: center;
	font-size: 12px;
	font-weight: 600;
}
.abs-fish td {
	padding: 8px 12px;
	border-bottom: 1px solid var(--border-soft);
	vertical-align: top;
	overflow-wrap: anywhere;
}
.abs-fish tr:last-child td { border-bottom: 0; }
.abs-fish td.num {
	width: 42%;
	direction: ltr;
	text-align: left;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--text-2);
}

.abs-fish-foot { margin: 16px 0 0; }

.abs-net {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
	padding: 18px 22px;
	border: 1px solid var(--accent-line);
	border-radius: var(--radius);
	background: var(--accent-bg);
	color: var(--text-2);
	font-size: 14px;
}
.abs-net strong {
	font-size: 24px;
	font-weight: 600;
	direction: ltr;
	color: var(--accent);
	font-variant-numeric: tabular-nums;
}
.abs-net strong small { font-size: 13px; font-weight: 400; color: var(--muted); }

/* مهر پشت کل سند، مثل مهری که روی کاغذ چاپ‌شده زده باشند.
   قبلاً یک خانه از گرید ستون‌ها را می‌گرفت و بین جدول‌ها فاصله‌ی بزرگ می‌انداخت.
   multiply باعث می‌شود مثل جوهر روی کاغذ بنشیند و متن زیرش خوانا بماند. */
.abs-slip { position: relative; z-index: 0; }
.abs-stamp {
	position: absolute;
	top: 56%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(330px, 62%);
	height: auto;
	opacity: .16;
	mix-blend-mode: multiply;
	pointer-events: none;
	user-select: none;
	z-index: 2;
}

/* ---------- کارتابل مرخصی ---------- */

.absl-wrap {
	width: 100%;
	max-width: 920px;
	box-sizing: border-box;
	margin: 40px auto;
	padding: 0 20px;
	background: none;
}
.absl-wrap > p:first-child {
	margin: 0 0 20px;
	padding: 12px 15px;
	border: 1px solid var(--border);
	border-right: 3px solid var(--warning);
	border-radius: var(--radius-sm);
	background: var(--accent-bg);
	color: #7c3f10;
	font-size: 13px;
}
.absl-wrap > h3 {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 32px 0 14px;
	font-size: 16px;
}
.absl-wrap > h3::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.absl-wrap .absl-box { padding: 24px; }
.absl-wrap .absl-box h3 { padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.absl-wrap .absl-fields { margin: 0; }
.absl-wrap .absl-fields input[type=file] { padding: 8px; background: var(--surface); }
.absl-wrap .absl-rowform { min-width: 310px; }
.absl-wrap .absl-rowform button { min-width: 78px; }
.absl-wrap table small { color: var(--muted); }
.absl-wrap table a { color: var(--accent); font-weight: 500; text-decoration: none; }
.absl-wrap table a:hover { text-decoration: underline; }

.absl-panes {
	display: grid;
	grid-template-columns: minmax(340px, 1fr) minmax(400px, 1.1fr);
	gap: 18px;
	align-items: start;
	margin-top: 14px;
}
.absl-pane { padding: 0; overflow: hidden; }
.absl-pane-h,
.absl-pane-f { padding: 14px 18px; background: var(--surface); border-bottom: 1px solid var(--border); }
.absl-pane-f { border-top: 1px solid var(--border); border-bottom: 0; color: var(--muted); font-size: 12px; }

.absl-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.absl-tabs a {
	padding: 5px 13px;
	border: 1px solid transparent;
	border-radius: 999px;
	color: var(--muted);
	text-decoration: none;
	font-size: 12.5px;
}
.absl-tabs a:hover { border-color: var(--border); color: var(--text); }
.absl-tabs a.on { background: var(--primary); border-color: var(--primary); color: #fff; }

.absl-add { border-top: 1px solid var(--border); padding: 14px 18px; }
.absl-sig { max-height: 44px; border: 1px solid var(--border); border-radius: 6px; padding: 2px; background: var(--surface); }

/* ---------- نوار پیشرفت و لاگ (صفحه آپلود) ---------- */

.abs-progress { height: 4px; overflow: hidden; border-radius: 999px; background: var(--border); }
.abs-progress-bar { height: 100%; background: var(--primary); transition: width .25s ease; }
.abs-progress-text { color: var(--muted); font-size: 13px; }

.abs-log {
	max-height: 260px;
	overflow: auto;
	padding: 12px 14px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface);
	font-size: 13px;
}
.abs-log-row { padding: 5px 0; border-bottom: 1px solid var(--border-soft); }
.abs-log-row:last-child { border-bottom: 0; }
.abs-log-row.ok { color: var(--success); }
.abs-log-row.skip { color: var(--warning); }
.abs-log-row.err { color: var(--danger); }

.abs-wrap, .absl { max-width: 1200px; }
.abs-wrap h1, .absl h1 { font-size: 22px; font-weight: 600; margin: 20px 0 6px; }

/* ---------- ریسپانسیو ---------- */

@media (max-width: 782px) {
	.abs-portal, .absl-wrap { margin: 24px auto; padding: 0 16px; }
	.abs-head { flex-direction: column; align-items: flex-start; gap: 14px; }
	.abs-hub-grid, .absl-panes { grid-template-columns: 1fr; }
	.abs-slips { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
	.abs-fish-cols { grid-template-columns: minmax(0, 1fr); }
	.abs-table, .absl-wrap table, .absl table.widefat { display: block; overflow-x: auto; }
	.abs-card, .absl-box { padding: 18px; }
	.abs-net { padding: 16px 18px; }
	.abs-net strong { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}

/* ---------- چاپ ---------- */

@media print {
	/* visibility:hidden عنصر را نامرئی می‌کند ولی فضایش می‌ماند و هدر/فوتر قالب
	   یک برگه‌ی خالی اضافه می‌سازند. پس هرچه نه خود فیش است نه داخلش نه والدش،
	   با display:none کاملاً از جریان صفحه بیرون می‌رود. */
	@page { margin: 14mm; }
	html, body { height: auto !important; margin: 0 !important; padding: 0 !important; background: #fff !important; }

	/* لایه‌ی پشتیبان برای مرورگرهایی که :has() ندارند — سلکتور نامعتبر کل قانونش را
	   می‌سوزاند، پس این دو خط عمداً جدا از قانون :has() نوشته شده‌اند */
	body * { visibility: hidden; }
	.abs-portal, .abs-portal * { visibility: visible; }

	body *:not(.abs-portal):not(.abs-portal *):not(:has(.abs-portal)) { display: none !important; }
	body :has(.abs-portal) {
		display: block !important;
		width: auto !important; max-width: none !important;
		margin: 0 !important; padding: 0 !important;
		border: 0 !important; background: none !important; box-shadow: none !important;
		float: none !important; position: static !important;
	}
	.abs-portal {
		width: auto !important; max-width: none !important;
		margin: 0 !important; padding: 0 !important;
		border: 0 !important; border-radius: 0 !important; background: #fff !important;
		font-size: 10.5pt; line-height: 1.6; color: #000;
	}
	.no-print { display: none !important; }

	/* جدول‌ها و مبلغ خالص وسط صفحه دو تکه نشوند */
	.abs-fish, .abs-fish-meta, .abs-net { break-inside: avoid; page-break-inside: avoid; }

	.abs-logo { height: 36px; margin-bottom: 8px; }
	.abs-slip-head { padding-bottom: 12px; margin-bottom: 12px; border-color: #999; }
	.abs-slip-head h2 { font-size: 13pt; }
	.abs-fish-meta { gap: 0; margin-bottom: 10px; border-color: #999; background: #999; }
	.abs-fish-meta > div { padding: 5px 8px; }
	.abs-fish-cols { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.abs-fish { font-size: 9pt; border-color: #999; }
	.abs-fish th { background: #f0f0f0 !important; border-color: #999; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.abs-fish td { padding: 3px 6px; border-color: #ddd; }
	.abs-fish-foot { margin-top: 10px; }
	.abs-net {
		margin-top: 10px; padding: 10px 14px;
		border-color: #999; background: none !important; color: #000;
	}
	.abs-net strong { font-size: 15pt; color: #000; }

	/* مهر باید رنگی چاپ شود، وگرنه مرورگر تصویر را حذف می‌کند.
	   چاپگر همیشه روشن‌تر از نمایشگر می‌زند، پس کمی پررنگ‌تر از حالت وب. */
	.abs-stamp {
		width: 300px;
		opacity: .2;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}