/* ============================================================
   date-picker.css — COMMON smooth date & time picker (.ss-date)
   ============================================================ */
.ss-date { position: relative; width: 100%; }

.ss-date__trigger {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 0 13px; min-height: 46px;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text);
  font: inherit; font-size: .9rem; cursor: pointer; transition: .15s;
}
.ss-date__trigger:hover { border-color: var(--color-border-strong); }
.ss-date.is-open .ss-date__trigger { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-glow); }
.ss-date__cal { width: 17px; height: 17px; color: var(--color-text-muted); flex: 0 0 auto; }
.ss-date__value { flex: 1 1 auto; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-date__value.is-placeholder::before { content: "Select date & time"; color: var(--color-text-subtle); }
.ss-date__chev { width: 16px; height: 16px; color: var(--color-text-subtle); transition: transform .2s; flex: 0 0 auto; }
.ss-date.is-open .ss-date__chev { transform: rotate(180deg); }

.ss-date__pop {
  position: absolute; z-index: 90; top: calc(100% + 6px); left: 0;
  width: 300px; max-width: min(300px, 92vw);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 16px; box-shadow: 0 18px 44px rgba(0,0,0,.16), 0 4px 12px rgba(0,0,0,.08);
  padding: 14px; opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.97);
  transform-origin: top left; transition: opacity .18s ease, transform .24s cubic-bezier(.2,.8,.2,1), visibility .18s;
}
.ss-date.is-open .ss-date__pop { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
[data-theme="dark"] .ss-date__pop { border-color: rgba(255,255,255,.08); box-shadow: 0 18px 44px rgba(0,0,0,.5); }

.ss-date__calhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ss-date__title { font-family: var(--font-display, inherit); font-weight: 700; font-size: .95rem; color: var(--color-text); display: flex; align-items: center; gap: 4px; }
.ss-date__title-m, .ss-date__title-y { background: none; border: none; font: inherit; color: inherit; font-weight: inherit; padding: 4px 6px; border-radius: 6px; cursor: pointer; transition: 0.2s; }
.ss-date__title-m:hover, .ss-date__title-y:hover { background: var(--color-surface); color: var(--color-primary); }
.ss-date__nav { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--color-border); border-radius: 9px; background: var(--color-surface); color: var(--color-text); cursor: pointer; }
.ss-date__nav:hover { border-color: var(--color-primary); color: var(--color-primary); }
.ss-date__nav svg { width: 16px; height: 16px; }

.ss-date__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
.ss-date__weekdays span { text-align: center; font-size: .68rem; font-weight: 700; color: var(--color-text-subtle); text-transform: uppercase; padding: 4px 0; }
.ss-date__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ss-date__day { aspect-ratio: 1; display: grid; place-items: center; border: none; background: none; border-radius: 9px; color: var(--color-text); font: inherit; font-size: .82rem; cursor: pointer; transition: .12s; }
.ss-date__day:hover:not(.is-disabled):not(.is-empty) { background: var(--color-primary-soft); color: var(--color-primary); }
.ss-date__day.is-empty { cursor: default; }
.ss-date__day.is-today { box-shadow: inset 0 0 0 1px var(--color-primary); }
.ss-date__day.is-sel { background: var(--color-primary); color: #fff; font-weight: 700; }
.ss-date__day.is-disabled { color: var(--color-text-subtle); opacity: .4; cursor: not-allowed; }

.ss-date__month-grid, .ss-date__year-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 16px 0; max-height: 220px; overflow-y: auto; padding-right: 4px; }
.ss-date__mbtn, .ss-date__ybtn { padding: 14px 4px; display: grid; place-items: center; border: 1px solid transparent; background: var(--color-surface); border-radius: 9px; color: var(--color-text); font: inherit; font-size: .88rem; cursor: pointer; transition: .15s; font-weight: 600; }
.ss-date__mbtn:hover, .ss-date__ybtn:hover { background: var(--color-primary-soft); color: var(--color-primary); border-color: var(--color-primary-soft); }
.ss-date__mbtn.is-sel, .ss-date__ybtn.is-sel { background: var(--color-primary); color: #fff; font-weight: 700; border-color: var(--color-primary); }

.ss-date__year-grid::-webkit-scrollbar { width: 4px; }
.ss-date__year-grid::-webkit-scrollbar-track { background: transparent; }
.ss-date__year-grid::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }

.ss-date__time { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-border); }
.ss-date__tlabel { font-size: .78rem; font-weight: 600; color: var(--color-text-muted); }
.ss-date__tctrl { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.ss-date__tctrl select { padding: 7px 8px; border: 1px solid var(--color-border); border-radius: 9px; background: var(--color-surface); color: var(--color-text); font: inherit; font-size: .85rem; cursor: pointer; }
.ss-date__colon { font-weight: 700; color: var(--color-text-muted); }
.ss-date__ap { min-width: 48px; text-align: center; padding: 7px 10px; border: 1px solid var(--color-primary); border-radius: 9px; background: var(--color-primary-soft); color: var(--color-primary); font-weight: 800; font-size: .78rem; cursor: pointer; }

.ss-date__actions { display: flex; gap: 8px; margin-top: 12px; }
.ss-date__today { flex: 1; padding: 9px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); color: var(--color-text); font-weight: 700; font-size: .82rem; cursor: pointer; }
.ss-date__today:hover { border-color: var(--color-primary); color: var(--color-primary); }
.ss-date__done { flex: 1; padding: 9px; border: none; border-radius: 10px; background: var(--color-primary); color: #fff; font-weight: 800; font-size: .82rem; cursor: pointer; }
.ss-date__done:hover { background: var(--color-primary-hover); }

/* Closed popover must not occupy layout (absolute + tall content was
   extending the page height → phantom empty space / scroll below). */
.ss-date:not(.is-open) .ss-date__pop{
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-width: 0 !important;
  overflow: hidden !important;
}

/* open upward when there isn't room below */
.ss-date--up .ss-date__pop{
  top: auto; bottom: calc(100% + 6px);
  transform-origin: bottom left;
  transform: translateY(8px) scale(.97);
}
.ss-date--up.is-open .ss-date__pop{ transform: translateY(0) scale(1); }

/* ===== smooth mini time selects (hour / minute) ===== */
.ss-date__sel { position: relative; }
.ss-date__selbtn {
  display: flex; align-items: center; gap: 4px; min-width: 54px;
  padding: 7px 9px; border: 1px solid var(--color-border); border-radius: 9px;
  background: var(--color-surface); color: var(--color-text); font: inherit; font-size: .85rem; cursor: pointer; transition: .14s;
}
.ss-date__selbtn:hover { border-color: var(--color-primary); }
.ss-date__sel.is-open .ss-date__selbtn { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-glow); }
.ss-date__selbtn span { flex: 1 1 auto; text-align: left; }
.ss-date__selchev { width: 13px; height: 13px; color: var(--color-text-subtle); transition: transform .18s; flex: 0 0 auto; }
.ss-date__sel.is-open .ss-date__selchev { transform: rotate(180deg); }
.ss-date__selmenu {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 5px);
  max-height: 172px; overflow-y: auto;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 11px;
  box-shadow: 0 12px 30px rgba(0,0,0,.16), 0 3px 8px rgba(0,0,0,.06); padding: 4px; z-index: 5;
  opacity: 0; visibility: hidden; transform: translateY(6px) scale(.97); transform-origin: bottom center;
  transition: opacity .16s ease, transform .2s cubic-bezier(.2,.8,.2,1), visibility .16s;
}
.ss-date__sel.is-open .ss-date__selmenu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
[data-theme="dark"] .ss-date__selmenu { border-color: rgba(255,255,255,.08); box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.ss-date__selopt { padding: 7px 10px; border-radius: 8px; font-size: .85rem; color: var(--color-text); cursor: pointer; text-align: center; }
.ss-date__selopt:hover { background: var(--color-primary-soft); color: var(--color-primary); }
.ss-date__selopt.is-active { background: var(--color-primary); color: #fff; font-weight: 700; }
.ss-date__selmenu::-webkit-scrollbar { width: 8px; }
.ss-date__selmenu::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 8px; border: 2px solid var(--color-surface); }