/* ==========================================================================
   تقویم شمسی — ظاهر. متغیرهای رنگ از style.css می‌آید، پس تم روشن/تیره و
   لایهٔ مدیریت (پالت سرد) خودبه‌خود درست می‌شوند.
   ========================================================================== */

.jdp-wrap { position: relative; }
.jdp-wrap > .form-control { padding-inline-start: 2.1rem; }

.jdp-open {
  position: absolute; inset-inline-start: .35rem; top: 50%;
  transform: translateY(-50%);
  border: 0; background: transparent; color: var(--ch-muted);
  width: 1.75rem; height: 1.75rem; border-radius: 9px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: color .15s, background .15s;
}
.jdp-open:hover { color: var(--ch-primary); background: color-mix(in srgb, var(--ch-primary) 12%, transparent); }

.jdp {
  position: absolute; z-index: 1090; display: none;
  width: 268px; padding: .55rem;
  background: var(--ch-card); color: var(--ch-text);
  border: 1px solid var(--ch-border); border-radius: 16px;
  box-shadow: 0 18px 44px -14px rgba(0, 0, 0, .32);
  font-size: .86rem; user-select: none;
}
.jdp.open { display: block; }

.jdp-head { display: flex; align-items: center; gap: .25rem; margin-bottom: .4rem; }
.jdp-nav, .jdp-title {
  border: 0; background: transparent; color: inherit;
  border-radius: 10px; cursor: pointer; padding: .3rem .5rem;
}
.jdp-nav { width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; }
.jdp-title { flex: 1; font-weight: 700; }
.jdp-nav:hover, .jdp-title:hover { background: color-mix(in srgb, var(--ch-primary) 12%, transparent); }

.jdp-week {
  display: grid; grid-template-columns: repeat(7, 1fr);
  text-align: center; color: var(--ch-muted); font-size: .74rem;
  padding-bottom: .2rem; border-bottom: 1px solid var(--ch-border); margin-bottom: .3rem;
}

.jdp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.jdp-grid-3 { grid-template-columns: repeat(3, 1fr); gap: 4px; }
.jdp-grid-4 { grid-template-columns: repeat(4, 1fr); gap: 4px; }

.jdp-cell {
  border: 0; background: transparent; color: inherit;
  height: 2.05rem; border-radius: 10px; cursor: pointer;
  font-size: .84rem; padding: 0; line-height: 1;
}
.jdp-wide { height: 2.2rem; font-size: .8rem; }
.jdp-empty { cursor: default; }
.jdp-cell:hover:not(:disabled) { background: color-mix(in srgb, var(--ch-primary) 14%, transparent); }
.jdp-holiday { color: #e11d48; }
.jdp-today { box-shadow: inset 0 0 0 1.5px var(--ch-primary); font-weight: 700; }
.jdp-selected { background: var(--ch-primary); color: #fff; font-weight: 700; }
.jdp-selected:hover { background: var(--ch-primary); }
.jdp-off, .jdp-cell:disabled { opacity: .3; cursor: not-allowed; }

.jdp-time {
  display: flex; align-items: center; gap: .3rem;
  margin-top: .45rem; padding-top: .45rem; border-top: 1px solid var(--ch-border);
}
.jdp-time input {
  width: 3rem; text-align: center; direction: ltr;
  border: 1px solid var(--ch-border); border-radius: 9px;
  background: var(--ch-bg); color: var(--ch-text); padding: .2rem;
}
.jdp-time input::-webkit-outer-spin-button,
.jdp-time input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.jdp-time-hint { color: var(--ch-muted); font-size: .76rem; margin-inline-start: auto; }

.jdp-foot {
  display: flex; gap: .3rem; margin-top: .45rem;
  padding-top: .45rem; border-top: 1px solid var(--ch-border);
}
.jdp-btn {
  flex: 1; border: 1px solid var(--ch-border); background: var(--ch-bg);
  color: var(--ch-text); border-radius: 10px; padding: .3rem; font-size: .78rem;
  cursor: pointer;
}
.jdp-btn:hover { border-color: var(--ch-primary); color: var(--ch-primary); }
.jdp-btn-quiet { color: var(--ch-muted); }

/* موبایل: تقویم وسط صفحه می‌نشیند، نه چسبیده به ورودی که نصفش بیرون بیفتد */
@media (max-width: 480px) {
  .jdp {
    position: fixed !important;
    inset-inline: 1rem !important; width: auto;
    top: 50% !important; transform: translateY(-50%);
    font-size: .95rem;
  }
  .jdp-cell { height: 2.5rem; font-size: .95rem; }
}

@media print { .jdp, .jdp-open { display: none !important; } }