/* =========================
   Docs layout (original)
   ========================= */

   .docs {
	position: relative;
	overflow: visible; /* Ensure sticky works - no overflow on parent */
}

.docs .container {
	display: grid;
	grid-template-columns: 260px 1fr;
	grid-template-rows: auto;
	gap: 20px;
	align-items: start;
	position: relative;
	overflow: visible;
	min-height: 100vh;
}

@media (max-width: 900px) {
	.docs .container { grid-template-columns: 1fr; }
	.docs-sidebar {
		position: static;
		margin-bottom: 20px;
		max-height: none;
		overflow-y: visible;
	}
	body:has(.vpn-warning-banner) .docs-sidebar {
		top: auto;
	}
}

.docs-sidebar {
	position: static;
	align-self: start;
	background: #fff;
	border: 1px solid #eef2f7;
	border-radius: 14px;
	box-shadow: 0 6px 20px rgba(0,0,0,0.06);
	z-index: 100;
	height: fit-content;
}

.docs-nav { position: relative; width: 100%; }

.docs-nav ul {
	list-style: none;
	margin: 0;
	padding: 10px;
	position: relative;
	width: 100%;
	box-sizing: border-box;
}
.docs-link {
	display: block;
	padding: 12px 14px;
	border-radius: 10px;
	color: #111827;
	font-weight: 800;
	text-decoration: none;
	transition: all .2s ease;
}
.docs-link:hover {
	background: #f8fafc;
	color: #374151;
}
.docs-link.active {
	background: #eef2ff;
	color: #4338ca;
}

.docs-content {
	background: #fff;
	border: 1px solid #eef2f7;
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.06);
	padding: 24px;
}
.docs-content h1 {
	display: flex;
	justify-content: center;
	margin-top: 0;
	font-size: 1.8rem;
}
.docs-content .lead {
	color: #2a15c0;
	font-size: 1.05rem;
	margin-bottom: 1rem;
}

.docs-card {
	background: #fff;
	border: 1px solid #eef2f7;
	border-radius: 12px;
	padding: 16px;
	box-shadow: 0 4px 14px rgba(0,0,0,0.04);
	margin: 14px 0;
}

.docs-list {
	margin: .5rem 0 0;
	padding-right: 1.1rem;
	line-height: 1.9;
}

.docs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px;
	margin-top: 12px;
}

/* feature blocks */
.feature-block {
	margin: 24px 0;
	padding: 20px;
	background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
	border: 1px solid #e9ecef;
	border-radius: 12px;
	border-right: 4px solid #1e3c72;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	transition: all 0.3s ease;
}
.feature-block:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	transform: translateX(-3px);
	border-right-color: #2a5298;
}
.feature-block h2 {
	margin-top: 0;
	margin-bottom: 16px;
	font-size: 1.4rem;
	font-weight: 700;
	color: #1e3c72;
	padding-bottom: 12px;
	border-bottom: 2px solid #e9ecef;
	position: relative;
}
.feature-block:hover h2 {
	color: #2a5298;
	border-bottom-color: #dee2e6;
}
.feature-block h2::before {
	content: '';
	position: absolute;
	right: 0;
	bottom: -2px;
	width: 60px;
	height: 2px;
	background: linear-gradient(90deg, #1e3c72 0%, #2a5298 100%);
}
.feature-block .docs-list {
	margin-top: 12px;
	padding-right: 20px;
}
.feature-block .docs-list li {
	margin-bottom: 10px;
	padding-right: 8px;
	position: relative;
	line-height: 1.8;
	color: #495057;
}
.feature-block .docs-list li::marker {
	color: #1e3c72;
	font-weight: 600;
}

/* report cards, notes and team */
.report-type-card {
	background: #ffffff;
	border: 1px solid #e9ecef;
	border-radius: 10px;
	padding: 18px;
	margin: 16px 0;
	border-right: 3px solid #28a745;
}
.report-type-card h3 {
	margin-top: 0;
	margin-bottom: 12px;
	font-size: 1.2rem;
	font-weight: 700;
	color: #1e3c72;
}
.report-type-card p {
	margin-bottom: 12px;
	color: #495057;
	line-height: 1.8;
}
.report-type-card .docs-list {
	margin-top: 8px;
	margin-bottom: 12px;
}
.report-type-card .docs-list li {
	margin-bottom: 8px;
	color: #495057;
}
.report-type-card strong {
	color: #1e3c72;
	font-weight: 600;
}

.report-note {
	margin-top: 20px;
	padding: 14px;
	background: #e3f2fd;
	border-right: 3px solid #2196F3;
	border-radius: 8px;
	color: #1565c0;
	font-size: 0.95rem;
	line-height: 1.7;
}
.report-note strong { color: #0d47a1; }

.lead {
	margin-top: 20px;
	padding: 14px;
	background: #f2e3fd;
	border-right: 3px solid #8021F3;
	border-radius: 8px;
	color: #2a15c0;
	font-size: 0.95rem;
	line-height: 1.7;
}

/* Team section */
.team-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
	margin: 16px 0 10px;
}
.member-card {
	display: flex;
	gap: 12px;
	align-items: center;
	background: #fff;
	border: 1px solid #eef2f7;
	border-radius: 12px;
	padding: 10px;
}
.member-avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid #eef2f7;
	box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.member-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.member-info h3 { margin: 0; font-size: 1.1rem; }
.member-role { margin: 4px 0 0; color: #6b7280; font-size: .95rem; }

@media (max-width: 768px) {
	.feature-block { padding: 16px; margin: 16px 0; }
	.feature-block h2 { font-size: 1.2rem; padding-bottom: 10px; }
	.feature-block .docs-list { padding-right: 16px; }
	.report-type-card { padding: 14px; margin: 12px 0; }
	.report-type-card h3 { font-size: 1.1rem; }
}

/* =========================
   Faculty Contact Table
   ========================= */

/* container for table: allows horizontal scroll when needed */
.table-wrapper {
	overflow-x: auto;
	padding-bottom: 6px; /* visual breathing room for scrollbar */
	-webkit-overflow-scrolling: touch; /* smooth touch scrolling on iOS */
}

/* default table: desktop-first */
.faculty-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 0; /* desktop: table fits container */
	background: #ffffff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 18px rgba(0,0,0,0.05);
	border: 1px solid #eef2f7;
}

/* header styling */
.faculty-table thead {
	background: linear-gradient(135deg, #1e3c72, #2a5298);
}
.faculty-table thead th {
	color: #ffffff;
	font-weight: 700;
	padding: 14px 16px;
	text-align: center;
	font-size: 0.95rem;
	white-space: nowrap;
	vertical-align: middle;
}

/* body cells */
.faculty-table tbody td {
	padding: 12px 14px;
	text-align: center;
	font-size: 0.95rem;
	color: #374151;
	border-bottom: 1px solid #eef2f7;
	vertical-align: middle;
}

/* zebra rows and hover */
.faculty-table tbody tr:nth-child(even) { background: #f9fafb; }
.faculty-table tbody tr:hover { background: #eef2ff; transition: background 0.15s ease; }

/* column emphasis */
.faculty-table td:nth-child(1) { font-weight: 700; color: #1e3c72; text-align: left; padding-left: 18px; }
.faculty-table td:nth-child(2) { text-align: left; padding-left: 18px; }
.faculty-table td:nth-child(3) { white-space: nowrap; }
.faculty-table td:nth-child(4) { color: #4338ca; word-break: break-word; }

/* links inside table */
.faculty-table a { color: inherit; text-decoration: underline; font-weight: 600; }
.faculty-table a:hover, .faculty-table a:focus { color: #0d3bb5; text-decoration: none; outline: none; }

/* =========================
   Responsive behavior
   - Tablet: horizontal scroll enabled (keeps regular table layout but enforces min-width)
   - Mobile: transform each row into a card (no horizontal scroll)
   ========================= */

/* Tablet / small desktop where horizontal scroll is acceptable */
@media (max-width: 900px) and (min-width: 601px) {
	.table-wrapper {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		-ms-overflow-style: -ms-autohiding-scrollbar;
		padding-bottom: 8px;
	}

	/* slightly larger min-width to keep column integrity and allow scroll */
	.faculty-table {
		min-width: 760px;
	}

	/* WebKit scrollbar styling for better touch visibility */
	.table-wrapper::-webkit-scrollbar { height: 10px; }
	.table-wrapper::-webkit-scrollbar-track { background: transparent; }
	.table-wrapper::-webkit-scrollbar-thumb {
		background: rgba(34,58,120,0.28);
		border-radius: 999px;
	}
}

/* Mobile: convert table into stacked cards (no horizontal scroll required) */
@media (max-width: 600px) {

	/* hide header to avoid repetition — labels shown inside each cell via ::before */
	.faculty-table thead { display: none; }

	/* each row becomes a card */
	.faculty-table, .faculty-table tbody, .faculty-table tbody tr {
		display: block;
		width: 100%;
	}

	.faculty-table tbody tr {
		background: #fff;
		border: 1px solid #eef2f7;
		border-radius: 10px;
		margin-bottom: 12px;
		box-shadow: 0 6px 18px rgba(12,18,40,0.04);
		padding: 10px 12px;
		overflow: hidden;
	}

	/* each td becomes a grid row: label | value
	   use grid so label and value align nicely in RTL and LTR */
	.faculty-table tbody td {
		display: grid;
		grid-template-columns: 40% 1fr;
		align-items: center;
		padding: 8px 6px;
		border-bottom: none;
		text-align: left; /* label alignment controlled in ::before */
		font-size: 0.95rem;
		color: #374151;
		word-break: break-word;
	}

	/* labels injected via pseudo-elements (Persian) */
	.faculty-table tbody td::before {
		content: "";
		font-weight: 700;
		color: #1e3c72;
		text-align: right;
		padding-left: 8px;
		white-space: nowrap;
		font-size: 0.92rem;
	}

	.faculty-table tbody td:nth-child(1)::before { content: "نام دانشکده"; }
	.faculty-table tbody td:nth-child(2)::before { content: "نام پشتیبان"; }
	.faculty-table tbody td:nth-child(3)::before { content: "شماره تماس"; }
	.faculty-table tbody td:nth-child(4)::before { content: "ایمیل / راه ارتباطی"; }

	/* spacing: make values more prominent */
	.faculty-table tbody td span.value,
	.faculty-table tbody td a {
		display: block;
		direction: rtl;
		text-align: right;
	}

	/* if a row has multiple inline handles separated by hyphen, allow wrapping */
	.faculty-table tbody td:nth-child(4) { word-break: break-word; }

	/* final small tweak for very small devices */
	@media (max-width: 360px) {
		.faculty-table tbody td { grid-template-columns: 45% 1fr; padding: 7px 6px; }
		.faculty-table tbody td::before { font-size: 0.9rem; }
	}
}

/* Extra accessibility & small polish */
.faculty-table caption {
	font-weight: 700;
	margin-bottom: 8px;
	color: #1e3c72;
}