/* Пробник календаря для полів дат у вікні «Нова сесія». Розмітку
   малює datefx.js (.dfx), варіант — клас dfx-a / dfx-b / dfx-c. */

.datefx-sw{display:flex; align-items:center; gap:4px; padding:4px; border:1px solid var(--line);
  border-radius:12px; background:var(--panel); font:500 12px/1 inherit;
  box-shadow:0 8px 30px rgba(0,0,0,.35)}
.datefx-sw span{padding:0 8px; color:var(--faint); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase}
.datefx-sw button{border:0; background:none; color:var(--dim); font:inherit;
  padding:7px 10px; border-radius:8px; cursor:pointer; transition:background .15s, color .15s}
.datefx-sw button:hover{color:var(--text); background:var(--panel-2)}
.datefx-sw button.on{color:var(--text); background:var(--accent-soft);
  box-shadow:inset 0 0 0 1px var(--accent)}

/* Поки календар свій — системну іконку ховаємо, ставимо свою */
html[data-datefx] #runFrom::-webkit-calendar-picker-indicator,
html[data-datefx] #runTo::-webkit-calendar-picker-indicator{display:none}
html[data-datefx] #runFrom, html[data-datefx] #runTo{cursor:pointer; padding-right:42px;
  background-repeat:no-repeat; background-position:right 14px center, 0 0;
  background-size:18px 18px, auto}
html[data-datefx] #runFrom, html[data-datefx] #runTo{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c8c90' stroke-width='1.6' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='3'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E"),
    linear-gradient(180deg, color-mix(in srgb, var(--text) 3%, transparent), transparent 70%)}

/* поле, для якого відкрито календар (клас ставить datefx.js) — як у
   фокусі: зелена рамка й м'яке кільце */
html[data-datefx] #runBox #runFrom.dfx-target, html[data-datefx] #runBox #runTo.dfx-target{
  border-color:color-mix(in srgb, var(--accent) 70%, transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent),
    0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
  transition:border-color .25s, box-shadow .3s}

/* ═══════════════ спільне ═══════════════ */
.dfx{position:fixed; z-index:200; width:308px; padding:14px; border-radius:16px;
  color:var(--text); font-family:inherit; font-size:13px;
  border:1px solid color-mix(in srgb, var(--text) 10%, transparent);
  background:var(--panel);
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent),
    0 24px 60px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.4);
  transform-origin:50% 0; animation:dfx-in .22s cubic-bezier(.16,1,.3,1)}
/* переїзд під «По яку» після вибору «З»: місце плавно, сітка
   з'являється наново, підпис коротко світиться акцентом */
.dfx.hop{transition:left .34s cubic-bezier(.16,1,.3,1), top .34s cubic-bezier(.16,1,.3,1)}
.dfx.hop .dfx-grid{animation:dfx-sl .3s cubic-bezier(.16,1,.3,1)}
.dfx.hop .dfx-cap{animation:dfx-cap .6s ease}
@keyframes dfx-cap{0%, 40%{color:var(--accent)} 100%{color:var(--faint-2, var(--faint))}}
@keyframes dfx-in{from{opacity:0; transform:translateY(-6px) scale(.98)} to{opacity:1; transform:none}}
.dfx button{font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0}
.dfx button:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.dfx button:disabled{cursor:default}

.dfx-cap{margin:0 2px 8px; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint-2, var(--faint))}
.dfx-head{display:flex; align-items:center; gap:6px; margin-bottom:10px}
.dfx-title{flex:1; text-align:left; padding:4px 6px !important; border-radius:8px}
.dfx-title b{font-size:15px; font-weight:600; letter-spacing:-.01em}
.dfx-title span{font-family:var(--mono); font-size:13px; color:var(--dim); margin-left:2px}
.dfx-nav{display:grid; place-items:center; width:32px; height:32px; border-radius:9px;
  color:var(--dim) !important; transition:background .15s, color .15s}
.dfx-nav:hover:not(:disabled){background:color-mix(in srgb, var(--text) 7%, transparent); color:var(--text) !important}
.dfx-nav:disabled{opacity:.25}

.dfx-grid{display:grid; grid-template-columns:repeat(7, 1fr); row-gap:2px}
.dfx.slideR .dfx-grid{animation:dfx-sl .26s cubic-bezier(.16,1,.3,1)}
.dfx.slideL .dfx-grid{animation:dfx-sr .26s cubic-bezier(.16,1,.3,1)}
@keyframes dfx-sl{from{opacity:0; transform:translateX(14px)} to{opacity:1; transform:none}}
@keyframes dfx-sr{from{opacity:0; transform:translateX(-14px)} to{opacity:1; transform:none}}
.dfx-wd{display:grid; place-items:center; height:26px; font-family:var(--mono); font-size:9.5px;
  font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--faint-2, var(--faint))}
.dfx-wd.we{opacity:.7}
.dfx-pad{height:38px}
.dfx-c .dfx-pad{height:34px}
.dfx-d{position:relative; height:38px; font-variant-numeric:tabular-nums}
.dfx-d span{position:relative; z-index:1; display:grid; place-items:center; width:36px; height:36px;
  margin:auto; border-radius:50%; transition:background .15s, color .15s, transform .15s}
.dfx-d:hover:not(:disabled) span{background:color-mix(in srgb, var(--text) 8%, transparent)}
.dfx-d:active:not(:disabled) span{transform:scale(.9)}
.dfx-d:disabled{color:var(--faint-2, var(--faint)); opacity:.45}
.dfx-d.today span{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--text) 30%, transparent)}
/* смуга проміжку — фоном клітинки, кінці — кружком акценту */
.dfx-d.in::before, .dfx-d.edge::before{content:""; position:absolute; top:3px; bottom:3px; left:0; right:0;
  background:color-mix(in srgb, var(--accent) 13%, transparent)}
.dfx-d.edge.from::before{left:50%}
.dfx-d.edge.to::before{right:50%}
.dfx-d.from span, .dfx-d.to span{background:var(--accent) !important; color:var(--bg, #050505);
  font-weight:600; box-shadow:0 6px 16px -6px color-mix(in srgb, var(--accent) 80%, transparent)}

/* ═══════════════ A · «Класика» ═══════════════
   Компактний, тихий: підпис, яке поле обираємо, місяць зі стрілками,
   круглі дні. */
.dfx-a{width:300px}

/* ═══════════════ B · «Карта» ═══════════════
   Тло картки «Карта» (штриховка), зверху дві вкладки «З → По» з рискою,
   знизу готові проміжки — для бектесту це найчастіший вибір. Дні —
   квадратні з заокругленням. */
.dfx-b{width:332px; padding:16px;
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--text) 2.5%, transparent) 0 1px,
      transparent 1px 8px),
    linear-gradient(160deg, var(--panel-2), var(--panel) 90%)}
.dfx-ends{display:flex; align-items:stretch; gap:6px; margin-bottom:12px}
.dfx-end{flex:1; display:flex; flex-direction:column; align-items:flex-start; gap:3px;
  padding:8px 10px !important; border-radius:10px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--text) 9%, transparent);
  font-family:var(--mono) !important; font-size:13px; font-variant-numeric:tabular-nums;
  transition:box-shadow .2s, background .2s}
.dfx-end u{text-decoration:none; font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint-2, var(--faint))}
.dfx-end.on{background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent)}
.dfx-end.on u{color:var(--accent)}
.dfx-arrow{align-self:center; color:var(--faint-2, var(--faint))}
.dfx-b .dfx-d span{border-radius:10px}
.dfx-b .dfx-d.in::before, .dfx-b .dfx-d.edge::before{top:2px; bottom:2px}
.dfx-pre{display:flex; gap:6px; margin-top:12px; padding-top:12px;
  border-top:1px solid color-mix(in srgb, var(--text) 8%, transparent)}
.dfx-pre button{flex:1; padding:7px 0 !important; border-radius:8px; font-family:var(--mono) !important;
  font-size:11px; color:var(--dim) !important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--text) 9%, transparent);
  transition:color .15s, box-shadow .15s, transform .15s}
.dfx-pre button:hover{color:var(--text) !important; box-shadow:inset 0 0 0 1px var(--accent)}
.dfx-pre button:active{transform:scale(.95)}

/* ═══════════════ C · «Роки» ═══════════════
   Ліворуч стовпчик років (історія з 2003-го — гортати місяці назад
   довго), над днями — місяці плитками. Вкладки «З → По» як у B. */
.dfx-c{width:404px; padding:16px}
.dfx-cols{display:flex; gap:12px}
.dfx-years{flex:0 0 64px; max-height:286px; overflow-y:auto; scrollbar-width:none;
  display:flex; flex-direction:column; gap:2px; padding-right:10px;
  border-right:1px solid color-mix(in srgb, var(--text) 8%, transparent);
  -webkit-mask:linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
          mask:linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent)}
.dfx-years::-webkit-scrollbar{display:none}
.dfx-y{padding:7px 0 !important; border-radius:8px; font-family:var(--mono) !important; font-size:12.5px;
  color:var(--dim) !important; transition:color .15s, background .15s}
.dfx-y:hover{color:var(--text) !important; background:color-mix(in srgb, var(--text) 6%, transparent)}
.dfx-y.on{color:var(--accent) !important; background:var(--accent-soft); font-weight:600}
.dfx-main{flex:1; min-width:0}
.dfx-months{display:grid; grid-template-columns:repeat(6, 1fr); gap:4px; margin-bottom:10px}
.dfx-m{padding:6px 0 !important; border-radius:8px; font-size:11.5px; color:var(--dim) !important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--text) 7%, transparent);
  transition:color .15s, box-shadow .15s, background .15s}
.dfx-m:hover:not(:disabled){color:var(--text) !important}
.dfx-m.on{color:var(--text) !important; background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent)}
.dfx-m:disabled{opacity:.3}
.dfx-c .dfx-d{height:34px}
.dfx-c .dfx-d span{width:32px; height:32px; font-size:12.5px}

/* ═══════════════ D · «Подвійний» ═══════════════
   Замість двох полів — одна кнопка «Період». Вона відкриває великий
   календар посередині екрана: зліва місяць «З якої дати», справа «По
   яку», у кожного свої стрілки; унизу підсумок і «Готово». Тло за
   календарем притемнюється. */
html[data-datefx="d"] #runStep2 .ac-row2:has(#runFrom){display:none}
html:not([data-datefx="d"]) .dfx2-field{display:none}
/* #runBox #dfxRange — щоб значок не перебили стилі полів вікна */
html[data-datefx] #runBox #dfxRange{display:flex; align-items:center; gap:14px; width:100%; min-height:52px; padding:0 16px 0 46px;
  text-align:left; cursor:pointer; color:var(--text); font:inherit;
  background-color:var(--panel); background-repeat:no-repeat; background-position:16px center, 0 0; background-size:18px 18px, auto;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c8c90' stroke-width='1.6' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='3'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E"),
    linear-gradient(180deg, color-mix(in srgb, var(--text) 3%, transparent), transparent 70%)}
.dfx2-bdates{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:14px;
  font-variant-numeric:tabular-nums}
.dfx2-bdates b{font-weight:500}
.dfx2-bdates em, .dfx2-sum em{font-style:normal; color:var(--faint-2, var(--faint))}

.dfx.dfx-dbl{width:min(704px, calc(100vw - 16px)); padding:22px 24px 18px;
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent),
    0 30px 80px -20px rgba(0,0,0,.8), 0 0 0 100vmax rgba(0,0,0,.45);
  animation:dfx-pop .26s cubic-bezier(.16,1,.3,1)}
@keyframes dfx-pop{from{opacity:0; transform:scale(.97)} to{opacity:1; transform:none}}
.dfx2-cols{display:grid; grid-template-columns:1fr 1fr; gap:0}
.dfx2-col{min-width:0}
.dfx2-col + .dfx2-col{padding-left:24px; margin-left:24px;
  border-left:1px solid color-mix(in srgb, var(--text) 8%, transparent)}
.dfx2-col.slideR .dfx-grid{animation:dfx-sl .26s cubic-bezier(.16,1,.3,1)}
.dfx2-col.slideL .dfx-grid{animation:dfx-sr .26s cubic-bezier(.16,1,.3,1)}
.dfx-dbl .dfx-cap{margin-bottom:6px}
/* назва місяця + окрема кнопка року */
.dfx2-title{display:flex; align-items:center; gap:8px}
.dfx2-yr{display:inline-flex; align-items:center; gap:4px; padding:4px 8px 4px 10px !important; border-radius:8px;
  font-family:var(--mono) !important; font-size:13px; color:var(--dim) !important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--text) 9%, transparent);
  transition:color .15s, box-shadow .15s, background .15s}
.dfx2-yr svg{transition:transform .22s cubic-bezier(.16,1,.3,1)}
.dfx2-yr:hover{color:var(--text) !important; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--text) 18%, transparent)}
.dfx2-yr.on{color:var(--accent) !important; background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent)}
.dfx2-yr.on svg{transform:rotate(180deg)}
/* список років лягає поверх днів тієї ж половини — висота не міняється */
.dfx2-body{position:relative}
.dfx2-years{position:absolute; inset:0; z-index:2; display:grid; grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:40px; gap:4px; align-content:start; padding:2px; overflow-y:auto; scrollbar-width:none;
  background:var(--panel); animation:dfx-yin .2s cubic-bezier(.16,1,.3,1)}
.dfx2-years::-webkit-scrollbar{display:none}
@keyframes dfx-yin{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}}
.dfx2-y{border-radius:9px; font-family:var(--mono) !important; font-size:13px; font-variant-numeric:tabular-nums;
  color:var(--dim) !important; transition:color .15s, background .15s, transform .15s}
.dfx2-y:hover:not(:disabled){color:var(--text) !important; background:color-mix(in srgb, var(--text) 7%, transparent)}
.dfx2-y:active:not(:disabled){transform:scale(.94)}
.dfx2-y.on{color:var(--bg, #050505) !important; background:var(--accent); font-weight:600}
.dfx2-y:disabled{opacity:.25}
.dfx2-foot{display:flex; align-items:center; gap:14px; margin-top:16px; padding-top:16px;
  border-top:1px solid color-mix(in srgb, var(--text) 8%, transparent)}
.dfx2-sum{display:flex; align-items:baseline; gap:10px; font-family:var(--mono); font-size:14px;
  font-variant-numeric:tabular-nums}
.dfx2-sum b{font-weight:500}
.dfx2-done{margin-left:auto; padding:10px 22px !important; border-radius:10px;
  background:var(--accent) !important; color:var(--bg, #050505) !important; font-weight:600 !important;
  transition:filter .15s, transform .15s}
.dfx2-done:hover{filter:brightness(1.08)}
.dfx2-done:active{transform:scale(.97)}
@media(max-width:640px){
  .dfx2-cols{grid-template-columns:1fr}
  .dfx2-col + .dfx2-col{padding:14px 0 0; margin:14px 0 0; border-left:0;
    border-top:1px solid color-mix(in srgb, var(--text) 8%, transparent)}
  .dfx.dfx-dbl{max-height:calc(100vh - 16px); overflow-y:auto}
}

@media(max-width:480px){
  .dfx, .dfx-b, .dfx-c{width:calc(100vw - 16px)}
  .dfx-years{flex-basis:56px}
}
@media(prefers-reduced-motion:reduce){
  .dfx, .dfx-grid{animation:none !important}
}