/* ═══════════════════════════════════════════════════════════════════════════
   datepicker.css — vanilla calendar / single-date picker
   Pairs with /static/js/datepicker.js (window.PFDatepicker).
   Renders INSIDE a PFModal (display:'center'), so this file only styles
   the grid contents — the chrome (backdrop, frame, header) comes from
   modal.css.
   Prefix: .pf-dp*  — no dependency on or conflict with other stylesheets.
   ═══════════════════════════════════════════════════════════════════════════ */

.pf-dp {
  --pf-dp-cell:        46px;
  --pf-dp-gap:         2px;
  --pf-dp-accent:      #3478f6;
  --pf-dp-accent-soft: rgba(52, 120, 246, 0.12);
  --pf-dp-fg:          #1c1c1e;
  --pf-dp-muted:       #b0b0b6;
  --pf-dp-divider:     rgba(0, 0, 0, 0.08);

  width: calc(var(--pf-dp-cell) * 7 + var(--pf-dp-gap) * 6);
  margin: 0 auto;
  /* Tight internal padding — the calendar visual edge is the day grid
     edge. Outer breathing room comes from the modal body padding (which
     we also tighten via `.pf-modal-body--dp` below). */
  padding: 4px 0 6px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--pf-dp-fg);
  -webkit-user-select: none;
          user-select: none;
}

/* ───── Modal overrides ──────────────────────────────────────────────
   These two classes are added by datepicker.js in attach() so the
   tightening only applies to modals containing a picker — every other
   PFModal stays untouched. */
.pf-modal.pf-modal--dp {
  /* Hug the 7-cell grid (46×7 + 2×6 = 334 px) plus a small breathing
     band so the frame doesn't feel cramped. */
  max-width: 364px;
}
.pf-modal-body.pf-modal-body--dp {
  padding: 6px 12px 14px;
}

/* ───── Sub-header: « <Month Year> » ─────────────────────────────────── */
.pf-dp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 0 8px;
}
.pf-dp-nav-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.1px;
}
.pf-dp-nav-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--pf-dp-fg);
  font-size: 18px;
  line-height: 1;
  transition: background 120ms ease;
}
.pf-dp-nav-btn:hover  { background: rgba(0, 0, 0, 0.06); }
.pf-dp-nav-btn:active { background: rgba(0, 0, 0, 0.12); }
.pf-dp-nav-btn:disabled {
  color: var(--pf-dp-muted);
  cursor: default;
  background: transparent !important;
}

/* ───── Weekday header row ──────────────────────────────────────────── */
.pf-dp-weekdays {
  display: grid;
  grid-template-columns: repeat(7, var(--pf-dp-cell));
  column-gap: var(--pf-dp-gap);
  padding: 0 0 6px;
  border-bottom: 1px solid var(--pf-dp-divider);
  margin-bottom: 4px;
}
.pf-dp-weekday {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--pf-dp-muted);
  line-height: 1.4;
}

/* ───── Day grid ────────────────────────────────────────────────────── */
.pf-dp-grid {
  display: grid;
  grid-template-columns: repeat(7, var(--pf-dp-cell));
  column-gap: var(--pf-dp-gap);
  row-gap: var(--pf-dp-gap);
}

.pf-dp-cell {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  width:  var(--pf-dp-cell);
  height: var(--pf-dp-cell);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 500;
  color: var(--pf-dp-fg);
  cursor: pointer;
  position: relative;
  transition: background 120ms ease, color 120ms ease, transform 120ms ease;
}
.pf-dp-cell:hover {
  background: var(--pf-dp-accent-soft);
}
.pf-dp-cell:active {
  transform: scale(0.94);
}

/* Days outside the rendered month (we use empty placeholders instead,
   but keep this rule for future "show adjacent month days" variants). */
.pf-dp-cell.is-outside {
  color: var(--pf-dp-muted);
}

/* Today — subtle ring */
.pf-dp-cell.is-today {
  box-shadow: inset 0 0 0 1.5px var(--pf-dp-accent);
}

/* Selected — solid accent */
.pf-dp-cell.is-selected,
.pf-dp-cell.is-selected:hover {
  background: var(--pf-dp-accent);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(52, 120, 246, 0.35);
}

/* Disabled (out of min/max range, or in `invalid` list) */
.pf-dp-cell.is-disabled,
.pf-dp-cell.is-disabled:hover {
  color: var(--pf-dp-muted);
  background: transparent;
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-color: rgba(0, 0, 0, 0.18);
  text-decoration-thickness: 1px;
}

/* Empty placeholder (cells before the 1st / after the last of the month) */
.pf-dp-empty {
  width:  var(--pf-dp-cell);
  height: var(--pf-dp-cell);
  visibility: hidden;
}

/* ───── Dark mode ───────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .pf-dp {
    --pf-dp-fg:      #f2f2f7;
    --pf-dp-muted:   #6e6e75;
    --pf-dp-divider: rgba(255, 255, 255, 0.10);
    --pf-dp-accent-soft: rgba(82, 144, 255, 0.18);
  }
  .pf-dp-nav-btn:hover  { background: rgba(255, 255, 255, 0.08); }
  .pf-dp-nav-btn:active { background: rgba(255, 255, 255, 0.16); }
  .pf-dp-cell.is-disabled,
  .pf-dp-cell.is-disabled:hover {
    text-decoration-color: rgba(255, 255, 255, 0.20);
  }
}

/* ───── Compact / small-screen tweaks ───────────────────────────────── */
@media (max-width: 380px) {
  .pf-dp { --pf-dp-cell: 42px; --pf-dp-gap: 1px; }
  .pf-dp-cell { font-size: 15px; }
  .pf-modal.pf-modal--dp { max-width: calc(100vw - 24px); }
  .pf-modal-body.pf-modal-body--dp { padding: 4px 8px 10px; }
}

/* ───── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pf-dp-cell { transition: none; }
  .pf-dp-cell:active { transform: none; }
}