/* ═══════════════════════════════════════════════════════════
   SHARED SECTION PATTERNS
═══════════════════════════════════════════════════════════ */

/* Container */
.employee-personal-information-section,
.employee-profile-picture-section,
.employee-address-section,
.employee-contact-section,
.employee-compensation-section,
.employee-banking-section,
.employee-employment-record-section {
	border: 1px solid #e1e3ea;
	border-radius: 12px;
	overflow: hidden;
}


/* Toggle button */
.employee-personal-information-section__toggle,
.employee-contact-section__toggle,
.employee-compensation-section__toggle,
.employee-banking-section__toggle,
.employee-address-section__toggle,
.employee-employment-record-section__toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	background: #fff;
	border: 0;
	cursor: pointer;
	gap: 8px;
}


/* Toggle summary */
.employee-personal-information-section__toggle-summary,
.employee-contact-section__toggle-summary,
.employee-compensation-section__toggle-summary,
.employee-banking-section__toggle-summary,
.employee-address-section__toggle-summary,
.employee-employment-record-section__toggle-summary {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* ── Shared employee section icon ── */
.employee-personal-information-section__icon,
.employee-profile-picture-section__icon,
.employee-contact-section__icon,
.employee-compensation-section__icon,
.employee-banking-section__icon,
.employee-address-section__icon,
.employee-employment-record-section__icon,
.employee-foreigner-permit-section__icon,
.employee-foreigner-sections-section__icon,
.employee-profile-picture-section__modal-icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

/* ── Shared employee section chevron ── */
.employee-personal-information-section__chevron,
.employee-contact-section__chevron,
.employee-compensation-section__chevron,
.employee-banking-section__chevron,
.employee-address-section__chevron,
.employee-employment-record-section__chevron {
	width: 16px;
	height: 16px;
	color: #7c3aed;
	transition: transform 0.2s;
	flex-shrink: 0;
}

/* ── Shared employee section body ── */
.employee-personal-information-section__body,
.employee-contact-section__body,
.employee-compensation-section__body,
.employee-banking-section__body,
.employee-address-section__body,
.employee-employment-record-section__body,
.employee-allergy-section__body,
.employee-foreigner-permit-section__body,
.employee-foreigner-sections-section__body {
	padding: 20px;
}

.employee-address-section__icon {
	width: 24px;
	height: 24px;
	color: #7c3aed;
	flex-shrink: 0;
}

/* Section chevron */
.employee-personal-information-section__chevron,
.employee-contact-section__chevron,
.employee-compensation-section__chevron,
.employee-banking-section__chevron,
.employee-address-section__chevron,
.employee-employment-record-section__chevron {
	width: 16px;
	height: 16px;
	color: #7c3aed;
	transition: transform 0.2s;
	flex-shrink: 0;
}

/* Section body */
.employee-personal-information-section__body,
.employee-contact-section__body,
.employee-compensation-section__body,
.employee-banking-section__body,
.employee-address-section__body,
.employee-employment-record-section__body {
	padding: 20px;
}

/* Four-column grid row */
.employee-personal-information-section__grid-row,
.employee-employment-record-section__grid-row,
.employee-compensation-section__grid-row,
.employee-banking-section__grid-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 12px;
	margin-bottom: 20px;
}

/* ═══════════════════════════════════════════════════════════
   SECTION TITLE & COMMON ELEMENTS
═══════════════════════════════════════════════════════════ */

.employee-section__title {
	font-size: 20px;
	line-height: 26px;
	font-weight: 700;
	color: #7C3AED;
}

.employee-section__required {
	color: #7C3AED;
}

/* ═══════════════════════════════════════════════════════════
   PROFILE PICTURE SECTION
═══════════════════════════════════════════════════════════ */

.employee-profile-picture-section__header {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 16px 20px;
}

.employee-profile-picture-section__content {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	padding: 20px;
}

.employee-profile-picture-section__avatar-wrapper {
	position: relative;
	width: 100px;
	height: 100px;
	flex-shrink: 0;
}

.employee-profile-picture-section__avatar-button {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: #F2EBFD;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	cursor: pointer;
	overflow: hidden;
}

.employee-profile-picture-section__avatar-placeholder {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.employee-profile-picture-section__avatar-preview {
	width: 100px;
	height: 100px;
	border: 0;
	border-radius: 50%;
	object-fit: cover;
}

.employee-profile-picture-section__edit-button {
	position: absolute;
	bottom: 4px;
	right: 4px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #F2EBFD;
	border: 1.5px solid #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

.employee-profile-picture-section__edit-icon {
	width: 16px;
	height: 16px;
}

.employee-profile-picture-section__hint-block {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.employee-profile-picture-section__hint {
	font-size: 14px;
	color: #a9acb4;
}

.employee-profile-picture-section__error {
	margin-top: 8px;
}

.employee-profile-picture-section__modal-dialog {
	max-width: 600px;
}

.employee-profile-picture-section__modal-content {
	border-radius: 16px;
}

.employee-profile-picture-section__modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #f1f1f4;
	padding: 24px;
}

.employee-profile-picture-section__modal-title-group {
	display: flex;
	align-items: center;
	gap: 8px;
}

.employee-profile-picture-section__modal-title {
	font-size: 22px;
	font-weight: 700;
	color: #181c32;
}

.employee-profile-picture-section__modal-body {
	padding: 24px;
}

.employee-profile-picture-section__modal-picker {
	margin: auto;
	display: flex;
	width: 200px;
	height: 200px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 4px dashed #D8D8E5;
	background: #faf9ff;
	cursor: pointer;
}

.employee-profile-picture-section__modal-placeholder {
	font-size: 52px;
	color: #7c3aed;
}

.employee-profile-picture-section__modal-preview {
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 50%;
	object-fit: cover;
}

.employee-profile-picture-section__modal-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid #f1f1f4;
	padding: 24px;
}

/* ═══════════════════════════════════════════════════════════
   PERSONAL INFORMATION SECTION
═══════════════════════════════════════════════════════════ */

.employee-address-same-as-id {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	line-height: 25px;
	font-weight: 400;
	color: #181c32;
	cursor: pointer;
	margin-bottom: 20px;
}

.employee-personal-information-section__foreign-national-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	line-height: 25px;
	font-weight: 400;
	color: #181c32;
	cursor: pointer;
	margin-bottom: 20px;
}

.employee-personal-information-section__foreign-national-checkbox {
	width: 14px;
	height: 14px;
	accent-color: #7c3aed;
}

.employee-personal-information-section__label {
	display: block;
	font-size: 13px;
	line-height: 14px;
	color: #3f4254;
	margin-bottom: 8px;
	font-weight: 500;
}

.employee-personal-information-section__label--age {
	font-size: 14px;
	line-height: 22px;
	color: #7E8299;
}

.employee-personal-information-section__field {
	width: 100%;
	min-height: 48px;
	padding: 12px 18px;
	border: 1px solid #E1E3EA;
	border-radius: 6px;
	font-size: 13px;
	box-sizing: border-box;
	font-weight: 500;
	line-height: 14px;
	color: #D8D8E5;
}

.employee-personal-information-section-hidden__field {
	width: 100%;
	min-height: 48px;
	padding: 12px 18px;
	border: 1px solid #E1E3EA;
	border-radius: 6px;
	font-size: 13px;
	box-sizing: border-box;
	font-weight: 500;
	line-height: 14px;
	color: #A1A5B7;
}

.employee-personal-information-section__field:focus {
	border-color: var(--tb-color-primary);
	box-shadow: 0 0 0 3px rgba(var(--tb-color-primary-rgb), 0.12);
	outline: none;
}

.employee-personal-information-section__field::placeholder {
	color: #c7c9d7;
	font-weight: 500;
	opacity: 1;
}

.employee-personal-information-section__field:focus,
.employee-personal-information-section__field:focus-visible,
select.employee-personal-information-section__field:focus {
	outline: none;
	border-color: #7C3AED;
	box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.employee-personal-information-section__field[type="date"],
.employee-personal-information-section__field[type="text"],
.employee-personal-information-section__field[type="email"],
.employee-personal-information-section__field[type="number"],
.employee-personal-information-section__field[type="tel"],
.employee-personal-information-section__field select,
select.employee-personal-information-section__field {
	color: #262626;
	background-color: #fff;
}

select.employee-personal-information-section__field {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 15px center !important;
	padding-right: 40px;
	color: #5E6278;
	background: #fff;
}

select.employee-personal-information-section__field {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235e6278' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 44px;
}

select.employee-personal-information-section__field--select-placeholder:has(option[value=""]:checked) {
	color: #d8d8e5;
	font-weight: 500;
}

select.employee-personal-information-section__field--select-placeholder option {
	color: #5E6278;
	font-weight: 400;
}

.employee-personal-information-section__field--invalid {
	border-color: #f1416c !important;
}

.was-validated .employee-personal-information-section__field:invalid,
.was-validated select.employee-personal-information-section__field:invalid {
	border-color: #f1416c !important;
	box-shadow: 0 0 0 3px rgba(241, 65, 108, 0.15) !important;
	outline: none;
}

.employee-personal-information-section__age-display {
	display: block;
	line-height: 25px;
	font-size: 16px;
	color: #181C32;
}

/* ═══════════════════════════════════════════════════════════
   CONTACT SECTION
═══════════════════════════════════════════════════════════ */

.employee-contact-section__grid-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.employee-contact-section-edit-mode__grid-row {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 12px;
}

.employee-contact-section-show__grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 20px 40px;
}

.employee-sensitive-field__mask {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: default;
        background-color: #E1E3EA;
}

.employee-sensitive-field__eye-btn {
        background: transparent;
        border: 0;
        padding: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        color: #A1A5B7;
        font-size: 18px;
}

.employee-sensitive-field__input-wrap {
        position: relative;
        display: block;
}

.employee-sensitive-field__input-wrap .employee-personal-information-section__field {
        width: 100%;
        padding-right: 36px;
}

/* suppress chevron for selects inside reveal wrap — eye icon replaces it */
.employee-sensitive-field__input-wrap select.employee-personal-information-section__field {
        background-image: none !important;
}

/* hide calendar icon inside reveal wrap — eye button takes its place */
.employee-sensitive-field__input-wrap .tb-date-icon {
        display: none;
}

.employee-sensitive-field__eye-btn--inline {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        background: transparent;
        border: 0;
        padding: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        z-index: 1;
}


.employee-compensation-section__grid-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr auto;
	gap: 12px;
	margin-bottom: 20px;
}

.employee-compensation-section-edit__grid-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 12px;
}

.employee-compensation-section__remove-cell {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
}

/* ═══════════════════════════════════════════════════════════
   EMERGENCY CONTACT SECTION
═══════════════════════════════════════════════════════════ */

.employee-emergency-contact-section__edit-grid-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr auto;
  gap: 16px;
  align-items: end;
}

.employee-emergency-contact-section__show-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

/* ═══════════════════════════════════════════════════════════
   EDUCATION SECTION
═══════════════════════════════════════════════════════════ */

.employee-education-section__edit-grid-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr auto;
  gap: 16px;
  align-items: end;
}

.employee-education-section__show-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 16px;
}

/* ═══════════════════════════════════════════════════════════
   LANGUAGE SECTION
═══════════════════════════════════════════════════════════ */

.employee-language-section__cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.employee-language-section__show-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.employee-timeline {
  position: relative;
}

.employee-timeline__item {
  display: flex;
  gap: 12px;
  padding-bottom: 20px;
}

.employee-timeline__item--last {
  padding-bottom: 0;
}

.employee-timeline__rail {
  position: relative;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  width: 10px;
}

.employee-timeline__dot {
  margin-top: 4px;
  position: relative;
  z-index: 1;
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background-color: #7C3AED;
}

.employee-timeline__line {
  position: absolute;
  left: 50%;
  top: 14px;
  bottom: -24px;
  transform: translateX(-50%);
  width: 2px;
  background-color: #E1E3EA;
}

.employee-timeline__item--last .employee-timeline__line {
  display: none;
}

.employee-timeline_text__entry {
  color: #181C32;
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
}

.employee-compensation-section__remove-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: end;
  margin-bottom: 3px;
}

.employee-allergies__grid-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 12px;
	margin-bottom: 20px;
}

.employee-foreigner-permit__grid-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 12px;
	margin-bottom: 20px;
}

.employee-banking-section__grid-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 12px;
	margin-bottom: 20px;
}

.employee-address-section__icon {
	color: #7c3aed;
}
/* ═══════════════════════════════════════════════════════════
   ADDRESS SECTION
═══════════════════════════════════════════════════════════ */

.employee-address-section__subheading {
	font-size: 16px;
	font-weight: 500;
	color: #000000;
	margin: 0 0 20px;
}

.employee-address-section__subheading--first {
	margin-top: 0;
}

.employee-address-section__grid-row {
	display: grid;
	gap: 12px;
	margin-bottom: 20px;
}

.employee-address-section__grid-row--three {
	grid-template-columns: 1fr 1fr 1fr;
}

.employee-address-section__grid-row--four {
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

.employee-address-section__grid-row--section-end {
	margin-bottom: 20px;
}

.employee-address-section__same-as-wrapper {
	margin-top: 15px;
	margin-bottom: 15px;
}

.employee-address-section__divider {
	margin-top: 30px;
	margin-bottom: 20px;
}

.employee-address-section__same-as-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	cursor: pointer;
}

.employee-address-section__same-as-checkbox {
	width: 14px;
	height: 14px;
	accent-color: #7c3aed;
}

.employee-employment-record-section__grid-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 12px;
	margin-bottom: 20px;
}

.employee-employment-record-section-edit__grid-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr auto;
	gap: 12px;
	align-items: end;
	margin-bottom: 12px;
}
/* ═══════════════════════════════════════════════════════════
   EMPLOYMENT DETAIL SECTION
═══════════════════════════════════════════════════════════ */

.employee-employment-detail-section__grid-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	gap: 12px;
	margin-bottom: 20px;
}

.employee-employment-detail-section-edit__grid-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 12px;
	margin-bottom: 20px;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
═══════════════════════════════════════════════════════════ */

@media (max-width: 991.98px) {
	.employee-personal-information-section__grid-row {
		grid-template-columns: 1fr 1fr;
	}

	.employee-employment-record-section__grid-row {
		grid-template-columns: 1fr 1fr 1fr;
  }

	.employee-address-section__grid-row--three,
	.employee-address-section__grid-row--four {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 575.98px) {
	.employee-personal-information-section__grid-row {
		grid-template-columns: 1fr;
	}

	.employee-employment-record-section__grid-row {
		grid-template-columns: 1fr;
	}

	.employee-employment-detail-section__grid-row {
		grid-template-columns: 1fr;
	}

	.employee-address-section__grid-row--three,
	.employee-address-section__grid-row--four {
		grid-template-columns: 1fr;
	}
}
/* ── Employee Change Status section ── */
.employee-change-status__warning-label {
  color: #f1416c;
}

.employee-change-status__select-wrapper {
  flex-shrink: 0;
  width: 240px;
}

.employee-change-status__warning-list {
  list-style-type: disc;
}

.employee-status-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 4px 12px;
  font-size: 14px;
  font-weight: 500;
}

.employee-status-badge--active      { background-color: #d8f3ef; color: #2aa48f; }
.employee-status-badge--probation   { background-color: #fff3db; color: #c58b17; }
.employee-status-badge--resigned    { background-color: #f0f0f0; color: #595959; }
.employee-status-badge--blacklisted { background-color: #fff1f0; color: #d4380d; }
.employee-status-badge--pending     { background-color: #eff6ff; color: #3b82f6; }

/* ── Employee index pagination ── */
.employee-index-pagination .page-item.active .page-link {
  background-color: #FFDFFF;
  border-color: #FFDFFF;
  color: #FFFFFF;
}

.employee-index-pagination .page-item:not(.active) .page-link {
  color: #A1A5B7;
}

.employee-index-pagination .page-item:not(.active) .page-link:hover {
  color: #7C3AED;
}

/* ── Active filter indicator bar ───────────────────────────────────────── */
.em-filter-indicator {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.em-filter-indicator__group {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  background: #fff;
  border: 1px solid #E5D8FB;
  border-radius: 8px;
  padding: 5px 10px;
}

.em-filter-indicator__label {
  font-size: 12px;
  font-weight: 600;
  color: #7C3AED;
  white-space: nowrap;
}

.em-filter-indicator__tag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #F1F1F2;
  color: #181C32;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
  border: 1px solid #d9d9d9;
}

.em-filter-indicator__tag:hover {
  background: #e8e8ea;
  color: #5b21b6;
}

/* ── Employee filter modal ─────────────────────────────────────────────── */
.em-filter-modal__content {
  border-radius: 12px;
  border: 1px solid #efe7ff;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(124, 58, 237, 0.08);
}

.em-filter-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.em-filter-modal__header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.em-filter-modal__header-icon {
  width: 20px;
  height: 20px;
}

.em-filter-modal__title {
  font-size: 16px;
  font-weight: 700;
  color: #7c3aed;
}

.em-filter-modal__close {
  font-size: 12px;
}

.em-filter-modal__divider {
  height: 1px;
  background: #efe7ff;
  margin-bottom: 20px;
}

.em-filter-modal__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.em-filter-modal__column {
  padding: 0;
  position: relative;
}

.em-filter-modal__field-label {
  display: block;
  font-size: 12px;
  color: #595959;
  margin-bottom: 8px;
  font-weight: 600;
}

/* Summary bar (acts as dropdown trigger) */
.em-filter-modal__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  font-size: 12px;
  color: #595959;
  background: #fff;
  min-height: 32px;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s;
  max-width: 230px;
  min-width: 0;
}

.em-filter-modal__summary span {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}

.em-filter-modal__summary:hover,
.em-filter-modal__summary.is-open {
  border-color: #7c3aed;
  color: #7c3aed;
}

.em-filter-modal__summary span {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.em-filter-modal__summary-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: #8c8c8c;
  transition: transform 0.2s;
}

.em-filter-modal__summary.is-open .em-filter-modal__summary-chevron {
  transform: rotate(180deg);
}

/* Dropdown checkbox list — hidden by default, shown when open */
.em-filter-modal__checkbox-list {
  display: none;
  flex-direction: column;
  gap: 2px;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1000;
  background: #fff;
  border: 1px solid #ede9fe;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.10);
  padding: 6px;
  max-height: 220px;
  overflow-y: auto;
}

.em-filter-modal__checkbox-list.is-open {
  display: flex;
}

.em-filter-modal__checkbox-list::-webkit-scrollbar {
  width: 4px;
}

.em-filter-modal__checkbox-list::-webkit-scrollbar-track {
  background: transparent;
}

.em-filter-modal__checkbox-list::-webkit-scrollbar-thumb {
  background: #d9d9d9;
  border-radius: 4px;
}

/* Each checkbox row */
.em-filter-modal__checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  color: #262626;
  user-select: none;
}

.em-filter-modal__checkbox-item:hover {
  background: #f5f0ff;
  color: #7c3aed;
}

.em-filter-modal__checkbox {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  accent-color: #7c3aed;
  cursor: pointer;
}

.em-filter-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.em-filter-modal__btn-clear {
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  background: white;
  color: #595959;
  cursor: pointer;
}

.em-filter-modal__btn-apply {
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 500;
  border: none;
  border-radius: 6px;
  background: #7c3aed;
  color: white;
  cursor: pointer;
}

/* ── Active filter indicator bar ───────────────────────────────────────── */
.em-filter-indicator {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.em-filter-indicator__group {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  background: #fff;
  border: 1px solid #E5D8FB;
  border-radius: 8px;
  padding: 5px 10px;
}

.em-filter-indicator__label {
  font-size: 12px;
  font-weight: 600;
  color: #7C3AED;
  white-space: nowrap;
}

.em-filter-indicator__tag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #F1F1F2;
  color: #181C32;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
  border: 1px solid #d9d9d9;
}

.em-filter-indicator__tag:hover {
  background: #e8e8ea;
  color: #5b21b6;
}

/* ── Employee filter modal ─────────────────────────────────────────────── */
.em-filter-modal__content {
  border-radius: 12px;
  border: 1px solid #efe7ff;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(124, 58, 237, 0.08);
}

.em-filter-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.em-filter-modal__header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.em-filter-modal__header-icon {
  width: 20px;
  height: 20px;
}

.em-filter-modal__title {
  font-size: 16px;
  font-weight: 700;
  color: #7c3aed;
}

.em-filter-modal__close {
  font-size: 12px;
}

.em-filter-modal__divider {
  height: 1px;
  background: #efe7ff;
  margin-bottom: 20px;
}

.em-filter-modal__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.em-filter-modal__column {
  padding: 0;
  position: relative;
}

.em-filter-modal__field-label {
  display: block;
  font-size: 12px;
  color: #595959;
  margin-bottom: 8px;
  font-weight: 600;
}

/* Summary bar (acts as dropdown trigger) */
.em-filter-modal__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  font-size: 12px;
  color: #595959;
  background: #fff;
  min-height: 32px;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s;
  max-width: 230px;
  min-width: 0;
}

.em-filter-modal__summary span {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}

.em-filter-modal__summary:hover,
.em-filter-modal__summary.is-open {
  border-color: #7c3aed;
  color: #7c3aed;
}

.em-filter-modal__summary span {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.em-filter-modal__summary-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: #8c8c8c;
  transition: transform 0.2s;
}

.em-filter-modal__summary.is-open .em-filter-modal__summary-chevron {
  transform: rotate(180deg);
}

/* Dropdown checkbox list — hidden by default, shown when open */
.em-filter-modal__checkbox-list {
  display: none;
  flex-direction: column;
  gap: 2px;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1000;
  background: #fff;
  border: 1px solid #ede9fe;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.10);
  padding: 6px;
  max-height: 220px;
  overflow-y: auto;
}

.em-filter-modal__checkbox-list.is-open {
  display: flex;
}

.em-filter-modal__checkbox-list::-webkit-scrollbar {
  width: 4px;
}

.em-filter-modal__checkbox-list::-webkit-scrollbar-track {
  background: transparent;
}

.em-filter-modal__checkbox-list::-webkit-scrollbar-thumb {
  background: #d9d9d9;
  border-radius: 4px;
}

/* Each checkbox row */
.em-filter-modal__checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  color: #262626;
  user-select: none;
}

.em-filter-modal__checkbox-item:hover {
  background: #f5f0ff;
  color: #7c3aed;
}

.em-filter-modal__checkbox {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  accent-color: #7c3aed;
  cursor: pointer;
}

.em-filter-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.em-filter-modal__btn-clear {
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  background: white;
  color: #595959;
  cursor: pointer;
}

.em-filter-modal__btn-apply {
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 500;
  border: none;
  border-radius: 6px;
  background: #7c3aed;
  color: white;
  cursor: pointer;
}
.tb-action-btn-danger {
  color: #f1416c;
  background: #fff;
  border: 1px solid #f1416c !important;
  box-shadow: none;
  font-size: 13px;
  font-weight: 700;
}

.tb-action-btn-danger:hover,
.tb-action-btn-danger:focus {
  color: #d9284e;
  background: #fff5f8;
  border-color: #d9284e;
}