/* edit-employee-form.css (FULL FILE)
   Paste your entire CSS here; I kept your original as-is
   and appended the complete Documents (V3) + Bulk Upload blocks.
*/

/* ===== Karti Brand Tokens ===== */
:root{
  --karti-primary: #2F7BFF;
  --karti-primary-600: #1F63F2;
  --karti-primary-50: #EEF5FF;
  --karti-bg: #F4FBFF;
  --karti-card: #FFFFFF;
  --karti-border: rgba(15, 23, 42, .12);
  --karti-text: #0F172A;
  --karti-muted: rgba(15, 23, 42, .65);
  --karti-shadow: 0 12px 30px rgba(15, 23, 42, .08);
  --karti-radius: 16px;
}

/* Make inputs/icons behave well in RTL */
.karti-rtl input,
.karti-rtl textarea{ text-align: right; }
.karti-rtl .text-start{ text-align: right !important; }
.karti-rtl .text-end{ text-align: left !important; }

/* ===== Scope: Only inside employee edit wizard steps ===== */
.karti-emp-edit{
  max-width: 1100px;
  margin-inline: auto;
}

/* Row spacing */
.karti-emp-edit .row.form-group{ margin-bottom: 14px; }

/* Labels */
.karti-emp-edit .form-label,
.karti-emp-edit label.form-label{
  font-weight: 700;
  color: var(--karti-text);
}

/* Current markup uses label col with flex-end */
.karti-emp-edit .row.form-group > label{
  color: var(--karti-text);
  font-weight: 700;
}

/* Help / small text */
.karti-emp-edit small,
.karti-emp-edit .text-muted{
  color: var(--karti-muted) !important;
}

/* Controls */
.karti-emp-edit .form-control,
.karti-emp-edit .form-select,
.karti-emp-edit select.form-control{
  border-radius: 14px;
  border: 1px solid var(--karti-border);
  padding: .65rem .9rem;
  background: #fff;
  box-shadow: none;
  min-height: 44px;
}
.karti-emp-edit .form-control:focus,
.karti-emp-edit .form-select:focus{
  border-color: rgba(47, 123, 255, .55);
  box-shadow: 0 0 0 4px rgba(47, 123, 255, .14);
}

/* Buttons */
.karti-emp-edit .btn{
  border-radius: 14px;
  padding: .6rem 1.15rem;
  font-weight: 700;
}
.karti-emp-edit .btn-primary{
  background: var(--karti-primary);
  border-color: var(--karti-primary);
}
.karti-emp-edit .btn-primary:hover{
  background: var(--karti-primary-600);
  border-color: var(--karti-primary-600);
}
.karti-emp-edit .btn-secondary,
.karti-emp-edit .btn-light{
  background: #F1F5F9;
  border-color: rgba(15, 23, 42, .10);
  color: var(--karti-text);
}

/* Cards */
.karti-emp-edit .card{
  border-radius: var(--karti-radius);
  border: 1px solid rgba(15, 23, 42, .10);
  box-shadow: var(--karti-shadow);
  overflow: hidden;
}
.karti-emp-edit .card .card-body{ padding: 18px; }

/* Weekend chips */
.karti-emp-edit .karti-weekday-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.12);
  background: #fff;
  cursor: pointer;
  user-select:none;
  transition: .15s ease;
  font-weight: 700;
  color: var(--karti-text);
}
.karti-emp-edit .karti-weekday-pill input{ margin: 0; }
.karti-emp-edit .karti-weekday-pill.is-active{
  border-color: rgba(47,123,255,.50);
  background: var(--karti-primary-50);
  box-shadow: 0 0 0 3px rgba(47,123,255,.12);
}

/* Holidays list box */
.karti-emp-edit .karti-holidays-box{
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 14px;
  padding: 10px;
  background: #fff;
  max-height: 320px;
  overflow: auto;
}

/* Switch alignment in RTL */
.karti-rtl .form-switch{ padding-right: 2.5em; padding-left: 0; }
.karti-rtl .form-switch .form-check-input{
  float: right;
  margin-right: -2.5em;
  margin-left: 0;
}

/* Select2 */
.karti-rtl .select2-container{ direction: rtl; text-align: right; }
.karti-rtl .select2-container--default .select2-selection--multiple{
  border-radius: 14px;
  border: 1px solid var(--karti-border);
  min-height: 44px;
  padding: 6px 10px;
}
.karti-rtl .select2-container--default .select2-selection--multiple .select2-selection__choice{
  border: 1px solid rgba(47,123,255,.25);
  background: var(--karti-primary-50);
  color: var(--karti-text);
  border-radius: 999px;
  padding: 4px 10px;
}

/* Holiday extras */
.karti-emp-edit .karti-group-title{
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--karti-text);
  margin-bottom: 10px;
}
.karti-emp-edit .holiday-header-meta{ gap: 12px; }
.karti-emp-edit .holiday-count{
  font-size: 12px;
  color: var(--karti-muted);
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, .08);
  padding: 6px 10px;
  border-radius: 999px;
}
.karti-emp-edit .holiday-group-list{ padding-right: 4px; }
.karti-emp-edit .holiday-item{ padding: 4px 6px; border-radius: 8px; }
.karti-emp-edit .holiday-item:hover{ background: rgba(15, 23, 42, .04); }
.karti-emp-edit .holiday-sub-title{ font-weight: 700; margin: 8px 0 4px; }

/* Footer actions spacing */
.karti-emp-edit .karti-actions{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

/* Mobile: stack label above input */
@media (max-width: 768px){
  .karti-emp-edit .row.form-group > label{
    justify-content: flex-start !important;
    margin-bottom: 6px;
  }
}

.k-step .num{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;border:1px solid #e6eaf0}
.k-step.active{background:#eaf2ff;border-color:#3b82f6}
.k-step.active .num{background:#3b82f6;color:#fff;border-color:#3b82f6}
.k-step.done .num{background:#22c55e;color:#fff;border-color:#22c55e}
.k-footer{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;border-top:1px solid #e6eaf0}
.k-btn-primary{background:#3b82f6;color:#fff;border:none;border-radius:10px;padding:10px 16px;font-weight:700}
.k-btn-ghost{background:#f1f5f9;border:1px solid #e6eaf0;border-radius:10px;padding:10px 16px;font-weight:700}

/* =========================
   Karti Validation Styling
   ========================= */

/* 1) Top error alert (alert-danger) */
.karti-emp-wizard .alert.alert-danger{
  background: #FFF1F2;
  border: 1px solid rgba(244, 63, 94, .28);
  color: #9F1239;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
  position: relative;
  overflow: hidden;
}
.karti-emp-wizard .alert.alert-danger::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:6px;
  background: rgba(244, 63, 94, .55);
}
.karti-emp-wizard .alert.alert-danger ul{ margin: 0; padding-left: 22px; }
.karti-rtl .karti-emp-wizard .alert.alert-danger ul{ padding-left: 0; padding-right: 22px; }

/* 2) Inline error text */
.karti-emp-edit .error,
.karti-emp-edit .error.text-danger,
.karti-emp-edit span.error,
.karti-emp-edit small.error{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #FFF1F2;
  border: 1px solid rgba(244, 63, 94, .22);
  color: #9F1239 !important;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.1;
}
.karti-emp-edit .error::before,
.karti-emp-edit span.error::before,
.karti-emp-edit small.error::before{
  content: "!";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(244, 63, 94, .20);
  border: 1px solid rgba(244, 63, 94, .28);
  font-weight: 900;
  font-size: 12px;
}

/* 3) Invalid controls look */
.karti-emp-edit .form-control.is-invalid,
.karti-emp-edit .form-select.is-invalid,
.karti-emp-edit select.form-control.is-invalid{
  border-color: rgba(244, 63, 94, .55) !important;
  box-shadow: 0 0 0 4px rgba(244, 63, 94, .12) !important;
  background-image: none !important;
}
.karti-emp-edit .has-error .form-control,
.karti-emp-edit .has-error .form-select{
  border-color: rgba(244, 63, 94, .55) !important;
  box-shadow: 0 0 0 4px rgba(244, 63, 94, .12) !important;
}

/* 4) invalid-feedback */
.karti-emp-edit .invalid-feedback{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #FFF1F2;
  border: 1px solid rgba(244, 63, 94, .22);
  color: #9F1239;
  font-weight: 700;
  font-size: 12px;
}
.karti-emp-edit .invalid-feedback::before{
  content:"!";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display:grid;
  place-items:center;
  background: rgba(244, 63, 94, .20);
  border: 1px solid rgba(244, 63, 94, .28);
  font-weight: 900;
  font-size: 12px;
}

/* success */
.karti-emp-edit .form-control.is-valid,
.karti-emp-edit .form-select.is-valid,
.karti-emp-edit .select2-container.is-valid .select2-selection{
  border-color: rgba(34, 197, 94, .60) !important;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, .14) !important;
}
.karti-emp-edit .form-control.is-valid:focus,
.karti-emp-edit .form-select.is-valid:focus{
  box-shadow: 0 0 0 5px rgba(34, 197, 94, .18) !important;
}

/* ==============================
   Employee documents tab (V3)
   ============================== */

.karti-emp-edit .k-doc-section{
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 18px;
  padding: 16px;
  background: #fff;
}
.karti-emp-edit .k-doc-section__header{ margin-bottom: 12px; }
.karti-emp-edit .k-doc-section__header h5{
  font-weight: 900;
  margin: 0 0 4px;
  font-size: 16px;
  letter-spacing: .01em;
}
.karti-emp-edit .k-doc-section__header p{
  margin: 0;
  font-size: 12px;
  color: var(--karti-muted);
  line-height: 1.4;
}

.karti-emp-edit .k-doc-card{
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 16px;
  padding: 12px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 172px;
  transition: .15s ease;
}
.karti-emp-edit .k-doc-card:hover{
  border-color: rgba(47, 123, 255, .22);
  box-shadow: 0 10px 26px rgba(15, 23, 42, .06);
}

.karti-emp-edit .k-doc-card__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 22px;
}
.karti-emp-edit .k-doc-card__title{
  font-weight: 900;
  font-size: 13px;
  color: var(--karti-text);
  min-width: 0;
}
.karti-emp-edit .k-doc-card__status{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.karti-emp-edit .k-doc-card__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.karti-emp-edit .k-doc-card__actions .btn{
  padding: .45rem .75rem;
  border-radius: 12px;
  font-weight: 800;
}
.karti-emp-edit .k-doc-hint{
  font-size: 11px;
  color: var(--karti-muted);
  line-height: 1.35;
}

.karti-emp-edit .k-doc-constraints{
  font-size: 11px;
  color: var(--karti-muted);
  margin-top: -2px;
}
.karti-emp-edit .k-doc-constraints--global{
  margin-top: 0;
  margin-bottom: 6px;
  font-weight: 700;
}
.karti-emp-edit .k-doc-section-sep{
  border: none;
  border-top: 1px solid rgba(15,23,42,.08);
  margin: 16px 0 4px;
}

.karti-emp-edit .k-doc-meta{ display: grid; gap: 2px; }
.karti-emp-edit .k-doc-meta__row{
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.karti-emp-edit .k-doc-meta__label{
  font-size: 11px;
  font-weight: 900;
  color: rgba(15,23,42,.55);
  white-space: nowrap;
}
.karti-emp-edit .k-doc-meta__value{
  font-size: 12px;
  font-weight: 800;
  color: var(--karti-text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.karti-emp-edit .k-doc-meta__value--ok{ color:#15803d; }
.karti-emp-edit .k-doc-meta__value--muted{ color: rgba(15,23,42,.45); }
.karti-emp-edit .k-doc-meta__ok-icon{
  font-size: 11px;
  color: #15803d;
  flex: 0 0 auto;
}
.karti-emp-edit .k-doc-meta__sep{
  color: rgba(15,23,42,.30);
  font-size: 11px;
  flex: 0 0 auto;
}
.karti-emp-edit .k-doc-meta__date{
  color: rgba(15,23,42,.50);
  font-size: 11px;
}

.karti-emp-edit .k-doc-empty{
  font-size: 11px;
  font-weight: 800;
  color: rgba(15,23,42,.50);
}

.karti-emp-edit .k-doc-badge{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  border: 1px solid transparent;
  white-space: nowrap;
}
.karti-emp-edit .k-doc-badge--image{
  background: rgba(14, 165, 233, .12);
  border-color: rgba(14, 165, 233, .26);
  color: #0369a1;
}
.karti-emp-edit .k-doc-badge--pdf{
  background: rgba(239, 68, 68, .12);
  border-color: rgba(239, 68, 68, .26);
  color: #b91c1c;
}
.karti-emp-edit .k-doc-badge--file{
  background: rgba(15, 23, 42, .06);
  border-color: rgba(15, 23, 42, .14);
  color: #0f172a;
}

.karti-emp-edit .k-doc-preview{
  border: 1px dashed rgba(15, 23, 42, .18);
  border-radius: 14px;
  padding: 10px;
  min-height: 76px;
  background: linear-gradient(180deg, rgba(47,123,255,.06), rgba(255,255,255,0));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.karti-emp-edit .k-doc-preview:hover{ border-color: rgba(47,123,255,.30); }
.karti-emp-edit .k-doc-preview.is-clickable{ cursor: pointer; }
.karti-emp-edit .k-doc-preview.is-clickable:hover{
  border-color: rgba(47,123,255,.45);
  box-shadow: 0 12px 26px rgba(15, 23, 42, .10);
}
.karti-emp-edit .k-doc-preview.is-drag-over{
  border-style: solid;
  border-color: rgba(47,123,255,.60);
  background: rgba(47,123,255,.06);
  box-shadow: 0 0 0 4px rgba(47,123,255,.14);
}

/* Document preview modal */
.k-doc-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.k-doc-modal.is-open{ display: flex; }
.k-doc-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .55);
}
.k-doc-modal__content{
  position: relative;
  z-index: 1;
  width: min(960px, 92vw);
  max-height: 88vh;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 30px 60px rgba(15, 23, 42, .25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.k-doc-modal__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(15, 23, 42, .10);
}
.k-doc-modal__title{
  font-weight: 800;
  font-size: 14px;
}
.k-doc-modal__close{
  background: #f1f5f9;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.k-doc-modal__body{
  padding: 16px;
  overflow: auto;
  flex: 1 1 auto;
}
.k-doc-modal__media img{
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}
.k-doc-modal__media iframe{
  width: 100%;
  height: min(70vh, 720px);
  border: none;
  border-radius: 12px;
}
.karti-emp-edit .k-doc-preview.has-preview{
  border-style: solid;
  border-color: rgba(47, 123, 255, .30);
  background: #fff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .06);
  animation: kDocPop .18s ease;
}
@keyframes kDocPop{
  from{ transform: scale(.985); opacity: .75; }
  to{ transform: scale(1); opacity: 1; }
}
.karti-emp-edit .k-doc-preview__empty{
  font-size: 12px;
  font-weight: 800;
  color: rgba(15,23,42,.45);
}
.karti-emp-edit .k-doc-preview__body{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}
.karti-rtl .k-doc-preview__body{
  text-align: right;
  direction: rtl;
}

.karti-emp-edit .k-doc-preview__img{
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(15, 23, 42, .08);
  background: #fff;
  transition: transform .18s ease, box-shadow .18s ease;
  cursor: zoom-in;
}
.karti-emp-edit .k-doc-preview:hover .k-doc-preview__img{
  transform: scale(1.12);
  box-shadow: 0 14px 28px rgba(15,23,42,.18);
}
@media (max-width: 768px){
  .karti-emp-edit .k-doc-preview:hover .k-doc-preview__img{ transform: scale(1.06); }
}

.karti-emp-edit .k-doc-preview__icon{
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, .06);
  color: #0f172a;
  font-size: 20px;
}
.karti-emp-edit .k-doc-preview__icon--pdf{
  background: rgba(239, 68, 68, .12);
  color: #b91c1c;
}
.karti-emp-edit .k-doc-preview__meta{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.karti-emp-edit .k-doc-preview__badge{
  font-size: 11px;
  font-weight: 900;
  color: var(--karti-primary-600);
}
.karti-emp-edit .k-doc-preview__name{
  font-size: 12px;
  font-weight: 800;
  color: var(--karti-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Picker row */
.karti-emp-edit .k-doc-picker{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
}
.karti-emp-edit .k-doc-picker .k-doc-input{
  flex: 1 1 240px;
  min-width: 220px;
}

/* Clear button */
.karti-emp-edit .k-doc-clear{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 16px;
  white-space: nowrap;
  border-radius: 12px;
}
.karti-emp-edit .k-doc-save-one{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 116px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 14px;
  white-space: nowrap;
  font-weight: 700;
  line-height: 1;
}
.karti-emp-edit .k-doc-save-one i,
.karti-emp-edit .k-doc-clear i{
  flex: 0 0 auto;
}
.karti-emp-edit .k-doc-clear:disabled{
  opacity: .55;
  cursor: not-allowed;
}
.karti-emp-edit .k-doc-save-one:disabled{
  opacity: .45;
  cursor: not-allowed;
  pointer-events: all !important;
}

/* Important docs priority */
.karti-emp-edit .k-doc-card[data-doc-key="employee_id_document"],
.karti-emp-edit .k-doc-card[data-doc-key="contract_document"],
.karti-emp-edit .k-doc-card[data-doc-key="work_permits"]{
  border-color: rgba(47,123,255,.35);
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
}
.karti-emp-edit .k-doc-card[data-doc-key="employee_id_document"] .k-doc-card__title::after,
.karti-emp-edit .k-doc-card[data-doc-key="contract_document"] .k-doc-card__title::after,
.karti-emp-edit .k-doc-card[data-doc-key="work_permits"] .k-doc-card__title::after{
  content: "Important";
  display: inline-flex;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 800;
  border-radius: 999px;
  background: var(--karti-primary-50);
  border: 1px solid rgba(47,123,255,.25);
  color: var(--karti-primary-600);
}
.karti-rtl .k-doc-card[data-doc-key="employee_id_document"] .k-doc-card__title::after,
.karti-rtl .k-doc-card[data-doc-key="contract_document"] .k-doc-card__title::after,
.karti-rtl .k-doc-card[data-doc-key="work_permits"] .k-doc-card__title::after{
  margin-left: 0;
  margin-right: 8px;
}

/* Bulk upload */
.karti-emp-edit .k-doc-bulk{
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 16px;
  padding: 12px;
  background: #fff;
}
.karti-emp-edit .k-doc-bulk__head{
  display:flex;
  flex-direction:column;
  gap: 2px;
  margin-bottom: 10px;
}
.karti-emp-edit .k-doc-bulk__title{
  font-weight: 900;
  font-size: 14px;
  color: var(--karti-text);
}
.karti-emp-edit .k-doc-bulk__hint{
  font-size: 12px;
  color: var(--karti-muted);
}
.karti-emp-edit .k-doc-bulk__row{
  display:flex;
  gap: 8px;
  align-items:center;
}
.karti-emp-edit .k-doc-bulk__log{
  margin-top: 10px;
  font-size: 12px;
  color: var(--karti-text);
  display:grid;
  gap: 6px;
}
.karti-emp-edit .k-doc-bulk__log .ok{ color:#15803d; font-weight:800; }
.karti-emp-edit .k-doc-bulk__log .warn{ color:#b45309; font-weight:800; }
.karti-emp-edit .k-doc-bulk__log .bad{ color:#b91c1c; font-weight:800; }

/* Print-friendly */
@media print{
  .karti-emp-edit .k-doc-picker,
  .karti-emp-edit .k-doc-clear,
  .karti-emp-edit .btn,
  .karti-emp-edit input[type="file"],
  .karti-emp-edit .k-doc-preview,
  .karti-emp-edit .k-doc-bulk{
    display: none !important;
  }
  .karti-emp-edit .k-doc-section{
    border: 1px solid #ddd !important;
    box-shadow: none !important;
  }
  .karti-emp-edit .k-doc-card{
    break-inside: avoid;
    page-break-inside: avoid;
    box-shadow: none !important;
  }
}

@media (max-width: 767.98px){
  .karti-emp-edit .k-doc-picker{
    flex-direction: column;
    align-items: stretch;
  }
  .karti-emp-edit .k-doc-picker .k-doc-input,
  .karti-emp-edit .k-doc-clear,
  .karti-emp-edit .k-doc-save-one{
    width: 100%;
    min-width: 0;
  }
}