/* The date and time pickers (pickers.js). Colours come from the app's own. */
.pk-pop { position: fixed; z-index: 400; background: var(--surface, #fff); color: var(--text, #101828); border: 1px solid var(--border, #e4e7ec); border-radius: 14px; box-shadow: var(--shadow-lg, 0 12px 32px rgba(16, 24, 40, .14)); padding: .6rem; font-family: var(--font, inherit); animation: pk-in .12s ease-out; }
.pk-for-date { width: 18.5rem; max-width: calc(100vw - 16px); }
.pk-for-time { width: 9.5rem; padding: .35rem; }
@keyframes pk-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .pk-pop { animation: none; } }
.pk-pop button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.pk-pop button:disabled { cursor: default; }
.pk-pop button:focus-visible { outline: 2px solid var(--accent, #15803d); outline-offset: 1px; }

.pk-head { display: flex; align-items: center; gap: .25rem; margin-bottom: .4rem; }
.pk-title { flex: 1; padding: .35rem .5rem; border-radius: 8px; font-weight: 650; font-size: .95rem; }
.pk-title:hover, .pk-nav:hover { background: var(--surface-2, #f2f4f7); }
.pk-nav { width: 2rem; height: 2rem; border-radius: 8px; font-size: 1.25rem; line-height: 1; color: var(--text-2, #475467); }

.pk-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.pk-dow { text-align: center; font-size: .72rem; font-weight: 600; color: var(--text-3, #667085); padding: .2rem 0 .3rem; }
.pk-day { aspect-ratio: 1; border-radius: 999px; font-size: .86rem; font-variant-numeric: tabular-nums; }
.pk-day:hover:not(:disabled) { background: var(--surface-2, #f2f4f7); }
.pk-day.out { color: var(--text-3, #667085); opacity: .65; }
.pk-day:disabled { opacity: .3; text-decoration: line-through; }
.pk-day.now { box-shadow: inset 0 0 0 1.5px var(--accent, #15803d); font-weight: 650; }
.pk-day.on, .pk-day.on:hover:not(:disabled) { background: var(--accent, #15803d); color: #fff; opacity: 1; font-weight: 650; box-shadow: none; }

.pk-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; padding: .2rem 0; }
.pk-month { padding: .7rem 0; border-radius: 10px; font-size: .88rem; }
.pk-month:hover { background: var(--surface-2, #f2f4f7); }
.pk-month.now { box-shadow: inset 0 0 0 1.5px var(--accent, #15803d); }
.pk-month.on, .pk-month.on:hover { background: var(--accent, #15803d); color: #fff; box-shadow: none; font-weight: 650; }

.pk-foot { display: flex; justify-content: space-between; align-items: center; margin-top: .35rem; min-height: 1.8rem; }
.pk-link { padding: .3rem .5rem; border-radius: 8px; font-size: .84rem; font-weight: 600; color: var(--accent-text, var(--accent, #15803d)) !important; }
.pk-link:hover:not(:disabled) { background: var(--surface-2, #f2f4f7); }
.pk-link:disabled { opacity: .4; }

.pk-times { max-height: 15rem; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 1px; position: relative; }
.pk-time { padding: .42rem .6rem; border-radius: 8px; font-size: .88rem; text-align: left; font-variant-numeric: tabular-nums; flex: none; }
.pk-time:hover { background: var(--surface-2, #f2f4f7); }
.pk-time.on, .pk-time.on:hover { background: var(--accent, #15803d); color: #fff; font-weight: 650; }

/* The box: our icon instead of the browser's. (On a phone the browser's own picker and icon stay.) */
@media (pointer: fine) {
  input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { display: none; }
  input[type="date"].input, input[type="time"].input { background-repeat: no-repeat; background-position: right .6rem center; background-size: 1rem; padding-right: 2rem; cursor: pointer; }
  input[type="date"].input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23808a99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
  input[type="time"].input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23808a99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
}