/* Validesk premium UI components: date / date-time picker, date range picker,
   download button, notification stack. Uses tokens from app.css. */

.js [data-flash-src] { display: none; }

/* ---------- popover shell ---------- */
.pop { position: fixed; z-index: 200; background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 28px 64px -16px rgba(11, 27, 63, .32), 0 2px 6px rgba(11, 27, 63, .06);
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top left;
  transition: opacity .16s ease, transform .18s cubic-bezier(.2, .9, .3, 1); pointer-events: none; }
.pop.is-above { transform-origin: bottom left; transform: translateY(6px) scale(.98); }
.pop.is-open { opacity: 1; transform: none; pointer-events: auto; }
.pop.pop-sheet { left: 0 !important; right: 0; top: auto !important; bottom: 0; border-radius: 22px 22px 0 0; border-bottom: 0;
  max-height: 92vh; overflow-y: auto; transform: translateY(100%); transition: transform .28s cubic-bezier(.2, .9, .3, 1), opacity .2s;
  padding-bottom: env(safe-area-inset-bottom); }
.pop.pop-sheet.is-open { transform: none; }
.pop.pop-sheet::before { content: ""; display: block; width: 42px; height: 4px; border-radius: 2px; background: #D5DCE8; margin: 10px auto 0; }
.pop-backdrop { position: fixed; inset: 0; z-index: 199; background: rgba(11, 27, 63, .42); opacity: 0; transition: opacity .2s; }
.pop-backdrop.is-open { opacity: 1; }

/* ---------- date field ---------- */
.dp-field { position: relative; }
.dp-field .dp-text { padding-right: 48px; }
.dp-field .dp-text[readonly] { cursor: pointer; }
.dp-field.is-open .dp-text { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(34, 81, 209, .15); }
.dp-field.is-invalid .dp-text { border-color: var(--bad); box-shadow: 0 0 0 3px rgba(217, 58, 58, .12); }
.dp-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 9px;
  background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; transition: background .15s, color .15s; }
.dp-btn:hover, .dp-field.is-open .dp-btn { background: var(--blue-soft); color: var(--blue); }

/* ---------- calendar ---------- */
.cal { padding: 16px; width: 320px; }
.pop-sheet .cal { width: auto; }
.cal-head { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.cal-title { flex: 1; border: 0; background: none; font: 700 15px var(--font); color: var(--navy); padding: 8px 10px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.cal-title:hover { background: var(--bg); }
.cal-title.is-static { cursor: default; }
.cal-title.is-static:hover { background: none; }
.cal-title svg { color: var(--muted); }
.cal-nav { width: 34px; height: 34px; flex: none; border-radius: 9px; border: 1px solid var(--line); background: #fff; color: var(--navy);
  display: grid; place-items: center; cursor: pointer; transition: border-color .15s, color .15s; }
.cal-nav:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
.cal-nav:disabled { opacity: .35; cursor: not-allowed; }
.cal-nav.is-ghost { visibility: hidden; }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 11px; font-weight: 800; color: var(--muted);
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px; }
.cal-dow span { padding: 6px 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; }
.cal-day { position: relative; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center;
  font: 600 14px var(--font); color: var(--text); }
.cal-day span { position: relative; z-index: 1; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  transition: background .12s, color .12s, box-shadow .12s; }
.cal-day:hover:not(:disabled) span { background: var(--blue-soft); color: var(--blue); }
.cal-day.is-out { color: #AEB8CA; }
.cal-day.is-hidden { visibility: hidden; pointer-events: none; }
.cal-day.is-today span::after { content: ""; position: absolute; bottom: 5px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--teal); }
.cal-day.is-selected span, .cal-day.range-start span, .cal-day.range-end span { background: var(--blue); color: #fff; box-shadow: 0 6px 14px -5px rgba(34, 81, 209, .7); }
.cal-day.is-selected:hover span, .cal-day.range-start:hover span, .cal-day.range-end:hover span { background: var(--blue-2); color: #fff; }
.cal-day.is-selected.is-today span::after, .cal-day.range-start.is-today span::after, .cal-day.range-end.is-today span::after { background: #fff; }
.cal-day:disabled { color: #C9D0DC; cursor: not-allowed; }
.cal-day:disabled span { text-decoration: line-through; text-decoration-color: rgba(201, 208, 220, .8); }
.cal-day:focus-visible { outline: none; }
.cal-day:focus-visible span { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--blue); }
/* range band */
.cal-day.in-range::before, .cal-day.range-start::before, .cal-day.range-end::before { content: ""; position: absolute; top: 2px; bottom: 2px; left: 0; right: 0; background: var(--blue-soft); }
.cal-day.range-start::before { left: 50%; }
.cal-day.range-end::before { right: 50%; }
.cal-day.range-start.range-end::before { display: none; }
.cal-day.in-range span { color: var(--blue-2); }
.cal-day.in-range:hover span { background: #D6E0FA; }
.cal-day.is-preview::before { background: #EFF3FD; }
.cal-day.is-preview.range-end span { background: #fff; color: var(--blue); box-shadow: inset 0 0 0 2px var(--blue); }
.cal-grid .cal-day:nth-child(7n+1)::before { border-radius: 10px 0 0 10px; }
.cal-grid .cal-day:nth-child(7n)::before { border-radius: 0 10px 10px 0; }
/* month / year grids */
.cal-mgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 4px 0; }
.cal-cell { height: 54px; border: 1px solid transparent; border-radius: 11px; background: none; font: 600 14px var(--font); color: var(--text); cursor: pointer; transition: background .12s, color .12s; }
.cal-cell:hover:not(:disabled) { background: var(--blue-soft); color: var(--blue); }
.cal-cell.is-current { border-color: rgba(20, 184, 166, .6); }
.cal-cell.is-selected { background: var(--blue); color: #fff; box-shadow: 0 6px 14px -5px rgba(34, 81, 209, .7); }
.cal-cell:disabled { color: #C9D0DC; cursor: not-allowed; }
.cal-cell:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--blue); }
.cal-body.anim-next { animation: calNext .2s ease; }
.cal-body.anim-prev { animation: calPrev .2s ease; }
.cal-body.anim-zoom { animation: calZoom .2s ease; }
@keyframes calNext { from { opacity: 0; transform: translateX(16px); } }
@keyframes calPrev { from { opacity: 0; transform: translateX(-16px); } }
@keyframes calZoom { from { opacity: 0; transform: scale(.95); } }
.cal-foot { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-top: 1px solid var(--line); }
.cal-foot .spacer { flex: 1; }
.link-btn { border: 0; background: none; padding: 7px 10px; border-radius: 8px; font: 700 13.5px var(--font); color: var(--blue); cursor: pointer; }
.link-btn:hover:not(:disabled) { background: var(--blue-soft); }
.link-btn.is-muted { color: var(--muted); }
.link-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- time column (date & time picker) ---------- */
.dtp { display: flex; }
.dtp-time { width: 168px; border-left: 1px solid var(--line); padding: 16px 12px; display: flex; flex-direction: column; }
.dtp-time h5 { margin: 0 0 10px; text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.dtp-readout { text-align: center; font: 800 24px var(--font); color: var(--navy); letter-spacing: -.02em; margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.dtp-readout small { font-size: 13px; color: var(--blue); margin-left: 3px; }
.time-cols { display: flex; gap: 6px; }
.time-col { flex: 1; height: 228px; overflow-y: auto; scrollbar-width: none; scroll-snap-type: y proximity; padding: 2px;
  mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.time-col::-webkit-scrollbar { display: none; }
.time-col::before, .time-col::after { content: ""; display: block; height: 96px; }
.time-opt { display: block; width: 100%; height: 34px; border: 0; border-radius: 8px; background: none; font: 600 14px var(--font); color: var(--text);
  cursor: pointer; scroll-snap-align: center; font-variant-numeric: tabular-nums; }
.time-opt:hover { background: var(--bg); }
.time-opt.is-selected { background: var(--blue); color: #fff; }
.time-opt:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.time-ampm { display: flex; gap: 4px; margin-top: 10px; padding: 3px; background: var(--bg); border-radius: 10px; }
.time-ampm button { flex: 1; height: 32px; border: 0; border-radius: 8px; background: none; font: 700 13px var(--font); color: var(--muted); cursor: pointer; transition: background .15s, color .15s; }
.time-ampm button.is-selected { background: #fff; color: var(--navy); box-shadow: 0 1px 3px rgba(11, 27, 63, .16); }
.pop-sheet .dtp { flex-direction: column; }
.pop-sheet .dtp-time { width: auto; border-left: 0; border-top: 1px solid var(--line); }
.pop-sheet .time-col { height: 150px; }
.pop-sheet .time-col::before, .pop-sheet .time-col::after { height: 58px; }

/* ---------- date range picker ---------- */
.rp-root { position: relative; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; }
.rp-root > input[type=date] { width: auto; }
.rp-trigger { display: inline-flex; align-items: center; gap: 10px; height: 46px; min-width: 250px; max-width: 100%; padding: 0 40px 0 14px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; font: 600 14px var(--font); color: var(--navy); cursor: pointer;
  transition: border-color .15s, box-shadow .15s; }
.rp-trigger:hover { border-color: #C5CFE2; }
.rp-trigger.is-open { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(34, 81, 209, .15); }
.rp-trigger > svg { color: var(--blue); flex: none; }
.rp-label { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-label.is-empty { color: var(--muted); font-weight: 500; }
.rp-chev { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; transition: transform .2s; }
.rp-trigger.is-open + .rp-chev { transform: translateY(-50%) rotate(180deg); }
.rp-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border: 0; border-radius: 7px;
  background: var(--bg); color: var(--muted); display: none; place-items: center; cursor: pointer; }
.rp-clear:hover { background: var(--bad-soft); color: var(--bad); }
.rp-root.has-value .rp-clear { display: grid; }
.rp-root.has-value .rp-chev { display: none; }
.rp-panel { display: flex; }
.rp-presets { width: 172px; flex: none; padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; background: #FAFBFD; border-right: 1px solid var(--line); border-radius: 16px 0 0 16px; }
.rp-presets .rp-ptitle { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 4px 12px 8px; }
.rp-preset { text-align: left; border: 0; background: none; padding: 9px 12px; border-radius: 9px; font: 600 13.5px var(--font); color: var(--text); cursor: pointer; transition: background .12s, color .12s; white-space: nowrap; }
.rp-preset:hover { background: #fff; color: var(--blue); box-shadow: 0 1px 2px rgba(11, 27, 63, .06); }
.rp-preset.is-active { background: var(--blue); color: #fff; box-shadow: 0 6px 14px -6px rgba(34, 81, 209, .7); }
.rp-main { display: flex; flex-direction: column; min-width: 0; }
.rp-months { display: flex; }
.rp-months .cal + .cal { border-left: 1px solid var(--line); }
.rp-months .cal { width: 300px; }
.rp-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.rp-summary { flex: 1; min-width: 160px; font-size: 13.5px; color: var(--muted); }
.rp-summary b { color: var(--navy); }
.rp-summary .rp-days { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--teal-soft); color: #0B766A; font-weight: 700; font-size: 12px; }
.pop-sheet .rp-panel { flex-direction: column; }
.pop-sheet .rp-presets { width: auto; flex-direction: row; overflow-x: auto; gap: 6px; padding: 14px 16px 4px; background: none; border: 0; border-radius: 0; scrollbar-width: none; }
.pop-sheet .rp-presets::-webkit-scrollbar { display: none; }
.pop-sheet .rp-presets .rp-ptitle { display: none; }
.pop-sheet .rp-preset { border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; background: #fff; }
.pop-sheet .rp-months .cal { width: auto; flex: 1; }

/* ---------- download button ---------- */
.dl-btn { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 18px 10px 10px;
  border: 0; border-radius: 13px; background: linear-gradient(135deg, var(--blue) 0%, var(--navy-3) 100%); color: #fff !important;
  text-decoration: none !important; font: inherit; text-align: left; cursor: pointer;
  box-shadow: 0 12px 26px -12px rgba(34, 81, 209, .8), inset 0 1px 0 rgba(255, 255, 255, .16);
  transition: transform .15s, box-shadow .2s, filter .2s; }
.dl-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, #0FA596, #0B766A); opacity: 0; transition: opacity .35s; }
.dl-btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .24), transparent); transform: skewX(-18deg); transition: left .7s ease; }
.dl-btn:hover { transform: translateY(-1px); box-shadow: 0 16px 30px -12px rgba(34, 81, 209, .9), inset 0 1px 0 rgba(255, 255, 255, .16); }
.dl-btn:hover::after { left: 130%; }
.dl-btn:active { transform: translateY(0); }
.dl-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--blue); }
.dl-ico { position: relative; z-index: 1; width: 42px; height: 42px; flex: none; border-radius: 10px; background: rgba(255, 255, 255, .15); display: grid; place-items: center; }
.dl-ring { position: absolute; inset: 3px; width: 36px; height: 36px; transform: rotate(-90deg); opacity: 0; transition: opacity .2s; }
.dl-ring circle { fill: none; stroke-width: 3; }
.dl-ring .dl-track { stroke: rgba(255, 255, 255, .22); }
.dl-ring .dl-bar { stroke: #fff; stroke-linecap: round; stroke-dasharray: 100.53; stroke-dashoffset: 100.53; transition: stroke-dashoffset .2s ease; }
.dl-arrow, .dl-check { width: 20px; height: 20px; transition: transform .25s cubic-bezier(.2, .9, .3, 1.2), opacity .2s; }
.dl-check { position: absolute; opacity: 0; transform: scale(.4); }
.dl-check path { stroke-dasharray: 24; stroke-dashoffset: 24; }
.dl-btn:hover .dl-arrow { animation: dlBob .9s ease-in-out infinite; }
.dl-text { position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.dl-label { font-weight: 700; font-size: 15px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dl-meta { font-size: 12.5px; opacity: .78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-fill { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; z-index: 1; background: var(--teal); box-shadow: 0 0 10px var(--teal); transition: width .2s ease, opacity .3s; }
.dl-btn[data-state=loading] { cursor: progress; }
.dl-btn[data-state=loading] .dl-ring { opacity: 1; }
.dl-btn[data-state=loading] .dl-arrow { transform: scale(.72); animation: none; }
.dl-btn[data-state=loading].is-indeterminate .dl-ring { animation: dlSpin 1s linear infinite; }
.dl-btn[data-state=loading].is-indeterminate .dl-bar { stroke-dashoffset: 70; }
.dl-btn[data-state=done]::before { opacity: 1; }
.dl-btn[data-state=done] { box-shadow: 0 12px 26px -12px rgba(15, 165, 150, .8); }
.dl-btn[data-state=done] .dl-arrow { opacity: 0; transform: translateY(10px); animation: none; }
.dl-btn[data-state=done] .dl-check { opacity: 1; transform: none; }
.dl-btn[data-state=done] .dl-check path { animation: dlDraw .45s .1s ease forwards; }
.dl-btn[data-state=done] .dl-fill { opacity: 0; }
.dl-btn[data-state=error] { animation: dlShake .4s ease; filter: saturate(.6); }
.dl-btn.dl-sm { width: auto; display: inline-flex; padding: 3px; border-radius: 10px; }
.dl-btn.dl-sm .dl-ico { width: 32px; height: 32px; border-radius: 8px; background: transparent; }
.dl-btn.dl-sm .dl-ring { inset: 1px; width: 30px; height: 30px; }
.dl-btn.dl-sm .dl-arrow, .dl-btn.dl-sm .dl-check { width: 17px; height: 17px; }
.dl-btn.dl-sm .dl-text { display: none; }
@keyframes dlBob { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(3px); } }
@keyframes dlSpin { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
@keyframes dlDraw { to { stroke-dashoffset: 0; } }
@keyframes dlShake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }

/* ---------- notification stack ---------- */
.toasts { position: fixed; z-index: 300; right: 20px; bottom: 20px; width: 380px; max-width: calc(100vw - 32px); pointer-events: none; }
.toast { position: absolute; right: 0; bottom: 0; width: 100%; pointer-events: auto; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 40px -14px rgba(11, 27, 63, .34), 0 2px 6px rgba(11, 27, 63, .05);
  transition: transform .4s cubic-bezier(.21, 1.02, .73, 1), opacity .35s, height .35s cubic-bezier(.21, 1.02, .73, 1);
  will-change: transform; touch-action: pan-y; user-select: none; }
.toast-inner { display: flex; gap: 12px; align-items: flex-start; padding: 14px 42px 16px 14px; transition: opacity .3s; }
.toast.is-behind .toast-inner { opacity: 0; }
.toast.is-dragging { transition: none; }
.toast-ico { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; }
.toast-ico svg { width: 18px; height: 18px; }
.toast-success .toast-ico { background: var(--ok-soft); color: var(--ok); }
.toast-error .toast-ico { background: var(--bad-soft); color: var(--bad); }
.toast-info .toast-ico { background: var(--blue-soft); color: var(--blue); }
.toast-warn .toast-ico { background: var(--warn-soft); color: var(--warn); }
.toast-body { min-width: 0; padding-top: 1px; }
.toast-title { font-weight: 700; color: var(--navy); font-size: 14.5px; line-height: 1.35; }
.toast-msg { color: var(--muted); font-size: 13.5px; line-height: 1.45; margin-top: 2px; word-break: break-word; }
.toast-close { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--muted);
  display: grid; place-items: center; cursor: pointer; opacity: .65; transition: opacity .15s, background .15s; }
.toast-close:hover, .toast-close:focus-visible { opacity: 1; background: var(--bg); outline: none; }
.toast-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform-origin: left; animation: toastBar linear forwards; }
.toast-success .toast-bar { background: var(--ok); }
.toast-error .toast-bar { background: var(--bad); }
.toast-info .toast-bar { background: var(--blue); }
.toast-warn .toast-bar { background: var(--warn); }
.toasts.is-paused .toast-bar { animation-play-state: paused; }
.toast.is-behind .toast-bar { opacity: 0; }
.toasts-more { position: absolute; right: 12px; z-index: 5; pointer-events: none; padding: 3px 9px; border-radius: 999px; background: var(--navy); color: #fff;
  font-size: 11.5px; font-weight: 700; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; }
.toasts-more.is-visible { opacity: 1; transform: none; }
@keyframes toastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 640px) { .toasts { left: 16px; right: 16px; bottom: 16px; width: auto; max-width: none; } }

@media (prefers-reduced-motion: reduce) {
  .pop, .toast, .cal-body, .dl-btn, .dl-btn * { animation: none !important; transition-duration: .01ms !important; }
}
@media print { .toasts, .pop { display: none !important; } }