/* start file: mytasks.css */
.mytasks_limit_rest {
	text-align: center;
	margin-bottom: 15px;
}

.mytasks_print {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}
/* end file: mytasks.css */

/* start file: nika.css */
.preview-block {
	display: flex;
	justify-content: center;
}

.preview-pages {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.preview-page {
	position: relative;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
	max-width: 900px;
	width: 100%;
}

.preview-page-img {
	display: block;
	width: 100%;
	height: auto;
}

.preview-page-label {
	position: absolute;
	top: 8px;
	right: 8px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 11px;
	padding: 3px 10px;
	border-radius: 3px;
	letter-spacing: 0.3px;
}

#form-item-HEADER_VARIANT_1 .editor .tox-tinymce {
	height: 10cm !important;
}

#form-item-HEADER_VARIANT_1 .editor .tox-fullscreen {
	height: 100% !important;
	width: 100% !important;
	z-index: 1500;
}

#form-item-HEADER_VARIANT_2 .editor .tox-tinymce {
	height: 10cm !important;
}

#form-item-HEADER_VARIANT_2 .editor .tox-fullscreen {
	height: 100% !important;
	width: 100% !important;
	z-index: 1500;

}

#form-item-FOOTER_VARIANT_1 .editor .tox-tinymce {
	height: 10cm !important;
}

#form-item-FOOTER_VARIANT_1 .editor .tox-fullscreen {
	height: 100% !important;
	width: 100% !important;
	z-index: 1500;

}

#form-item-FOOTER_VARIANT_2 .editor .tox-tinymce {
	height: 10cm !important;
}

#form-item-FOOTER_VARIANT_2 .editor .tox-fullscreen {
	height: 100% !important;
	width: 100% !important;
	z-index: 1500;

}

button.lity-close {
	display: none !important;
}

.up_photo_modal_close {
	display: none !important;
}
/* end file: nika.css */

/* start file: onboarding.css */
.wf_lateness
{
    color: red;
}

.request_detail_div {
	display: none;
	margin-top: 10px;
	padding: 10px;
}

.workflow_type:not(.workflow_type_button)
{
	padding: 10px 10px;
}


.workflow_types_container
{
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px;
}

.workflow_type_button
{
	height: 80px;
	display: flex;
	flex-direction: column;
	border: 1px solid #ccc;
	align-items: center;
	justify-content: center;

	cursor: pointer;
	width: fit-content;

	min-width: 200px;
	max-width: 320px;
	overflow: hidden;

	padding: 15px 20px;
	transition: color .1s !important;
	border-radius: 10px;
	font-weight: bold;
	background-color: white;
	gap: 5px;
}

.flow_title {
	font-size: 16px;
	overflow: hidden;
	text-overflow: ellipsis;
	text-wrap: nowrap;
	width: 100%;
	max-width: 100%;
	text-align: center;
	line-height: 1.5;
	/*height: 25px;*/
}

.flow_desc {
	display: block;
	font-size: 12px;
	text-overflow: ellipsis;
	width: 100%;
	max-width: 100%;
	text-align: center;
	overflow: hidden;
	text-wrap: nowrap;
	font-weight: normal;
}

.wf_lateness
{
    color: red;
}

.request_detail_div {
	display: none;
	margin-top: 10px;
	padding: 10px;
}

.templates_type
{
	padding: 10px 10px;
}

.templates_type_button
{
	display: inline-block;
	padding: 6px 12px;
	line-height: 28px;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 10px !important;
	margin: 0 0 2px 2px !important;
	border-bottom-left-radius: 10px !important;
	border-bottom-right-radius: 10px !important;
	padding: 15px 10px;
	margin-bottom: 25px;
	box-shadow: 0 0 15px #d1d1d1 !important;
	transition:  1s;
	border-radius: 15px;
	font-weight: bold;
	font-size: 18px;
}

.templates_type_button{
	white-space: normal;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 80px;
	overflow: hidden;
	text-align: center;
}

.templates_type_button span{
	display: block;
	overflow-wrap: anywhere;
	word-break: break-word;
	line-height: 1.2;
}


.templates_type_button:hover{
	box-shadow: 0 0 15px #bb0093 !important;
	border-radius: 15px;
}

.next_task_box
{
	width: 50%;
	margin: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.next_task_box .form-group
{
	width:100%;
}

.next_task_box h1,
.next_task_box h2,
.next_task_box h3
{
	width: 100%;
	text-align: center;
	margin: 10px 0;
}

.mytasks_box
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.mytasks_limit_href
{
	flex-shrink: 0;
	color: #0000EE;
	text-decoration: underline;
	white-space: nowrap;
}

@media (max-width: 576px) {
	.mytasks_box{
		flex-direction: column;
	}
	.mytasks_box a{
		margin-bottom: 10px;
	}
}
/* end file: onboarding.css */

/* start file: org.css */
.key_row .key_val
{
	white-space: nowrap;
	display: block;
	padding: 2px 0;
}
.key_row .key_val:last-child
{
	border-bottom: none;
}
.key_row .my_tooltip,
.key_row .key_div
{
	white-space: nowrap;
	border-bottom: 1px dashed #a7a7b1;
	display: block;
	padding: 2px 0;
}
.key_row .my_tooltip:last-child,
.key_row .key_div:last-child
{
	border-bottom: none;
}
.key_val_grid
{
	display: block;
}

.key_div
{
	min-height: 25px;
}

/* end file: org.css */

/* start file: partner.css */
/* ── Partner chat panel ─────────────────────────────────────── */

.Partnercontainer {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 1050;
  pointer-events: none;
}

/* ── Chat box popup ─────────────────────────────────────────── */

.chat-box {
  position: fixed;
  right: 24px;
  bottom: 60px;
  width: 340px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(52, 66, 95, 0.18), 0 2px 8px rgba(0,0,0,0.08);
  z-index: 99999;
  pointer-events: all;

  /* hidden state */
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  visibility: hidden;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
}

.chat-box--open {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0s;
}

/* ── Close button ───────────────────────────────────────────── */

.chat-box-toggle {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  color: #666;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
  transition: background 0.15s ease, color 0.15s ease;
}

.chat-box-toggle:hover {
  background: #f0f0f0;
  color: #333;
}

/* ── Box body & header ──────────────────────────────────────── */

.chat-box-body {
  position: relative;
  border-radius: 16px;
  border: 1px solid #e8e8e8;
  overflow: hidden;
  padding-bottom: 10px;
}

.chat-box-header {
  background: linear-gradient(135deg, #5A5EB9, #9F248F);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  color: #fff;
  text-align: center;
}

.chat-box-header h2 {
  margin: 0;
  font-size: 15px;
  color: #fff;
  padding: 14px 16px;
  font-weight: 600;
}

/* ── Partner identity row (photo + name) ────────────────────── */

.partner-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 8px;
}

.partnerimg {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #e8d5e8;
  flex-shrink: 0;
}

.partnerimg .img-partner {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.partnerimg .avatar-initials {
  width: 100%;
  height: 100%;
  font-size: 24px;
}

.profile_name {
  font-weight: 600;
  font-size: 15px;
  color: #333;
  line-height: 1.2;
}

.profile_position {
  margin-top: 8px;
  font-size: 11px;
  color: #999;
  line-height: 1.3;
}

/* ── Contact rows ───────────────────────────────────────────── */

.contact-info {
  display: flex;
  align-items: center;
  padding: 4px 14px;
  font-size: 13px;
  color: #555;
}

.contact-info .icon_p {
  color: #9F248F;
  font-size: 15px;
  flex-shrink: 0;
}

.contact-info a.Removea {
  color: #555;
  text-decoration: none;
  margin-left: 8px;
  transition: color 0.15s ease;
}

.contact-info a.Removea:hover {
  color: #9F248F;
}

.contact-info a.Removea-Underline-Hover {
  color: #5A5EB9;
  text-decoration: none;
  margin-left: 8px;
}

.contact-info a.Removea-Underline-Hover:hover {
  text-decoration: underline;
}

/* ── Section label ──────────────────────────────────────────── */

.h4.text-pink {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 14px 4px;
  color: #9F248F;
  margin: 0;
}

.text-pink {
  color: #9F248F;
}

/* ── Mobile icon-only links ─────────────────────────────────── */

.contact-info a.Removea.d-md-none,
.contact-info a.Removea.pl-5.d-md-none {
  margin-left: 20px;
}

/* ── Decorative background watermark ───────────────────────── */

.chat-box-body::after {
  content: "";
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAgOCkiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGNpcmNsZSBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS4yNSIgY3g9IjE3NiIgY3k9IjEyIiByPSI0Ii8+PHBhdGggZD0iTTIwLjUuNWwyMyAxMW0tMjkgODRsLTMuNzkgMTAuMzc3TTI3LjAzNyAxMzEuNGw1Ljg5OCAyLjIwMy0zLjQ2IDUuOTQ3IDYuMDcyIDIuMzkyLTMuOTMzIDUuNzU4bTEyOC43MzMgMzUuMzdsLjY5My05LjMxNiAxMC4yOTIuMDUyLjQxNi05LjIyMiA5LjI3NC4zMzJNLjUgNDguNXM2LjEzMSA2LjQxMyA2Ljg0NyAxNC44MDVjLjcxNSA4LjM5My0yLjUyIDE0LjgwNi0yLjUyIDE0LjgwNk0xMjQuNTU1IDkwcy03LjQ0NCAwLTEzLjY3IDYuMTkyYy02LjIyNyA2LjE5Mi00LjgzOCAxMi4wMTItNC44MzggMTIuMDEybTIuMjQgNjguNjI2cy00LjAyNi05LjAyNS0xOC4xNDUtOS4wMjUtMTguMTQ1IDUuNy0xOC4xNDUgNS43IiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PHBhdGggZD0iTTg1LjcxNiAzNi4xNDZsNS4yNDMtOS41MjFoMTEuMDkzbDUuNDE2IDkuNTIxLTUuNDEgOS4xODVIOTAuOTUzbC01LjIzNy05LjE4NXptNjMuOTA5IDE1LjQ3OWgxMC43NXYxMC43NWgtMTAuNzV6IiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS4yNSIvPjxjaXJjbGUgZmlsbD0iIzAwMCIgY3g9IjcxLjUiIGN5PSI3LjUiIHI9IjEuNSIvPjxjaXJjbGUgZmlsbD0iIzAwMCIgY3g9IjE3MC41IiBjeT0iOTUuNSIgcj0iMS41Ii8+PGNpcmNsZSBmaWxsPSIjMDAwIiBjeD0iODEuNSIgY3k9IjEzNC41IiByPSIxLjUiLz48Y2lyY2xlIGZpbGw9IiMwMDAiIGN4PSIxMy41IiBjeT0iMjMuNSIgcj0iMS41Ii8+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTkzIDcxaDN2M2gtM3ptMzMgODRoM3YzaC0zem0tODUgMThoM3YzaC0zeiIvPjxwYXRoIGQ9Ik0zOS4zODQgNTEuMTIybDUuNzU4LTQuNDU0IDYuNDUzIDQuMjA1LTIuMjk0IDcuMzYzaC03Ljc5bC0yLjEyNy03LjExNHpNMTMwLjE5NSA0LjAzbDEzLjgzIDUuMDYyLTEwLjA5IDcuMDQ4LTMuNzQtMTIuMTF6bS04MyA5NWwxNC44MyA1LjQyOS0xMC44MiA3LjU1Ny00LjAxLTEyLjk4N3pNNS4yMTMgMTYxLjQ5NWwxMS4zMjggMjAuODk3TDIuMjY1IDE4MGwyLjk0OC0xOC41MDV6IiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS4yNSIvPjxwYXRoIGQ9Ik0xNDkuMDUgMTI3LjQ2OHMtLjUxIDIuMTgzLjk5NSAzLjM2NmMxLjU2IDEuMjI2IDguNjQyLTEuODk1IDMuOTY3LTcuNzg1LTIuMzY3LTIuNDc3LTYuNS0zLjIyNi05LjMzIDAtNS4yMDggNS45MzYgMCAxNy41MSAxMS42MSAxMy43MyAxMi40NTgtNi4yNTcgNS42MzMtMjEuNjU2LTUuMDczLTIyLjY1NC02LjYwMi0uNjA2LTE0LjA0MyAxLjc1Ni0xNi4xNTcgMTAuMjY4LTEuNzE4IDYuOTIgMS41ODQgMTcuMzg3IDEyLjQ1IDIwLjQ3NiAxMC44NjYgMy4wOSAxOS4zMzEtNC4zMSAxOS4zMzEtNC4zMSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvZz48L3N2Zz4=');
  opacity: 0.05;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

/* ── Floating button group ──────────────────────────────────── */

.floating-btn-group {
  position: fixed;
  bottom: 67px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: var(--z-popover, 1030);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* vertical drag (z-partner.js) — touch-action keeps the page from scrolling instead */
.floating-btn-group .floating-chat-btn {
  touch-action: none;
  cursor: grab;
}

.floating-btn-group.is-dragging .floating-chat-btn {
  cursor: grabbing;
  transform: none;
}

.floating-btn-group.is-dragging .consultant-floating-btn {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.floating-btn-group.partner-btn--hidden {
  opacity: 0;
  transform: scale(0.7) translateY(8px);
  pointer-events: none;
}

/* ── Consultant slide-in button ─────────────────────────────── */

/* Slides out via clip-path, not max-width + overflow:hidden — the overflow clip
   cut the white pill and its shadow into a hard-edged rectangle. The negative
   insets of the open state leave room for the shadow.
   padding-right bridges the gap so hover isn't lost moving onto the pill. */
.consultant-floating-btn {
  position: absolute;
  right: 100%;
  top: 50%;
  padding-right: 12px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translate(12px, -50%);
  clip-path: inset(-24px 0 -24px 100%);
  pointer-events: none;
  transition:
    clip-path 0.35s ease,
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0s linear 0.35s;
}

.floating-btn-group:hover .consultant-floating-btn {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
  clip-path: inset(-24px -24px -24px -24px);
  pointer-events: all;
  transition:
    clip-path 0.35s ease,
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0s linear 0s;
}

.consultant-floating-btn a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 17px;
  background: #fff;
  color: var(--color-primary, #5A5EB9);
  border: 2px solid var(--color-primary, #5A5EB9);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(52, 66, 95, 0.18);
  transition: background 0.2s ease, color 0.2s ease;
}

.consultant-floating-btn a:hover {
  background: var(--color-primary, #5A5EB9);
  color: #fff;
}

/* ── Scrollbar styling ──────────────────────────────────────── */

.chat-logs {
  padding: 15px;
  overflow-y: scroll;
}

.chat-logs::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  background-color: #F5F5F5;
}

.chat-logs::-webkit-scrollbar {
  width: 5px;
  background-color: #F5F5F5;
}

.chat-logs::-webkit-scrollbar-thumb {
  background-color: #5A5EB9;
}


@media (max-width: 769px) {
	.chat-box{
    bottom: 74px;
  }
}

/* end file: partner.css */

/* start file: person-name-element.css */
.person_name_cell
{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}


.person_name_photo_link
{
    width: 32px;
    height: 32px;
}

.person_name_cell img.person_name_photo
{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

a:has(.person_name_cell)
{
    display: block;
    line-height: 1;
}

.r_hourly_report .person_name_cell
{
    flex: 1;
    display: flex;
}

.printed_grid_name_header .person_name_cell span {
    line-height: 1.42857143;
    font-size: 14px !important;
    font-weight: 700;
}

.printed_grid_name_header {
    padding: 0 8px;
}

.printed_grid_name_wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: white;
    gap: 5px;
}
/* end file: person-name-element.css */

/* start file: personnel-analytics.css */
/* =====================================================================
   Personnel analytics dashboard tab — new design
   ---------------------------------------------------------------------
   New-design port of the `.personnel-analytics .pa-*` styles that lived in
   the old design's templates/css/src/gvantsa.css (not loaded here). Markup is
   components/profile/tmpl/default_personnel_analysis.php. Hand-written CSS,
   bundled automatically by design/update.php (no SCSS build). Re-skinned to
   match the new analytics surfaces: pastel stat cards + gray-10 chart cards
   (24px radius, no shadow), like .analytics_type / .rec_chart_block. The whole
   tab sits inside a white .card. Design tokens are used with hard fallbacks.
   ===================================================================== */

/* ── shared card ── matches the analytics chart card (.rec_chart_block /
   .analytics_type_chart): gray-10 fill, 24px radius, no border/shadow. ── */
.personnel-analytics .pa-card {
	position: relative;
	box-sizing: border-box;
	background: var(--color-bg-page, #F4F7FF);
	border-radius: 24px;
	text-decoration: none;
	color: inherit;
	transition: filter 0.18s ease;
}

.personnel-analytics .pa-card:hover {
	filter: brightness(0.98);
}

/* ── pastel stat cards — same cycling palette as the analytics .analytics_type
   numeric cards. ── */
.personnel-analytics .pa-stats-row .pa-stat-card:nth-of-type(5n+1) { background: #D8F8EE; }
.personnel-analytics .pa-stats-row .pa-stat-card:nth-of-type(5n+2) { background: #DCE5FF; }
.personnel-analytics .pa-stats-row .pa-stat-card:nth-of-type(5n+3) { background: #F8E6FF; }
.personnel-analytics .pa-stats-row .pa-stat-card:nth-of-type(5n+4) { background: #EAECFF; }
.personnel-analytics .pa-stats-row .pa-stat-card:nth-of-type(5n+5) { background: #E6F8DD; }

.personnel-analytics .pa-period {
	position: absolute;
	bottom: 8px;
	right: 12px;
	font-size: 10px;
	color: var(--color-text-subtle, #A5B3C9);
	pointer-events: none;
	white-space: nowrap;
}

/* ── stat cards row ── */
.personnel-analytics .pa-stats-row {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 20px;
}

.personnel-analytics .pa-stat-card {
	flex: 1 1 160px;
	min-width: 140px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 20px;
}

.personnel-analytics .pa-stat-card--single {
	flex: 0 1 185px;
	justify-content: space-between;
}

.personnel-analytics .pa-stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.personnel-analytics .pa-stat-label {
	font-size: 12px;
	font-weight: 500;
	line-height: 18px;
	color: var(--color-text-muted, #596476);
}

.personnel-analytics .pa-stat-value {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--color-text, #222A39);
	word-break: break-word;
}

.personnel-analytics .pa-stat-value--lg {
	font-size: 32px;
}

.personnel-analytics .pa-stat-value--sm {
	font-size: 18px;
	font-weight: 600;
}

.personnel-analytics .pa-stat-sep {
	height: 1px;
	margin: 12px 0;
	background: rgba(34, 42, 57, 0.1);
}

.personnel-analytics .pa-stat-sep--v {
	width: 1px;
	height: auto;
	margin: 0 12px;
	align-self: stretch;
	background: var(--color-border-soft, #D3DEEF);
}

.personnel-analytics .pa-stat-turnover {
	gap: 10px;
}

/* ── chart rows ── */
.personnel-analytics .pa-charts-row {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 20px;
}

/* charts use Chart.js maintainAspectRatio:false — the card height gives the
   canvas its size. */
.personnel-analytics .pa-chart-card {
	flex: 1 1 280px;
	display: block;
	height: 328px;
	padding: 20px;
}

.personnel-analytics .pa-chart-card canvas {
	width: 100% !important;
	height: 100% !important;
	display: block;
}

.personnel-analytics .pa-charts-three .pa-chart-card,
.personnel-analytics .pa-charts-three .pa-payroll-card,
.personnel-analytics .pa-charts-three .pa-latelist-card {
	flex: 1 1 220px;
}

/* ── combined payroll card ── */
.personnel-analytics .pa-payroll-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-height: 280px;
}

.personnel-analytics .pa-payroll-chart-link {
	display: block;
	flex: 1;
	padding: 20px 20px 8px;
}

.personnel-analytics .pa-payroll-chart-link canvas {
	width: 100% !important;
	height: 240px !important;
	display: block;
}

.personnel-analytics .pa-payroll-stats {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	padding: 12px 20px;
	border-top: 1px solid var(--color-border-soft, #D3DEEF);
}

.personnel-analytics .pa-payroll-stat {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-decoration: none;
	color: inherit;
}

.personnel-analytics .pa-payroll-stat:hover .pa-stat-value {
	color: var(--color-primary, #6F61EA);
}

/* ── top late workers list card ── */
.personnel-analytics .pa-latelist-card {
	display: flex;
	flex-direction: column;
	padding: 20px;
}

.personnel-analytics .pa-latelist-title {
	display: block;
	margin-bottom: 16px;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text, #222A39);
}

.personnel-analytics .pa-latelist {
	flex: 1;
	margin: 0;
}

.personnel-analytics .pa-latelist li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 6px;
	padding: 8px 0;
	font-size: 13px;
	font-weight: normal;
	line-height: 1.4;
	color: var(--color-text, #222A39);
	border-bottom: 1px solid var(--color-bg-soft, #F0F3FD);
}

.personnel-analytics .pa-latelist li:last-child {
	border-bottom: none;
}

.personnel-analytics .pa-latelist-name {
	min-width: 0;
	max-width: 150px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-weight: normal;
}

.personnel-analytics .pa-latelist-min {
	flex-shrink: 0;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--color-primary, #6F61EA);
}

.personnel-analytics .pa-latelist--two-col {
	column-count: 2;
	column-gap: 12px;
	column-fill: auto;
	/* ~35px per row; fits at least 5 items in the first column before the rest
	   flow into the second. */
	max-height: 190px;
	width: 100%;
}

.personnel-analytics .pa-latelist-empty {
	font-size: 13px;
	color: var(--color-text-subtle, #A5B3C9);
}

@media (max-width: 600px) {
	.personnel-analytics .pa-stat-card,
	.personnel-analytics .pa-stat-card--single {
		flex: 1 1 100%;
	}
	/* single column on phones — the fixed .pa-chart-card height (328px) would
	   clip a stacked list, so let the late-list card grow to fit its items. */
	.personnel-analytics .pa-latelist-card {
		height: auto;
	}
	.personnel-analytics .pa-latelist--two-col {
		column-count: 1;
		max-height: unset;
	}
}

/* end file: personnel-analytics.css */

/* start file: print.css */
/* ──────────────────────────────────────────────────────────────────
   Global print rules

   window.print() printed the whole app shell (header, sidebar, footer,
   page background). These rules strip the chrome so only the page
   content (e.g. the document preview) is sent to the printer.
   Component-specific print tweaks live alongside their own styles
   (e.g. docs.scss for .document-preview).
   ────────────────────────────────────────────────────────────────── */
@media print {
    /* Hide the surrounding app chrome */
    .app-header,
    .app-sidebar,
    .app-footer,
    #z__preloader,
    .snowfall,
    .motion-banner,
    .app-download-button,
    .z__consultant,
    .z__messagebox,
    .mobile-tabbar  {
        display: none !important;
    }

    .floating-btn-group,
    .scroll-top-btn{
        display: none;
    }

    /* In-page action chrome that must never reach the printout: the whole page
       title bar (title text + its toolbar/Print button), the configurator
       toolbar, the whole filter block (fields + the filter action bar below
       them) and pagination controls. */
    .page_title,
    .page_title_add,
    .toolbar,
    .toolbar-bottom,
    .filter-block,
    .filter-actions,
    .page_filter_block,
    .filter-add-more,
    .pagination {
        display: none !important;
    }

    /* Strip the shell's frame/background so nothing else prints */
    html,
    body {
        background: #fff !important;
    }

    .app-shell {
        display: block !important;
        min-height: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    .app-body {
        display: block !important;
        margin-top: 0 !important;
    }

    /* Let the content area take the full printable width */
    .app-main {
        padding: 0 !important;
        width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Document preview: drop the fixed 590px viewport + scroll so every
       page image flows onto the printout instead of being clipped. */
    .dv-preview-outer {
        background: #fff !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    .document-preview {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    .document-preview img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 0 !important;
        /* keep a single page image from splitting across sheets */
        page-break-inside: avoid;
        break-inside: avoid;
    }

    #end-of-document {
        display: none !important;
    }

    /* Tables: restore all four grid lines on the printout. Browsers routinely
       drop the outer right/bottom border of a collapsed bordered table when
       printing (the edge gets clipped at the page margin), so the new design
       printed without a right border. Pinning an explicit border on the table
       and every cell brings every side back; print-color-adjust keeps the header
       tint and any cell backgrounds the table relies on. */
    .table,
    .table-bordered {
        border-collapse: collapse !important;
    }

    .table.table-bordered,
    .table.table-bordered > thead > tr > th,
    .table.table-bordered > thead > tr > td,
    .table.table-bordered > tbody > tr > th,
    .table.table-bordered > tbody > tr > td,
    .table.table-bordered > tfoot > tr > th,
    .table.table-bordered > tfoot > tr > td {
        border: 1px solid #000 !important;
    }

    .table,
    .table * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

/* ──────────────────────────────────────────────────────────────────
   Bootstrap-3 print visibility helpers.

   The new design (bootstrap 5 + jQuery 4) dropped these utility classes,
   but shared/un-migrated templates still rely on them — e.g. app_print's
   page_title carries .hidden-print to keep its toolbar off the printout.
   Without a definition that class did nothing and the chrome printed.
   Ported verbatim from the old design (templates/css/src/bootstrap.css).
   ────────────────────────────────────────────────────────────────── */
.visible-print,
.visible-print-block,
.visible-print-inline,
.visible-print-inline-block {
    display: none !important;
}

@media print {
    .hidden-print {
        display: none !important;
    }
    .visible-print {
        display: block !important;
    }
    table.visible-print {
        display: table !important;
    }
    tr.visible-print {
        display: table-row !important;
    }
    th.visible-print,
    td.visible-print {
        display: table-cell !important;
    }
    .visible-print-block {
        display: block !important;
    }
    .visible-print-inline {
        display: inline !important;
    }
    .visible-print-inline-block {
        display: inline-block !important;
    }
}

/* end file: print.css */

/* start file: profile.css */
.birthdays-contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    color: #758199;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.birthdays-contact i {
    font-size: inherit;
    line-height: 1;
}

.birthdays-contact .bi-telephone-fill,
.birthdays-contact .bi-envelope-fill,
.birthdays-contact .bi-chat-fill,
.birthdays-contact:hover .bi-telephone,
.birthdays-contact:hover .bi-envelope,
.birthdays-contact:hover .bi-chat,
.birthdays-mobile--flare .bi-telephone {
    display: none;
}

.birthdays-contact:hover .bi-telephone-fill,
.birthdays-contact:hover .bi-envelope-fill,
.birthdays-contact:hover .bi-chat-fill,
.birthdays-mobile--flare .bi-telephone-fill {
    display: inline-block;
}

.birthdays-contact:hover,
.birthdays-contact:focus-visible {
    color: #6F61EA;
    background-color: #F0F3FD;
    text-decoration: none;
}

/* No .flex utility on this element: it would override the display: none. */
.birthdays-actions {
    display: none;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    opacity: 0;
    transform: translateX(6px);
    /* allow-discrete keeps display: flex until the fade-out ends; browsers
       without it just hide instantly. */
    transition: opacity 0.2s ease, transform 0.2s ease, display 0.2s allow-discrete;
}

.birthdays-actions .my_tooltip {
    display: inline-flex;
}

/* Fade-in is a keyframe animation rather than @starting-style, which
   clean-css (CI minify) mangles. :focus-visible, not :focus-within, so a
   mouse click doesn't pin the actions open after the pointer leaves. */
.birthdays-item:hover .birthdays-actions,
.birthdays-item:has(:focus-visible) .birthdays-actions {
    display: flex;
    opacity: 1;
    transform: none;
    animation: birthdays-actions-in 0.2s ease;
}

@keyframes birthdays-actions-in {
    from {
        opacity: 0;
        transform: translateX(6px);
    }
}


/* No hover on phones: actions stay visible under the position line,
   so the row becomes avatar | info + actions | date label. */
@media (max-width: 575.98px) {
    /* Extra selector weight to beat the row's .flex utility. */
    .birthdays-list .birthdays-item {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        row-gap: 4px;
    }

    .birthdays-list .birthdays-item > :first-child:not(.birthdays-item__info) {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .birthdays-item__info {
        grid-column: 2;
        grid-row: 1;
    }

    .birthdays-actions {
        display: flex;
        opacity: 1;
        transform: none;
        transition: none;
        animation: none;
        grid-column: 2;
        grid-row: 2;
        margin-left: -4px;
    }

    .birthdays-item__label {
        grid-column: 3;
        grid-row: 1 / span 2;
    }
}

.birthdays-mobile--flare {
    animation: birthdays-mobile-flare 2s ease-out forwards;
}

@keyframes birthdays-mobile-flare {
    0%,
    70% {
        color: #6F61EA;
        background-color: #E4E5FF;
        box-shadow: 0 0 0 3px rgba(111, 97, 234, 0.20);
    }
    100% {
        color: #758199;
        background-color: transparent;
        box-shadow: none;
    }
}

/* end file: profile.css */

/* start file: quest.css */
/* =====================================================================
   QUEST — public "ask a consultant" Q&A page (components/quest).
   New-design only; template override lives in design/html/quest/tmpl.
   Field rows are rendered by HTML::renderParams as .form-group blocks
   with stable ids (#form-item-<FIELD>), which we target directly.
   ===================================================================== */

.quest_page {
	max-width: 820px;
	margin: 0 auto;
}

/* Flat surface — no box-shadow, holds the consultant header and the Q&A table. */
.quest_card {
	margin: 0;
	padding: 24px;
	border-radius: 16px;
	border: 1px solid var(--color-border-soft, #D3DEEF);
	background: var(--color-bg, #FFFFFF);
}

/* ── Generic field reset: strip the input look, these fields are read-only ── */
.quest_page .form-group {
	margin: 0 0 16px;
}

.quest_page .form-group:last-child {
	margin-bottom: 0;
}

.quest_page .control-label {
	display: block;
	margin-bottom: 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-text-subtle, #758199);
}

.quest_page .form-control,
.quest_page .form_field {
	min-height: 0;
	height: auto;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--color-text, #222A39);
	font-size: 14px;
	line-height: 1.65;
	white-space: normal;
}

.quest_page .form-control strong,
.quest_page .form_field strong {
	font-weight: 500;
}

/* ── Consultant header — photo beside name, divider below, in the same box ── */
.quest_consultant {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 2px 16px;
	padding-bottom: 18px;
	margin-bottom: 6px;
	border-bottom: 1px solid var(--color-border-soft, #D3DEEF);
}

.quest_consultant .form-group {
	margin: 0;
}

.quest_consultant #form-item-C_PHOTO {
	grid-column: 1;
	grid-row: 1 / span 2;
}

.quest_consultant #form-item-C_PHOTO .control-label {
	display: none;
}

.quest_consultant #form-item-C_PHOTO img {
	display: block;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--color-bg-soft, #F0F3FD);
}

.quest_consultant #form-item-C_FULLNAME {
	grid-column: 2;
	grid-row: 1;
	align-self: end;
}

.quest_consultant #form-item-C_FULLNAME .control-label {
	display: none;
}

.quest_consultant #form-item-C_FULLNAME .form_field strong {
	font-size: 17px;
	font-weight: 600;
	color: var(--color-text-strong, #141D2D);
}

.quest_consultant #form-item-C_SPECIALIZATION {
	grid-column: 2;
	grid-row: 2;
	align-self: start;
}

.quest_consultant #form-item-C_SPECIALIZATION .control-label {
	display: none;
}

.quest_consultant #form-item-C_SPECIALIZATION .form_field strong {
	font-weight: 500;
	color: var(--color-primary, #6F61EA);
}

.quest_consultant #form-item-C_LIB_DESC {
	grid-column: 1 / -1;
	grid-row: 3;
	margin-top: 14px;
}

.quest_consultant #form-item-C_LIB_DESC .control-label {
	color: var(--color-text-muted, #596476);
}

/* ── Merged Q&A — table-style rows: label column | value column ── */
.quest_qa .form-group {
	display: grid;
	grid-template-columns: 168px 1fr;
	gap: 20px;
	margin: 0;
	padding: 14px 4px;
	border-bottom: 1px solid var(--color-border-soft, #D3DEEF);
	align-items: start;
}

.quest_qa .quest_answer .form-group:last-child {
	border-bottom: 0;
}

.quest_qa .control-label {
	display: block;
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--color-text-muted, #596476);
}

.quest_qa .form-control,
.quest_qa .form_field {
	font-size: 14px;
	color: var(--color-text, #222A39);
}

/* HEADING reads as the question subject — full-width title row. */
.quest_qa #form-item-HEADING {
	grid-template-columns: 1fr;
}

.quest_qa #form-item-HEADING .control-label {
	display: none;
}

.quest_qa #form-item-HEADING .form_field strong {
	font-size: 17px;
	font-weight: 600;
	color: var(--color-text-strong, #141D2D);
}

/* Answer section header — spans the table width with a soft divider above. */
.quest_answer_tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 18px 0 4px;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--color-success-soft, #D8F8EE);
	color: var(--color-success-strong, #128394);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

/* end file: quest.css */

/* start file: recruitment.css */
/* =====================================================================
   Recruitment task (rec_task) – new design
   ---------------------------------------------------------------------
   Hand-written component CSS, bundled automatically by design/update.php
   (it concatenates design/css/src/*.css together with design/dist/*.css).

   Layout / spacing / typography / colour come from the shared utility
   classes (main.css) and the document_view dv-* classes (docs.css) used in
   the markup. This file only adds the rec_task-specific visuals: the page
   header buttons, the inline tab strip + resume preview, the right-column
   action toolbar, the rating stars, the decision controls, the schedule /
   collapsible candidate / notes cards, the comments wrapper and the rates
   table. Design tokens are used with hard fallbacks.
   ===================================================================== */

/* New-candidate form (rec_new_candidat modal) — breathing room below the last
   field so the sticky toolbar / modal edge doesn't crowd it. */
.rec-new-candidat-form {
	padding-bottom: 120px;
}

/* ─────────────────────────────────────────────────────────────────────
   PAIRING-FAMILY task modals — vacancy rollback, vacancy switch, multi
   status change (design/html/rec_task/tmpl/default_rollback|switch|
   changevacstatus_multi.php). The pairing/applicants elements ship legacy
   bootstrap `.row`/`.col-md-6` float markup + an inline `display:flex`
   selected-container — neither of which the new design bundles, so the fields
   collapse / the applicants table gets squashed. */
.rec-pairing-form {
	padding: 4px 0 24px;
}

/* Search row — the autocomplete input (and optional category select) that
   bootstrap no longer floats. Flex so one field fills the width, two split. */
.rec-pairing-form .row.rowgen {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 16px;
}

.rec-pairing-form .row.rowgen > [class*="col-"] {
	flex: 1 1 240px;
	min-width: 0;
	width: auto;
	padding: 0;
	float: none;
}

/* Selected-applicants container — the inline `display:flex` collapses the inner
   <table>; force block so it lays out full width (inline style needs !important). */
.rec-pairing-form [id$="SELECTEDCONTAINER"] {
	display: block !important;
	width: 100%;
	margin-top: 16px;
}

.rec-pairing-form [id$="SELECTEDCONTAINER"] table {
	width: 100%;
	margin: 0;
}
.rec-pairing-form [id$="SELECTEDCONTAINER"] thead {
	display: none;
} /* header row is empty */

.rec-pairing-form [id$="SELECTEDCONTAINER"] td {
	padding: 8px 10px;
	vertical-align: middle;
	border-color: var(--table-border-color, #DEE4EF);
}

.rec-pairing-form [id$="SELECTEDCONTAINER"] td:first-child {
	width: 45%;
}
.rec-pairing-form [id$="SELECTEDCONTAINER"] .form-control.noheight {
	border: 0;
	background: transparent;
}

/* Remove (×) control on each applicant chip */
.rec-pairing-form .x-bind-close {
	color: var(--color-text-subtle, #758199);
	font-size: 16px;
	line-height: 1;
}
.rec-pairing-form .x-bind-close:hover {
	color: #DC3545;
}

/* Selected applicant row — clean new-design markup emitted by rowgen/single.php
   (new_design branch): a flex row with two equal fields (candidate name + step
   select). Unscoped so it applies wherever the rowgen response is injected. */
.rollback-sel-row {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
	margin-bottom: 10px;
	padding: 12px 14px;
	border: 1px solid var(--color-border-soft, #D3DEEF);
	border-radius: 12px;
	box-sizing: border-box;
}

.rollback-sel-field {
	flex: 1 1 0;
	min-width: 0;
}

.rollback-sel-field .control-label {
	display: block;
	margin: 0 0 6px;
	padding: 0;
	font-size: 12px;
	font-weight: 500;
	color: var(--color-text-subtle, #758199);
}

.rollback-sel-field .control-label strong {
	font-weight: 500;
}

/* Candidate name — same bordered box as the select field beside it */
.rollback-sel-name {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 40px;
	padding: 8px 14px;
	border: 1px solid var(--color-border, #BCC9DF);
	border-radius: 10px;
	background: #fff;
	font-size: 13px;
	color: var(--color-text, #222A39);
	word-break: break-word;
}

/* Category select (raw or Chosen-ified) fills its half */
.rollback-sel-field .search-select,
.rollback-sel-field .chosen-container {
	width: 100% !important;
}

/* ── Shared soft-card surfaces ────────────────────────────────────── */
.rec-cand-card {
	background: var(--color-bg, #fff);
	border: 1px solid var(--color-border-soft, #D3DEEF);
	border-radius: 24px;
	/*box-shadow: 0 2px 30px 0 rgba(214, 217, 229, .28);*/
}

.rec_task_title
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: relative;
    min-width: 250px;
	gap: 5px;
}

.rec_task_title-unread{
	color: rgb(4, 4, 201);
}

.rec_task_title-unread:hover{
	color: rgb(4, 4, 141) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   PAGE HEADER  (pagination arrows · operations split · close)
   ───────────────────────────────────────────────────────────────────── */
.rec-task-header .rec_task_pagination {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.rec_task_pagination_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--color-primary, #6F61EA);
	color: #fff;
	font-size: 13px;
	text-decoration: none;
	transition: background .15s, opacity .15s;
}

.rec_task_pagination_btn:hover {
	background: var(--color-primary-hover, #6251E3);
	color: #fff;
}
.rec_task_pagination_btn-disabled {
	opacity: .4;
	pointer-events: none;
}

/* OPERATIONS split button (libraries/ToolBar/ToolBarGroup) */
.dv-page-actions .multi_href_button {
	position: relative;
	display: inline-flex;
}

.dv-page-actions .multi_href_button .btn, .dv-page-actions .toolbar_item button  {
	/* min-width: 130px; */
}


.dv-page-actions .multi_href_button_elements {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 50;
	min-width: 190px;
	padding: 6px;
	background: #fff;
	border: 1px solid var(--color-border-soft, #D3DEEF);
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(149, 158, 195, .22);
}

/* ─────────────────────────────────────────────────────────────────────
   LEFT COLUMN — inline tabs + resume preview
   ───────────────────────────────────────────────────────────────────── */

/* Schedule-meeting banner (Figma node 1669:3864). Scheduled meetings and the
   new-meeting form render inside it (ICalRenderer::RenderBlockNew). */
.rec-task-schedule-banner {
	padding: 20px 22px;
	margin-bottom: 16px;
	background: var(--color-primary-bg, #F0F3FD);
	border-radius: 24px;
}

.rec-task-schedule-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.rec-task-schedule-banner .ical_grid {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 16px;
}

.rec-task-schedule-info {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.rec-task-schedule-icon {
	flex-shrink: 0;
	font-size: 30px;
	line-height: 1;
	color: var(--color-text-subtle, #596476);
}

.rec-task-schedule-text {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 22px;
	color: var(--color-text-subtle, #596476);
}

.rec-task-schedule-btn {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 14px 24px;
	border: none;
	border-radius: 24px;
	background: var(--color-primary, #6F61EA);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	line-height: 22px;
	white-space: nowrap;
	cursor: pointer;
	transition: background .15s;
}

.rec-task-schedule-btn:hover {
	background: var(--color-primary-hover, #6251E3);
}

/* ─────────────────────────────────────────────────────────────────────
   AI SUMMARIZED-DATA CARD  (Figma node 1708:5533)
   ───────────────────────────────────────────────────────────────────── */
.rec-ai-summary-card {
	border: 1px solid var(--color-border-soft, #D3DEEF);
	border-radius: 24px;
	padding: 19px 21px;
}

.rec-ai-summary-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.rec-ai-summary-heading {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

/* Circular AI-progress ring; fill driven by the inline --rec-ai-pct custom property */
.rec-ai-summary-progress {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: conic-gradient(var(--color-primary, #6F61EA) var(--rec-ai-pct, 0%), var(--color-primary-soft, #E4E5FF) 0);
}

.rec-ai-summary-progress-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
}

.rec-ai-summary-progress-label {
	font-size: 9px;
	font-weight: 600;
	line-height: 1;
	color: var(--color-primary, #6F61EA);
}
.rec-ai-summary-progress-pct {
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	color: var(--color-primary, #6F61EA);
}

.rec-ai-summary-titles {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.rec-ai-summary-title {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 22px;
	color: var(--color-text, #222A39);
}
.rec-ai-summary-subtitle {
	margin: 0;
	font-size: 12px;
	font-weight: 500;
	line-height: 18px;
	color: var(--color-text-subtle, #596476);
}

.rec-ai-summary-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 24px;
}

.rec-ai-summary-row {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.rec-ai-summary-label {
	margin: 0;
	font-size: 11px;
	font-weight: 500;
	color: var(--color-text-subtle, #758199);
}

.rec-ai-summary-values {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

.rec-ai-summary-value {
	display: flex;
	align-items: center;
	flex: 1 1 0;
	min-width: 0;
	min-height: 32px;
	padding: 0 12px;
	border-radius: 8px;
	background: var(--color-primary-bg, #F0F3FD);
	font-size: 12px;
	font-weight: 500;
	line-height: 18px;
	color: var(--color-text-strong, #3D4451);
}

.rec-ai-summary-value-ai {
	justify-content: space-between;
	gap: 8px;
	background: var(--color-primary-softer, #EAECFF);
}

.rec-ai-summary-value-block {
	align-items: flex-start;
	padding: 12px;
}
.rec-ai-summary-block-text {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.rec-ai-summary-block-text p {
	margin: 0;
	line-height: 18px;
}

.rec-ai-summary-ai-tag {
	flex-shrink: 0;
	font-size: 11px;
	font-weight: 600;
	color: var(--color-primary, #6F61EA);
}

.rec-ai-summary-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 60px;
	padding-top: 14px;
	border-top: 1px solid var(--color-border-soft, #D3DEEF);
}

.rec-ai-summary-action {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: var(--color-primary, #6F61EA);
	font-size: 14px;
	font-weight: 500;
	line-height: 22px;
	cursor: pointer;
}

/* Compact progress ring when used inline in the footer action */
.rec-ai-summary-action .rec-ai-summary-progress {
	width: 32px;
	height: 32px;
}
.rec-ai-summary-action .rec-ai-summary-progress-inner {
	width: 27px;
	height: 27px;
}
.rec-ai-summary-action .rec-ai-summary-progress-label {
	font-size: 7px;
}
.rec-ai-summary-action .rec-ai-summary-progress-pct {
	font-size: 8px;
}

.rec-ai-summary-edit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border: none;
	background: transparent;
	color: var(--color-text-subtle, #758199);
	font-size: 15px;
	cursor: pointer;
}

.rec_tab-content .tab_header_container {
	margin-bottom: 16px;
}

.rec_tab-content .tab_header_container h1 {
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: 600;
	color: var(--color-text, #222A39);
}

.rec_tab-content .tab-header {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	overflow-y: hidden;
}

.rec_tab-content .tab-btn {
	position: relative;
	flex-shrink: 0;
	white-space: nowrap;
	padding: 10px 14px;
	border: none;
	background: transparent;
	color: var(--color-text-subtle, #758199);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: color .15s;
}

.rec_tab-content .tab-btn:hover {
	color: var(--color-text, #222A39);
}
.rec_tab-content .tab-btn.active {
	color: var(--color-primary, #6F61EA);
}

.rec_tab-content .tab-btn.active::after {
	content: '';
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--color-primary, #6F61EA);
}

.rec_tab-content .rec_sub_header .tab-header {
	margin-top: 12px;
}


.rec_tab-content .tab-pane {
	display: none;
	padding-top: 16px;
}
.rec_tab-content .tab-pane.active {
	display: block;
}

/* Resume / document preview canvas (reuses .document-preview hook) */
.rec_tab-content .document-preview {
	position: relative;
	height: 780px;
	overflow-y: auto;
	padding: 28px 20px;
	background: #F2F8FF;
	/* background: #F2F8FF;
	border: 1px solid var(--color-border-soft, #D3DEEF);
	border-radius: 24px; */
	scrollbar-width: thin;
	scrollbar-color: var(--color-border, #BCC9DF) transparent;
}

/* Frame the pane that wraps a document preview. The pane id is
   {NAMESPACE}_tab_{fileIndex} (tabs.php), so it varies per resume file and is
   absent when there's no resume — match on the child preview instead so every
   resume pane is framed regardless of index. */
.rec_tab-content .rec-tab-pane:has(> .document-preview){
	padding: 15px;
	background: #F2F8FF;
	border: 1px solid var(--color-border-soft, #D3DEEF);
	border-radius: 24px;
}

/* WHOLE CONVERSATION tab (_conversation.php) — cap the thread so a long chain
   scrolls inside the pane instead of stretching the page. Matched on the child
   container for the same reason as the preview rule above. messageBox.js binds
   its "load more" infinite scroll to .rec-tab-pane, so making the pane the
   scroll container is also what feeds the chain pagination. */
.rec_tab-content .rec-tab-pane:has(> .conversation-container) {
	max-height: 780px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--color-border, #BCC9DF) transparent;
}

.rec_notes_loader{
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.rec_tab-content .document-preview img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

/* Corner icon buttons emitted by Tabs::RenderFiles — held in one sticky
   wrapper so they stay pinned as the document scrolls inside the canvas. */
.document-preview-actions {
	position: sticky;
	top: 5px;
	z-index: 5;
	height: 0; /* overlay: don't push the document content down */
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 8px;
	pointer-events: none;
}

.document-preview-actions > * {
	pointer-events: auto;
	margin-top: -28px; /* lift the buttons up toward the container's top edge */
}

.document-preview-fullscreen-btn,
.document-preview-download-file-btn {
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1.2px solid var(--color-border, #BCC9DF);
	border-radius: 50%;
	background: #fff;
	color: var(--color-text-subtle, #758199);
	font-size: 15px;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s, color .15s;
}

.document-preview-fullscreen-btn {
	right: 18px;
}
.document-preview-download-file-btn {
	right: 64px;
}

.document-preview-fullscreen-btn i {
	font-size: 15px;
}
.document-preview-download-file-btn i {
	font-size: 16px;
}

.document-preview-fullscreen-btn:hover,
.document-preview-download-file-btn:hover {
	background: var(--color-primary-soft, #E4E5FF);
	color: var(--color-primary, #6F61EA);
}

/* ─────────────────────────────────────────────────────────────────────
   DECISION / INPUT BLOCK  (flows inline, not a card)
   ───────────────────────────────────────────────────────────────────── */
.rec-task-decision {
	margin-top: 4px;
}

.rec-task-decision .control-label {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 500;
	color: var(--color-text-subtle, #758199);
}

.rec-task-decision .form-group {
	margin-bottom: 18px;
}

/* Generic inputs / selects / textareas inside the decision block */
.rec-task-decision .form-control,
.rec-task-decision input[type="text"],
.rec-task-decision input[type="number"],
.rec-task-decision select,
.rec-task-decision textarea {
	width: 100%;
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid var(--color-border, #BCC9DF);
	border-radius: 12px;
	background: #fff;
	font-size: 14px;
	color: var(--color-text, #222A39);
	outline: none;
}

.rec-task-decision textarea {
	min-height: 64px;
	resize: none;
}
.rec-task-decision .form-control:focus,
.rec-task-decision select:focus,
.rec-task-decision textarea:focus {
	border-color: var(--color-primary-strong, #BBB4FD);
}

/* File marking — existing file row (libraries/.../recattributes/file.php).
   Shared by the decision block and the candidate-attributes edit form, which
   render the same upload markup in different containers. */
.rec-task-decision .uploadFileItem,
#candidate_attributes_edit .uploadFileItem {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 16px;
	background: #F2F5FF; /* Figma BLUE/Blue 100 — no design token */
	border-radius: 12px;
}

.rec-task-decision .uploadFileItem_name,
#candidate_attributes_edit .uploadFileItem_name {
	flex: 1;
	min-width: 0;
}

.rec-task-decision .upload_title,
#candidate_attributes_edit .upload_title {
	display: inline-block;
	max-width: 100%;
	font-size: 14px;
	font-weight: 500;
	color: var(--color-text, #222A39);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rec-task-decision .uploadFiletools,
#candidate_attributes_edit .uploadFiletools {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-left: 12px;
	border-left: 1px solid var(--color-border, #BCC9DF);
}

.rec-task-decision .button_tool,
#candidate_attributes_edit .button_tool {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	padding: 0 12px;
	border: 1px solid var(--color-border, #BCC9DF);
	border-radius: 8px;
	background: #fff;
	color: var(--color-text-subtle, #758199);
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}

.rec-task-decision .button_tool:hover,
#candidate_attributes_edit .button_tool:hover {
	background: rgba(111, 97, 234, .08);
	border-color: var(--color-primary, #6F61EA);
	color: var(--color-primary, #6F61EA);
}

/* delete gets a destructive hover */
.rec-task-decision .button_tool[onclick*="Remove"]:hover,
#candidate_attributes_edit .button_tool[onclick*="Remove"]:hover {
	background: rgba(220, 53, 69, .08);
	border-color: #DC3545;
	color: #DC3545;
}

/* File upload — dashed dropzone (Figma node 1669:3795).
   The element ships with inline `border:2px dashed #ccc; padding:20px; text-align:center`
   from libraries/.../recattributes/file.php, so the design values need !important to win.
   row-reverse puts the hint text on the left and the upload glyph on the right, matching
   the markup order (<i> then text). */
.rec-task-decision .uploadfilesblock,
#candidate_attributes_edit .uploadfilesblock {
	width: 100%;
}

.rec-task-decision .drop,
#candidate_attributes_edit .drop {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 44px;
	padding: 10px 16px !important;
	border: 1.2px dashed var(--color-text-subtle, #758199) !important;
	border-radius: 12px;
	color: var(--color-text-subtle, #758199);
	font-size: 14px;
	font-weight: 500;
	text-align: left !important;
	cursor: pointer;
	transition: border-color .15s, background .15s;
}

.rec-task-decision .drop:hover,
#candidate_attributes_edit .drop:hover {
	border-color: var(--color-primary-strong, #BBB4FD) !important;
	background: var(--color-secondary-softer, #F3F5FF);
}
.rec-task-decision .drop i,
#candidate_attributes_edit .drop i {
	font-size: 20px;
	color: var(--color-text-subtle, #758199);
}

/* ── Decision chooser — bool controller rendered via HTML::select.radiolist,
   styled as the Figma segmented pill (node 1676:6187 "Chooser"). The container
   carries an inline `display:flex`, so the pill layout needs !important. ─────── */
.rec-task-decision .radiodiv {
	display: inline-flex !important;
	align-items: center;
	width: auto;
	margin: 0;
	padding: 0;
	background: var(--color-bg-soft, #F0F3FD);
	border-radius: 36px;
}

/* Segments size to their own content (the track hugs them, not the column).
   Inactive is transparent (shows the grey track); only the selected segment
   becomes the purple pill below. */
.rec-task-decision .radiochild {
	flex: 0 0 auto;
	min-width: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 40px;
	margin: 0;
	padding: 0 24px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 36px;
	font-size: 14px;
	font-weight: 500;
	color: var(--color-text-subtle, #758199);
	white-space: nowrap;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}

.rec-task-decision .radiochild:hover:not(.activeRadio) {
	color: var(--color-text, #222A39);
}

.rec-task-decision .radiochild input[type="radio"] {
	display: none;
}
.rec-task-decision .radiochild .checkmark {
	display: none;
}

.rec-task-decision .radiochild.activeRadio {
	background: var(--color-primary-softer, #EAECFF);
	border-color: var(--color-primary-strong, #BBB4FD);
	color: var(--color-primary, #6F61EA);
}

.rec-task-decision .radiochild.activeRadio .checkmark {
	display: inline-flex;
	align-items: center;
	font-size: 16px;
	color: var(--color-primary, #6F61EA);
}

/* Decision selector ( <select> control ) */
.rec-task-decision .search-select {
	cursor: pointer;
}

/* Comment field — floating send button (built by _input.php JS) */
.rec-comment-field {
	position: relative;
}

.rec-comment-field textarea {
	width: 100%;
	min-height: 88px;
	padding: 14px 100px 14px 16px;
	border: 1px solid var(--color-border, #BCC9DF);
	border-radius: 16px;
	font-size: 14px;
	color: var(--color-text, #222A39);
	resize: none;
	outline: none;
}

.rec-comment-field textarea::placeholder {
	color: var(--color-text-subtle, #758199);
	opacity: .7;
}
.rec-comment-field textarea:focus {
	border-color: var(--color-primary-strong, #BBB4FD);
}

.rec-comment-send {
	position: absolute;
	right: 12px;
	bottom: 12px;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: var(--color-primary, #6F61EA);
	color: #fff;
	font-size: 14px;
	cursor: pointer;
	transition: background .15s;
}

.rec-comment-send:hover {
	background: var(--color-primary-hover, #6251E3);
}

/* The Georgian-keyboard switcher (.geokbd-switcher.from-group-addon-right) is
   globally pinned to right:0/bottom, which lands on top of the round send
   button. Shift it left so the two sit side by side. */
.rec-comment-field .geokbd-switcher {
	right: 56px;
	bottom: 14px;
}

/* Save / Confirm pills */
.rec-task-decision-actions {
	display: flex;
	gap: 12px;
	margin-top: 8px;
}

.rec-task-decision-actions .toolbar_item {
	flex: 1;
	display: flex;
}

.rec-task-btn-save,
.rec-task-btn-decision {
	flex: 1;
	width: 100%;
	height: 48px;
	padding: 0 22px;
	border: none;
	border-radius: 24px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s;
}

.rec-task-btn-save {
	background: var(--color-primary-softer, #EAECFF);
	color: var(--color-primary, #6F61EA);
}
.rec-task-btn-save:hover {
	background: var(--color-primary-soft, #E4E5FF);
}
.rec-task-btn-decision {
	background: var(--color-primary, #6F61EA);
	color: #fff;
}
.rec-task-btn-decision:hover {
	background: var(--color-primary-hover, #6251E3);
}

/* ── Rating stars – interactive (libraries/html/elements/edit/rate.php) ─
   Reversed markup (max..1) + RTL flow so hover/checked fills the star and
   everything to its left. */
.rec-task-decision .star-align-left {
	width: auto;
	direction: ltr;
}

.star-container {
	direction: rtl;
	display: inline-flex;
	gap: 4px;
	cursor: pointer;
}

.star-input {
	display: none;
}

.star-label {
	font-size: 24px;
	line-height: 1;
	color: var(--color-border, #BCC9DF);
	cursor: pointer;
	transition: color .15s;
}

.star-input:checked ~ .star-label,
.star-label:hover,
.star-label:hover ~ .star-label {
	color: #F5A623;
}

/* Rating stars – read-only grid (XRecAttributes::GenerateStars) */
.star-container-grid {
	display: inline-flex;
	gap: 4px;
}
.star-label-grid,
.star-label-grid-small {
	font-size: 22px;
	line-height: 1;
	color: var(--color-border, #BCC9DF);
}
.star-label-grid.star-filled,
.star-label-grid-small.star-filled,
.star-filled {
	color: #F5A623;
}
.star-value-display {
	margin-top: 6px;
	font-size: 13px;
	color: var(--color-text-subtle, #758199);
}

/* ─────────────────────────────────────────────────────────────────────
   STEP STATUS + RATING CARD (right column) — Figma node 2070:18697
   ───────────────────────────────────────────────────────────────────── */
.rec-task-status-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 22px;
	border: 1px solid var(--color-border-soft, #D3DEEF);
	border-radius: 24px;
}
.rec-task-status-card-title {
	margin: 0;
	font-size: 14px;
	line-height: 22px;
	color: var(--color-text, #222A39);
	word-break: break-word;
}
.rec-task-status-card-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.rec-task-status-row {
	display: flex;
	align-items: center;
	gap: 8px;
}
.rec-task-status-select-wrap {
	flex: 1;
	min-width: 0;
}
/* renderElement wraps the status button in a <div>; both stretch to fill the row. */
.rec-task-status-select-wrap > div,
.rec-task-status-select-wrap .vac_status_btn {
	width: 100%;
	min-width: 0;
}
.rec-task-status-action-btn {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 8px;
	background: #E9EDFB; /* Figma GRAY/Gray 100 — no design token */
	color: var(--color-text, #222A39);
	cursor: pointer;
}
.rec-task-status-action-btn:hover {
	background: #DCE3F7;
}
/* Hover popup of .rec-task-status-action-btn; the markup comes from the shared
   gettooltipdata service (table-clean strips borders), so restore them here. */
#tooltip_new_vacstatuses table {
	border-collapse: collapse;
}
#tooltip_new_vacstatuses table th,
#tooltip_new_vacstatuses table td {
	border: 1px solid var(--color-border-soft, #D3DEEF);
	vertical-align: middle;
	text-align: center;
}
.rec-task-status-rating {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.rec-task-status-stars {
	display: inline-flex;
	gap: 8px;
}
.rec-task-status-stars .star-container {
	gap: 8px;
}
.rec-task-status-star {
	font-size: 24px;
	line-height: 1;
	color: var(--color-border-soft, #D3DEEF);
}
.rec-task-status-star.star-filled {
	color: #F5A623;
}
.rec-task-status-count {
	margin: 0;
	font-size: 12px;
	line-height: 18px;
	color: var(--color-border, #BCC9DF);
}
.rec-task-status-count-current {
	font-weight: 700;
	color: var(--color-text-subtle, #758199);
}

/* ─────────────────────────────────────────────────────────────────────
   SUB-HEADER — applicant name + status toolbar
   ───────────────────────────────────────────────────────────────────── */
.rec-task-subheader-name {
	flex: 1;
	min-width: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--color-text, #222A39);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rec-task-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

/* GenerateButtons wraps each button in a <div>; status renderElement too. */
.rec-task-toolbar > div {
	display: inline-flex;
}

/* Contact action row (call · favourite · block · e-mail · sms) — Figma node 1669:3882.
   GenerateButtons emits <div style="display:flex"><div><button.rec_dynamic-btn>…</div>…</div> */
.rec-task-contact-actions > div {
	display: inline-flex;
	gap: 10px;
}

/* Figma renders these as soft-filled lavender squares, unlike the bare row-popover
   icons; scope the fill to the header toolbar so the list popover is untouched. */
.rec-task-contact-actions .rec_dynamic-btn {
	background: #E9EDFB; /* Figma GRAY/Gray 100 — no design token */
	border-radius: 8px;
}

.rec-task-contact-actions .rec_dynamic-btn:hover {
	background: var(--color-primary-soft, #E4E5FF);
}

/* Thin vertical separator between the contact row and the status selector */
.rec-task-toolbar-divider {
	width: 1px;
	height: 20px;
	background: var(--color-border-soft, #D3DEEF);
	flex-shrink: 0;
}

/* ── Action icon buttons (Figma node 1924-25281) ──────────────────────── */
.rec_dynamic-btn,
.rec_edit_attributes_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--color-text, #222A39);
	font-size: 18px;
	cursor: pointer;
	transition: background .15s, color .15s;
}

.rec_dynamic-btn:hover,
.rec_edit_attributes_btn:hover {
	background: var(--color-bg-soft, #F0F3FD);
}
.rec_dynamic-btn.disabled {
	opacity: .45;
	pointer-events: none;
}
.rec_dynamic-btn.active {
	color: var(--color-primary, #6F61EA);
}

/* When marked/active, the toggle buttons become a colored circle (Figma) */
.rec_dynamic-btn.favorite-btn.active {
	background: var(--color-pink-200, #FFE4F0);
	border-radius: 50%;
	color: var(--color-pink-800, #DA1BBE);
}

.rec_dynamic-btn.call-btn.active {
	background: var(--color-primary-softer, #EAECFF);
	border-radius: 50%;
	color: var(--color-primary, #6F61EA);
}

.rec_dynamic-btn.block-btn.active {
	background: var(--color-red-200, #FFE4F0);
	border-radius: 50%;
	color: var(--color-red-900, #EB267F);
}

/* Outline ↔ fill icon swap for the toggle buttons (call / favorite / block) */
.call-btn .bi-telephone-fill,
.favorite-btn .bi-heart-fill,
.block-btn .bi-dash-circle-fill {
	display: none;
}
.call-btn.active .bi-telephone,
.favorite-btn.active .bi-heart,
.block-btn.active .bi-dash-circle {
	display: none;
}
.call-btn.active .bi-telephone-fill,
.favorite-btn.active .bi-heart-fill,
.block-btn.active .bi-dash-circle-fill {
	display: inline-block;
}

/* Row action icons rendered inline in the grid column — single flex row */
.rec-actions-inline > div {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	gap: 2px;
}

/* ── Row action popover — kebab trigger reveals the icon bar ──────────── */
.rec-actions-trigger:hover {
	background: var(--color-bg-soft, #F0F3FD);
}

.rec-actions-menu {
	display: none;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 50;
}

/* Invisible bridge across the 8px gap so moving the cursor from the trigger
   to the menu never drops :hover and the buttons stay clickable. */
.rec-actions-menu::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -8px;
	height: 8px;
}

.rec-actions:hover .rec-actions-menu,
.rec-actions:focus-within .rec-actions-menu {
	display: block;
}

.rec-actions-menu > div {
	display: flex;
	align-items: center;
	gap: 4px;
}

/* ── Tooltip bubble (Figma node 1274-13685) — styles MakeToolTip output ── */
.my_tooltip {
	position: relative;
	display: inline-flex;
}
.my_tooltip > span {
	display: inline-flex;
}

.my_tooltip > span.hidden {
	display: none;
}

.my_tip {
	display: none;
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 1000;
	padding: 4px 12px;
	max-width: 260px;
	width: max-content;
	white-space: normal;
	word-break: break-word;
	text-align: center;
	background: var(--color-bg, #fff);
	color: var(--color-text-muted, #596476);
	font-size: 12px;
	font-weight: 500;
	line-height: 18px;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(52, 66, 95, .2);
}

.my_tip::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	background: var(--color-bg, #fff);
	border-radius: 1px;
	transform: rotate(45deg);
}

/* When my-tooltip.js flips the bubble below the cell (fixed positioning, near
   the viewport top), move the arrow to the bubble's top edge. */
.my_tip.my_tip--below::after {
	top: 0;
	margin-top: -4px;
}

.my_tooltip:hover > .my_tip {
	display: block;
}

/* Double-click expand (my-tooltip.js): pin the full text inside the cell.
   The cell switches to block so the text can wrap and grow the row, and the
   transient hover bubble is suppressed while pinned. */
.my_tooltip:has(.full-text-block) {
	display: block;
}
.my_tooltip:has(.full-text-block):hover > .my_tip {
	display: none;
}
.my_tooltip .full-text-block {
	display: block;
}
.my_tooltip .full-text {
	position: relative;
	white-space: normal;
	word-break: break-word;
	text-align: left;
}
.my_tooltip .full-text-data {
	white-space: normal;
}
.my_tooltip .full-text-remove {
	position: absolute;
	bottom: 0;
	right: 0;
	padding-left: 10px;
	color: var(--color-red-900);
	cursor: pointer;
}

/* Status selector pill takes the remaining width */
.rec-task-toolbar .vac_status_btn,
.vac_status_btn {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-width: 120px;
	min-height: 32px;
	padding: 4px 8px;
	border: none;
	border-radius: 8px;
	background: var(--color-bg-soft, #F0F3FD);
	font-size: 12px;
	font-weight: 500;
	line-height: 18px;
	color: var(--color-text, #222A39);
	cursor: pointer;
}

.rec-task-toolbar .vac_status_btn-selectable{
	background-color: transparent;
}

.vac_status_btn-grid {
	width: 100%;
	max-width: 160px;
}

.vac_status_btn span {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--color-text, #222A39);
}

.vac_status_btn_caret {
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	object-fit: contain;
	transform: rotate(90deg);
}

.vac_statuses_select {
	z-index: 1100;
	flex-direction: column;
	gap: 8px;
	min-width: 200px;
	/* search (28) + 6 options (6*28) + 6 gaps (6*8) + padding (2*16) */
	max-height: 276px;
	padding: 16px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid var(--color-border-soft, #D3DEEF);
	border-radius: 16px;
	box-shadow: 0 2px 30px rgba(214, 217, 229, .3);
	scrollbar-width: none;
}

.vac_statuses_select::-webkit-scrollbar {
	display: none;
}

.vac_statuses_select-hidden {
	display: none;
}

.vac_statuses_select[data-show] {
	display: flex;
}

.vac_statuses_select_option {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	height: 28px;
	padding: 4px 12px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 500;
	color: var(--color-text, #222A39);
	cursor: pointer;
}

.vac_statuses_select_option[data-status-id="0"] {
	background: var(--color-bg-soft, #F0F3FD);
}

.vac_statuses_select_option span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vac_statuses_select_option:hover {
	background: var(--color-bg-soft, #F0F3FD);
}

/* Customer-chosen status colour is exposed inline as --vac-status-color.
   Tint it to 7% (mixed with white) so the chip stays light and the dark
   label remains legible no matter how dark the configured colour is —
   same treatment as calendar events. */
.vac_status_btn-selectable[style*="--vac-status-color"],
.vac_statuses_select_option[style*="--vac-status-color"] {
	background: color-mix(in srgb, var(--vac-status-color) 25%, #fff);
}

.vac_statuses_select_option[style*="--vac-status-color"]:hover {
	background: color-mix(in srgb, var(--vac-status-color) 25%, #fff);
}

.vac_statuses_search_input {
	position: sticky;
	top: 0;
	z-index: 1;
	flex-shrink: 0;
	width: 100%;
	height: 28px;
	padding: 4px 12px;
	background: #fff;
	border: 1px solid var(--color-border-soft, #D3DEEF);
	border-radius: 8px;
	font-size: 12px;
	outline: none;
}

.vac_statuses_search_input:hover {
	background: #fff;
}

.vac_statuses_search_input:focus {
	outline: none;
	box-shadow: none;
}

/* ─────────────────────────────────────────────────────────────────────
   SCHEDULE MEETING CARD  (ICalRenderer)
   ───────────────────────────────────────────────────────────────────── */
.ical_meetings .ical_title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text, #222A39);
	cursor: pointer;
}

.ical_block {
	padding: 12px 14px;
	background: #fff;
	border-radius: 14px;
}

.ical_block .form-control {
	border: none;
	background: transparent;
	padding: 2px 0;
}

.ical_icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin-right: 6px;
	font-size: 16px;
	line-height: 1;
	color: var(--color-primary, #6F61EA);
	cursor: pointer;
}

.ical_date, .ical_time {
	font-size: 13px;
	color: var(--color-text, #222A39);
}
.ical_link {
	color: var(--color-primary, #6F61EA);
	font-size: 13px;
}
.ical_hint {
	display: block;
	font-size: 11px;
	color: var(--color-text-subtle, #758199);
}

/* New-meeting panel — flows flush inside the ical tile (no border/box), so its
   fields align on the same vertical axis as the title and the trigger button.
   It ships with `form-control` so the global fixed height/border must be reset. */
.new_ical_meeting {
	width: 100%;
	height: auto !important;
	min-height: 0 !important;
	margin-top: 12px;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0;
}

.new_ical_meeting.hidden {
	display: none;
}

/* Fields */
.new_ical_meeting .form-group {
	margin-bottom: 14px;
}

.new_ical_meeting .control-label {
	display: block;
	margin: 0 0 6px;
	padding: 0;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--color-text-subtle, #758199);
}

/* The label ships as a nested <label> + optional required asterisk */
.new_ical_meeting .control-label > label {
	margin: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
}
.new_ical_meeting .label-must {
	margin-left: 2px;
}
.new_ical_meeting .label-must .form_must_fill {
	font-size: 6px;
	color: #DC3545;
	vertical-align: super;
}

/* Start/End time pair — responsive two-up grid (replaces the legacy float .col-*) */
.new_ical_meeting .row.flx {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 12px;
	margin: 0;
}

.new_ical_meeting .row.flx > [class*="col-"] {
	width: auto;
	padding: 0;
	float: none;
}

@media (max-width: 480px) {
	.new_ical_meeting .row.flx {
		grid-template-columns: 1fr;
	}
}

/* Action row */
#ical_new_create,
#ical_new_cancel {
	height: 40px;
	padding: 0 20px;
	border: none;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s, border-color .15s;
}

#ical_new_create {
	background: var(--color-primary, #6F61EA);
	color: #fff;
}
#ical_new_create:hover {
	background: var(--color-primary-hover, #6251E3);
}
#ical_new_cancel {
	background: #fff;
	color: var(--color-text, #222A39);
	border: 1px solid var(--color-border, #BCC9DF);
}
#ical_new_cancel:hover {
	background: var(--color-bg-soft, #F0F3FD);
	border-color: var(--color-primary-strong, #BBB4FD);
}

/* ─────────────────────────────────────────────────────────────────────
   COLLAPSIBLE CANDIDATE-INFO CARD
   ───────────────────────────────────────────────────────────────────── */
/* Section separator above the attributes card — mirrors the comments block
   in the left column (border-top + 40px top gap + 24px inner spacing). */
.rec-task-decision {
	margin-top: 20px;
	padding-top: 24px;
	/* border-top: 1px solid var(--color-border-soft, #D3DEEF); */
}

.rec-cand-card {
	padding: 0;
	overflow: hidden;
}

.rec-cand-card-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	cursor: pointer;
	user-select: none;
}

.rec-cand-ai-score {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border: 2px solid var(--color-primary-strong, #BBB4FD);
	border-radius: 50%;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.1;
	color: var(--color-primary, #6F61EA);
}

.rec-cand-ai-score span {
	font-size: 9px;
	opacity: .8;
}

.rec-cand-title {
	flex: 1;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text, #222A39);
}

/* Collapse chevron — soft-filled square button (Figma node 1708:5546) */
.rec-cand-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	background: #E9EDFB; /* Figma GRAY/Gray 100 — no design token */
	border-radius: 8px;
	color: var(--color-text, #222A39);
	font-size: 14px;
	transition: transform .2s, background .15s;
}

.rec-cand-toggle:hover {
	background: var(--color-primary-soft, #E4E5FF);
}

.rec-cand-body {
	padding: 0 20px 18px;
}

.rec-cand-card-collapsed .rec-cand-body {
	display: none;
}
.rec-cand-card-collapsed .rec-cand-toggle {
	transform: rotate(180deg);
}

/* Candidate attribute rows — Figma node 1708:5533. Each attribute is rendered as
   one or two `.form-group`s (the entered value, plus an optional AI-extracted value).
   They are flattened with display:contents so the label sits full-width on its own
   line and the values render as side-by-side chips: grey for the entered value,
   purple (with an "AI" badge) for the AI-extracted value. */
.candidate_attribute_wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	margin-bottom: 8px;
}

.candidate_attribute_wrapper:last-child {
	margin-bottom: 0;
}

/* ~7 single-line rows (67px each minus the last margin); taller rows just scroll sooner */
.candidate_attributes_print {
	max-height: 450px;
	overflow-y: auto;
	padding-right: 6px;
	scrollbar-width: thin;
}

.candidate_attribute_wrapper .form-group {
	display: contents;
	margin: 0;
}

/* Attribute label — full-width, above the value chips */
.candidate_attribute_wrapper .control-label {
	flex: 0 0 100%;
	margin: 0;
	padding: 0;
	font-size: 11px;
	font-weight: 500;
	color: var(--color-text-subtle, #758199);
}

.candidate_attribute_wrapper .control-label strong {
	font-weight: 500;
}

/* Drop the duplicated label that ships with the AI value's form-group */
.candidate_attribute_wrapper .form-group ~ .form-group .control-label {
	display: none;
}

/* Value chip — grey (entered value). Inline min-height / padding / border from the
   element markup are overridden so it reads as a 32px pill. */
.candidate_attribute_wrapper .form-control {
	flex: 1 1 0;
	min-width: 0;
	min-height: 32px !important;
	height: auto !important;
	/*	display: flex;
		align-items: center;*/
	margin: 0;
	padding: 7px 12px !important;
	background: var(--color-bg-soft, #F0F3FD) !important;
	border: 0 !important;
	border-radius: 8px;
	font-size: 12px;
	color: var(--color-gray-700, #3D4451);
	overflow: hidden;
}

.candidate_attribute_wrapper .form-control strong {
	font-weight: 500;
}

/* AI value chip — purple, with an "AI" badge. Targets the 2nd form-group of a paired
   row, or the sole form-group of a pure AI-extract wrapper. */
.candidate_attribute_wrapper .form-group ~ .form-group .form-control,
.candidate_attribute_wrapper-ai:not(.candidate_attribute_wrapper-ai-unlabeled) .form-control {
	justify-content: space-between;
	gap: 8px;
	background: var(--color-primary-softer, #EAECFF) !important;
}

.candidate_attribute_wrapper .form-group ~ .form-group .form-control::after,
.candidate_attribute_wrapper-ai:not(.candidate_attribute_wrapper-ai-unlabeled) .form-control::after {
	content: 'AI';
	flex-shrink: 0;
	font-size: 11px;
	font-weight: 600;
	color: var(--color-primary, #6F61EA);
}

.rec-cand-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 12px;
	padding-top: 14px;
	border-top: 1px solid var(--color-border-soft, #D3DEEF);
}

.rec-cand-ai-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-primary, #6F61EA);
	text-decoration: none;
}

.rec-cand-ai-dot {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--color-primary-soft, #E4E5FF);
}

.attributes_button_toolbar {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

/* Cancel button — match the save (.toolbar_btn) shape: h-32 / px-14 / rounded-8 / text-12 / fw-medium */
.attributes_button_toolbar .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 32px;
	padding: 0 14px;
	border-radius: 8px;
	border: 1px solid var(--color-border, #BCC9DF);
	background: var(--color-bg-soft, #F0F3FD);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
}

.attributes_button_toolbar .btn:hover {
	background: var(--color-primary-soft, #E4E5FF);
	border-color: var(--color-primary-strong, #BBB4FD);
}

/* ─────────────────────────────────────────────────────────────────────
   CANDIDATE ATTRIBUTES — EDIT MODE  (#candidate_attributes_edit)
   The inline edit form shown when the pencil is clicked. Each attribute is a
   `.form-group` whose label ships as a bare text node followed by an empty
   `.control-label`, then the field (input / checkbox-list / upload block).
   ───────────────────────────────────────────────────────────────────── */
/* Same cap as the print view; display is toggled inline by JS, so only overflow here */
#candidate_attributes_edit {
	max-height: 450px;
	overflow-y: auto;
	padding-right: 6px;
	scrollbar-width: thin;
}

#candidate_attributes_edit .form-group {
	margin: 0 0 16px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--color-text-subtle, #758199);
}

#candidate_attributes_edit .form-group:last-of-type {
	margin-bottom: 0;
}

/* Push the field onto its own line below the label text node; the shipped
   `.control-label` is empty (whitespace only) so it just carries the gap. */
#candidate_attributes_edit .form-group > .control-label {
	display: block;
	min-height: 0;
	margin: 0 0 6px;
	padding: 0;
}

/* Real inputs — clean 40px pill fields */
#candidate_attributes_edit input[type="text"],
#candidate_attributes_edit input[type="number"],
#candidate_attributes_edit input[type="email"],
#candidate_attributes_edit select,
#candidate_attributes_edit textarea {
	width: 100%;
	min-height: 40px;
	padding: 9px 14px;
	border: 1px solid var(--color-border, #BCC9DF);
	border-radius: 10px;
	background: #fff;
	font-size: 13px;
	font-weight: 400;
	color: var(--color-text, #222A39);
	outline: none;
	transition: border-color .15s;
}

#candidate_attributes_edit textarea {
	min-height: 64px;
	resize: vertical;
}

#candidate_attributes_edit input[type="text"]:focus,
#candidate_attributes_edit input[type="number"]:focus,
#candidate_attributes_edit input[type="email"]:focus,
#candidate_attributes_edit select:focus,
#candidate_attributes_edit textarea:focus {
	border-color: var(--color-primary-strong, #BBB4FD);
}

/* Read-only value box (e.g. ელ.ფოსტა) — a <div class="form-control">, not an input */
#candidate_attributes_edit div.form-control {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 40px;
	margin: 0;
	padding: 9px 14px;
	background: var(--color-bg-soft, #F0F3FD);
	border: 1px solid transparent;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 400;
	color: var(--color-gray-700, #3D4451);
}

#candidate_attributes_edit div.form-control strong {
	font-weight: 500;
}

/* Consent / checkbox list */
#candidate_attributes_edit .checkbox-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 2px;
}

#candidate_attributes_edit .checkbox-inline {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 8px 12px;
	background: var(--color-bg-soft, #F0F3FD);
	border: 1px solid transparent;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 400;
	color: var(--color-text, #222A39);
	cursor: pointer;
	transition: border-color .15s, background .15s;
}

#candidate_attributes_edit .checkbox-inline:hover {
	border-color: var(--color-primary-strong, #BBB4FD);
}

#candidate_attributes_edit .checkbox-inline input[type="checkbox"] {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--color-primary, #6F61EA);
	cursor: pointer;
}

#candidate_attributes_edit .checkbox-inline a {
	font-weight: 500;
	color: var(--color-primary, #6F61EA);
	text-decoration: none;
}

#candidate_attributes_edit .checkbox-inline a:hover {
	text-decoration: underline;
}

/* Pinned to the bottom of the scroll area so save/cancel stay reachable */
#candidate_attributes_edit .attributes_button_toolbar {
	position: sticky;
	bottom: 0;
	z-index: 1;
	margin-top: 18px;
	padding: 16px 0 2px;
	background: #fff;
	border-top: 1px solid var(--color-border-soft, #D3DEEF);
}

/* ─────────────────────────────────────────────────────────────────────
   NOTES CARD  (RecNoteRenderer + rec_notes.js rows)
   ───────────────────────────────────────────────────────────────────── */
.rec_notes_elem_header {
	margin-bottom: 14px;
}

.rec_notes_elem_header_text {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--color-text-subtle, #758199);
}

.rec_notes_elem_content {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.rec_notes_empty {
	display: block;
	padding: 8px 0;
	font-size: 13px;
	color: var(--color-text-subtle, #758199);
}

/* a single note row */
.rec_app_note {
	/* padding: 12px 0; */
	padding: 20px 22px;
	border-radius: var(--Radius-16, 16px);
	background: var(--GRAY-Gray-50, #F0F3FD);
}

.rec_app_note:last-child {
	border-bottom: none;
}

.rec_app_note-private {
	position: relative;
}
.rec_app_note-private::before {
	content: '';
	position: absolute;
	left: -20px;
	top: 12px;
	bottom: 12px;
	width: 3px;
	border-radius: 3px;
	background: var(--color-primary-strong, #BBB4FD);
}

.rec_note_header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.rec_note_header .rec_note_label {
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text, #222A39);
}

.rec_note_action_btns {
	display: inline-flex;
	gap: 10px;
}

.rec_note_action_btn {
	border: none;
	background: transparent;
	padding: 0;
	font-size: 15px;
	line-height: 1;
	color: var(--color-text-subtle, #758199);
	cursor: pointer;
	transition: color .15s;
}

.rec_note_action_btn:hover {
	color: var(--color-primary, #6F61EA);
}
.rec_note_action_btn[data-action="delete"]:hover {
	color: var(--color-danger, #FA3E93);
}

.rec_note_content {
	margin: 6px 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--color-text-muted, #596476);
	white-space: pre-wrap;
	word-break: break-word;
}

.rec_note_footer {
	display: flex;
	align-items: center;
	gap: 10px;
}
.rec_note_footer .rec_note_label {
	font-size: 11px;
	color: var(--color-text-subtle, #758199);
}

.rec_note-flash {
	animation: rec-note-flash 1.2s ease;
}
@keyframes rec-note-flash {
	0% {
		background: var(--color-primary-soft, #E4E5FF);
	}
	100% {
		background: transparent;
	}
}

/* note input block */
.rec_notes_input_block {
	position: relative;
	margin-top: 14px;
}
.rec_notes_textarea_wrapper {
	position: relative;
}

.rec_notes_input_block{
	width: 100%;
    min-height: 64px;
    padding: 14px 16px;
    border: 1px solid var(--color-border, #BCC9DF);
    border-radius: 16px;
    font-size: 14px;
    color: var(--color-text, #222A39);
    resize: none;
    outline: none;
}

.rec_notes_textarea {
	border: none;
	width: 100%;
	padding: 10px;
}

.rec_notes_textarea::placeholder {
	color: var(--color-text-subtle, #758199);
	opacity: .7;
}
.rec_notes_textarea:focus {
	border: none;
	outline: none
}

.rec_notes_action_buttons {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
}
.rec_notes_access_block {
	margin-right: auto;
}

.rec_notes_access_btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	padding: 0 14px;
	border: 1px solid var(--color-border, #BCC9DF);
	border-radius: 16px;
	background: var(--color-bg-soft, #F0F3FD);
	font-size: 12px;
	font-weight: 500;
	color: var(--color-text, #222A39);
	cursor: pointer;
}

.rec_notes_action_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 50%;
	background: var(--color-primary, #6F61EA);
	color: #fff;
	font-size: 14px;
	cursor: pointer;
	transition: background .15s, opacity .15s;
}

.rec_notes_action_btn:hover {
	background: var(--color-primary-hover, #6251E3);
}
.rec_notes_action_btn:disabled {
	opacity: .45;
	cursor: not-allowed;
}
.rec_notes_action_btn-edit-action {
	display: none;
}

/* delete confirm modal */
.rec_notes_delete_modal {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(20, 29, 45, .35);
	z-index: 1000;
}
.rec_notes_delete_modal-hidden {
	display: none;
}
.rec_notes_delete_modal_window {
	background: #fff;
	border-radius: 20px;
	padding: 24px;
	box-shadow: 0 12px 40px rgba(20, 29, 45, .2);
	text-align: center;
}
.rec_motes_delete_modal_buttons {
	display: flex;
	gap: 10px;
	justify-content: center;
	margin-top: 14px;
}
.rec_notes_delete_modal_btn {
	height: 40px;
	padding: 0 22px;
	border: none;
	border-radius: 20px;
	background: var(--color-primary, #6F61EA);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}
.rec_notes_delete_modal_btn-secondary {
	background: var(--color-bg-soft, #F0F3FD);
	color: var(--color-text, #222A39);
}

/* ─────────────────────────────────────────────────────────────────────
   COMMENTS  (left column, rendered grid wrapper)
   ───────────────────────────────────────────────────────────────────── */
.rec-task-comments {
	margin-top: 8px;
}

/* Relocated into the left section above the comment field (see recruitment.js):
   comments header → list (only when there are comments) → label → field. Scoped
   to the decision block so the right-column fallback layout is untouched. */
.rec-task-decision .rec-task-comments-header + .rec-task-comments-list {
	margin-top: 12px;
}
.rec-task-decision .rec-task-comments-list + .control-label,
.rec-task-decision .rec-task-comments-header + .control-label {
	margin-top: 16px;
}

/* Separator on top of the comments block. The header is relocated by
   recruitment.js above the comment field, so the divider rides along with it
   as a border-top instead of a standalone element. */
.rec-task-comments-header{
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--color-border-soft, #D3DEEF);
}
/* Comments list — avatar + author + text rows (Figma node 1708:5576) */
.rec-task-comments-list {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.rec-comment-row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.rec-comment-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 50%;
	object-fit: cover;
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
}

.rec-comment-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.rec-comment-author {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 22px;
	color: var(--color-text, #222A39);
}

.rec-comment-text {
	margin: 0;
	font-size: 12px;
	font-weight: 500;
	line-height: 18px;
	color: var(--color-text-subtle, #758199);
}

/* ─────────────────────────────────────────────────────────────────────
   RATES TABLE
   ───────────────────────────────────────────────────────────────────── */
/* The RATES pane is a hand-written table, so it does not get the grid `.table`
   frame the other tabs' grids (LOGS / OTHER_VACANCIES) are rendered with.
   Mirror that frame here — 1px outline + 8px radius, gray-10 header, full cell
   grid lines — so all tab tables read the same. */
.rec-rates-wrapper {
	overflow-x: auto;
	min-height: 200px;
}

.rec-rates-table {
	width: 100%;
	border-collapse: collapse;
}

.rec-rates-table {
	width: 100%;
	/* separate + border-spacing:0 so the outer radius clips the header corners */
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--table-border-color, #D3DEEF);
	border-radius: 8px;
	background: #fff;
}

.rec-rates-table thead th {
	height: 48px;
	padding: 6px 12px;
	background: var(--table-head-bg, var(--GRAY-Gray-10, #F4F7FF));
	font-size: 12px;
	font-weight: 600;
	color: var(--color-text-subtle, #758199);
	text-align: left;
	border-bottom: 1px solid var(--table-border-color, #D3DEEF);
}

.rec-rates-table thead th:first-child {
	border-radius: 8px 0 0 0;
}
.rec-rates-table thead th:last-child {
	border-radius: 0 8px 0 0;
}

.rec-rates-table tbody td {
	padding: 12px;
	font-size: 13px;
	color: var(--color-text, #222A39);
	border-bottom: 1px solid var(--table-border-color, #D3DEEF);
	vertical-align: middle;
}

/* Vertical grid lines (the .table-bordered look used by the grid tabs) */
.rec-rates-table th:not(:last-child),
.rec-rates-table td:not(:last-child) {
	border-right: 1px solid var(--table-border-color, #D3DEEF);
}

.rec-rates-table tbody tr:last-child td {
	border-bottom: none;
}
.rec-rates-table tbody tr:hover td {
	background: var(--color-bg-soft, #F0F3FD);
}

/* ═════════════════════════════════════════════════════════════════════
   RECRUITMENT TASKS LIST  (rec_tasks) – new design
   ---------------------------------------------------------------------
   The data grid markup is shared (View::GenerateCustomTable) and cannot be
   path-overridden, so the new look is applied as scoped CSS over the
   generated table + the new-design pagination bar. Everything here is
   namespaced under .rec_tasks_table so no other list page is affected.
   ═════════════════════════════════════════════════════════════════════ */

/* Card surface + filters spacing are composed from utility classes in the
   template (bg-bg, border, border-soft, rounded-24, shadow-xs, p-*, mb-8). */

/* ── Attribute filters (libraries/attributes.php) ─────────────────────────
   The "SHOW_MORE" toggle reveals a soft inset panel of attribute filter
   fields laid out on the bootstrap grid (.row / .col-*). */
.attribute-filter-block {
	display: flex;
	justify-content: flex-start;
	margin: 0 0 4px;
}

.button_attribute_filters {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 36px;
	padding: 0 16px;
	border: 1px solid var(--color-border-soft, #D3DEEF);
	border-radius: 10px;
	background: var(--color-bg-soft, #F0F3FD);
	color: var(--color-text-subtle, #758199);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
	width: unset !important;
	margin: auto;
}

.button_attribute_filters:hover {
	background: var(--color-primary-soft, #E4E5FF);
	border-color: var(--color-primary-strong, #BBB4FD);
}

/* Real responsive grid — overrides the legacy bootstrap .row/.col float layout
   (the .row.filter-sub-block specificity beats .row regardless of bundle order).
   No background; columns auto-fill and wrap. */
.row.filter-sub-block,
.filter-block.filter-sub-block {
	/* !important beats the inline style="display:block" on the element */
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px 18px;
	margin: 14px 0 0;
	padding: 0;
	background: none;
	border: 0;
}

@media (max-width: 1200px) {
	.row.filter-sub-block, .filter-block.filter-sub-block {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 992px) {
	.row.filter-sub-block, .filter-block.filter-sub-block {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 600px) {
	.row.filter-sub-block, .filter-block.filter-sub-block {
		grid-template-columns: 1fr;
	}
}

/* Neutralise the bootstrap col widths / gutters so the grid controls sizing */
.filter-sub-block > div {
	width: auto;
	max-width: none;
	flex: none;
	float: none;
	margin: 0;
	padding: 0;
}

/* Make the collapse actually hide — the inline display:block on the element
   needs an !important class to override it. */
.filter-sub-block.hidden {
	display: none !important;
}

.filter-sub-block .form_field {
	margin: 0;
}

.filter-sub-block .form_label label {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 500;
	color: var(--color-text-subtle, #758199);
}

.filter-sub-block .form_input_area input[type="text"],
.filter-sub-block .form_input_area input[type="number"],
.filter-sub-block .form_input_area input[type="date"],
.filter-sub-block .form_input_area select,
.filter-sub-block .form_input_area textarea,
.filter-sub-block .form_input_area .text_area {
	width: 100%;
	height: 38px;
	padding: 8px 12px;
	border: 1px solid var(--color-border, #BCC9DF);
	border-radius: 8px;
	background: var(--color-bg, #fff);
	color: var(--color-text, #222A39);
	font-size: 13px;
}

.filter-sub-block .form_input_area textarea {
	height: auto;
	min-height: 38px;
	resize: vertical;
}

.filter-sub-block .form_input_area input:focus,
.filter-sub-block .form_input_area select:focus,
.filter-sub-block .form_input_area textarea:focus {
	outline: none;
	border-color: var(--color-primary-strong, #BBB4FD);
}

/* ── Horizontal scroller around the table ─────────────────────────────── */
.rec_tasks_table .report_page_result {
	width: 100%;
}
.rec_tasks_table #rec-task-table-container {
	overflow-x: auto;
}

/* ── Table base — strip the legacy bordered/striped look ──────────────── */
.rec_tasks_table table.rec-task-table {
	width: 100%;
	border: none;
	/* separate (not collapse) so the header's rounded top corners render and the
	   sticky header keeps its cell borders while scrolling — collapse silently
	   drops both. */
	border-collapse: separate;
	border-spacing: 0;
	background: transparent;
}

/* Full 1px #D3DEEF grid without doubling: each cell paints its bottom + right,
   the first column adds a left, and the header row adds a top — so the outer
   frame is complete and every inner edge is drawn exactly once. Cell borders
   (unlike collapsed ones) travel with the sticky header, so the dividers between
   the <th> cells stay visible on scroll. */
.rec_tasks_table table.rec-task-table th,
.rec_tasks_table table.rec-task-table td {
	border-bottom: 1px solid var(--GRAY-Gray-200, #D3DEEF);
	border-right: 1px solid var(--GRAY-Gray-200, #D3DEEF);
	background: transparent;
}
.rec_tasks_table table.rec-task-table th:first-child,
.rec_tasks_table table.rec-task-table td:first-child {
	border-left: 1px solid var(--GRAY-Gray-200, #D3DEEF);
}
.rec_tasks_table table.rec-task-table thead tr:first-child th {
	border-top: 1px solid var(--GRAY-Gray-200, #D3DEEF);
}

/* ── Header row ───────────────────────────────────────────────────────── */
.rec_tasks_table thead.sticky-element th {
	position: sticky;
	top: 0;
	z-index: 2;
	background:var(--bs-table-bg, #F4F7FF);
	border-bottom: 1px solid var(--color-border-soft, #D3DEEF);
	padding: 12px 14px;
	white-space: nowrap;
	vertical-align: middle !important;
}

/* Round the outer corners of the tinted header strip */
.rec_tasks_table thead.sticky-element th:first-child {
	border-top-left-radius: 12px;
}
.rec_tasks_table thead.sticky-element th:last-child {
	border-top-right-radius: 12px;
}

/* The shared markup hard-codes color:white on the inner .list_header div for
   the old dark header — re-tint it to the soft grey-blue of the new design. */
.rec_tasks_table thead th .list_header {
	justify-content: flex-start !important;
	gap: 6px;
	color: var(--color-border-strong, #A5B3C9) !important;
	font-size: 12px;
	font-weight: 500;
	line-height: 18px;
	text-transform: none;
}

.rec_tasks_table thead th .list_header a {
	color: inherit;
	text-decoration: none;
}

.rec_tasks_table thead th .list_header a:hover {
	color: var(--color-text-subtle, #758199) !important;
}

/* Select-all checkbox cell in the header */
.rec_tasks_table thead th .list_header_x {
	justify-content: flex-start;
}

/* ── Narrow columns ───────────────────────────────────────────────────────
   These grids render via GenerateCustomTable, which now forwards the XML
   hclass/rclass onto the header .list_header div and the cell <td>. Cap width
   and allow wrapping so the auto-layout column can actually collapse.
   - აპლიკაციის მიღების თარიღი (APP_CREATE_DATE): wrap header + date value.
   - კანდიდატის შეფასება (CANDIDATE_RATE): wrap header; the 5-star widget sets
     the practical floor, so this just trims the extra header slack. */
.rec_tasks_table thead th:has(.col-appdate-head),
.rec_tasks_table thead th:has(.col-rate-head) {
	min-width: 0;
}

.rec_tasks_table .col-appdate-head, .rec_tasks_table .col-rate-head {
	width: 150px;
}

.rec_tasks_table thead th .list_header.col-appdate-head,
.rec_tasks_table td.col-appdate-cell {
	white-space: normal;
	word-break: break-word;
	/* max-width: 96px; */
}

.rec_tasks_table thead th .list_header.col-rate-head {
	white-space: normal;
	word-break: break-word;
	/* max-width: 120px; */
}
.rec_tasks_table td.col-rate-cell {
	max-width: 120px;
}

/* ── Body rows ────────────────────────────────────────────────────────── */
.rec_tasks_table tbody tr {
	background: transparent !important;
	transition: background .12s ease;
}

.rec_tasks_table tbody tr:hover {
	background: var(--color-bg-soft, #F0F3FD) !important;
}

.rec_tasks_table tbody td {
	padding: 12px 14px;
	font-size: 14px;
	font-weight: 500;
	color: var(--GRAY-Gray-700, #3D4451);
	vertical-align: middle;
	text-align: left !important;
}

/* Selected row — soft purple wash + accent (toggled by the grid checkbox JS) */
.rec_tasks_table tbody tr.is-selected,
.rec_tasks_table tbody tr:has(.checknid:checked) {
	background: var(--color-secondary-softer, #F3F5FF) !important;
	box-shadow: inset 3px 0 0 0 var(--color-primary, #6F61EA);
}

/* Avatar / candidate cell */
.rec_tasks_table tbody td .avatar,
.rec_tasks_table tbody td img.profile_photo {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

/* Row checkboxes (.radio .checknid) — purple accent */
.rec_tasks_table .radio input[type="checkbox"] {
	accent-color: var(--color-primary, #6F61EA);
}

/* Stars inside the grid keep the shared .star-container-grid styling above. */

/* ═══ Pagination footer (new-design bar from Pagination::generate_html_new) ═══ */
.rec_tasks_table tfoot td {
	border: none;
	padding: 0;
}

.rec_tasks_table .footer_block {
	margin-top: 4px;
	padding-top: 20px;
	border-top: 1px solid var(--color-border-soft, #D3DEEF);
}

.rec_tasks_table .pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.rec_tasks_table .pagination_link,
.rec_tasks_table .pagination_span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	font-size: 14px;
	font-weight: 500;
	/* color: var(--color-text-subtle, #758199); */
	text-decoration: none;
	cursor: pointer;
}

.rec_tasks_table .pagination_link:hover {
	color: var(--color-primary, #6F61EA);
}

/* Active page — larger purple number, no chip */
.rec_tasks_table .pagination_active {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 500;
	color: var(--color-primary, #6F61EA);
}

/* Prev / next — circular buttons */
.rec_tasks_table .pagination_arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1px solid var(--color-border-soft, #D3DEEF);
	/* color: var(--color-text-subtle, #758199); */
	font-size: 12px;
	transition: background .15s, color .15s, border-color .15s;
}

.rec_tasks_table a.pagination_arrow:hover {
	background: var(--color-primary, #6F61EA);
	border-color: var(--color-primary, #6F61EA);
	color: #fff;
}

.rec_tasks_table .pagination_arrow--next {
	background: var(--color-primary, #6F61EA);
	border-color: var(--color-primary, #6F61EA);
	color: #fff;
}

.rec_tasks_table .pagination_arrow.is-disabled {
	background: transparent;
	border-color: var(--color-border-soft, #D3DEEF);
	color: var(--color-border-strong, #A5B3C9);
	opacity: .6;
	pointer-events: none;
}

/* Right — per-page selector */
.rec_tasks_table .pagination_perpage {
	display: flex;
	align-items: center;
	gap: 8px;
}

.rec_tasks_table .pagination_limit select {
	height: 32px;
	padding: 4px 12px;
	border: 1px solid var(--color-border, #BCC9DF);
	border-radius: 8px;
	background: var(--color-bg, #fff);
	color: var(--color-text, #222A39);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.rec_tab-content .document-preview {
		height: 420px;
		padding: 24px 20px;
	}
	.rec_tab-content .rec-tab-pane:has(> .conversation-container) {
		max-height: 70vh;
	}
	.rec-tasks-card {
		padding: 16px 14px 8px;
		border-radius: 18px;
	}
	.rec_tasks_table .pagination {
		justify-content: center;
	}
	.dv-page-actions .multi_href_button .btn, .dv-page-actions .toolbar_item button  {
		min-width: unset;
	}
	.request_detail_div{
		overflow-x: scroll;
	}
}

/* ── Print ────────────────────────────────────────────────────────── */
@media print {
	.dv-page-actions,
	.dv-divider,
	.dv-right,
	.rec-task-decision-actions,
	.document-preview-fullscreen-btn,
	.document-preview-download-file-btn {
		display: none !important;
	}

	.rec-task-layout {
		flex-wrap: wrap;
	}
	.dv-left {
		flex: 0 0 100% !important;
	}
	.rec_tab-content .document-preview {
		height: auto;
		overflow: visible;
	}
	.rec_tab-content .rec-tab-pane:has(> .conversation-container) {
		max-height: none;
		overflow: visible;
	}
}

/* ── rec_vacancies share row (copy / facebook / linkedin) ─────────── */
.jobs-share {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin: 12px 24px;
}
.jobs-share .jobs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 12px;
	border-radius: 24px;
	color: var(--PURPLE-Purple-800, #6F61EA);
    background-color: var(--PURPLE-Purple-100, #EAECFF);
	cursor: pointer;
	overflow: hidden;
	transition: background .15s ease, box-shadow .15s ease;
}
.jobs-share .jobs-btn:hover {
	background-color:  #e1e4fd;
	color: var(--PURPLE-Purple-800, #6F61EA);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}
.jobs-share .jobs-btn:active {
	transform: translate(1px, 1px);
}
.jobs-share .jobs-sign {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.jobs-share .jobs-sign img {
	width: 24px;
	height: 24px;
	/* Tint the white source SVGs to Purple-800 (#6F61EA) */
	filter: brightness(0) saturate(100%) invert(0.4488) sepia(0.1479) saturate(37.5018) hue-rotate(213.9deg) brightness(0.9090) contrast(1.0204);
}
.jobs-share .jobs-text {
	white-space: nowrap;
	overflow: hidden;
	max-width: 0;
	opacity: 0;
	color: var(--PURPLE-Purple-800, #6F61EA);
	font-size: 1em;
	font-weight: 600;
	transition: max-width .3s ease, opacity .3s ease, margin-left .3s ease;
}
.jobs-share .jobs-btn:hover .jobs-text {
	max-width: 400px;
	opacity: 1;
	margin-left: 6px;
}

/* ── rec_vacancy share_display / confirm — channel picker ──────────── */
.sharetype-list {
	display: flex;
	flex-direction: column;
	/* align-items: center; */
	gap: 16px;
	/* width: 100%; */
}
.sharetype-row {
	display: flex;
	/* justify-content: center; */
	align-items: stretch;
	gap: 20px;
	width: 100%;
}
/* Radio-style checkbox: sits outside the card, to its left, vertically centered. */
.sharetype-row > .sharetype-check {
	flex: 0 0 auto;
	align-self: center;
	width: 18px;
	height: 18px;
	margin: 0;
	cursor: pointer;
	accent-color: var(--PURPLE-Purple-800, #6F61EA);
}
/* Left card: uniform, compact, centered content. Stretches to the row height
   so it matches the message box on the right. */
.sharetype-channel {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex: 0 0 200px;
	width: 200px;
	padding: 12px;
	border: 1px solid #e2e0f5;
	border-radius: 12px;
	background: #fff;
	text-align: center;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.sharetype-channel:hover {
	border-color: #c3c0f3;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
/* Selected channel: darker purple border. */
.sharetype-row:has(.sharetype-check:checked) .sharetype-channel {
	border-color: var(--PURPLE-Purple-800, #6F61EA);
	box-shadow: 0 0 0 1px var(--PURPLE-Purple-800, #6F61EA);
}
.sharetype-channel-title {
	font-size: 15px;
	font-weight: 600;
	color: #6b4fa0;
}
.sharetype-photo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 110px;
}
.sharetype-photo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 12px;
}
/* Right message box: revealed by the confirm-page JS when the row is checked. */
.sharetype-msg {
	flex: 1 1 auto;
	visibility: hidden;
	padding: 12px;
    border: 1px solid #e2e0f5;
    border-radius: 12px;
    background: #fff;
}
.sharetype-msg .form-group {
	margin-bottom: 0;
}
.sharetype-msg .control-label {
	display: block;
	text-align: left;
}
/* Tablet / narrow: stack the channel card above its message box, both full width. */
@media (max-width: 768px) {
	.sharetype-row {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		max-width: 480px;
	}
	.sharetype-channel {
		flex: 1 1 auto;
		width: auto;
	}
	.sharetype-msg {
		max-width: none;
	}

	.rec-task-decision{
		padding-left: 20px;
		padding-right: 20px;
	}

	.dv-right{
		padding: 20px;
	}
}
/* Phone: shrink the preview photo so cards stay compact. */
@media (max-width: 480px) {
	.sharetype-list {
		gap: 12px;
	}
	.sharetype-photo {
		height: 80px;
	}
	.sharetype-channel-title {
		font-size: 14px;
	}
}

.rec_task_title_main {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	overflow: hidden;
}

.rec_task_title_main .cv_photo {
	flex-shrink: 0;
}

.rec_task_title_main .cv_photo span {
	padding: 0;
}


.cv_photo
{
	width: 32px;
	height: 32px;
}

.vac_dropdown {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.vac_dropdown_btn {
	display: flex;
	flex-grow: 1;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-width: 120px;
	min-height: 32px;
	padding: 4px 8px;
	border: none;
	border-radius: 8px;
	background: var(--color-bg-soft, #F0F3FD);
	font-size: 12px;
	font-weight: 500;
	line-height: 18px;
	color: var(--color-text, #222A39);
	cursor: pointer;
	transition: background 0.15s ease;
}

.vac_dropdown_btn[style*="--vac-dd-color"] {
	background: color-mix(in srgb, var(--vac-dd-color) 25%, #fff);
}

.vac_dropdown_btn:hover {
	filter: brightness(0.95);
}

.vac_dropdown_btn span {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: left;
	color: var(--color-text, #222A39);
}

.vac_dropdown_caret {
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	object-fit: contain;
	transform: rotate(90deg);
	opacity: 0.5;
}

.vac_dropdown_menu {
	z-index: 1100;
	display: none;
	flex-direction: column;
	gap: 4px;
	min-width: 160px;
	padding: 12px;
	background: #fff;
	border: 1px solid var(--color-border-soft, #D3DEEF);
	border-radius: 16px;
	box-shadow: 0 18px 44px rgba(52, 66, 95, 0.10);
}

.vac_dropdown_menu[data-show] {
	display: flex;
}

.vac_dropdown_item {
	display: flex;
	align-items: center;
	height: 28px;
	padding: 4px 12px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 500;
	color: var(--color-text, #222A39);
	text-decoration: none;
	white-space: nowrap;
	background: transparent;
	transition: background 0.15s ease;
}

.vac_dropdown_item[style*="--vac-dd-color"] {
	background: color-mix(in srgb, var(--vac-dd-color) 20%, #fff);
}

.vac_dropdown_item:hover,
.vac_dropdown_item:focus {
	text-decoration: none;
	filter: brightness(0.94);
	color: var(--color-text, #222A39);
}

.vac_dropdown_item span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────────
   VACANCY STATUS COLOR TOKENS
   Used by both the vac_dropdown grid element (inline --vac-dd-color)
   and the vacancy filter Chosen items (class-based tokens).
   ───────────────────────────────────────────────────────────────────── */
.vac-dd-active  {
	--vac-dd-color: #0C9B99;
}
.vac-dd-planned {
	--vac-dd-color: #6F61EA;
}
.vac-dd-closed  {
	--vac-dd-color: #2563EB;
}
.vac-dd-stopped {
	--vac-dd-color: #FDAF42;
}
.vac-dd-expired {
	--vac-dd-color: #FA3E93;
}
.vac-dd-deleted {
	--vac-dd-color: #758199;
}

/* Base state — always show tint, regardless of hover */
.chosen-container .chosen-results li.active-result[class*="vac-dd-"],
.chosen-container .chosen-results li.result-selected[class*="vac-dd-"] {
	background: color-mix(in srgb, var(--vac-dd-color) 20%, #fff);
	color: var(--color-text, #222A39);
}

/* Highlighted (hover/keyboard) — slightly stronger tint, override the default purple */
.chosen-container .chosen-results li.highlighted[class*="vac-dd-"] {
	background: color-mix(in srgb, var(--vac-dd-color) 38%, #fff);
	color: var(--color-text, #222A39);
}

/* Already-selected state — keep tint, de-emphasise slightly */
.chosen-container .chosen-results li.result-selected[class*="vac-dd-"] {
	color: var(--color-text-muted, #596476);
}


/* ─────────────────────────────────────────────────────────────────────
   SHARE REPORT  (rec_vacancy task=share_report modal)
   Reskinned for the new design — the old rules in
   templates/css/src/recruitment.css are not loaded here. Channel cards rail on
   the left, share-log grid (renderGrid) on the right.
   ───────────────────────────────────────────────────────────────────── */
.vac_share_report {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	width: 100%;
	padding: 30px;
}

.vac_share_channels {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 240px;
	flex-shrink: 0;
}

.vac_share_channel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 12px;
	background: #fff;
	border: 1px solid var(--color-border-soft, #D3DEEF);
	border-radius: 16px;
	outline: none;
	text-decoration: none;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s, background .15s;
}

.vac_share_channel:hover {
	border-color: var(--color-primary, #6F61EA);
}

.vac_share_channel.active {
	border-color: var(--color-primary, #6F61EA);
	background: var(--color-primary-softer, #F2F0FE);
	box-shadow: inset 0 0 0 1px var(--color-primary, #6F61EA);
}

.vac_share_channel_title {
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: var(--color-primary, #6F61EA);
	text-align: center;
}

.vac_share_channel_image_block {
	width: 100%;
	max-width: 200px;
	aspect-ratio: 8 / 5;
	border-radius: 12px;
	overflow: hidden;
}

.vac_share_channel_image_block:not(:has(img)) {
	display: none;
}

.vac_share_channel_image_block img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border: none;
	pointer-events: none;
}

/* Count badge straddles the image's bottom edge; sits inline when there is no
   image (the channel has no picture). */
.rec_vac_share_count_block {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	padding: 2px 10px;
	background: #fff;
	border: 1px solid var(--color-border-soft, #D3DEEF);
	border-radius: 999px;
	transform: translateY(-60%);
}

.vac_share_channel_image_block:not(:has(img)) + .rec_vac_share_count_block {
	transform: none;
}

.rec_vac_share_count {
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: var(--color-text, #222A39);
}

.vac_share_reports {
	flex: 1 1 320px;
	min-width: 0;
}

.vac_share_report_table {
	display: block;
	width: 100%;
	overflow-x: auto;
}

.vac_share_report_table-hidden {
	display: none !important;
}
.rec_task_title_count
{
    color: var(--color-red-900);
	margin-left: 10px;
}

.rec_task_title-archived:after
{
    font-family: "bootstrap-icons";
    content: '\F10D';

    position: absolute;

    width: 10px;
    height: 10px;

    right: 0;
    top: -5px;
}
.rec_task_title-mytask:before {
    font-family: "bootstrap-icons";
    content: '\F5AF';
    position: absolute;
    width: 5px;
    height: 5px;
	left: -3px;
    top: -9px;
    transform: scaleX(-1);
}

.resume_criteria
{
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 15px;
}

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

.resume_criteria_element
{
	display: block;
	margin-bottom: 4px;
	padding: 0;
	color: #758199;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 500;
	line-height: 18px;
	text-align: left;
	min-height: 18px;
}

.pub-grid {
	width: 100%;
	padding-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	justify-content: start;
	align-items: center;
}

.pub-grid-element {
	background-color: #f1f5f6;
	border-radius: 12px;
	cursor: pointer;
	width: 100%;
	max-width: 768px;
	transition: all 0.2s ease-in-out;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


.pub-grid-element div {
	display: flex;
	gap: 16px;
}

.pub-grid-element a {
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	transition: all 0.2s ease-in-out;
}

.pub-grid-element a:hover {
	color: #a70997 !important;
}


.jobs-application-toolbar {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 0;
}

.jobs-share-buttons-container {
	margin-left: auto;
	display: flex;
	gap: 16px;
	margin-top: 8px;
}

.jobs-page-title {
	padding-left: 16px !important;
	padding-right: 16px !important;
}

@media (max-width: 576px) {
	.jobs-btn {
		padding: 8px;
	}

	.jobs-application-toolbar,
	.jobs-share-buttons-container {
		gap: 8px;
	}

	.jobs-btn:hover .jobs-sign,
	.jobs-sign {
		margin-right: 0 !important;
	}

	.jobs-text,
	.jobs-btn:hover .jobs-text {
		display: none !important;
	}

	.jobs-vacancies-text {
		opacity: 1;
		display: block;
		color: white;
		font-size: 1em;
		font-weight: 400;
		max-width: 400px;
		margin-left: 6px;
	}

	.jobs-page-title {
		padding-left: 4px !important;
		padding-right: 4px !important;
	}

}

.jobs-btn {
	background-color: #0a66c2;
	margin-left: 5px;
	gap: 0 !important;
	padding: 7px;
	border: none;
	border-radius: 40px;
	cursor: pointer;
	box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);
	transition: 300ms ease;
	width: auto;
	height: auto;
}

.jobs-sign {
	display: flex;
	align-items: center;
	justify-content: center;
	transition: margin-right 300ms ease;
}

.jobs-vacancies-text,
.jobs-text {
	white-space: nowrap;
	overflow: hidden;
	color: white;
	font-size: 1.2em;
	font-weight: 600;
	max-width: 0;
	opacity: 0;
	transition: 300ms ease;
}

.jobs-application-toolbar {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 0;
}

.jobs-share-buttons-container {
	display: flex;
	gap: 16px;
}

.jobs-page-title {
	padding-left: 16px !important;
	padding-right: 16px !important;
}

@media (max-width: 576px) {
	.jobs-btn {
		padding: 8px;
	}

	.jobs-application-toolbar,
	.jobs-share-buttons-container {
		gap: 8px;
	}

	.jobs-btn:hover .jobs-sign,
	.jobs-sign {
		margin-right: 0 !important;
	}

	.jobs-text,
	.jobs-btn:hover .jobs-text {
		display: none !important;
	}

	.jobs-vacancies-text {
		opacity: 1;
		display: block;
		color: white;
		font-size: 1em;
		font-weight: 400;
		max-width: 400px;
		margin-left: 6px;
	}

	.jobs-page-title {
		padding-left: 4px !important;
		padding-right: 4px !important;
	}

	.job-location-container {
		/*flex-direction: column;*/
		gap: 8px !important;
		flex-wrap: wrap;
		margin-top: 10px;
	}

}

.vac-title-container{
	margin-bottom: 12px;
}

.job-location-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px !important;
	flex-wrap: wrap;
	margin-bottom: 12px !important;
}

.brand-info-container {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.brand-img {
	width: 100px;
	height: 46px;
	border-radius: 50%;
}

.brand-img img {
	border-radius: 5px;
	width: 100%;
	height: 100%;
}

#sortSelect {
	border-color: var(--rec_filter_borders) !important;
	padding-left: 35px !important;
	padding-right: 0px !important;
	min-width: 150px;
	width: unset;
}

.pub-vac-form .checkbox-inline{
	display: flex;
	align-items: center;
}

.rec_dynamic_comment-fill i {
	color: var(--color-red-500) !important;
}

.rec_dynamic_note-fill {
	color: var(--color-red-500) !important;
}

.rec_dynamic_note-fill i {
	color: var(--color-red-500) !important;
}

.rec-forward-card {
	margin-top: 16px;
}

.rec-forward-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.rec-forward-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 32px;
	padding: 6px 12px;
	border-radius: 8px;
	background: var(--color-bg-soft, #F0F3FD);
	font-size: 13px;
	font-weight: 500;
	color: var(--color-text, #222A39);
}

.rec-forward-row-confirmed {
	background: #D9F2E0;
}
.rec-forward-row-confirmed .rec-forward-status-icon i {
	color: #28A745;
}
.rec-forward-row-rejected {
	background: #FDE2E4;
}
.rec-forward-row-rejected .rec-forward-status-icon i {
	color: #DC3545;
}

.rec-forward-status-icon {
	display: inline-flex;
	font-size: 15px;
}

.rec-forward-cancel-btn {
	border: none;
	background: transparent;
	padding: 0;
	font-size: 15px;
	color: var(--color-text-subtle, #758199);
	cursor: pointer;
}
.rec-forward-cancel-btn:hover {
	color: var(--color-danger, #FA3E93);
}

.rec-forward-choose-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	padding: 0 20px;
	border: none;
	border-radius: 18px;
	background: var(--color-primary, #6F61EA);
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
}

.rec-forward-choose-btn:hover {
	background: var(--color-primary-hover, #6251E3);
}

.rec-forward-close-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	padding: 0 20px;
	border: 1px solid var(--color-border, #BCC9DF);
	border-radius: 18px;
	background: #fff;
	color: var(--color-text, #222A39);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
}

.rec-forward-close-btn:hover {
	background: var(--color-bg-soft, #F0F3FD);
}

.rec-forward-popup {
	position: fixed;
	inset: 0;
	z-index: 1100;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(20, 29, 45, .35);
}

.rec-forward-popup[hidden] {
	display: none;
}

.rec-forward-popup-window {
	width: 420px;
	max-width: 90%;
	padding: 24px;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 12px 40px rgba(20, 29, 45, .2);
}

.rec-forward-popup-window .control-label {
	display: block;
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 500;
	color: var(--color-text-subtle, #758199);
}

.rec-forward-popup-window .form-group {
	margin-bottom: 14px;
}

.rec-forward-popup-window select {
	width: 100%;
	min-height: 40px;
	padding: 8px 12px;
	border: 1px solid var(--color-border, #BCC9DF);
	border-radius: 10px;
	background: #fff;
	font-size: 13px;
	color: var(--color-text, #222A39);
	outline: none;
	cursor: pointer;
}

.rec-forward-popup-buttons {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	margin-top: 8px;
}

.rec-forward-blocked {
	opacity: .5;
	cursor: not-allowed !important;
}

.rec-forward-popup-window .chosen-container {
	width: 100% !important;
}

.rec-forward-popup-window .chosen-drop {
	z-index: 1200;
}

.rec-forward-card {
	background: var(--color-primary-bg, #F0F3FD);
	border: none;
	margin-top: 50px;
}

.rec-forward-row,
.rec-forward-row-confirmed,
.rec-forward-row-rejected {
	background: #fff;
}

.rec-forward-card .rec-task-status-card-body > .rec-forward-choose-btn {
	align-self: flex-start;
	height: 28px;
	padding: 0 14px;
	font-size: 12px;
}

.rec-forward-feedback:empty {
	display: none;
}

.rec-forward-feedback .message,
.rec-forward-feedback .error_message {
	margin: 0 0 10px;
}

.rec_stage_boxes {
	display: flex;
	gap: 12px;
	overflow-x: auto;      /* horizontal scroll when many boxes */
	padding: 8px 0 12px;
	scrollbar-width: thin;
}

.rec_stage_box {
	min-width: 140px;
	flex: 0 0 auto;
	border: 1px solid #ccc;
	border-radius: 8px;
	padding: 10px 15px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 6px;
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
}

.rec_stage_box:hover {
	background-color: #f5e5f1;
}

.rec_stage_box_title {
	font-size: 12px;
	color: #373656;
}

.rec_stage_box_value {
	font-size: 26px;
	color: black;
}
.rec-application-date {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: left;
	align-items: center;
	overflow: hidden;
	font-size: 11px;
	margin-bottom: 8px;
}
.rec-application-date::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--color-border-soft);
}

/* end file: recruitment.css */