/* ═══════════════════════════════════════════════════════════════════
   FILTERS MODAL — вынесено из index.html.
   Стили модалки «Фильтры и настройки», rich-select dropdown'ов
   (Ответственный, Тип) и переопределения flatpickr.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── MODAL FRAME ──────────────────────────────────────────────── */
/* модалка фильтров — богатый редизайн. Soft-gradient
   подложка, скруглённые корнеры, глубокая многослойная тень,
   слабая индиго-кайма для премиум-ощущения. */
.filters-modal{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.50);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  display:none;
  z-index:2000;
}

.filters-modal.show{display:block}

/* модалка уменьшена — на FullHD не должна занимать
   половину экрана. 760→640, top центрируется реально. */
.filters-content{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:min(640px, calc(100vw - 32px));
  max-height:calc(100vh - 80px);
  overflow-y:auto;
  background:linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
  border:1px solid rgba(165,180,252,.40);
  border-radius:16px;
  box-shadow:
    0 24px 48px rgba(15,23,42,.22),
    0 8px 18px rgba(99,102,241,.10),
    inset 0 1px 0 rgba(255,255,255,.9);
  padding:20px 22px;
  font-family:"Segoe UI",Arial,system-ui,sans-serif;
}

.filters-grid-2col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px 20px;
}

.filters-row-3col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px 20px;
}

.filters-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px;
}

.filters-title{
  font-size:19px;
  font-weight:700;
  color:#0f172a;
  letter-spacing:-.2px;
}

/* крестик закрытия в стиле .modal-close c /knowledge-base
   — SVG-иконка вместо textual ✕, мягкий hover, аккуратное скругление. */
.filters-close{
  background:transparent;
  border:none;
  cursor:pointer;
  padding:0;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  transition:background .2s ease;
}
.filters-close svg{
  width:20px;
  height:20px;
  stroke:#6b7280;
  transition:stroke .2s ease;
}
.filters-close:hover{
  background:#f3f4f6;
}
.filters-close:hover svg{
  stroke:#374151;
}

.filter-group{
  margin-bottom:16px;
}

.filter-label{
  font-size:11px;
  font-weight:700;
  color:#4338ca;
  margin-bottom:8px;
  text-transform:uppercase;
  letter-spacing:.6px;
}

/* ─── FILTER CHIPS (статус, приоритет) ─────────────────────────── */
/* flex-wrap:wrap — новые опции переносятся на новую строку. */
.filter-options{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

/* чипы выбора — мягкие неактивные, индиго gradient
   у активного. Box-sizing + min-height = стабильность при toggle. */
.filter-option{
  box-sizing:border-box;
  min-height:36px;
  padding:8px 14px;
  background:#f3f4f6;
  border:1.5px solid transparent;
  border-radius:8px;
  font-size:13px;
  font-weight:600;
  color:#475569;
  cursor:pointer;
  outline:none;
  -webkit-tap-highlight-color:transparent;
  transition:background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
  white-space:nowrap;
}
.filter-option:hover{
  background:#e5e7eb;
  color:#1e293b;
}
.filter-option.active{
  background:linear-gradient(180deg, #6366f1 0%, #4f46e5 100%);
  border-color:transparent;
  color:#fff;
  box-shadow:
    0 2px 6px rgba(99,102,241,.20),
    0 4px 10px rgba(99,102,241,.12);
}

/* ─── NATIVE SELECT (Сортировать, Отдел) ───────────────────────── */
/* Стеклянные селекты — единый паттерн с .compose-mode-btn в ticket. */
.filter-select{
  width:100%;
  padding:10px 14px;
  border:1px solid rgba(203,213,225,.65);
  border-radius:9px;
  font-size:13px;
  font-weight:500;
  color:#1e293b;
  background:linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(248,250,252,.85) 100%);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(15,23,42,.04);
}
.filter-select:hover{
  border-color:rgba(99,102,241,.40);
}
.filter-select:focus{
  border-color:#6366f1;
  outline:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 0 0 3px rgba(99,102,241,.15);
}

/* ─── RICH SELECT (Ответственный, Тип) ─────────────────────────── */
/* rich custom dropdown — стекло как у .filter-select,
   но с богатым popup'ом, группированным по отделам. */
.rich-select{
  position:relative;
}
.rich-select-btn{
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:10px 14px;
  border:1px solid rgba(203,213,225,.65);
  border-radius:9px;
  font-size:13px;
  font-weight:500;
  color:#1e293b;
  background:linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(248,250,252,.85) 100%);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  cursor:pointer;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(15,23,42,.04);
}
.rich-select-btn:hover{ border-color:rgba(99,102,241,.40); }
.rich-select-btn[aria-expanded="true"]{
  border-color:#6366f1;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 0 0 3px rgba(99,102,241,.15);
}
.rich-select-label{
  flex:1;
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.rich-select-chevron{
  color:#6b7280;
  transition:transform .15s ease;
  flex-shrink:0;
}
.rich-select-btn[aria-expanded="true"] .rich-select-chevron{
  transform:rotate(180deg);
}

/* меню — position:fixed в body
   с box-sizing:border-box. Тонкий кастомный скроллбар вместо
   scrollbar-gutter (короткие меню без скролла не теряют ширину).
   z-index 2100 → 12100 — на /search модалка
   расширенного поиска имеет z-index 11000, меню должно быть выше. */
.rich-select-menu{
  position:fixed;
  box-sizing:border-box;
  max-height:220px;
  overflow-y:auto;
  /* без явного overflow-x:hidden браузер при overflow-y:auto считает
     overflow-x = auto → появляется лишний горизонтальный скролл
     (как в дропдауне шаблонов массового ответа). В тикете его нет. */
  overflow-x:hidden;
  background:#fff;
  border:1px solid rgba(165,180,252,.45);
  border-radius:10px;
  box-shadow:
    0 12px 28px rgba(15,23,42,.16),
    0 3px 8px rgba(99,102,241,.10);
  padding:6px;
  z-index:12100;
  animation:richSelectFade .12s ease-out;
}

/* тонкий кастомный scrollbar — 6px вместо системного
   ~17px, чтобы content-area не «уезжала» при появлении скролла. */
.rich-select-menu::-webkit-scrollbar{ width:6px; }
.rich-select-menu::-webkit-scrollbar-track{ background:transparent; }
.rich-select-menu::-webkit-scrollbar-thumb{
  background:rgba(99,102,241,.30);
  border-radius:3px;
}
.rich-select-menu::-webkit-scrollbar-thumb:hover{
  background:rgba(99,102,241,.50);
}
/* Firefox */
.rich-select-menu{ scrollbar-width:thin; scrollbar-color:rgba(99,102,241,.30) transparent; }
@keyframes richSelectFade{
  from{ opacity:0; transform:translateY(-4px); }
  to{ opacity:1; transform:translateY(0); }
}

.rich-select-item{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:8px 10px;
  background:transparent;
  border:none;
  border-radius:7px;
  cursor:pointer;
  font-family:inherit;
  font-size:13px;
  color:#1e293b;
  text-align:left;
  transition:background .1s ease, color .1s ease;
}
/* лейбл пункта — в одну строку, чтобы меню (width:auto) корректно
   подбирало ширину под самый длинный пункт, а не переносил его. */
.rich-select-item > span{ white-space:nowrap; }
.rich-select-item:hover{
  background:#eef2ff;
  color:#4338ca;
}
.rich-select-item[data-selected="true"]{
  background:#eef2ff;
  color:#4338ca;
  font-weight:600;
}
.rich-select-item .rich-select-item-check{
  width:14px; height:14px;
  margin-left:auto;
  color:#4f46e5;
  opacity:0;
  flex-shrink:0;
}
.rich-select-item[data-selected="true"] .rich-select-item-check{ opacity:1; }

.rich-select-group{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:#6366f1;
  padding:10px 10px 4px;
  display:flex;
  align-items:center;
  gap:8px;
}
.rich-select-group::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg, rgba(165,180,252,.5), transparent);
}
.rich-select-divider{
  height:1px;
  margin:6px 0;
  background:#f1f5f9;
}
/* цветной кружок отдела внутри .rich-select-group. */
.rich-select-group-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  flex-shrink:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5), 0 0 0 1px rgba(15,23,42,.06);
}

/* ─── DATE INPUTS ──────────────────────────────────────────────── */
.date-inputs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.date-input-group{
  display:flex;
  flex-direction:column;
}

.date-input-label{
  font-size:10px;
  font-weight:700;
  color:#6b7280;
  margin-bottom:5px;
  text-transform:uppercase;
  letter-spacing:.5px;
}

/* Date input в том же стеклянном стиле, что и selects. */
.date-input{
  padding:10px 12px;
  border:1px solid rgba(203,213,225,.65);
  border-radius:9px;
  font-size:13px;
  color:#1e293b;
  background:linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(248,250,252,.85) 100%);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  cursor:pointer;
  accent-color:#6366f1;
  transition:border-color .15s ease, box-shadow .15s ease;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(15,23,42,.04);
}
.date-input:hover{
  border-color:rgba(99,102,241,.40);
}
.date-input:focus{
  border-color:#6366f1;
  outline:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 0 0 3px rgba(99,102,241,.15);
}

/* ─── FLATPICKR (календарь) ────────────────────────────────────── */
/* переписано с нуля — glassy header с soft-indigo
   подложкой, year-spinner аккуратный, дни-кружки. */
.flatpickr-calendar{
  background:#fff !important;
  border:1px solid rgba(165,180,252,.45) !important;
  border-radius:12px !important;
  box-shadow:
    0 14px 32px rgba(15,23,42,.16),
    0 3px 10px rgba(99,102,241,.10) !important;
  width:252px !important;
  font-size:11.5px !important;
  padding:0 !important;
  overflow:hidden !important;
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowBottom:before{ display:none !important; }
.flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowBottom:after{ display:none !important; }

.flatpickr-months{
  background:linear-gradient(180deg, #eef2ff 0%, #e0e7ff 100%) !important;
  border-bottom:1px solid rgba(165,180,252,.45) !important;
  padding:8px 10px !important;
}
.flatpickr-months .flatpickr-month{
  background:transparent !important;
  color:#312e81 !important;
  fill:#312e81 !important;
  position:relative !important;
  height:30px !important;
  overflow:visible !important;
}

.flatpickr-current-month{
  position:absolute !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:auto !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  padding:0 !important;
  text-align:center !important;
  font-size:13px !important;
  font-weight:700 !important;
  color:#312e81 !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months{
  background:rgba(255,255,255,.7) !important;
  border:1px solid rgba(165,180,252,.5) !important;
  border-radius:6px !important;
  padding:2px 22px 2px 8px !important;
  color:#312e81 !important;
  font-weight:700 !important;
  font-size:12.5px !important;
  cursor:pointer !important;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none'><path d='M3 4.5 L6 7.5 L9 4.5' stroke='%234338ca' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-repeat:no-repeat !important;
  background-position:right 6px center !important;
  transition:background .12s ease, border-color .12s ease !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover{
  background-color:#fff !important;
  border-color:#a5b4fc !important;
}

.flatpickr-current-month .numInputWrapper{
  background:rgba(255,255,255,.7) !important;
  border:1px solid rgba(165,180,252,.5) !important;
  border-radius:6px !important;
  padding:0 14px 0 8px !important;
  width:auto !important;
  height:24px !important;
  display:inline-flex !important;
  align-items:center !important;
}
.flatpickr-current-month input.cur-year{
  color:#312e81 !important;
  font-weight:700 !important;
  font-size:12.5px !important;
  background:transparent !important;
  border:none !important;
  padding:0 !important;
  height:24px !important;
  line-height:24px !important;
  text-align:center !important;
  width:38px !important;
}
.flatpickr-current-month input.cur-year::-webkit-outer-spin-button,
.flatpickr-current-month input.cur-year::-webkit-inner-spin-button{
  -webkit-appearance:none !important;
  margin:0 !important;
}
.flatpickr-current-month .numInputWrapper span{
  border:none !important;
  width:10px !important;
  right:2px !important;
  opacity:.7 !important;
}
.flatpickr-current-month .numInputWrapper span:hover{ opacity:1 !important; background:transparent !important; }
.flatpickr-current-month .numInputWrapper span.arrowUp:after{
  border-bottom-color:#4338ca !important;
  top:4px !important;
}
.flatpickr-current-month .numInputWrapper span.arrowDown:after{
  border-top-color:#4338ca !important;
  top:5px !important;
}

/* стрелки prev/next.
    fix: top:50% сломалось — стрелки уехали на 2-3 ряд
   дней. Корень: .flatpickr-prev/next-month абсолютно позиционированы
   относительно .flatpickr-calendar (а не .flatpickr-months), потому
   что .flatpickr-calendar — ближайший позиционированный предок.
   top:50% calendar (≈250px) = 125px = середина дней, не header.
   Фикс: фикс-pixel top:9px — calendar padding-top:0 + .months padding-
   top:8 + (.month height 30 - arrow 28)/2 ≈ 9px → центр стрелки
   совпадает с центром header'а. */
.flatpickr-prev-month,
.flatpickr-next-month{
  color:#4338ca !important;
  fill:#4338ca !important;
  opacity:1 !important;
  top:9px !important;
  transform:none !important;
  width:28px !important;
  height:28px !important;
  border-radius:8px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  transition:background .12s ease !important;
}
.flatpickr-prev-month{ left:8px !important; }
.flatpickr-next-month{ right:8px !important; }
.flatpickr-prev-month svg,
.flatpickr-next-month svg{
  width:12px !important;
  height:12px !important;
}
.flatpickr-prev-month:hover,
.flatpickr-next-month:hover{
  background:rgba(255,255,255,.7) !important;
}

.flatpickr-weekdays{
  background:#fafbff !important;
  border-bottom:1px solid #eef2ff !important;
  height:26px !important;
}
.flatpickr-weekdaycontainer{ background:transparent !important; }
.flatpickr-weekday{
  background:transparent !important;
  color:#6366f1 !important;
  font-weight:700 !important;
  font-size:10.5px !important;
  letter-spacing:.5px !important;
  text-transform:uppercase !important;
  cursor:default !important;
}
.flatpickr-weekday span,
.flatpickr-weekday a{ color:inherit !important; }

.flatpickr-innerContainer{ padding:6px 10px 10px !important; }
.flatpickr-rContainer{ width:auto !important; padding:0 !important; }
.flatpickr-days,
.dayContainer{
  width:232px !important;
  min-width:232px !important;
  max-width:232px !important;
}

.flatpickr-day{
  max-width:30px !important;
  height:28px !important;
  line-height:28px !important;
  border-radius:50% !important;
  font-size:11.5px !important;
  font-weight:500 !important;
  color:#1e293b !important;
  border:none !important;
  margin:1px 0 !important;
  transition:background .12s ease, color .12s ease, transform .12s ease !important;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay{ color:#cbd5e1 !important; }
.flatpickr-day:hover{
  background:#eef2ff !important;
  color:#4338ca !important;
}
.flatpickr-day.today:not(.selected){
  background:transparent !important;
  border:1.5px solid #a5b4fc !important;
  color:#4338ca !important;
  font-weight:700 !important;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange{
  background:#4f46e5 !important;
  color:#fff !important;
  font-weight:600 !important;
  border:none !important;
  box-shadow:0 2px 6px rgba(99,102,241,.30) !important;
}
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover{
  background:#4338ca !important;
  color:#fff !important;
}

.flatpickr-monthDropdown-months option{
  background:#fff !important;
  color:#1e293b !important;
  font-weight:500 !important;
  padding:6px 10px !important;
}
.flatpickr-monthDropdown-months option:checked,
.flatpickr-monthDropdown-months option:hover{
  background:#4f46e5 !important;
  color:#fff !important;
}

/* ─── COLUMN VISIBILITY CHECKBOXES ─────────────────────────────── */
.columns-grid{
  display:grid;
  grid-template-columns:repeat(5, auto);
  gap:8px 20px;
  justify-content:start;
}

/* чекбокс-чип в виде карточки. При :checked — мягкая
   индиго-подсветка border + bg. */
.column-checkbox-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:8px;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}

.column-checkbox-item:hover{
  background:#fafbff;
  border-color:#cbd5e1;
}

.column-checkbox-item:has(input:checked){
  background:linear-gradient(180deg, #eef2ff 0%, #e0e7ff 100%);
  border-color:#a5b4fc;
  box-shadow:
    0 1px 2px rgba(99,102,241,.08),
    inset 0 1px 0 rgba(255,255,255,.7);
}

.column-checkbox-item input[type="checkbox"]{
  cursor:pointer;
  width:16px;
  height:16px;
  accent-color:#6366f1;
  margin:0;
}

.column-checkbox-label{
  font-size:13px;
  color:#374151;
  font-weight:600;
  cursor:pointer;
  user-select:none;
}
.column-checkbox-item:has(input:checked) .column-checkbox-label{
  color:#4338ca;
}

/* ─── ACTIONS (Применить + Сбросить) ───────────────────────────── */
.filters-actions{
  display:flex;
  gap:8px;
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid #e5e7eb;
}

/* «Применить» — индиго gradient как .reply-submit
   и .btn-create в важных заметках. */
.filters-apply{
  flex:1;
  padding:11px 14px;
  background:linear-gradient(180deg, #6366f1 0%, #4f46e5 100%);
  border:none;
  border-radius:10px;
  font-size:13px;
  font-weight:600;
  color:#fff;
  cursor:pointer;
  transition:background .22s ease, box-shadow .22s ease, transform .22s ease;
  box-shadow:
    0 2px 6px rgba(99,102,241,.18),
    0 4px 12px rgba(99,102,241,.10);
}
.filters-apply:hover{
  background:linear-gradient(180deg, #7274f4 0%, #4f46e5 100%);
  box-shadow:
    0 4px 10px rgba(99,102,241,.26),
    0 6px 18px rgba(99,102,241,.16);
  transform:translateY(-1px);
}
.filters-apply:active{
  background:linear-gradient(180deg, #4f46e5 0%, #4338ca 100%);
  transform:translateY(0);
  box-shadow:inset 0 1px 2px rgba(20,16,80,.20), 0 1px 3px rgba(99,102,241,.15);
}

/* «Сбросить» — glassy outline, в гармонии с .filters-apply. */
.filters-reset{
  padding:11px 18px;
  background:linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(244,245,250,.78) 100%);
  backdrop-filter:blur(8px) saturate(160%);
  -webkit-backdrop-filter:blur(8px) saturate(160%);
  border:1px solid rgba(203,213,225,.65);
  border-radius:10px;
  font-size:13px;
  font-weight:600;
  color:#475569;
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 1px 2px rgba(15,23,42,.04);
}

.filters-reset:hover{
  background:linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(238,242,255,.85) 100%);
  border-color:rgba(99,102,241,.35);
  color:#4338ca;
}