/* forms.css — Фильтры и поля, модалки, вход, токены движения, мелочи. Порядок подключения файлов задан в app/web.py (CSS_FILES) и важен для каскада. */
/* ---------- фильтры, поля ---------- */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
.search{border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:8px 11px;font:inherit;font-size:14px;color:var(--ink);min-width:220px}
.search:focus{outline:2px solid var(--brand);border-color:transparent}
.inl{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--ink2);font-weight:600}
.inl .search{min-width:220px}
.temp{width:72px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);border-radius:6px;padding:4px 8px;font:inherit;font-size:14px;color:#fff;font-variant-numeric:tabular-nums}
.temp::placeholder{color:rgba(255,255,255,.6)}
.temp:focus{outline:2px solid #fff;border-color:transparent}
.stsel{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:4px 10px;font:inherit;font-size:12.5px;font-weight:700;color:var(--ink2);cursor:pointer}
.stsel.plan{color:var(--brand);background:var(--brand-soft);border-color:transparent}
.stsel.done{color:var(--ok);background:var(--ok-soft);border-color:transparent}
.stsel.not_done,.stsel.cancelled{color:var(--bad);background:var(--bad-soft);border-color:transparent}
.stsel.moved{color:var(--warn);background:var(--warn-soft);border-color:transparent}

/* ---------- модалка ---------- */
.modal{position:fixed;inset:0;background:rgba(3,20,55,.5);display:none;place-items:center;z-index:10;padding:16px}
.modal.on{display:grid}
.dlg{background:var(--surface);border-radius:16px;width:min(680px,100%);box-shadow:0 20px 60px rgba(0,0,0,.3);border:1px solid var(--line2);max-height:calc(100vh - 32px);display:flex;flex-direction:column}
.dlg .hd{padding:18px 22px;border-bottom:1px solid var(--line2);display:flex;align-items:center}
.dlg .hd h3{margin:0;font-size:17px;font-weight:800}
.dlg .hd .x{all:unset;margin-left:auto;cursor:pointer;color:var(--ink3);font-size:22px;padding:0 6px;line-height:1}
.dlg .hd .x:hover{color:var(--ink)}
.form{padding:18px 22px;display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;overflow:auto}
.f{display:flex;flex-direction:column;gap:5px}
.f label{font-size:12.5px;color:var(--ink2);font-weight:700}
.f input,.f select,.f textarea{border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:9px 11px;font:inherit;font-size:14.5px;color:var(--ink)}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--brand);border-color:transparent}
.f.w{grid-column:1/-1}
.dlg .ft{padding:14px 22px 18px;display:flex;gap:10px;justify-content:flex-end;border-top:1px solid var(--line2)}
.dlg .ft .note{margin-right:auto;font-size:13px;color:var(--ink3);align-self:center}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:11px 18px;border-radius:10px;font-size:14px;display:none;z-index:20;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.toast.on{display:block}
.stub{padding:48px;text-align:center;color:var(--ink3);font-size:15px}
.hidden{display:none!important}

/* ---------- вход ---------- */
.login{min-height:100vh;display:grid;place-items:center;background:linear-gradient(160deg,var(--nav-a) 0%,var(--nav-b) 100%);padding:16px}
.login-box{background:var(--surface);border-radius:18px;padding:34px 34px 30px;width:min(400px,100%);display:flex;flex-direction:column;gap:14px;box-shadow:0 24px 70px rgba(0,0,0,.35)}
.login-box .brand{padding:0 0 12px;align-items:flex-start;gap:12px}
.login-box .brand img{height:64px;width:auto;object-fit:contain;align-self:flex-start}
.login-box .brand b{color:var(--ink);font-size:17px;font-weight:800;display:block}
.login-box .brand small{color:var(--ink3);font-size:13px}
.login-box label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--ink2);font-weight:700}
.login-box input{border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:11px 12px;font:inherit;font-size:15px;color:var(--ink);font-weight:400}
.login-box input:focus{outline:2px solid var(--brand);border-color:transparent}
.login-box .btn{justify-content:center;padding:12px;font-size:15px}
.err{color:var(--bad);font-size:13px;min-height:1em}

/* ---------- движение: токены как в NordPass, всё гасится prefers-reduced-motion ---------- */
:root{--dur-fast:.12s;--dur:.2s;--dur-slow:.32s;--ease:cubic-bezier(.22,.61,.36,1);--ring:0 0 0 4px rgba(3,52,134,.18)}
:root[data-theme="dark"]{--ring:0 0 0 4px rgba(91,141,239,.3)}
@keyframes view-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes dlg-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes sheet-up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes drawer-in{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.screen.on.anim{animation:view-in var(--dur-slow) var(--ease)}
.modal.on{animation:fade-in var(--dur) var(--ease)}
.modal.on .dlg{animation:dlg-in var(--dur-slow) var(--ease)}
.toast.on{animation:toast-in var(--dur) var(--ease)}
.toast.bad{background:var(--bad)}
.btn,.nav button,.chip,.pill,.kpi,.fl,.frow,.vchip,.acc-h,.lnk-reg,.lnk-name,.search,.f input,.f select,.attn .it,tr.click td{transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur-fast) var(--ease)}
.btn:active,.vchip:active,.nav button:active{transform:translateY(1px)}
.fl:hover,.soon.live:hover{box-shadow:0 6px 20px rgba(11,18,32,.10);transform:translateY(-1px)}
.btn:focus-visible,.vchip:focus-visible,.acc-h:focus-visible,.kpi.click:focus-visible,.lnk-reg:focus-visible,.lnk-name:focus-visible{outline:none;box-shadow:var(--ring)}
.search:focus,.f input:focus,.f select:focus,.f textarea:focus,.temp:focus,.login-box input:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
.meter i{transition:width var(--dur-slow) var(--ease)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- мелкие ---------- */
.sm{font-size:12.5px}
tr.click{cursor:pointer}
tr.click:hover td{background:var(--brand-band)}
.kpi.click{cursor:pointer;user-select:none}
.kpi.click:hover{box-shadow:0 6px 20px rgba(11,18,32,.10);transform:translateY(-1px)}
.kpi.click.active{box-shadow:var(--ring)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--surface)}
.seg button{all:unset;padding:8px 14px;font-size:13.5px;font-weight:600;color:var(--ink2);cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.seg button.on{background:var(--brand);color:#fff}
.seg button:not(.on):hover{background:var(--surface2)}
.card.sec{margin-bottom:16px}
.card.sec .none{padding:16px 20px;color:var(--ok);font-weight:700}
td.num.warn{color:var(--warn);font-weight:600}