/* ==========================================================================
   datepicker.css - בורר תאריך/שעה משותף ל"בית"
   נשען על המשתנים של system.css ועל שפת המודלים/דרוארים של components.css.
   בלי צבעים קשיחים חדשים, בלי תנועה סתמית (רק אנימציית פתיחה קצרה).
   ========================================================================== */

/* ---------- השדה עצמו אחרי השדרוג ---------- */
/* השדה פתוח גם להקלדה ידנית, לכן סמן טקסט רגיל בדסקטופ */
.dp-input {
  cursor: text;
  font-variant-numeric: tabular-nums lining-nums;
}
@media (max-width: 600px) {
  .dp-input { cursor: pointer; caret-color: transparent; }
}

/* אייקון לוח שנה בצד ההתחלה (ימין ב-RTL), במקום הפקד הנייטיב שנעלם */
.input.dp-input {
  padding-inline-start: 2.7rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2364235B' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='2.6' y='4' width='14.8' height='13.4' rx='3'/%3E%3Cpath d='M2.6 8.2h14.8M6.6 2.6v2.8M13.4 2.6v2.8'/%3E%3Ccircle cx='7' cy='12' r='1.1' fill='%2364235B' stroke='none'/%3E%3Ccircle cx='10' cy='12' r='1.1' fill='%2364235B' stroke='none'/%3E%3Ccircle cx='13' cy='12' r='1.1' fill='%2364235B' stroke='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  background-size: 18px 18px;
}
.input.dp-input--bare { padding-inline-start: var(--sp-4); background-image: none; }

.input.dp-input--open {
  border-color: var(--accent);
  box-shadow: var(--ring);
}

/* ---------- החלונית ---------- */
.dp-pop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3000;
  display: none;
  width: 322px;
  max-width: calc(100vw - 16px);
  direction: rtl;
  font-family: var(--font);
  font-size: var(--fs-base);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xl);
  overflow: hidden;
  flex-direction: column;
  max-height: calc(100vh - 16px);
}
.dp-pop.is-open { display: flex; animation: dp-in var(--t-fast) var(--ease) both; }
.dp-head, .dp-heb, .dp-time, .dp-foot, .dp-grip { flex: none; }

.dp-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2990;
  display: none;
  background: var(--overlay);
}
.dp-backdrop.is-open { display: block; animation: dp-fade var(--t-fast) var(--ease) both; }

@keyframes dp-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes dp-fade { from { opacity: 0; } to { opacity: 1; } }

/* ידית גרירה - רק בגיליון תחתון */
.dp-grip { display: none; }

/* ---------- כותרת: חודש, שנה, ניווט ---------- */
.dp-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: linear-gradient(to bottom, var(--accent-soft), var(--surface));
  border-bottom: 1px solid var(--line-soft);
}

.dp-nav {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--accent-ink);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.dp-nav:hover { background: var(--surface); border-color: var(--accent-line); }
.dp-nav:focus-visible { outline: none; box-shadow: var(--ring); }
.dp-nav svg { width: 15px; height: 15px; }

.dp-cap {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 32px;
  padding: 0 var(--sp-3);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  font-family: var(--font);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--accent-deep);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.dp-cap:hover { background: var(--surface); border-color: var(--accent-line); }
.dp-cap:focus-visible { outline: none; box-shadow: var(--ring); }
.dp-cap__y { color: var(--ink-3); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; }
.dp-cap svg { width: 10px; height: 10px; color: var(--ink-3); }
.dp-pop.is-jump .dp-cap { background: var(--surface); border-color: var(--accent-line); color: var(--accent-deep); }
.dp-pop.is-jump .dp-cap svg { transform: rotate(180deg); }

/* ---------- במה: לוח או בחירה מהירה ---------- */
.dp-stage {
  position: relative;
  padding: var(--sp-3) var(--sp-3) 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.dp-cal { min-height: 214px; padding-bottom: var(--sp-3); }

.dp-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: var(--sp-2);
}
.dp-dow span {
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.dp-dow span.is-off { color: var(--ink-2); }

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

.dp-day {
  display: block;
  width: 100%;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  font-family: var(--font);
  font-size: var(--fs-base);
  font-weight: var(--fw-med);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.dp-day:hover { background: var(--surface-3); }
.dp-day:focus-visible { outline: none; box-shadow: var(--ring); }
.dp-day.is-off { background: var(--bg-deep); }
.dp-day.is-off:hover { background: var(--surface-3); }
.dp-day.is-out { color: var(--ink-3); opacity: 0.5; font-weight: var(--fw-reg); }
.dp-day.is-holiday { color: var(--gold-touch-deep); }
.dp-day.is-today { border-color: var(--accent-line); color: var(--accent-deep); font-weight: var(--fw-bold); }
.dp-day.is-sel {
  background: linear-gradient(165deg, var(--accent-hover), var(--accent-deep));
  border-color: transparent;
  color: #fff;
  font-weight: var(--fw-bold);
  opacity: 1;
  box-shadow: 0 2px 6px rgba(100, 35, 91, 0.24), var(--sh-inset);
}
.dp-day.is-sel:hover { background: linear-gradient(165deg, #8B3D82, var(--accent)); }
.dp-day[disabled] { opacity: 0.28; cursor: default; background: transparent; }
.dp-day[disabled]:hover { background: transparent; }

/* בחירה מהירה של חודש ושנה */
.dp-jump {
  position: absolute;
  inset: var(--sp-3);
  display: none;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--sp-2);
}
.dp-pop.is-jump .dp-jump { display: grid; }
.dp-pop.is-jump .dp-cal { visibility: hidden; }

.dp-months { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; align-content: start; }
.dp-years {
  position: relative;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  padding: 3px;
}
.dp-opt {
  display: block;
  width: 100%;
  min-height: 32px;
  padding: 0 var(--sp-2);
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  background: transparent;
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--fw-med);
  color: var(--ink-2);
  text-align: center;
  cursor: pointer;
  font-variant-numeric: tabular-nums lining-nums;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.dp-opt:hover { background: var(--surface-3); color: var(--ink); }
.dp-opt:focus-visible { outline: none; box-shadow: var(--ring); }
.dp-opt.is-sel {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-deep);
  font-weight: var(--fw-bold);
}

/* ---------- שורת התאריך העברי ---------- */
.dp-heb {
  padding: 0 var(--sp-3) var(--sp-2);
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.03em;
  color: var(--gold-touch-deep);
  min-height: 18px;
}
.dp-heb__holiday { color: var(--accent-ink); }

/* ---------- שעה ---------- */
.dp-time {
  display: none;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--line-soft);
  background: var(--surface-2);
}
.dp-pop--time .dp-time { display: flex; }
.dp-time__lbl {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--ink-2);
}
.dp-time__now {
  margin-inline-start: auto;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums lining-nums;
  direction: ltr;
  unicode-bidi: isolate;
}
.dp-time__cols { display: flex; gap: var(--sp-2); }
.dp-col {
  position: relative;
  width: 62px;
  height: 80px;
  overflow-y: auto;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  scroll-behavior: auto;
}

/* ---------- תחתית ---------- */
.dp-foot {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--line-soft);
  background: var(--surface-2);
}
.dp-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: transparent;
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--ink-3);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.dp-act:hover { background: var(--surface-3); color: var(--ink); }
.dp-act:focus-visible { outline: none; box-shadow: var(--ring); }
.dp-act--soft { background: var(--accent-soft); color: var(--accent-deep); }
.dp-act--soft:hover { background: var(--accent-soft-2); color: var(--accent-deep); }
.dp-act--go {
  margin-inline-start: auto;
  background: linear-gradient(165deg, var(--accent-hover), var(--accent-deep));
  color: #fff;
  box-shadow: 0 2px 6px rgba(100, 35, 91, 0.24), var(--sh-inset);
}
.dp-act--go:hover { background: linear-gradient(165deg, #8B3D82, var(--accent)); color: #fff; }
.dp-act[hidden] { display: none; }
.dp-act[disabled] { opacity: 0.4; cursor: default; pointer-events: none; }
.dp-spacer { flex: 1 1 auto; }

/* ==========================================================================
   מובייל: גיליון תחתון ברוחב מלא, אזורי מגע 44px
   ========================================================================== */
@media (max-width: 600px) {
  .dp-pop.dp-pop--sheet {
    top: auto !important;
    left: 0 !important;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    border-bottom: 0;
    animation: dp-sheet-in var(--t-base) var(--ease) both;
  }
  .dp-pop--sheet .dp-grip {
    display: block;
    width: 44px;
    height: 4px;
    margin: var(--sp-2) auto 0;
    border-radius: var(--r-pill);
    background: var(--line-2);
  }
  .dp-pop--sheet .dp-head { padding: var(--sp-2) var(--sp-4); }
  .dp-pop--sheet .dp-nav { width: var(--tap); height: var(--tap); }
  .dp-pop--sheet .dp-cap { min-height: var(--tap); font-size: var(--fs-lg); }
  .dp-pop--sheet .dp-stage { padding: var(--sp-3) var(--sp-4) 0; }
  .dp-pop--sheet .dp-jump { inset: var(--sp-3) var(--sp-4); }
  .dp-pop--sheet .dp-day { height: var(--tap); font-size: var(--fs-md); }
  .dp-pop--sheet .dp-opt { min-height: var(--tap); font-size: var(--fs-base); }
  .dp-pop--sheet .dp-heb { padding-inline: var(--sp-4); font-size: var(--fs-sm); }
  .dp-pop--sheet .dp-time { padding: var(--sp-3) var(--sp-4); }
  .dp-pop--sheet .dp-col { width: 76px; height: 132px; }
  .dp-pop--sheet .dp-foot {
    padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  }
  .dp-pop--sheet .dp-act {
    flex: 1 1 auto;
    min-height: var(--tap);
    padding: 0 var(--sp-5);
    font-size: var(--fs-base);
  }
}

/* מסך נמוך במיוחד (זום גבוה / חלון קטן): מוותרים על התוספות המשניות
   כדי שהחודש המלא יישאר גלוי תמיד */
@media (min-width: 601px) and (max-height: 520px) {
  .dp-col { height: 52px; }
  .dp-heb { display: none; }
  .dp-time { padding-block: var(--sp-1); }
}

@keyframes dp-sheet-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dp-pop.is-open, .dp-backdrop.is-open { animation: none; }
}