/* Date field (components/_date_field.html, static/js/date_field.js).
   Its own file, loaded by base.html AND templates/portal/base.html: on
   13-sep-2026 these rules moved from the script into components.css, which
   the client portal does not load (its global app rules would restyle the
   portal), and every date picker in the portal rendered as raw text: the
   month grid spilled out as "MonTueWed...123456...". One file, both shells. */
.vs-date{position:relative;width:100%}
.vs-date__field{position:relative}
.vs-date .vs-date__input{padding-right:2rem;font-variant-numeric:tabular-nums}
.vs-date__input--plain{width:100%;height:var(--vs-control-h,32px);padding:0 .75rem;
  border:1px solid var(--vs-filter-border,#d1d5db);border-radius:var(--vs-radius,6px);
  background:var(--vs-surface,#fff);font-size:var(--vs-t-body,13px);
  line-height:calc(var(--vs-control-h,32px) - 2px);color:var(--vs-ink,#111827);
  transition:border-color .15s,box-shadow .15s}
.vs-date__input--plain::placeholder{color:#9ca3af}
.vs-date__input--plain:focus{outline:none;border-color:var(--color-primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 18%,transparent)}
.vs-date__input--plain[readonly],.vs-date__input--plain:disabled{background:#f3f4f6;color:#6b7280;cursor:not-allowed}
.vs-date .vs-date__input.is-invalid{border-color:#dc2626}
.vs-date__glyph{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);
  font-size:12px;color:#9ca3af;pointer-events:none}
.vs-date--locked .vs-date__glyph{color:#d1d5db}
.vs-date__panel{position:fixed;z-index:80;width:17rem;padding:10px;
  background:var(--vs-surface,#fff);border:1px solid var(--vs-rule,#e5e7eb);border-radius:8px;
  box-shadow:0 8px 24px rgba(17,24,39,.12);font-size:var(--vs-t-body,13px);color:var(--vs-ink,#111827)}
.vs-date__head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:6px}
.vs-date__title{flex:1;text-align:center;font-weight:500;font-size:var(--vs-t-body,13px)}
.vs-date__grid{display:grid;grid-template-columns:repeat(7,34px);gap:2px}
.vs-date__wd{height:24px;line-height:24px;text-align:center;font-size:var(--vs-t-eyebrow,11px);
  font-weight:500;color:#6b7280}
.vs-date__day{height:34px;width:34px;margin:0;padding:0;border:0;background:transparent;
  border-radius:6px;font:inherit;font-size:var(--vs-t-body,13px);color:var(--vs-ink,#111827);cursor:pointer}
.vs-date__day:hover:not(:disabled){background:#f3f4f6}
.vs-date__day.is-out{color:#9ca3af}
.vs-date__day.is-today{font-weight:600;box-shadow:inset 0 0 0 1px #d1d5db}
.vs-date__day.is-cursor{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--color-primary) 45%,transparent)}
.vs-date__day.is-selected,.vs-date__day.is-selected:hover{background:var(--color-primary);color:#fff;box-shadow:none}
.vs-date__day:disabled{color:#d1d5db;cursor:not-allowed}
.vs-date__foot{display:flex;justify-content:space-between;margin-top:6px;padding-top:6px;
  border-top:1px solid var(--vs-rule,#e5e7eb)}