/* MagpieToolbox - pickers.css : custom DS-matched date / select / time pickers */
.pk-native-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; opacity:0; pointer-events:none; }
.pk-select{ display:inline-flex; align-items:center; gap:8px; min-height:38px; padding:7px 12px; border:1.5px solid var(--border-strong); border-radius:var(--r-ctrl); background:var(--surface); color:var(--text-strong); font:inherit; font-size:var(--text-sm); font-weight:600; cursor:pointer; transition:border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.pk-select:hover{ border-color:var(--brand); }
.pk-select:focus-visible{ outline:none; box-shadow:var(--ring-focus); }
.pk-select__t{ white-space:nowrap; }
.pk-select__c{ display:inline-flex; margin-left:auto; color:var(--text-subtle); }
.pk-select__c svg{ width:15px; height:15px; }
.pk-select__ic{ display:inline-flex; color:var(--brand); }
.pk-select__ic svg{ width:16px; height:16px; }
.pk-time{ cursor:text; -webkit-appearance:none; appearance:none; }
.pk-time::-webkit-calendar-picker-indicator{ display:none; -webkit-appearance:none; }
.pk-infield{ position:relative; display:inline-flex; flex:1 1 auto; min-width:0; align-items:center; }
.pk-infield .iinput{ width:100%; padding-right:32px; }
.pk-clock{ position:absolute; right:4px; top:50%; transform:translateY(-50%); width:26px; height:26px; border:none; background:transparent; color:var(--text-subtle); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; border-radius:7px; transition:color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.pk-clock:hover{ color:var(--brand); background:var(--brand-soft); }
.pk-clock svg{ width:15px; height:15px; }

.pk{ position:absolute; z-index:300; background:var(--surface); border:1px solid var(--border-default); border-radius:12px; box-shadow:var(--shadow-xl); padding:6px; min-width:150px; animation:pkIn .12s var(--ease-out); }
@keyframes pkIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.pk-list{ display:flex; flex-direction:column; gap:2px; }
.pk-opt{ display:flex; align-items:center; gap:10px; padding:8px 10px; border:none; background:transparent; border-radius:8px; font:inherit; font-size:var(--text-sm); color:var(--text-strong); cursor:pointer; text-align:left; }
.pk-opt:hover{ background:var(--brand-soft); }
.pk-opt.is-sel{ color:var(--brand); font-weight:700; }

/* calendar */
.pk-cal{ width:250px; }
.pk-cal__head{ display:flex; align-items:center; justify-content:space-between; padding:2px 4px 8px; }
.pk-cal__title{ font-weight:700; font-size:var(--text-sm); color:var(--text-strong); }
.pk-cal__nav{ width:30px; height:30px; border:none; background:transparent; border-radius:8px; color:var(--text-muted); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.pk-cal__nav:hover{ background:var(--surface-sunken); color:var(--text-strong); }
.pk-cal__nav svg{ width:16px; height:16px; }
.pk-cal__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.pk-cal__dow{ font-family:var(--font-mono); font-size:9px; letter-spacing:.04em; text-transform:uppercase; color:var(--text-subtle); text-align:center; padding:3px 0; }
.pk-cal__day{ aspect-ratio:1; border:none; background:transparent; border-radius:8px; font:inherit; font-size:var(--text-xs); color:var(--text-strong); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.pk-cal__day.is-out{ pointer-events:none; }
.pk-cal__day:hover{ background:var(--brand-soft); }
.pk-cal__day.is-today{ box-shadow:inset 0 0 0 1.5px var(--border-strong); }
.pk-cal__day.is-sel{ background:var(--brand); color:var(--on-accent,#fff); font-weight:700; }

/* time */
.pk-time-pop{ display:flex; gap:6px; }
.pk-col{ display:flex; flex-direction:column; gap:2px; max-height:210px; overflow-y:auto; scrollbar-width:none; -ms-overflow-style:none; }
.pk-col::-webkit-scrollbar{ width:0; height:0; display:none; }
.pk-col__lab{ position:sticky; top:0; background:var(--surface); font-family:var(--font-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-subtle); text-align:center; padding:2px 0 5px; }
.pk-cell{ min-width:48px; padding:7px 12px; border:none; background:transparent; border-radius:7px; font-family:var(--font-mono); font-size:var(--text-sm); color:var(--text-strong); cursor:pointer; text-align:center; font-variant-numeric:tabular-nums; }
.pk-cell:hover{ background:var(--brand-soft); }
.pk-cell.is-sel{ background:var(--brand); color:var(--on-accent,#fff); font-weight:700; }
.pk-time-foot{ display:flex; justify-content:space-between; gap:8px; padding:7px 2px 1px; margin-top:5px; border-top:1px solid var(--border-default); }
.pk-time-foot button{ border:none; background:transparent; font:inherit; font-size:var(--text-xs); font-weight:600; color:var(--text-link); cursor:pointer; padding:5px 8px; border-radius:6px; }
.pk-time-foot button:hover{ background:var(--surface-sunken); }
@media (prefers-reduced-motion: reduce){ .pk{ animation:none; } }