/* MRD Inventory — the app's date field and calendar (core/ui.js › "date picker").
   Every <input type="date"> becomes a text box that shows "29 Oct 2026" and opens this calendar.
   Colours follow app.css: navy text #0E1726, teal #0B7A6B / #2BC4A8, borders #DCE1E8, 8–12px radii. */

/* The browser's own calendar never shows (the field is switched to text; this covers the moment before). */
input[type=date]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}
input[type=date]::-webkit-inner-spin-button,input[type=date]::-webkit-clear-button{display:none;-webkit-appearance:none}

/* ------------------------------------------------------------------ the field */
input[data-dp]{padding-right:36px;font-variant-numeric:tabular-nums;text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235E6B7D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:16px 16px}
input[data-dp]:focus,input[data-dp][aria-expanded=true]{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230B7A6B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E")}
input[data-dp][aria-expanded=true]{outline:none;border-color:#0B7A6B;box-shadow:0 0 0 3px rgba(11,122,107,.12)}
input[data-dp]::placeholder{color:#8D99AC}
input[data-dp]:disabled,input[data-dp][readonly]{cursor:default}
input[data-dp].dp-bad{border-color:#C42B2A}
input[data-dp].dp-bad:focus{box-shadow:0 0 0 3px rgba(196,43,42,.14)}
/* Playbook & rules › holidays sized its date box by type; keep that size now the box is a text field. */
.xset-hol-add input[data-dp]{flex:0 1 170px;width:auto}

/* ------------------------------------------------------------------ the calendar */
#dp-pop.dp{position:fixed;top:0;left:0;z-index:160;width:304px;max-width:calc(100vw - 16px);padding:8px 12px 12px;
  background:#fff;border:1px solid #DCE1E8;border-radius:12px;box-shadow:0 16px 40px rgba(14,23,38,.18),0 2px 6px rgba(14,23,38,.06);
  color:#0E1726;font-size:13px;line-height:1.3;text-align:left;animation:dp-in .12s ease-out}
@keyframes dp-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
#dp-pop.dp.up{animation-name:dp-in-up}
@keyframes dp-in-up{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}

.dp-hd{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-bottom:8px}
.dp-nav{flex:0 0 32px;width:32px;height:32px;padding:0;display:flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:transparent;color:#3B4758;cursor:pointer}
.dp-nav:hover{background:#EEF1F5;color:#0E1726}
.dp-nav:disabled{color:#C9D0DA;background:transparent;cursor:default}
.dp-prev svg{transform:scaleX(-1)}
.dp-my{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;gap:2px}
.dp-sel{height:32px;min-width:0;padding:0 24px 0 8px;field-sizing:content;border:1px solid transparent;border-radius:8px;cursor:pointer;
  -webkit-appearance:none;appearance:none;font:inherit;font-size:14px;font-weight:500;color:#0E1726;
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235E6B7D' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 7px center/11px 11px}
.dp-sel:hover{background-color:#F4F6F8}
.dp-sel:focus{outline:none;border-color:#0B7A6B;box-shadow:0 0 0 3px rgba(11,122,107,.12)}
.dp-sel option{font-weight:400}

.dp-grid{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0 2px}
.dp-grid th{height:28px;padding:0;text-align:center;font-size:12px;font-weight:500;color:#5E6B7D}
.dp-grid th.we{color:#9AA5B5}
.dp-grid td{padding:0 1px;text-align:center}
.dp-d{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:36px;margin:0;padding:0;border:0;border-radius:8px;
  background:transparent;font:inherit;font-size:13px;font-variant-numeric:tabular-nums;color:#0E1726;cursor:pointer}
.dp-d:hover{background:#EEF5F3}
.dp-d.we{color:#6E7A8C}
.dp-d.out{color:#A9B3C1}
.dp-d.out.we{color:#B9C2CE}
.dp-d.today{color:#0B7A6B;font-weight:500}
.dp-d.today::after{content:"";position:absolute;left:50%;bottom:4px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#2BC4A8}
.dp-d.on{background:#0B7A6B;color:#fff;font-weight:500;box-shadow:0 1px 2px rgba(11,122,107,.3)}
.dp-d.on:hover{background:#08695C}
.dp-d.on.today::after{background:#fff}
.dp-d[aria-disabled=true]{color:#D3D9E1;background:transparent;font-weight:400;cursor:not-allowed}
.dp-d[aria-disabled=true].today::after{background:#D3D9E1}
.dp-d:focus{outline:none}
.dp-d:focus-visible{outline:2px solid #0B7A6B;outline-offset:1px}
.dp-d.on:focus-visible{outline-color:#2BC4A8}

.dp-ft{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid #EEF1F4}
.dp-ft .btn{height:32px}
.dp-today{color:#0B7A6B;border-color:#BFE3DC}
.dp-today:hover{background:#EEF5F3;color:#08695C}
.dp-clear{color:#3B4758}

/* ------------------------------------------------------------------ phones: a sheet at the bottom */
.dp-sheet-hd{display:none}
.dp-scrim{position:fixed;inset:0;z-index:159;background:rgba(14,23,38,.45);animation:dp-fade .15s ease-out}
@keyframes dp-fade{from{opacity:0}to{opacity:1}}
#dp-pop.dp.sheet{top:auto;left:0;right:0;bottom:0;width:auto;max-width:none;max-height:calc(100vh - 24px);overflow-y:auto;
  padding:6px 16px calc(16px + env(safe-area-inset-bottom,0px));border:0;border-radius:14px 14px 0 0;
  box-shadow:0 -12px 40px rgba(14,23,38,.25);animation:dp-up .18s ease-out}
@keyframes dp-up{from{transform:translateY(32px);opacity:.5}to{transform:none;opacity:1}}
#dp-pop.dp.sheet::before{content:"";display:block;width:40px;height:4px;margin:2px auto 8px;border-radius:2px;background:#D5DBE3}
#dp-pop.dp.sheet .dp-sheet-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid #EEF1F4}
.dp-sheet-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px;font-weight:600}
.dp-x{flex:0 0 36px;width:36px;height:36px;padding:0;display:flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:transparent;color:#5E6B7D;cursor:pointer}
.dp-x:hover{background:#EEF1F5;color:#0E1726}
#dp-pop.dp.sheet .dp-nav{flex-basis:40px;width:40px;height:40px}
#dp-pop.dp.sheet .dp-sel{height:40px;font-size:16px;padding:0 20px 0 6px}
#dp-pop.dp.sheet .dp-d{height:44px;font-size:16px}
#dp-pop.dp.sheet .dp-ft .btn{flex:1 1 0;height:40px}

@media (prefers-reduced-motion:reduce){#dp-pop.dp,.dp-scrim{animation:none}}
@media print{#dp-pop.dp,.dp-scrim{display:none!important}}