/* Date picker (public/js/date-picker.js, docs/date-picker.md). Loaded by the app and back-office layouts.
   Colours come from the layout's tokens, so it follows the palette, a company's accent and dark mode:
   the app (mifumo-ui.css) selects in --accent; the back office (admin.css) in --primary, like its other selected states. */

.dp,.dp-field,.dp-back{
  --dp-surface:var(--surface,#fff);
  --dp-ink:var(--ink,#252525);
  --dp-muted:var(--muted,#545454);
  --dp-faint:var(--s-faint,var(--faint,#7d7d7d));
  --dp-line:var(--line,#e4e4e4);
  --dp-hover:var(--sunk,#f1f1f1);
  --dp-accent:var(--dp-select,var(--accent,#252525));
  --dp-on:var(--dp-select-on,var(--accent-ink,#fff));
  --dp-soft:color-mix(in oklab,var(--dp-accent) 12%,transparent);
  --dp-shadow:var(--shadow-lg,0 12px 32px -12px rgb(0 0 0 / .18));
  --dp-r:var(--r-lg,14px);
}
.adm-body{--dp-select:var(--primary);--dp-select-on:var(--primary-ink)}
.adm-body .dp{--dp-shadow:var(--sh-lg)}

/* ---------- The field: text box + calendar icon, the real input hidden behind it ---------- */
.dp-field{position:relative;display:inline-flex;align-items:center;min-width:150px;max-width:100%;vertical-align:middle}
.dp-field>.dp-text{flex:1 1 auto;width:100%;min-width:0;margin:0;padding-right:40px;font-variant-numeric:tabular-nums;cursor:pointer}
.dp-field>.dp-text:focus{cursor:text}
.dp-field>.dp-text[aria-invalid=true]{border-color:var(--bad,#c0261c)}
.dp-field>.dp-native{position:absolute;left:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;pointer-events:none;z-index:-1}
.dp-btn{position:absolute;right:4px;top:50%;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  margin-top:-16px;padding:0;border:0;border-radius:var(--r-sm,8px);background:none;color:var(--dp-muted);cursor:pointer}
.dp-btn::before{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}  /* 44x44 tap target */
.dp-btn svg{flex:none;width:20px;height:20px;display:block;transition:transform .2s ease!important}
.dp-btn:hover{color:var(--dp-ink)}
.dp-btn:hover svg{transform:scale(1.05)}
.dp-btn:disabled{cursor:default;opacity:.5}
.dp-field.is-disabled>.dp-text{cursor:default}

/* ---------- The calendar ---------- */
.dp{position:fixed;inset:auto;margin:0;overflow:visible;z-index:1000;width:320px;max-width:calc(100vw - 16px);padding:16px;box-sizing:border-box;
  background:var(--dp-surface);color:var(--dp-ink);border:1px solid var(--dp-line);border-radius:var(--dp-r);box-shadow:var(--dp-shadow);
  font-family:var(--f-body,inherit);font-size:14px;line-height:1.3;text-align:left}
.dp.dp--range{width:372px}
.dp[hidden],.dp-back[hidden]{display:none}
.dp.is-in{animation:dp-in .2s cubic-bezier(.4,0,.2,1)!important}
@keyframes dp-in{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.dp button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
.dp button:focus-visible{outline:2px solid var(--dp-accent);outline-offset:2px}

.dp-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px;min-height:36px}
.dp-title{display:flex;align-items:center;gap:2px}
.dp-tbtn,.dp-back-btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 10px;border:0;border-radius:var(--r-md,10px);
  background:none;font-weight:600!important;font-size:16px!important;cursor:pointer;transition:background-color .2s ease,color .2s ease!important}
.dp-back-btn{font-size:13px!important;color:var(--dp-muted)}
.dp-back-btn svg{flex:none;width:16px;height:16px;transition:transform .2s ease!important}
.dp-back-btn:hover svg{transform:translateX(-1px)}
.dp-tbtn:hover,.dp-back-btn:hover{background:var(--dp-hover);color:var(--dp-ink)}
.dp-vtitle{font-weight:600;font-size:16px}
.dp-nav{display:flex;gap:4px}
.dp-nb{position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;
  border-radius:var(--r-md,10px);background:var(--dp-hover);color:var(--dp-muted);cursor:pointer;
  transition:background-color .2s ease,color .2s ease,transform .12s ease!important}
.dp-nb::before{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.dp-nb svg{flex:none;width:20px;height:20px;display:block}
.dp-nb:hover{background:var(--dp-accent);color:var(--dp-on);transform:scale(1.05)}
.dp-nb:active{transform:scale(.95)}

.dp-week,.dp-row{display:grid;grid-template-columns:repeat(7,1fr)}
.dp-week{margin-bottom:4px}
.dp-week span{padding:6px 0;text-align:center;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--dp-faint)}
.dp-days{display:grid;gap:2px;overflow:hidden}
.dp-row>span{display:flex}
.dp-day{position:relative;flex:1;display:flex;align-items:center;justify-content:center;aspect-ratio:1;min-height:36px;margin:0;padding:0;border:0;
  border-radius:var(--r-md,10px);background:transparent;font-size:14px!important;font-weight:500!important;font-variant-numeric:tabular-nums;cursor:pointer;
  transition:background-color .15s ease,color .15s ease,transform .15s ease!important}
.dp-day:hover:not(.is-dis):not(.is-sel){background:var(--dp-hover);transform:scale(1.06)}
.dp-day.is-out{color:var(--dp-faint);opacity:.6}
.dp-day.is-out:hover{opacity:1}
.dp-day.is-today:not(.is-sel){font-weight:700!important;color:var(--dp-accent)}
.dp-day.is-today:not(.is-sel)::after{content:"";position:absolute;bottom:5px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:currentColor}
.dp-day.is-sel{background:var(--dp-accent);color:var(--dp-on);font-weight:600!important;box-shadow:0 4px 12px -4px color-mix(in oklab,var(--dp-accent) 60%,transparent)}
.dp-day.is-dis{color:var(--dp-faint);opacity:.35;cursor:not-allowed;text-decoration:line-through}
/* range: a band from the start to the end */
.dp-day.is-in{background:var(--dp-soft);border-radius:0}
.dp-day.is-in:hover{background:color-mix(in oklab,var(--dp-accent) 20%,transparent);transform:none}
.dp-row>span:first-child .dp-day.is-in{border-radius:var(--r-md,10px) 0 0 var(--r-md,10px)}
.dp-row>span:last-child .dp-day.is-in{border-radius:0 var(--r-md,10px) var(--r-md,10px) 0}
.dp-day.is-start{border-radius:var(--r-md,10px) 0 0 var(--r-md,10px)}
.dp-day.is-end{border-radius:0 var(--r-md,10px) var(--r-md,10px) 0}
.dp-day.is-preview:not(.is-sel){background:color-mix(in oklab,var(--dp-accent) 28%,transparent);color:var(--dp-ink)}

.dp-slide-next{animation:dp-left .28s ease!important}
.dp-slide-prev{animation:dp-right .28s ease!important}
@keyframes dp-left{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
@keyframes dp-right{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:none}}

.dp-grid{display:grid;gap:8px}
.dp-grid--3{grid-template-columns:repeat(3,1fr)}
.dp-grid--4{grid-template-columns:repeat(4,1fr)}
.dp-cell{position:relative;height:44px;padding:0;border:0;border-radius:var(--r-md,10px);background:var(--dp-hover);font-size:14px!important;font-weight:500!important;
  cursor:pointer;transition:background-color .2s ease,color .2s ease!important}
.dp-cell:hover:not(.is-sel):not(.is-dis){background:var(--dp-soft);color:var(--dp-accent)}
.dp-cell.is-today:not(.is-sel){box-shadow:inset 0 0 0 1.5px var(--dp-accent)}
.dp-cell.is-sel{background:var(--dp-accent);color:var(--dp-on)}
.dp-cell.is-dis{opacity:.35;cursor:not-allowed}

.dp-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px}
.dp-chip{height:28px;padding:0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid var(--dp-line);border-radius:999px;background:none;font-size:12px!important;font-weight:500!important;
  color:var(--dp-muted);cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease!important}
.dp-chip:hover{background:var(--dp-soft);border-color:transparent;color:var(--dp-ink)}

.dp-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--dp-line)}
.dp-acts{display:flex;gap:2px}
.dp-link{height:32px;padding:0 10px;border:0;border-radius:var(--r-sm,8px);background:none;color:var(--dp-accent)!important;font-size:13px!important;font-weight:600!important;
  cursor:pointer;transition:background-color .2s ease!important}
.dp-link:hover:not(:disabled){background:var(--dp-soft)}
.dp-link:disabled{opacity:.4;cursor:default}
.dp-link--quiet{color:var(--dp-muted)!important;font-weight:500!important}
.dp-sel{font-size:13px;color:var(--dp-muted);text-align:right}
.dp-sel strong{color:var(--dp-ink);font-weight:600}

/* ---------- Phones: a sheet at the bottom of the screen ---------- */
.dp-back{position:fixed;inset:0;z-index:999;width:auto;height:auto;margin:0;padding:0;border:0;background:rgb(0 0 0 / .35)}
.dp.dp--sheet{left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;padding:16px 16px calc(16px + env(safe-area-inset-bottom));
  border-radius:var(--r-xl,20px) var(--r-xl,20px) 0 0;border-bottom:0}
.dp.dp--sheet.is-in{animation:dp-up .25s cubic-bezier(.4,0,.2,1)!important}
@keyframes dp-up{from{transform:translateY(100%)}to{transform:none}}
.dp--sheet .dp-day{min-height:44px;aspect-ratio:auto}
.dp--sheet .dp-days,.dp--sheet .dp-week{max-width:440px;margin-left:auto;margin-right:auto}

@media (prefers-reduced-motion:reduce){
  .dp.is-in,.dp.dp--sheet.is-in,.dp-slide-next,.dp-slide-prev{animation:none!important}
  .dp *,.dp-btn svg{transition:none!important}
  .dp-day:hover:not(.is-dis):not(.is-sel),.dp-nb:hover,.dp-nb:active{transform:none}
}
@media print{.dp,.dp-back,.dp-btn{display:none!important}.dp-field>.dp-text{padding-right:10px}}

/* ---------- Date and time (<input type="datetime-local">): the calendar field and a time box side by side ---------- */
/* In a narrow column the time box wraps under the date instead of running out of its card. */
.dp-datetime{display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-width:100%;min-width:0}
.dp-datetime>.dp-field{flex:1 1 150px;min-width:0}
.dp-datetime>.dp-time{flex:0 0 136px;width:136px;max-width:100%;min-width:0;margin:0}
.dp-field:hover>.dp-btn:not(:disabled),.dp-text[aria-expanded=true]~.dp-btn{color:var(--dp-accent)}

/* ---------- Time box (public/js/time-box.js): 24-hour text field + list of times ---------- */
.tb-field{position:relative;display:inline-flex;align-items:center;min-width:104px;max-width:100%;vertical-align:middle}
.tb-field>.tb-text{flex:1 1 auto;width:100%;min-width:0;margin:0;padding-right:40px;font-variant-numeric:tabular-nums}
.tb-field>.tb-text[aria-invalid=true]{border-color:var(--bad,#c0261c)}
.tb-field>.tb-native{position:absolute;left:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;pointer-events:none;z-index:-1}
.tb-field.is-disabled>.tb-text{cursor:default}
.dp-datetime>.tb-field{flex:0 0 110px;width:110px;min-width:0;max-width:100%}
.tb-list{position:fixed;z-index:1000;max-height:240px;margin:0;padding:4px;list-style:none;overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box;
  background:var(--surface,#fff);color:var(--ink,#252525);border:1px solid var(--line,#e4e4e4);
  border-radius:var(--r-md,10px);box-shadow:var(--shadow-lg,0 12px 32px -12px rgb(0 0 0 / .18));font-size:14px;font-variant-numeric:tabular-nums}
.tb-list>li{padding:8px 12px;border-radius:var(--r-sm,8px);cursor:pointer;white-space:nowrap}
.tb-list>li:hover,.tb-list>li.is-active{background:var(--sunk,#f1f1f1)}
.tb-list>li[aria-selected=true]{background:color-mix(in oklab,var(--accent,#252525) 12%,transparent);font-weight:600}