/* =========================================================
 * FormValidation + KTUI Helper
 * Author: KTUI / Tailwind friendly
 * ========================================================= */

/* ===============================
 * Error message (text)
 * =============================== */
.fv-plugins-message-container.invalid-feedback {
  display: block;
  margin-top: 0.25rem; /* kecil & rapi */
}

.fv-plugins-message-container.invalid-feedback > div {
  color: #f1416c;        /* KTUI danger */
  font-size: 0.75rem;    /* text-xs */
  line-height: 1.25;
  font-weight: 400;
  margin-left: 10px;
}

/* ===============================
 * Input / Textarea state
 * =============================== */
.kt-input.fv-plugins-invalid,
.kt-textarea.fv-plugins-invalid {
  border-color: #f1416c; /* danger */
}

.kt-input.fv-plugins-valid,
.kt-textarea.fv-plugins-valid {
  border-color: #50cd89; /* success */
}

/* ===============================
 * KTUI Select state
 * =============================== */
/* native select (fallback) */
.kt-select.fv-plugins-invalid {
  border-color: #f1416c;
}

/* wrapper select KTUI */
.kt-select-wrapper.fv-plugins-invalid,
.kt-select-wrapper .fv-plugins-invalid {
  border-color: #f1416c;
}

/* ===============================
 * Focus state (biar konsisten)
 * =============================== */
.kt-input.fv-plugins-invalid:focus,
.kt-textarea.fv-plugins-invalid:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(241, 65, 108, 0.15);
}

/* ===============================
 * Success state (opsional)
 * =============================== */
.kt-input.fv-plugins-valid:focus,
.kt-textarea.fv-plugins-valid:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(80, 205, 137, 0.15);
}

/* ===============================
 * Compact mode (optional)
 * Tambahkan class .fv-compact di form
 * =============================== */
.fv-compact .fv-plugins-message-container.invalid-feedback {
  margin-top: 0.125rem;
}

.fv-compact .fv-plugins-message-container.invalid-feedback > div {
  font-size: 0.6875rem; /* lebih kecil */
}

/* Table Body Smooth row hover */
  tbody tr {
    transition: background-color .18s ease;
  }
  tbody tr:hover {
    background-color: rgba(15, 23, 42, .03);
  }
  .sort-icon i {
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .sort-icon i.rotate-180 {
    transform: rotate(360deg);
  }