/* نگهبانِ فرم‌ها + انتخابگرِ تاریخِ شمسی — استایلِ مشترکِ همهٔ داشبوردها.
 *
 * رنگ‌ها از توکنِ میزبان ارث می‌برند و اگر نبود، مقدارِ پشتیبان می‌گیرند؛ پس همین
 * یک فایل هم روی داشبوردِ روشنِ بیمار/پزشک کار می‌کند هم روی مسترمایندِ تیره.
 */

/* ── انتخابگرِ تاریخِ شمسی (روز / ماه / سال) ─────────────────────────────── */
.jds { display: flex; gap: 8px; align-items: stretch; }
.jds-sel {
  flex: 1 1 0; min-width: 0;
  font-family: inherit; font-size: 13.5px;
  padding: 10px 10px; min-height: 44px;      /* حداقلِ ناحیهٔ لمسی */
  border-radius: 10px;
  border: 1px solid var(--fg-line, #DCE6E4);
  background: var(--fg-surface, #fff);
  color: var(--fg-ink, #0A2840);
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(12px) calc(50% - 2px), calc(17px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.jds-sel:focus {
  outline: none;
  border-color: var(--fg-accent, #275440);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fg-accent, #275440) 18%, transparent);
}
.jds-year { flex: 1.25 1 0; }   /* سال چهار رقم است و جای بیشتری می‌خواهد */

/* ── بازخوردِ اعتبارسنجی کنارِ خودِ فیلد ──────────────────────────────────── */
.fg-note {
  display: block; margin-top: 5px;
  font-size: 11.5px; line-height: 1.7;
}
.fg-note.is-bad  { color: var(--fg-bad, #C44E28); }
.fg-note.is-good { color: var(--fg-good, #275440); }
.fg-note.is-hint { color: var(--fg-faint, #5B7186); }

.is-invalid,
.jds:has(+ [data-jalali-bound].is-invalid) .jds-sel {
  border-color: var(--fg-bad, #C44E28) !important;
}
.is-invalid:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fg-bad, #C44E28) 18%, transparent) !important;
}
.is-valid { border-color: var(--fg-good, #275440) !important; }

/* ── پیامِ کلیِ فرم ──────────────────────────────────────────────────────── */
.fg-message {
  border-radius: 10px; padding: 10px 13px; margin-bottom: 12px;
  font-size: 12.5px; line-height: 1.85; font-weight: 600;
}
.fg-message.is-bad {
  background: color-mix(in srgb, var(--fg-bad, #C44E28) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg-bad, #C44E28) 30%, transparent);
  color: var(--fg-bad, #C44E28);
}
.fg-message.is-good {
  background: color-mix(in srgb, var(--fg-good, #275440) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg-good, #275440) 30%, transparent);
  color: var(--fg-good, #275440);
}

/* ── نوارِ «مقادیرتان برگشت» ─────────────────────────────────────────────── */
.fg-restored {
  display: flex; align-items: center; gap: 7px;
  border-radius: 10px; padding: 9px 13px; margin-bottom: 12px;
  font-size: 12px; line-height: 1.8;
  background: color-mix(in srgb, var(--fg-accent, #1F6FB2) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg-accent, #1F6FB2) 26%, transparent);
  color: var(--fg-ink-soft, #456079);
}

@media (max-width: 480px) {
  .jds { gap: 6px; }
  .jds-sel { font-size: 13px; padding: 10px 8px; }
}