/**

 * LibZen DatePicker — Exam Planner calendar pattern for <input type="date">.

 */



@import url('./datetime-field.css');



:root {

  --libzen-dp-panel: var(--libzen-dt-panel);

  --libzen-dp-text: var(--libzen-dt-text);

  --libzen-dp-muted: var(--libzen-dt-muted);

  --libzen-dp-border: var(--libzen-dt-border);

  --libzen-dp-accent: var(--libzen-dt-accent);

  --libzen-dp-accent-dim: var(--libzen-dt-accent-dim);

  --libzen-dp-hover: var(--libzen-dt-hover);

  --libzen-dp-radius: var(--libzen-dt-radius);

  --libzen-dp-focus-ring: var(--libzen-dt-focus-ring);

  --libzen-dp-icon-size: var(--libzen-dt-icon-size);

  --libzen-dp-icon-lead: calc(var(--libzen-dp-icon-size) + 0.5rem);

  --libzen-dp-calendar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238b9cb3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");

}



input[type="date"]::-webkit-calendar-picker-indicator {

  cursor: pointer;

  width: var(--libzen-dp-icon-size);

  height: var(--libzen-dp-icon-size);

  margin: 0;

  padding: 0;

  opacity: 1;

  -webkit-appearance: none;

  appearance: none;

  background: transparent var(--libzen-dp-calendar-icon) center / contain no-repeat;

  pointer-events: none;

}



input[type="date"]:hover::-webkit-calendar-picker-indicator,

input[type="date"]:focus-within::-webkit-calendar-picker-indicator {

  --libzen-dp-calendar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");

}



/* LibZen month-grid calendar popup. */

.libzen-dp-cal {

  position: fixed;

  z-index: 2147483000;

  width: 17.5rem;

  padding: 0.55rem;

  background: var(--libzen-dp-panel);

  border: 1px solid var(--libzen-dp-accent);

  border-radius: var(--libzen-dp-radius);

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);

  font-size: 0.85rem;

  color: var(--libzen-dp-text);

  user-select: none;

}



.libzen-dp-cal[hidden] {

  display: none;

}



.libzen-dp-cal-head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 0.35rem;

  margin-bottom: 0.45rem;

}



.libzen-dp-cal-title {

  flex: 1;

  text-align: center;

  font-weight: 600;

  font-size: 0.92rem;

}



.libzen-dp-cal-nav {

  width: 1.75rem;

  height: 1.75rem;

  border: none;

  border-radius: var(--libzen-dp-radius);

  background: transparent;

  color: var(--libzen-dp-text);

  font-size: 1.1rem;

  line-height: 1;

  cursor: pointer;

}



.libzen-dp-cal-nav:hover {

  background: var(--libzen-dp-hover);

}



.libzen-dp-cal-nav:focus-visible {

  outline: var(--libzen-dp-focus-ring);

  outline-offset: 1px;

}



.libzen-dp-cal-weekdays {

  display: grid;

  grid-template-columns: repeat(7, 1fr);

  gap: 0.1rem;

  margin-bottom: 0.2rem;

  color: var(--libzen-dp-muted);

  font-size: 0.72rem;

  text-align: center;

}



.libzen-dp-cal-grid {

  display: grid;

  grid-template-columns: repeat(7, 1fr);

  gap: 0.1rem;

}



.libzen-dp-cal-day {

  aspect-ratio: 1;

  border: none;

  border-radius: var(--libzen-dp-radius);

  background: transparent;

  color: var(--libzen-dp-text);

  font: inherit;

  font-variant-numeric: tabular-nums;

  cursor: pointer;

}



.libzen-dp-cal-day:hover {

  background: var(--libzen-dp-hover);

}



.libzen-dp-cal-day.is-outside {

  color: var(--libzen-dp-muted);

  opacity: 0.55;

}



.libzen-dp-cal-day.is-today {

  border: 1px solid var(--libzen-dp-accent);

}



.libzen-dp-cal-day.is-selected {

  background: var(--libzen-dp-accent);

  color: #fff;

  font-weight: 600;

}



.libzen-dp-cal-day.is-selected:hover {

  background: var(--libzen-dp-accent-dim);

}



.libzen-dp-cal-day:focus-visible {

  outline: var(--libzen-dp-focus-ring);

  outline-offset: -1px;

}