/* Custom date picker (paired with ui/app/components/datepicker.js) — PROTOTYPE.
   Native <input type="date"> is hidden but kept as the value/form store;
   .nd-dp-trigger is the styled control and .nd-dp-pop is the CSS-styled calendar
   (the month box + weekday header + day grid the native popup won't let us
   touch). All on --bfc-* tokens + --font-sans. */

.nd-dp { position: relative; display: inline-flex; vertical-align: middle; }
.nd-dp-native {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); border: 0; opacity: 0; pointer-events: none;
}

.nd-dp-trigger {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
  min-width: 168px; font: inherit; font-family: var(--font-sans); font-size: 14px; color: var(--bfc-navy);
  background: var(--bfc-surface); border: 1px solid var(--bfc-line-strong); border-radius: 10px;
  padding: 9px 12px 9px 14px; cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.nd-dp-trigger:focus-visible,
.nd-dp.is-open .nd-dp-trigger { outline: none; border-color: var(--bfc-teal); box-shadow: 0 0 0 3px rgba(35, 177, 165, 0.18); }
.nd-dp-value.is-empty { color: var(--bfc-muted); }
.nd-dp.is-disabled { opacity: 0.55; }
.nd-dp.is-disabled .nd-dp-trigger { cursor: default; }
.nd-dp-icon {
  flex: 0 0 auto; width: 15px; height: 15px; background: no-repeat center / contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235d6c7b' stroke-width='1.3' stroke-linecap='round'%3E%3Crect x='2.2' y='3.2' width='11.6' height='10.6' rx='2'/%3E%3Cpath d='M2.2 6.4h11.6M5.4 1.6v3M10.6 1.6v3'/%3E%3C/svg%3E");
}

/* The calendar box */
.nd-dp-pop {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0;
  width: 272px; padding: 12px;
  background: var(--bfc-surface); border: 1px solid var(--bfc-line-strong);
  border-radius: 14px; box-shadow: var(--shadow-elev);
  font-family: var(--font-sans); display: none;
}
.nd-dp.nd-dp-up .nd-dp-pop { top: auto; bottom: calc(100% + 6px); }
.nd-dp.is-open .nd-dp-pop { display: block; }

.nd-dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.nd-dp-title { font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--bfc-navy); }
.nd-dp-nav {
  width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center;
  border: 1px solid var(--bfc-line); border-radius: 8px; background: var(--bfc-surface);
  color: var(--bfc-navy); font-size: 17px; line-height: 1; cursor: pointer;
}
.nd-dp-nav:hover { background: var(--bfc-soft); border-color: var(--bfc-line-strong); }

.nd-dp-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.nd-dp-dow span { text-align: center; font-size: 11px; font-weight: 700; color: var(--bfc-muted); }
.nd-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.nd-dp-cell {
  height: 34px; border: 0; background: transparent; border-radius: 8px;
  font: inherit; font-size: 13px; color: var(--bfc-ink); cursor: pointer;
}
.nd-dp-cell.is-empty { visibility: hidden; }
.nd-dp-cell:hover:not([disabled]):not(.is-selected) { background: var(--bfc-soft-2); }
.nd-dp-cell.is-today { box-shadow: inset 0 0 0 1px var(--bfc-line-strong); font-weight: 700; }
.nd-dp-cell.is-selected {
  background: linear-gradient(135deg, var(--bfc-teal), var(--bfc-teal-soft));
  color: #fff; font-weight: 700;
}
.nd-dp-cell[disabled] { color: var(--bfc-line-strong); cursor: default; }
.nd-dp-cell:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bfc-teal); }

/* Footer: Today + Clear */
.nd-dp-foot { display: flex; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bfc-line); }
.nd-dp-btn {
  flex: 1; font: inherit; font-size: 13px; font-weight: 700; padding: 8px 10px;
  border: 1px solid var(--bfc-line-strong); border-radius: 8px;
  background: var(--bfc-surface); color: var(--bfc-navy); cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.nd-dp-btn:hover:not([disabled]) { background: var(--bfc-soft); }
.nd-dp-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(35, 177, 165, 0.25); }
.nd-dp-btn[disabled] { opacity: 0.45; cursor: default; }
.nd-dp-btn-ghost { color: var(--bfc-muted); border-color: transparent; }
.nd-dp-btn-ghost:hover:not([disabled]) { background: var(--bfc-soft); color: var(--bfc-navy); }

@media (prefers-reduced-motion: reduce) { .nd-dp-trigger { transition: none; } }