/* Календарь Beles (static/js/date-picker.js): поле с датой и всплывающая панель. */

:root {
  --bdp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7785' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
  --bdp-icon-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a6ad4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
  --bdp-f-accent: #0a6ad4;
  --bdp-f-accent-dark: #085bb5;
  --bdp-f-hover-border: #b9c2cb;
  --bdp-f-hover-bg: #f8fafc;
  --bdp-f-hover-soft: #eef5fd;
  --bdp-f-ring: 0 0 0 3px rgba(10, 106, 212, 0.18);
}
[data-bs-theme="dark"] {
  --bdp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aab4c0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
  --bdp-icon-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366B2FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
  --bdp-f-accent: #4a97ec;
  --bdp-f-accent-dark: #66B2FF;
  --bdp-f-hover-border: rgba(255, 255, 255, 0.38);
  --bdp-f-hover-bg: rgba(255, 255, 255, 0.04);
  --bdp-f-hover-soft: rgba(74, 151, 236, 0.12);
  --bdp-f-ring: 0 0 0 3px rgba(102, 178, 255, 0.3);
}

/* Исходное поле: остаётся в форме и отправляется, но не видно. */
input.bdp-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
}

/* Видимое поле — как поле-кнопка DateRangePicker админки лендинга
   (.adm-dp__trigger): значок календаря слева, курсор-рука, при наведении
   рамка темнее и лёгкий фон, открытая панель — рамка акцентом и кольцо. */
.bdp-gone { display: none !important; }
/* input.bdp-input, а не .bdp-input: на страницах посещаемости attendance-cms.css
   задаёт .form-control { background: white; padding: .75rem } и подключается позже —
   значок календаря повторялся по всему полю и наезжал на дату. */
input.bdp-input {
  padding-left: 2.25rem;
  background-image: var(--bdp-icon);
  background-repeat: no-repeat;
  background-position: left 0.75rem center;
  background-size: 16px 16px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}
.bdp-input.form-control-sm,
.input-group-sm > .bdp-input {
  padding-left: 1.95rem;
  background-position: left 0.6rem center;
  background-size: 14px 14px;
}
.form-control.bdp-input:hover:not(:disabled) { border-color: var(--bdp-f-hover-border); background-color: var(--bdp-f-hover-bg); }
.form-control.bdp-input:focus { border-color: var(--bdp-f-accent); box-shadow: var(--bdp-f-ring); }
.form-control.bdp-input:disabled { cursor: default; }
/* Поле-кнопка (пара «с … по»): печатать нельзя, ввод — в полях внизу панели. */
.bdp-input--trigger, .bdp-trigger {
  caret-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  text-overflow: ellipsis;
}
.form-control.bdp-trigger.has-value { border-color: var(--bdp-f-accent); background-image: var(--bdp-icon-active); }
.form-control.bdp-trigger.has-value:hover:not(:disabled) { border-color: var(--bdp-f-accent-dark); background-color: var(--bdp-f-hover-soft); }
.form-control.bdp-input.is-open,
.form-control.bdp-input.is-open:hover {
  border-color: var(--bdp-f-accent);
  box-shadow: var(--bdp-f-ring);
  background-image: var(--bdp-icon-active);
}
/* Bootstrap ставит на .is-invalid свой значок справа — оставляем календарь слева, красной рамки достаточно. */
.form-control.bdp-input.is-invalid,
.was-validated .form-control.bdp-input:invalid,
.was-validated .form-control.bdp-input:valid,
.form-control.bdp-input.is-valid {
  padding-right: 0.75rem;
  padding-left: 2.25rem;
  background-image: var(--bdp-icon);
  background-position: left 0.75rem center;
  background-size: 16px 16px;
}
.form-control.form-control-sm.bdp-input.is-invalid,
.input-group-sm > .form-control.bdp-input.is-invalid { padding-left: 1.95rem; padding-right: 0.5rem; background-position: left 0.6rem center; background-size: 14px 14px; }
.form-control.bdp-input.is-invalid:hover { border-color: var(--bs-form-invalid-border-color); }
.form-control.bdp-input.is-invalid.is-open,
.form-control.bdp-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2); }
/* Общий триггер пары занимает всю группу: остальные элементы группы спрятаны. */
.input-group > .bdp-trigger {
  margin-left: 0 !important;
  border-radius: var(--bs-border-radius) !important;
}
.input-group-sm > .bdp-trigger { border-radius: var(--bs-border-radius-sm) !important; }
.input-group-lg > .bdp-trigger { border-radius: var(--bs-border-radius-lg) !important; }
/* Одна дата в .input-group: исходное поле стоит перед видимым — возвращаем видимому левые скругления. */
.input-group > .bdp-native:first-child + .bdp-input {
  margin-left: 0;
  border-top-left-radius: var(--bs-border-radius);
  border-bottom-left-radius: var(--bs-border-radius);
}
.input-group-sm > .bdp-native:first-child + .bdp-input {
  border-top-left-radius: var(--bs-border-radius-sm);
  border-bottom-left-radius: var(--bs-border-radius-sm);
}
.input-group-lg > .bdp-native:first-child + .bdp-input {
  border-top-left-radius: var(--bs-border-radius-lg);
  border-bottom-left-radius: var(--bs-border-radius-lg);
}

/* ---------- Панель ----------
   Вид и размеры — как DateRangePicker/DatePicker админки лендинга
   (orleu-front/src/app/admin/admin.css: .adm-dp, .adm-cal). */
.bdp {
  --bdp-accent: #0a6ad4;
  --bdp-accent-dark: #085bb5;
  --bdp-soft: #eaf2fc;
  --bdp-soft-hover: #d9e8fa;
  --bdp-preview: #f2f7fd;
  --bdp-bg: #ffffff;
  --bdp-bg-alt: #fafbfc;
  --bdp-text: #1c2733;
  --bdp-muted: #6b7785;
  --bdp-weekend: #56616c;
  --bdp-weekend-head: #9aa4ae;
  --bdp-disabled: #c3cad1;
  --bdp-border: #e2e6ea;
  --bdp-border-strong: #cdd4db;
  --bdp-border-hover: #b9c2cb;
  --bdp-hover: #eef1f4;
  --bdp-hover-2: #f3f5f7;
  --bdp-danger: #c0392b;
  --bdp-ring: 0 0 0 3px rgba(10, 106, 212, 0.18);
  --bdp-shadow: 0 12px 32px rgba(15, 34, 51, 0.14), 0 2px 6px rgba(15, 34, 51, 0.06);
  --bdp-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7785' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

  position: fixed;
  z-index: 1085;
  top: 0;
  left: 0;
  box-sizing: border-box;
  background: var(--bdp-bg);
  color: var(--bdp-text);
  border: 1px solid var(--bdp-border);
  border-radius: 12px;
  box-shadow: var(--bdp-shadow);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.3;
  text-align: left;
  white-space: normal;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.bdp.is-shown { opacity: 1; }
[data-bs-theme="dark"] .bdp {
  --bdp-accent: #2f86e6;
  --bdp-accent-dark: #4a97ec;
  --bdp-soft: rgba(47, 134, 230, 0.22);
  --bdp-soft-hover: rgba(47, 134, 230, 0.34);
  --bdp-preview: rgba(47, 134, 230, 0.12);
  --bdp-bg: #1c2533;
  --bdp-bg-alt: #18202c;
  --bdp-text: #f1f4f8;
  --bdp-muted: rgba(255, 255, 255, 0.6);
  --bdp-weekend: rgba(255, 255, 255, 0.62);
  --bdp-weekend-head: rgba(255, 255, 255, 0.42);
  --bdp-disabled: rgba(255, 255, 255, 0.24);
  --bdp-border: rgba(255, 255, 255, 0.12);
  --bdp-border-strong: rgba(255, 255, 255, 0.22);
  --bdp-border-hover: rgba(255, 255, 255, 0.36);
  --bdp-hover: rgba(255, 255, 255, 0.08);
  --bdp-hover-2: rgba(255, 255, 255, 0.06);
  --bdp-danger: #f07167;
  --bdp-ring: 0 0 0 3px rgba(102, 178, 255, 0.32);
  --bdp-shadow: 0 14px 36px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
  --bdp-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aab4c0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.bdp *, .bdp *::before, .bdp *::after { box-sizing: border-box; }
.bdp button, .bdp input, .bdp select { font-family: inherit; margin: 0; }

.bdp--single { width: 292px; padding: 12px; }
.bdp--range { display: flex; align-items: stretch; }

/* Готовые периоды */
.bdp__presets {
  display: flex; flex-direction: column; gap: 2px; flex: none; width: 150px; padding: 12px 8px;
  border-right: 1px solid var(--bdp-border); background: var(--bdp-bg-alt); border-radius: 12px 0 0 12px;
}
.bdp__preset {
  height: 30px; padding: 0 10px; border: 1px solid transparent; border-radius: 6px; background: transparent;
  font-size: 13px; line-height: 1; color: var(--bdp-text); text-align: left; white-space: nowrap; cursor: pointer;
}
.bdp__preset:hover { background: var(--bdp-hover); }
.bdp__preset.is-on, .bdp__preset.is-on:hover { background: var(--bdp-soft); color: var(--bdp-accent-dark); font-weight: 600; }
.bdp__preset:disabled { opacity: 0.4; cursor: default; background: transparent; }
.bdp__main { padding: 12px 14px; min-width: 0; }
.bdp__months { display: flex; gap: 24px; }

/* Месяц */
.bdp__cal { width: 252px; }
.bdp--single .bdp__cal { width: 266px; }
.bdp__head { display: flex; align-items: center; justify-content: space-between; height: 32px; margin-bottom: 4px; }
.bdp__nav, .bdp__nav-gap { flex: none; width: 30px; height: 30px; }
.bdp__nav {
  display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--bdp-muted); cursor: pointer;
}
.bdp__nav:hover { background: var(--bdp-hover-2); border-color: var(--bdp-border); color: var(--bdp-text); }
.bdp__title {
  display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 8px;
  border: 0; border-radius: 6px; background: transparent;
  font-size: 14px; font-weight: 600; line-height: 1; color: var(--bdp-text); white-space: nowrap; cursor: pointer;
}
.bdp__title:hover, .bdp__title[aria-expanded="true"] { background: var(--bdp-hover-2); }
.bdp__title svg { color: var(--bdp-muted); }

.bdp__grid { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0 2px; table-layout: fixed; }
.bdp__grid th {
  height: 26px; padding: 0; border: 0; background: none;
  font-size: 12px; font-weight: 500; color: var(--bdp-muted); text-align: center;
}
.bdp__grid th.is-weekend { color: var(--bdp-weekend-head); }
.bdp__grid td { height: 34px; padding: 0; border: 0; background: none; text-align: center; }
.bdp__day {
  position: relative; display: block; width: 100%; height: 34px; padding: 0; border: 0;
  border-radius: 6px; background: transparent;
  font-size: 13px; line-height: 1; color: var(--bdp-text); font-variant-numeric: tabular-nums; cursor: pointer;
}
.bdp__day.is-weekend { color: var(--bdp-weekend); }
.bdp__day:hover { background: var(--bdp-hover); }
/* Сегодня — синим, с точкой снизу. */
.bdp__day.is-today { color: var(--bdp-accent); font-weight: 700; }
.bdp__day.is-today::after {
  content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: currentColor;
}
/* Период: светлая полоса между краями, края — заливка. */
.bdp__cell.is-in { background: var(--bdp-soft); }
.bdp__cell.is-start { background: linear-gradient(to right, transparent 50%, var(--bdp-soft) 50%); }
.bdp__cell.is-end { background: linear-gradient(to left, transparent 50%, var(--bdp-soft) 50%); }
.bdp__cell.is-in .bdp__day { border-radius: 0; }
.bdp__cell.is-in .bdp__day:hover { background: var(--bdp-soft-hover); }
/* Предпросмотр, пока выбран только первый конец: полоса бледнее. */
.bdp__cell.is-preview.is-in { background: var(--bdp-preview); }
.bdp__cell.is-preview.is-start { background: linear-gradient(to right, transparent 50%, var(--bdp-preview) 50%); }
.bdp__cell.is-preview.is-end { background: linear-gradient(to left, transparent 50%, var(--bdp-preview) 50%); }
.bdp__day.is-edge, .bdp__day.is-edge:hover { background: var(--bdp-accent); color: #fff; font-weight: 600; }
.bdp__day.is-edge:hover { background: var(--bdp-accent-dark); }
.bdp__day.is-disabled, .bdp__day.is-disabled:hover { color: var(--bdp-disabled); background: transparent; font-weight: 400; cursor: default; }
.bdp__day.is-disabled::after { display: none; }
.bdp__cell.is-in .bdp__day.is-disabled { background: transparent; }

.bdp__nav:focus-visible, .bdp__title:focus-visible, .bdp__month:focus-visible, .bdp__preset:focus-visible,
.bdp__btn:focus-visible, .bdp__year-select:focus-visible { outline: none; box-shadow: var(--bdp-ring); }
.bdp__day:focus-visible { outline: 2px solid var(--bdp-accent); outline-offset: 1px; z-index: 1; }

/* Выбор месяца и года */
.bdp__chooser { height: 242px; }
.bdp__year { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 0 10px; }
.bdp__year-select {
  flex: 1; min-width: 0; height: 30px; padding: 0 26px 0 10px;
  border: 1px solid transparent; border-radius: 6px;
  background: transparent var(--bdp-chevron) no-repeat right 8px center / 12px 12px;
  color: var(--bdp-text); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; text-align-last: center;
  appearance: none; -webkit-appearance: none; cursor: pointer;
}
.bdp__year-select:hover { background-color: var(--bdp-hover-2); }
.bdp__year-select option { color: #1c2733; background: #fff; }
.bdp__mlist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bdp__month {
  height: 40px; padding: 0; border: 1px solid var(--bdp-border); border-radius: 6px; background: var(--bdp-bg);
  font-size: 13px; color: var(--bdp-text); cursor: pointer;
}
.bdp__month:hover { border-color: var(--bdp-border-hover); background: var(--bdp-hover-2); }
.bdp__month.is-today { color: var(--bdp-accent); font-weight: 600; }
.bdp__month.is-current, .bdp__month.is-current:hover { background: var(--bdp-accent); border-color: var(--bdp-accent); color: #fff; }

/* Низ панели */
.bdp__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px;
  margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--bdp-border);
}
.bdp--single .bdp__foot { flex-wrap: nowrap; gap: 4px; }
.bdp__foot-gap { flex: 1; }
.bdp__inputs { display: flex; align-items: center; gap: 8px; }
.bdp__text { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--bdp-muted); }
.bdp__inp {
  width: 108px; height: 30px; padding: 0 8px;
  border: 1px solid var(--bdp-border-strong); border-radius: 6px; background: var(--bdp-bg);
  font-size: 13px; color: var(--bdp-text); font-variant-numeric: tabular-nums;
}
.bdp__inp::placeholder { color: #8b96a1; }
.bdp__inp:focus { outline: none; border-color: var(--bdp-accent); box-shadow: var(--bdp-ring); }
.bdp__inp.is-invalid { border-color: var(--bdp-danger); box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.14); }
.bdp__inp--time { width: 60px; text-align: center; }
.bdp__dash { color: var(--bdp-muted); }
.bdp__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.bdp__error { margin-top: 8px; font-size: 12px; color: var(--bdp-danger); }
.bdp__error[hidden] { display: none; }

.bdp__btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  height: 34px; padding: 0 14px; border: 1px solid var(--bdp-border-strong); border-radius: 6px;
  background: var(--bdp-bg); color: var(--bdp-text);
  font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.bdp__btn:hover { background: var(--bdp-hover-2); border-color: var(--bdp-border-hover); }
.bdp__btn:disabled { opacity: 0.5; cursor: default; pointer-events: none; }
.bdp__btn--primary { background: var(--bdp-accent); border-color: var(--bdp-accent); color: #fff; }
.bdp__btn--primary:hover { background: var(--bdp-accent-dark); border-color: var(--bdp-accent-dark); color: #fff; }
/* Одна дата: компактные кнопки 30px, «Сегодня» — ссылкой, «Очистить» — приглушённо. */
.bdp--single .bdp__btn { height: 30px; padding: 0 10px; font-size: 13px; }
.bdp__btn--link { border-color: transparent; background: transparent; color: var(--bdp-accent); }
.bdp__btn--link:hover { border-color: transparent; background: var(--bdp-soft); color: var(--bdp-accent-dark); }
.bdp__btn--ghost { border-color: transparent; background: transparent; color: var(--bdp-muted); }
.bdp__btn--ghost:hover { border-color: transparent; background: var(--bdp-hover-2); color: var(--bdp-text); }
.bdp--single .bdp__btn--primary { margin-left: 4px; }

/* Время у одной даты */
.bdp__time { display: flex; align-items: center; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--bdp-border); }
.bdp__time-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin: 0; font-size: 13px; color: var(--bdp-muted); }
.bdp .bdp__time-input { width: 72px; text-align: center; }

/* Узкий экран: нижний лист на всю ширину, один месяц, периоды — строкой с прокруткой. */
.bdp-backdrop { position: fixed; inset: 0; z-index: 1084; background: rgba(15, 34, 51, 0.38); }
.bdp.is-sheet {
  top: auto !important; left: 0 !important; right: 0; bottom: 0; display: block; width: auto;
  max-height: 92vh; overflow-y: auto; border: 0; border-radius: 12px 12px 0 0;
  padding-bottom: env(safe-area-inset-bottom);
}
.bdp--single.is-sheet { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); }
.bdp.is-sheet .bdp__presets {
  flex-direction: row; gap: 6px; overflow-x: auto; width: auto; padding: 12px 16px;
  border-right: 0; border-bottom: 1px solid var(--bdp-border); border-radius: 12px 12px 0 0;
}
.bdp.is-sheet .bdp__preset { flex: none; border-color: var(--bdp-border-strong); background: var(--bdp-bg); }
.bdp.is-sheet .bdp__preset.is-on { border-color: var(--bdp-accent); background: var(--bdp-soft); }
.bdp.is-sheet .bdp__main { padding: 12px 16px 16px; }
.bdp.is-sheet .bdp__months { display: block; }
.bdp.is-sheet .bdp__cal { width: 100%; max-width: 420px; margin: 0 auto; }
.bdp.is-sheet .bdp__grid td, .bdp.is-sheet .bdp__day { height: 40px; }
.bdp.is-sheet .bdp__day { font-size: 14px; }
.bdp.is-sheet .bdp__chooser { height: 278px; }
.bdp--range.is-sheet .bdp__foot { flex-direction: column; align-items: stretch; }
.bdp.is-sheet .bdp__inputs { width: 100%; }
.bdp.is-sheet .bdp__text { flex: 1; min-width: 0; }
.bdp.is-sheet .bdp__inp:not(.bdp__inp--time) { flex: 1; width: auto; min-width: 0; }
.bdp--range.is-sheet .bdp__actions { margin-left: 0; }
.bdp--range.is-sheet .bdp__actions .bdp__btn { flex: 1; }
.bdp.is-sheet .bdp__foot, .bdp.is-sheet .bdp__time { max-width: 420px; margin-left: auto; margin-right: auto; }

@media (prefers-reduced-motion: reduce) {
  .bdp { transition: none; }
}