/* ============================================================
   form.css — فرم‌ها و فیلدهای مدرن (Navy / Teal)
   ============================================================ */

.field label{
  display:block;color:var(--muted);font-size:10.5px;
  margin-bottom:6px;font-weight:600;
}

.field input,
.field select{
  width:100%;height:44px;
  background:#fff;
  border:1.5px solid var(--line-strong);
  border-radius:12px;
  padding:0 13px;color:var(--txt);outline:none;
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease);
  font-weight:500;
}
.field input::placeholder{color:#9AA7B8;font-weight:400}
.field input:focus,
.field select:focus{
  border-color:var(--teal);
  box-shadow:0 0 0 4px rgba(20,184,166,.15);
  background:#FDFFFE;
}

.filterrow{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-top:11px}

.check{
  display:flex;align-items:center;gap:7px;
  font-size:11px;color:var(--muted);font-weight:500;cursor:pointer;
}
.check input{accent-color:var(--teal);width:16px;height:16px;cursor:pointer}

.range{position:relative;padding:7px 0}
.range input[type=range]{width:100%;accent-color:var(--teal)}
.rangevalues{
  display:flex;justify-content:space-between;
  color:var(--muted);font-size:10px;
  font-variant-numeric:tabular-nums;
}

.searchbar{display:flex;gap:9px;align-items:center}
.searchbar input{
  flex:1;min-width:0;height:48px;
  background:var(--s2);
  border:1.5px solid transparent;
  border-radius:var(--r-pill);
  padding:0 16px;outline:none;
  font-size:12.5px;color:var(--txt);
  transition:background var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.searchbar input::placeholder{color:#9AA7B8}
.searchbar input:focus{
  background:#fff;border-color:var(--teal);
  box-shadow:0 0 0 4px rgba(20,184,166,.15);
}

.iconbtn{
  position:relative;flex:none;width:48px;height:48px;
  border-radius:50%;
  border:1.5px solid var(--line-strong);
  background:#fff;color:var(--p);
  display:grid;place-items:center;
  transition:background var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t-fast) var(--ease);
}
.iconbtn:hover{background:var(--pc);border-color:#BAE0F7}
.iconbtn:active{transform:scale(.94)}
.iconbtn .material-symbols-rounded{font-size:22px}

.filterdot{
  position:absolute;top:-5px;inset-inline-end:-5px;
  min-width:19px;height:19px;border-radius:var(--r-pill);
  background:linear-gradient(135deg,var(--teal),var(--teal-600));
  color:#fff;font-size:10px;font-weight:800;
  display:none;place-items:center;padding:0 5px;
  border:2px solid #fff;
  box-shadow:0 4px 10px -3px rgba(20,184,166,.6);
}
.filterdot.on{display:grid}

.receiptbox{
  display:block;border:1.5px dashed #C7BFD6;
  border-radius:var(--r-md);
  background:linear-gradient(180deg,#FAFCFF,#F2F6FB);
  padding:18px;text-align:center;
  color:var(--muted);font-size:10.5px;
  cursor:pointer;font-weight:600;
  transition:border-color var(--t) var(--ease), background var(--t) var(--ease), color var(--t) var(--ease);
}
.receiptbox:hover,
.receiptbox.drag{
  border-color:var(--teal);
  background:linear-gradient(180deg,#F0FDFA,#E6FFFB);
  color:var(--teal-700);
}
.receiptbox input{display:none}

.receipt-preview{margin-top:10px;text-align:center}
.receipt-preview img{
  max-width:100%;max-height:200px;
  border-radius:var(--r-sm);
  border:1px solid var(--line);
  box-shadow:var(--sh-sm);
}

.slidehead{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.slidehead label{font-size:10.5px;color:var(--muted)}
.slidehead .badge{
  background:linear-gradient(135deg,var(--p),var(--p-600));
  color:#fff;font-weight:700;font-size:11px;
  padding:4px 12px;border-radius:var(--r-pill);
  box-shadow:var(--sh-brand);
}

input[type=range].nice{
  -webkit-appearance:none;appearance:none;
  width:100%;height:24px;background:transparent;
  outline:none;margin:0;cursor:pointer;
  direction:rtl;accent-color:var(--teal);
}
input[type=range].nice::-webkit-slider-runnable-track{
  height:7px;border-radius:var(--r-pill);background:var(--track,#E2E8F0);
}
input[type=range].nice::-moz-range-track{
  height:7px;border-radius:var(--r-pill);background:var(--track,#E2E8F0);
}
input[type=range].nice::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:22px;height:22px;border-radius:50%;
  background:#fff;
  border:3px solid var(--accent,var(--teal));
  margin-top:-7.5px;
  box-shadow:0 3px 10px -2px rgba(10,37,64,.28), 0 0 0 6px rgba(20,184,166,.14);
  transition:transform var(--t-fast) var(--ease);
}
input[type=range].nice:active::-webkit-slider-thumb{transform:scale(1.1)}
input[type=range].nice::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;
  background:#fff;border:3px solid var(--accent,var(--teal));
  box-shadow:0 3px 10px -2px rgba(10,37,64,.28);
}

.scale{display:flex;justify-content:space-between;font-size:10px;color:#94A3B8;margin-top:2px}