/**
 * ==============================================================================
 * Central Employee Edit Design System (app-employee-edit.css)
 * Excel / Fluent ERP Ultra-Dense Design System: Exact 26px Field Heights
 * Strictly Teal (#0f766e) & Dark Slate / Black (#0f172a) Theme
 * Crystal-Clear Dropdown Chevron Indicators on ALL Dropdown Fields
 * ==============================================================================
 */

:root {
  --emp-teal: #0f766e;
  --emp-teal-hover: #115e59;
  --emp-teal-light: #f0fdfa;
  --emp-teal-border: #ccfbf1;
  --emp-teal-focus: rgba(15, 118, 110, 0.2);

  --emp-black: #0f172a;
  --emp-black-soft: #334155;
  --emp-label-color: #475569;
  --emp-muted: #64748b;
  --emp-muted-light: #94a3b8;

  --emp-border: #cbd5e1;
  --emp-border-light: #e2e8f0;
  --emp-border-subtle: #f1f5f9;

  --emp-bg-card: #ffffff;
  --emp-bg-soft: #f8fafc;
  --emp-bg-header: #f8fafc;

  --emp-radius: 3px;
  --emp-radius-sm: 2px;

  /* Excel-like Strict Compact Dimensions */
  --emp-field-height: 26px;
  --emp-font-base: 11.5px;
  --emp-font-label: 11px;
}

/* ==============================================================================
   0. HIDE FULL PAGE AND SIDEBAR SCROLLBARS
   ============================================================================== */
html,
body,
.wrapper,
.content-wrapper,
.main-sidebar,
.sidebar,
.nav-sidebar {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.wrapper::-webkit-scrollbar,
.content-wrapper::-webkit-scrollbar,
.main-sidebar::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
.nav-sidebar::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

html,
body,
.main-sidebar,
.sidebar,
.nav-sidebar {
  overflow-x: hidden !important;
}

/* ==============================================================================
   1. SECTION CONTAINER (ZERO EXTRA TOP GAP)
   ============================================================================== */
.emp-edit-section {
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 16px !important;
}

.emp-edit-section .container-fluid {
  padding-left: 6px !important;
  padding-right: 6px !important;
}

/* ==============================================================================
   2. TOP ACTION & HEADER BAR (EXCEL / RIBBON STYLE)
   ============================================================================== */
.emp-header-bar {
  align-items: center !important;
  background: var(--emp-bg-card) !important;
  border: 1px solid var(--emp-border-light) !important;
  border-radius: var(--emp-radius) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px 8px !important;
  justify-content: space-between !important;
  margin-bottom: 4px !important;
  padding: 3px 8px !important;
}

.emp-header-left {
  align-items: center !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px 10px !important;
}

.emp-back-btn {
  align-items: center !important;
  background: var(--emp-bg-soft) !important;
  border: 1px solid var(--emp-border) !important;
  border-radius: var(--emp-radius-sm) !important;
  color: var(--emp-black-soft) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  gap: 4px !important;
  height: 24px !important;
  line-height: 22px !important;
  padding: 0 8px !important;
  text-decoration: none !important;
  transition: all 0.12s ease !important;
}

.emp-back-btn:hover {
  background: var(--emp-teal-light) !important;
  border-color: var(--emp-teal-border) !important;
  color: var(--emp-teal) !important;
}

.emp-header-title-box {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}

.emp-header-title {
  color: var(--emp-black) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

.emp-header-meta {
  align-items: center !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}

.emp-id-badge {
  background: var(--emp-teal-light) !important;
  border: 1px solid var(--emp-teal-border) !important;
  border-radius: var(--emp-radius-sm) !important;
  color: var(--emp-teal) !important;
  font-family: 'Inter', monospace, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 1px 5px !important;
}

.emp-name-badge {
  color: var(--emp-black-soft) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

.emp-status-badge {
  background: var(--emp-bg-soft) !important;
  border: 1px solid var(--emp-border) !important;
  border-radius: 999px !important;
  color: var(--emp-muted) !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  padding: 1px 6px !important;
}

.emp-status-badge.active-status {
  background: var(--emp-teal-light) !important;
  border-color: var(--emp-teal-border) !important;
  color: var(--emp-teal) !important;
}

.emp-header-actions {
  align-items: center !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
}

.emp-btn-secondary {
  align-items: center !important;
  background: #ffffff !important;
  border: 1px solid var(--emp-border) !important;
  border-radius: var(--emp-radius-sm) !important;
  color: var(--emp-black-soft) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  gap: 4px !important;
  height: var(--emp-field-height) !important;
  line-height: calc(var(--emp-field-height) - 2px) !important;
  padding: 0 10px !important;
  text-decoration: none !important;
  transition: all 0.12s ease !important;
}

.emp-btn-secondary:hover {
  background: var(--emp-bg-soft) !important;
  border-color: #94a3b8 !important;
  color: var(--emp-black) !important;
}

.emp-btn-primary {
  align-items: center !important;
  background: var(--emp-teal) !important;
  border: 1px solid var(--emp-teal) !important;
  border-radius: var(--emp-radius-sm) !important;
  box-shadow: 0 1px 2px rgba(15, 118, 110, 0.15) !important;
  color: #ffffff !important;
  cursor: pointer !important;
  display: inline-flex !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  gap: 4px !important;
  height: var(--emp-field-height) !important;
  line-height: calc(var(--emp-field-height) - 2px) !important;
  padding: 0 12px !important;
  transition: all 0.12s ease !important;
}

.emp-btn-primary:hover {
  background: var(--emp-teal-hover) !important;
  border-color: var(--emp-teal-hover) !important;
  box-shadow: 0 2px 4px rgba(15, 118, 110, 0.25) !important;
  color: #ffffff !important;
}

/* ==============================================================================
   3. ENTERPRISE CARD SECTIONS (EXCEL COMPACT)
   ============================================================================== */
.emp-card {
  background: var(--emp-bg-card) !important;
  border: 1px solid var(--emp-border-light) !important;
  border-radius: var(--emp-radius) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02) !important;
  margin-bottom: 4px !important;
  overflow: hidden !important;
}

.emp-card-header {
  align-items: center !important;
  background: var(--emp-bg-header) !important;
  border-bottom: 1px solid var(--emp-border-light) !important;
  display: flex !important;
  justify-content: space-between !important;
  padding: 2.5px 8px !important;
}

.emp-card-title {
  align-items: center !important;
  color: var(--emp-black) !important;
  display: flex !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  gap: 5px !important;
  letter-spacing: 0.03em !important;
  margin: 0 !important;
  text-transform: uppercase !important;
}

.emp-card-title i {
  color: var(--emp-teal) !important;
  font-size: 11.5px !important;
}

.emp-card-body {
  background: #ffffff !important;
  padding: 3px 6px 1px 6px !important;
}

.emp-card-body .row {
  margin-left: -2.5px !important;
  margin-right: -2.5px !important;
}

.emp-card-body .row > [class*="col-"] {
  padding-left: 2.5px !important;
  padding-right: 2.5px !important;
}

/* ==============================================================================
   4. EXCEL-TYPE COMPACT INPUT FIELDS & LABELS (ULTRA-TIGHT VERTICAL RHYTHM)
   ============================================================================== */
.emp-form-group {
  margin-bottom: 2.5px !important;
}

.emp-label {
  color: var(--emp-label-color) !important;
  display: block !important;
  font-size: var(--emp-font-label) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.15 !important;
  margin-bottom: 1.5px !important;
  text-transform: uppercase !important;
}

.emp-required {
  color: #ef4444 !important;
  font-weight: 700 !important;
  margin-left: 2px !important;
}

/* Base Form Control Styles (All Inputs & Dropdowns exactly 26px) */
.emp-edit-section .emp-input,
.emp-edit-section input[type="text"],
.emp-edit-section input[type="email"],
.emp-edit-section input[type="password"],
.emp-edit-section input[type="number"],
.emp-edit-section select,
.emp-edit-section select.emp-input,
.emp-edit-section select.select2,
.emp-edit-section .emp-form-group select,
.emp-edit-section .emp-form-group input {
  background-color: #ffffff !important;
  border: 1px solid var(--emp-border) !important;
  border-radius: var(--emp-radius-sm) !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  color: var(--emp-black) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: var(--emp-font-base) !important;
  font-weight: 500 !important;
  height: var(--emp-field-height) !important;
  min-height: var(--emp-field-height) !important;
  max-height: var(--emp-field-height) !important;
  line-height: calc(var(--emp-field-height) - 2px) !important;
  padding: 0 6px !important;
  transition: border-color 0.12s ease, box-shadow 0.12s ease !important;
  width: 100% !important;
}

/* Standard Inputs background */
.emp-edit-section input[type="text"],
.emp-edit-section input[type="email"],
.emp-edit-section input[type="password"],
.emp-edit-section input[type="number"],
.emp-edit-section input.emp-input {
  background-color: #ffffff !important;
  background-image: none !important;
}

/* ==============================================================================
   5. NATIVE SELECT DROPDOWN INDICATOR — BOLD & CENTERED
   ============================================================================== */
.emp-edit-section select,
.emp-edit-section select.emp-input,
.emp-edit-section .emp-form-group select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%230f766e'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 6px center !important;
  background-size: 13px 13px !important;
  padding: 0 24px 0 6px !important;
  cursor: pointer !important;
}

.emp-edit-section select:hover {
  border-color: #94a3b8 !important;
}

.emp-edit-section input[type="text"]:hover,
.emp-edit-section input[type="email"]:hover,
.emp-edit-section input[type="password"]:hover,
.emp-edit-section input.emp-input:hover {
  border-color: #94a3b8 !important;
}

.emp-edit-section input[type="text"]:focus,
.emp-edit-section input[type="email"]:focus,
.emp-edit-section input[type="password"]:focus,
.emp-edit-section input.emp-input:focus {
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: var(--emp-teal) !important;
  box-shadow: 0 0 0 1px var(--emp-teal) !important;
  outline: none !important;
}

.emp-edit-section select:focus {
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%230f766e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 7px center !important;
  background-size: 11px 11px !important;
  border-color: var(--emp-teal) !important;
  box-shadow: 0 0 0 1px var(--emp-teal) !important;
  outline: none !important;
}

/* Compact Textarea */
.emp-textarea,
.emp-form-group textarea,
.emp-form-group textarea.form-control {
  background: #ffffff !important;
  border: 1px solid var(--emp-border) !important;
  border-radius: var(--emp-radius-sm) !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  color: var(--emp-black) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: var(--emp-font-base) !important;
  font-weight: 500 !important;
  min-height: 32px !important;
  height: 32px !important;
  line-height: 1.25 !important;
  padding: 3px 5px !important;
  resize: vertical !important;
  transition: border-color 0.12s ease, box-shadow 0.12s ease !important;
  width: 100% !important;
}

.emp-textarea:focus,
.emp-form-group textarea:focus {
  border-color: var(--emp-teal) !important;
  box-shadow: 0 0 0 1px var(--emp-teal) !important;
  outline: none !important;
}

/* ==============================================================================
   6. DATEPICKER & PASSWORD INPUT GROUP (EXACT 26PX HEIGHT)
   ============================================================================== */
.emp-edit-section .emp-input-group,
.emp-edit-section .input-group {
  box-sizing: border-box !important;
  display: flex !important;
  height: var(--emp-field-height) !important;
  min-height: var(--emp-field-height) !important;
  max-height: var(--emp-field-height) !important;
  position: relative !important;
  width: 100% !important;
}

.emp-edit-section .emp-input-group .emp-input,
.emp-edit-section .emp-input-group input.datetimepicker-input,
.emp-edit-section .input-group .emp-input {
  border-bottom-right-radius: 0 !important;
  border-top-right-radius: 0 !important;
  flex: 1 1 auto !important;
  height: var(--emp-field-height) !important;
  min-height: var(--emp-field-height) !important;
  max-height: var(--emp-field-height) !important;
  line-height: calc(var(--emp-field-height) - 2px) !important;
  padding: 0 6px !important;
}

.emp-edit-section .emp-input-group-append,
.emp-edit-section .input-group-append {
  box-sizing: border-box !important;
  display: flex !important;
  height: var(--emp-field-height) !important;
  min-height: var(--emp-field-height) !important;
  max-height: var(--emp-field-height) !important;
}

.emp-edit-section .emp-input-group-text,
.emp-edit-section .input-group-text {
  align-items: center !important;
  background: var(--emp-bg-soft) !important;
  border: 1px solid var(--emp-border) !important;
  border-left: 0 !important;
  border-bottom-right-radius: var(--emp-radius-sm) !important;
  border-top-right-radius: var(--emp-radius-sm) !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  box-sizing: border-box !important;
  color: var(--emp-teal) !important;
  cursor: pointer !important;
  display: flex !important;
  font-size: 10px !important;
  height: var(--emp-field-height) !important;
  min-height: var(--emp-field-height) !important;
  max-height: var(--emp-field-height) !important;
  line-height: calc(var(--emp-field-height) - 2px) !important;
  padding: 0 7px !important;
  user-select: none !important;
}

.emp-edit-section .emp-input-group-text:hover,
.emp-edit-section .input-group-text:hover {
  background: var(--emp-teal-light) !important;
  color: var(--emp-teal-hover) !important;
}

/* ==============================================================================
   7. SELECT2 MODERN OVERRIDES (EXACT 26PX HEIGHT MATCHING ALL INPUTS)
   ============================================================================== */
.select2 {
  width: 100% !important;
}

/* Single-select Select2 containers: lock to exact field height */
.emp-edit-section .select2-container:not(.select2-container--emp-project),
.emp-edit-section .select2-container--default:not(.select2-container--emp-project),
.emp-edit-section .select2-container--bootstrap4:not(.select2-container--emp-project) {
  box-sizing: border-box !important;
  display: block !important;
  font-size: var(--emp-font-base) !important;
  height: var(--emp-field-height) !important;
  min-height: var(--emp-field-height) !important;
  max-height: var(--emp-field-height) !important;
  width: 100% !important;
}

.emp-edit-section .select2-container .select2-selection--single,
.emp-edit-section .select2-container--default .select2-selection--single,
.emp-edit-section .select2-container--bootstrap4 .select2-selection--single {
  align-items: center !important;
  background-color: #ffffff !important;
  border: 1px solid var(--emp-border) !important;
  border-radius: var(--emp-radius-sm) !important;
  box-sizing: border-box !important;
  display: flex !important;
  height: var(--emp-field-height) !important;
  min-height: var(--emp-field-height) !important;
  max-height: var(--emp-field-height) !important;
  padding: 0 24px 0 6px !important;
  position: relative !important;
  transition: border-color 0.12s ease, box-shadow 0.12s ease !important;
}

.emp-edit-section .select2-container .select2-selection--single .select2-selection__rendered,
.emp-edit-section .select2-container--default .select2-selection--single .select2-selection__rendered,
.emp-edit-section .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
  color: var(--emp-black) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: var(--emp-font-base) !important;
  font-weight: 500 !important;
  height: calc(var(--emp-field-height) - 2px) !important;
  line-height: calc(var(--emp-field-height) - 2px) !important;
  margin: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  width: 100% !important;
}

/* Select2 Arrow Container — GUARANTEED VERTICAL CENTER-RIGHT */
.emp-edit-section .select2-container .select2-selection--single .select2-selection__arrow,
.emp-edit-section .select2-container--default .select2-selection--single .select2-selection__arrow,
.emp-edit-section .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
  position: absolute !important;
  top: 50% !important;
  right: 6px !important;
  bottom: auto !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  width: 14px !important;
  height: 14px !important;
  pointer-events: none !important;
  display: block !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%230f766e'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 13px 13px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  transition: transform 0.15s ease !important;
}

/* Hide default Select2 b arrow completely to eliminate legacy styles / conflicting themes */
.emp-edit-section .select2-container .select2-selection--single .select2-selection__arrow b,
.emp-edit-section .select2-container--default .select2-selection--single .select2-selection__arrow b,
.emp-edit-section .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b {
  display: none !important;
}

.emp-edit-section .select2-container--open .select2-selection--single .select2-selection__arrow {
  transform: translateY(-50%) rotate(180deg) !important;
}

.emp-edit-section .select2-container--focus .select2-selection--single,
.emp-edit-section .select2-container--open .select2-selection--single {
  border-color: var(--emp-teal) !important;
  box-shadow: 0 0 0 1px var(--emp-teal) !important;
  outline: none !important;
}

/* Select2 Dropdown Popup */
.select2-dropdown {
  background-color: #ffffff !important;
  border: 1px solid var(--emp-border) !important;
  border-radius: var(--emp-radius-sm) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
  font-size: var(--emp-font-base) !important;
  z-index: 1055 !important;
}

.select2-results__option {
  font-size: var(--emp-font-base) !important;
  line-height: 1.2 !important;
  padding: 4px 8px !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected] {
  background-color: var(--emp-teal) !important;
  color: #ffffff !important;
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--bootstrap4 .select2-results__option[aria-selected="true"] {
  background-color: var(--emp-teal-light) !important;
  color: var(--emp-teal) !important;
  font-weight: 600 !important;
}

/* ==============================================================================
   8. SEPARATED ASSIGNED PROJECTS SECTION (INPUT DROPDOWN & ASSIGNED LIST SEPARATE)
   ============================================================================== */
.emp-project-separate-box {
  background: var(--emp-bg-soft) !important;
  border: 1px solid var(--emp-border-light) !important;
  border-radius: var(--emp-radius-sm) !important;
  box-sizing: border-box !important;
  margin-top: 2px !important;
  margin-bottom: 2px !important;
  padding: 5px 7px !important;
  width: 100% !important;
}

.emp-project-assign-row {
  align-items: center !important;
  display: flex !important;
  gap: 5px !important;
  width: 100% !important;
}

.emp-project-assign-row .select2-container {
  flex: 1 1 auto !important;
  min-width: 180px !important;
}

.emp-btn-assign-project {
  align-items: center !important;
  background: var(--emp-teal) !important;
  border: 1px solid var(--emp-teal) !important;
  border-radius: var(--emp-radius-sm) !important;
  color: #ffffff !important;
  cursor: pointer !important;
  display: inline-flex !important;
  flex-shrink: 0 !important;
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  gap: 4px !important;
  height: var(--emp-field-height) !important;
  line-height: calc(var(--emp-field-height) - 2px) !important;
  padding: 0 10px !important;
  transition: all 0.12s ease !important;
  white-space: nowrap !important;
}

.emp-btn-assign-project:hover {
  background: var(--emp-teal-hover) !important;
  border-color: var(--emp-teal-hover) !important;
  color: #ffffff !important;
}

.emp-assigned-summary {
  align-items: center !important;
  display: flex !important;
  justify-content: flex-end !important;
}

.emp-count-pill {
  background: var(--emp-teal-light) !important;
  border: 1px solid var(--emp-teal-border) !important;
  border-radius: 999px !important;
  color: var(--emp-teal) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  padding: 1.5px 6px !important;
}

.emp-project-hint {
  color: var(--emp-muted) !important;
  font-size: 9px !important;
  font-weight: 500 !important;
}

.emp-assigned-list-card {
  background: #ffffff !important;
  border: 1px solid var(--emp-border-light) !important;
  border-radius: var(--emp-radius-sm) !important;
  box-sizing: border-box !important;
  margin-top: 4px !important;
  padding: 4px 6px !important;
  width: 100% !important;
}

.emp-assigned-list-header {
  align-items: center !important;
  border-bottom: 1px solid var(--emp-border-subtle) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px 10px !important;
  justify-content: space-between !important;
  margin-bottom: 3px !important;
  padding-bottom: 2px !important;
}

.emp-assigned-list-title {
  align-items: center !important;
  color: var(--emp-black) !important;
  display: flex !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  gap: 5px !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}

.emp-assigned-chips-wrap {
  align-items: center !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 3px 5px !important;
  min-height: 24px !important;
  width: 100% !important;
}

.emp-project-badge {
  align-items: center !important;
  background: var(--emp-teal-light) !important;
  border: 1px solid var(--emp-teal-border) !important;
  border-left: 2.5px solid var(--emp-teal) !important;
  border-radius: var(--emp-radius-sm) !important;
  box-sizing: border-box !important;
  color: var(--emp-teal) !important;
  display: inline-flex !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  gap: 4px !important;
  height: 21px !important;
  line-height: 19px !important;
  padding: 0 6px !important;
  transition: all 0.12s ease !important;
}

.emp-project-badge:hover {
  background: #e6fffa !important;
  border-color: #99f6e4 !important;
}

.emp-badge-text {
  color: var(--emp-black-soft) !important;
  font-weight: 500 !important;
  max-width: 360px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.emp-badge-remove {
  align-items: center !important;
  background: transparent !important;
  border: none !important;
  border-radius: 50% !important;
  color: var(--emp-muted) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  height: 16px !important;
  justify-content: center !important;
  line-height: 1 !important;
  margin-left: 2px !important;
  padding: 0 !important;
  transition: all 0.12s ease !important;
  width: 16px !important;
}

.emp-badge-remove:hover {
  background: #fee2e2 !important;
  color: #ef4444 !important;
}

.emp-no-projects-msg {
  color: var(--emp-muted) !important;
  font-size: 10px !important;
  font-style: italic !important;
  padding: 4px 2px !important;
}

/* ==============================================================================
   9. ADDRESS SUB-SECTION
   ============================================================================== */
.emp-sub-section {
  border-top: 1px solid var(--emp-border-subtle) !important;
  margin-top: 2px !important;
  padding-top: 3px !important;
}

.emp-sub-label {
  color: var(--emp-teal) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 2px !important;
  text-transform: uppercase !important;
}

.emp-sub-icon {
  margin-right: 3px !important;
}

/* ==============================================================================
   10. DOCUMENT ATTACHMENT TILES (PHOTO, CV, SIGNATURE)
   ============================================================================== */
.emp-attach-tile {
  background: var(--emp-bg-soft) !important;
  border: 1px solid var(--emp-border-light) !important;
  border-radius: var(--emp-radius-sm) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  height: 100% !important;
  padding: 4px 6px !important;
  transition: all 0.12s ease !important;
}

.emp-attach-tile:hover {
  border-color: var(--emp-teal-border) !important;
}

.emp-attach-header {
  align-items: center !important;
  display: flex !important;
  justify-content: space-between !important;
}

.emp-attach-title {
  align-items: center !important;
  color: var(--emp-black) !important;
  display: flex !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  gap: 4px !important;
  text-transform: uppercase !important;
}

.emp-attach-title i {
  color: var(--emp-teal) !important;
  font-size: 11px !important;
}

.emp-attach-preview-box {
  align-items: center !important;
  background: #ffffff !important;
  border: 1px dashed var(--emp-border) !important;
  border-radius: var(--emp-radius-sm) !important;
  display: flex !important;
  height: 42px !important;
  justify-content: center !important;
  overflow: hidden !important;
  position: relative !important;
}

.emp-attach-img {
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
}

.emp-attach-no-file {
  align-items: center !important;
  color: var(--emp-muted-light) !important;
  display: flex !important;
  flex-direction: column !important;
  font-size: 9.5px !important;
  gap: 1px !important;
}

.emp-attach-no-file i {
  font-size: 14px !important;
}

.emp-cv-active {
  color: var(--emp-teal) !important;
}

.emp-cv-link {
  color: var(--emp-teal) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
}

.emp-cv-link:hover {
  color: var(--emp-teal-hover) !important;
}

.emp-file-input {
  font-size: 9.5px !important;
  width: 100% !important;
}

.emp-file-input::-webkit-file-upload-button {
  background: var(--emp-teal-light) !important;
  border: 1px solid var(--emp-teal-border) !important;
  border-radius: 2px !important;
  color: var(--emp-teal) !important;
  cursor: pointer !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  padding: 1px 6px !important;
  transition: all 0.12s ease !important;
}

.emp-file-input::-webkit-file-upload-button:hover {
  background: var(--emp-teal) !important;
  color: #ffffff !important;
}

/* ==============================================================================
   11. BOTTOM FOOTER BAR
   ============================================================================== */
.emp-footer-bar {
  align-items: center !important;
  background: var(--emp-bg-card) !important;
  border: 1px solid var(--emp-border-light) !important;
  border-radius: var(--emp-radius) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02) !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  margin-top: 6px !important;
  padding: 6px 10px !important;
}

/* ==============================================================================
   12. RESPONSIVE
   ============================================================================== */
@media (max-width: 767.98px) {
  .emp-header-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  
  .emp-header-actions {
    width: 100% !important;
    justify-content: flex-end !important;
  }
}