/* Собственные элементы форм — правка Дарьи 25.09.2026: «все попапы и
 * выпадашки в нашем стиле, не системные». Системные select, календарь,
 * часы, чекбокс и кнопка файла подменяются на наши; нативный элемент
 * остаётся в разметке скрытым — форма отправляется как раньше, а без
 * JavaScript всё продолжает работать системными контролами.
 * Цвета и скругления — токены прототипа (proto.css), внешний вид — по его
 * .langpick / .pick / .check / .sheet. */

/* !important на размерах: у нативного select часто inline style="width:100%", он
   побеждал класс, и скрытый select шириной 290px вылезал за экран телефона —
   страница «уезжала» вправо (мобильная проверка 25.09). */
.ui-hidden{position:absolute!important;width:1px!important;height:1px!important;min-width:0!important;
  padding:0!important;border:0!important;opacity:0;pointer-events:none;overflow:hidden;margin:0;clip:rect(0 0 0 0)}

/* поле-кнопка: одинаковая для выпадашки, даты и времени */
.ui-field{display:inline-flex;align-items:center;gap:8px;width:100%;min-height:38px;
  padding:8px 34px 8px 11px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface-2);color:var(--text);font:inherit;text-align:start;cursor:pointer;
  position:relative;box-sizing:border-box}
.ui-field:hover{border-color:var(--brand)}
.ui-field:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.ui-field.empty{color:var(--text-mute)}
.ui-field.bad{border-color:var(--bad)}
.ui-field::after{content:"";position:absolute;inset-inline-end:13px;top:50%;width:6px;height:6px;
  border:solid var(--text-mute);border-width:0 1.5px 1.5px 0;transform:translateY(-70%) rotate(45deg)}
.ui-field--cal::after{width:9px;height:9px;border:1.5px solid var(--text-mute);border-radius:2px;transform:translateY(-50%);border-top-width:3px}
.ui-field--time::after{width:9px;height:9px;border:1.5px solid var(--text-mute);border-radius:50%;transform:translateY(-50%)}
[dir="rtl"] .ui-field{padding:8px 11px 8px 34px}

.dd{position:relative;width:100%}
.dd__list{display:none;position:absolute;inset-inline-start:0;top:calc(100% + 6px);min-width:100%;
  max-height:264px;overflow:auto;z-index:60;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;padding:5px;box-shadow:0 20px 44px -18px rgba(0,0,0,.9)}
.dd.open .dd__list{display:block}
.dd__opt{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;
  padding:8px 10px;border-radius:7px;font:inherit;font-size:13.5px;color:var(--text-dim);
  cursor:pointer;text-align:start;white-space:nowrap}
.dd__opt:hover,.dd__opt.hl{background:var(--surface-2);color:var(--text)}
.dd__opt.on{color:var(--brand-2)}
.dd__opt small{margin-inline-start:auto;color:var(--text-mute);font-family:var(--mono);font-size:11.5px}

/* календарь */
.cal{display:none;position:absolute;inset-inline-start:0;top:calc(100% + 6px);z-index:60;width:272px;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px;
  box-shadow:0 20px 44px -18px rgba(0,0,0,.9)}
.dd.open .cal{display:block}
.cal__hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.cal__hd b{font-size:13.5px;text-transform:capitalize}
.cal__nav{border:1px solid var(--line);background:var(--surface-2);color:var(--text-dim);width:28px;height:28px;
  border-radius:7px;cursor:pointer;font:inherit}
.cal__nav:hover{border-color:var(--brand);color:var(--text)}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal__wd{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--text-mute);text-align:center;padding:4px 0;text-transform:uppercase}
.cal__day{border:0;background:none;color:var(--text-dim);height:32px;border-radius:7px;cursor:pointer;font:inherit;font-size:13px}
.cal__day:hover{background:var(--surface-2);color:var(--text)}
.cal__day.other{color:var(--text-mute);opacity:.45}
.cal__day.today{color:var(--brand-2)}
.cal__day.on{background:rgba(46,155,214,.18);color:var(--brand-2);font-weight:600}
.cal__day[disabled]{opacity:.25;cursor:default}
.cal__day[disabled]:hover{background:none}

/* чекбокс */
.ck{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:13.5px;color:var(--text-dim);user-select:none}
.ck__box{width:16px;height:16px;border-radius:5px;border:1.5px solid var(--line);flex:0 0 auto;display:grid;place-items:center;background:var(--surface-2)}
.ck.on{color:var(--text)}
.ck.on .ck__box{border-color:var(--brand-2);background:rgba(46,155,214,.18)}
.ck.on .ck__box::after{content:"";width:4px;height:8px;border:solid var(--brand-2);border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-1px)}
.ck:focus-within .ck__box{outline:2px solid var(--brand);outline-offset:1px}

/* файл */
.file{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.file__btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text);font:inherit;font-size:13.5px;cursor:pointer}
.file__btn:hover{border-color:var(--brand)}
.file:focus-within .file__btn{outline:2px solid var(--brand);outline-offset:1px}
.file__name{font-size:13px;color:var(--text-dim);font-family:var(--mono)}
.file__name.empty{color:var(--text-mute);font-family:inherit}

/* сообщение «получилось» — пара к .err из прототипа */
.ok{background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.35);color:#7ee2b8;border-radius:10px;padding:10px 14px;font-size:13px;margin-bottom:14px}

/* ошибки полей стандартных форм Django (сброс пароля) — в стиле .err, без маркеров списка */
ul.errorlist{list-style:none;margin:6px 0 0;padding:0;font-size:12.5px;color:#f28b8b}
ul.errorlist li{margin:2px 0}