/* =========================
   RANGE FILTER DIALOG (CLEAN)
   ✅ Updated colors:
   Blue: #318fe3
   Gray: #a3a3a3
========================= */

/* WRAPPER */
.range-wrapper {
  position: relative;
}

/* MAIN DIALOG BOX */
.filter-dialog {
  display: none;
  position: absolute;
  top: 105%;
  right: 0;
  left: auto;

  /* ✅ IMPORTANT: remove max-content (causes overflow in flex inputs) */
  width: 280px;
  max-width: 92vw;
  box-sizing: border-box;

  background: #fff;
  border-radius: 6px;
  border: 1px solid #e5e5e5;
  padding: 12px;
  z-index: 9999 !important;

  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.12);
  animation: fadeIn 0.12s ease-out;
}

/* For filters near left edge */
.filter-dialog.align-left-dialog {
  right: auto;
  left: 0;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* HEADER */
.filter-dialog .dialog-header {
  font-size: 0.95rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 10px;
}

/* INPUT ROW */
.filter-dialog .dialog-inputs {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: nowrap;
}

/* ✅ wrappers must be shrinkable */
.filter-dialog .input-wrapper {
  position: relative;
  flex: 1 1 0;
  min-width: 0; /* ✅ critical */
}

/* INPUT */
.filter-dialog .dialog-inputs input {
  width: 100%;
  min-width: 0; /* ✅ critical */
  box-sizing: border-box;

  padding: 6px 10px;
  font-size: 0.9rem;
  border-radius: 6px;

  /* gray */
  border: 1px solid #a3a3a3;

  text-align: center;
}

/* Focus (blue) */
.filter-dialog .dialog-inputs input:focus {
  border-color: #318fe3;
  outline: none;
  box-shadow: 0 0 0 2px rgba(49, 143, 227, 0.18);
}

/* "تا" between (gray) */
.filter-dialog .between-text {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 0.9rem;
  color: #a3a3a3;
}

/* CLEAR X inside input */
.filter-dialog .input-wrapper input {
  padding-right: 26px !important;
}

.filter-dialog .clear-inside {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 16px;

  /* gray */
  color: #a3a3a3;

  display: none;
}

.filter-dialog .clear-inside:hover {
  color: #d00;
}

/* NEARME VALUE (gray) */
.nearme-value {
  font-size: 0.8rem;
  color: #a3a3a3;
  margin-right: 4px;
}

/* ERROR */
.filter-dialog .dialog-error {
  font-size: 0.8rem;
  color: #dc3545;
  margin-top: 4px;
}

.filter-dialog .dialog-inputs input.is-invalid {
  border-color: #dc3545;
  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2);
}

/* SLIDER */
.filter-dialog .slider-container {
  position: relative;
  height: 40px;
  margin-bottom: 10px;
}

.filter-dialog .slider-track {
  position: absolute;
  height: 6px;
  top: 50%;
  transform: translateY(-50%);

  /* gray */
  background: #a3a3a3;

  border-radius: 6px;
  width: 100%;
  overflow: hidden;
}

/* slider fill (blue) */
.filter-dialog .slider-track::before {
  content: "";
  position: absolute;
  height: 100%;
  left: var(--fill-start, 0%);
  right: var(--fill-end, 0%);

  background: linear-gradient(90deg, #318fe3, #318fe3);
}

.filter-dialog .slider-container input[type="range"] {
  position: absolute;
  width: 100%;
  height: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
}

/* thumb (blue) */
.filter-dialog .slider-container input::-webkit-slider-thumb {
  pointer-events: all;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;

  background: #318fe3;

  border-radius: 50%;
  border: 2px solid #fff;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* FOOTER BUTTONS */
.filter-dialog .dialog-footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.filter-dialog .dialog-footer button {
  width: 50%;
}

/* =========================
   SMALL VERSION (filter-dialog-sm)
========================= */
.filter-dialog.filter-dialog-sm {
  width: 210px;
  padding: 6px 8px;
  border-radius: 6px;
}

.filter-dialog.filter-dialog-sm .dialog-header {
  font-size: 0.78rem;
  margin-bottom: 6px;
}

.filter-dialog.filter-dialog-sm .dialog-inputs {
  gap: 6px;
  margin-bottom: 6px;
}

/* ✅ smaller inputs but still inside parent */
.filter-dialog.filter-dialog-sm .dialog-inputs input {
  height: 26px;
  padding: 2px 6px;
  font-size: 0.76rem;
  border-radius: 5px;

  border: 1px solid #a3a3a3;
}

.filter-dialog.filter-dialog-sm .between-text {
  font-size: 0.76rem;
  color: #a3a3a3;
}

/* slider smaller */
.filter-dialog.filter-dialog-sm .slider-container {
  height: 24px;
  margin-bottom: 6px;
}

.filter-dialog.filter-dialog-sm .slider-track {
  height: 3px;
  background: #a3a3a3;
}

.filter-dialog.filter-dialog-sm .slider-container input[type="range"] {
  height: 3px;
}

.filter-dialog.filter-dialog-sm .slider-container input::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  background: #318fe3;
}

/* buttons smaller */
.filter-dialog.filter-dialog-sm .dialog-footer button {
  padding: 2px 0;
  font-size: 0.72rem;
}

/* error smaller */
.filter-dialog.filter-dialog-sm .dialog-error {
  font-size: 0.68rem;
  margin-top: 2px;
}