/* assets/filter-bar.css
   Filter bar + form controls helpers.
   Organized + deduplicated.
*/

/* ==========================================================================
   1) Filter bar container + card structure
   ========================================================================== */
.filter-bar{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.03);
  /* background: #eef1f4; */
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  box-shadow:
    0 1px 2px rgba(15,23,42,0.05),
    0 10px 18px -14px rgba(15,23,42,0.35);

  margin-bottom: 12px;
}

/* The dbc.Card inside the filter bar */
.filter-bar__card{
  border: none;
  background: transparent;
}

.filter-bar__card,
.filter-bar__card .card-header,
.filter-bar__card .card-body{
  /* background: transparent; */
  border: none;
}

/* Header stays visually connected */
.filter-bar__card > .card-header{
  /* background: transparent; */
  border-bottom: none !important;   /* <-- lijn weg */
}

/* Header button */
.filter-bar__toggle{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0;
  font-weight: 700;
  font-size: 1rem;
  color: rgba(0,0,0,0.85);
}

.filter-bar__toggle:focus,
.filter-bar__toggle:active{
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.filter-bar__toggle:hover{
  background: transparent !important;
}

/* Body padding */
.filter-bar__body{
  padding: 12px 14px 14px;
}

/* Optional inner white “surface” */
.filter-bar__surface{
  background: #ffffff;
  border-radius: 10px;
  padding: 14px 16px 18px;

  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);

  /* safe to clip inside surface (doesn't affect dropdown overlay as long as
     dropdown menus aren't required to escape this exact surface) */
  overflow: hidden;
}

/* IMPORTANT:
   Do NOT set overflow:hidden on .filter-bar / .filter-bar__card
   otherwise dcc.Dropdown menus get clipped.
*/

/* ==========================================================================
   2) Collapse body “split” layout (optional but safe)
   - Top: dropdown row (never clipped)
   - Scroll: any extra long filters below
   ========================================================================== */
.filter-body-split{
  max-height: 35vh;
  display: flex;
  flex-direction: column;
}

.filter-top{
  flex: 0 0 auto;
  overflow: visible;
  position: relative;
  z-index: 2;
}

.filter-scroll{
  flex: 1 1 auto;
  min-height: 0;          /* key for flex scrolling */
  overflow-y: auto;
  overflow-x: visible;
  padding-top: 8px;
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   3) Labels + basic control sizing
   ========================================================================== */
.filter-label{
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.1;
  margin: 0 0 6px 0;
  text-align: center;
  min-height: 18px;
  color: rgba(0,0,0,0.75);
}

/* ==========================================================================
   4) Dash Dropdown (react-select) + DatePickerRange + checklist alignment
   ========================================================================== */

/* Dropdown control */
.filter-bar .Select-control{
  min-height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: none;
}

/* Placeholder/selected text vertical alignment */
.filter-bar .Select-placeholder,
.filter-bar .Select-value-label{
  line-height: 36px;
}

/* Focus ring */
.filter-bar .is-focused:not(.is-open) > .Select-control{
  border-color: rgba(13,110,253,0.55);
  box-shadow: 0 0 0 3px rgba(13,110,253,0.15);
}

/* DatePickerRange */
.filter-bar .DateInput{
  width: 100%;
}

.filter-bar .DateInput_input{
  height: 38px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: none;
}

/* Checklists */
.filter-bar .form-check{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 10px;
  margin-bottom: 0;
}

.filter-bar .form-check-input{
  margin-top: 0;
  accent-color: #0d6efd !important;
}

/* dcc.Checklist (used in filter bars) */
.filter-bar .filter-checklist{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 12px;
}

.filter-bar .filter-checklist__label{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.filter-bar .filter-checklist__input,
.filter-bar .filter-checklist input[type="checkbox"],
.filter-bar input[type="checkbox"]{
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: #0d6efd !important;
}

/* Sales order type: 2 on row 1, retour centered on row 2 */
.filter-bar .order-type-wrap{
  width: min(280px, 100%);
  margin-inline: auto;
}

.filter-bar .order-type-wrap .filter-checklist--order-type{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 10px;
  row-gap: 6px;
  justify-items: center;
}

.filter-bar .order-type-wrap .filter-checklist__label{
  justify-self: center;
}

.filter-bar .order-type-wrap .filter-checklist__label:nth-of-type(3){
  grid-column: 1 / -1;
  justify-self: center;
}

/* Country checklist: NL and BE next to each other */
.filter-bar .filter-checklist--countries{
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 6px 12px;
}

/* Inline datepicker block onder "Periode" netjes maken */
.date-picker-inline{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  margin-top: 10px;   /* was ~6px → nu net iets losser */
}

/* Zorg dat inputs er strak uitzien */
.date-picker-inline .DateRangePicker,
.date-picker-inline .DateRangePickerInput{
  width: 100%;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.date-picker-inline .DateInput_input{
  height: 38px;
  border-radius: 10px;
}

/* Zorg dat de twee inputs netjes naast elkaar blijven */
.date-picker-inline .DateInput{
  background: transparent;
}

/* Portal calendar styling (popup) */
.DateRangePicker_picker{
  border-radius: 12px !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.18) !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  overflow: hidden;
}

/* Kalender header rustiger */
.DayPickerNavigation_button{
  border-radius: 10px !important;
}

/* Dag-cellen subtieler rond */
.CalendarDay__default{
  border-radius: 8px;
}

/* =========================================
   Mantine Modal (datepickers)
   ========================================= */
.mantine-Modal-root,
.mantine-Modal-overlay{
  z-index: 5000 !important;
}

.mantine-Modal-overlay{
  pointer-events: auto !important;
}

.mantine-Modal-inner{
  z-index: 5001 !important;
  align-items: flex-start !important;
  padding-top: 30vh !important;
}

.mantine-Modal-content{
  z-index: 5001 !important;
  border-radius: 12px;
}

.manual-date-group{
  margin-top: 12px;              /* ruimte onder periode dropdown */
  display: grid;
  grid-template-columns: 1fr 1fr; /* altijd 2 naast elkaar */
  gap: 10px;                     /* ruimte tussen de twee velden */
  align-items: end;
}

.manual-date-group .mantine-DateInput-input{
  text-align: left;
}

/* ==========================================================================
   5) Multi dropdown: limit growth + internal scroll for selected chips
   ========================================================================== */
.dd-multi--compact .Select-control{
  min-height: 38px;
  max-height: 200px;      /* tune: for ~3 rows visible */
  overflow: hidden;
}

/* default: geen scrollbar in de input */
.dd-multi--compact .Select-multi-value-wrapper{
  max-height: none;
  overflow: visible;
}

/* pas scrollen als er selected chips zijn */
.dd-multi--compact.has-value .Select-multi-value-wrapper{
  max-height: 114px;     /* ~3 rijen (mooier dan 200) */
  overflow-y: auto;
  overflow-x: hidden;
}


.dd-multi--compact .Select-input,
.dd-multi--compact .Select-input > input{
  height: 28px;
}

.filter-bar .dd-multi--compact .Select-input > input{
  outline: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

.filter-bar .dd-multi--compact .Select-input > input:focus{
  outline: none !important;
  box-shadow: none !important;
}

.filter-bar .dd-multi--compact.is-focused > .Select-control,
.filter-bar .dd-multi--compact.is-open > .Select-control{
  border-color: rgba(13,110,253,0.55) !important;
  box-shadow: 0 0 0 3px rgba(13,110,253,0.15) !important;
}

.dd-multi--compact .Select-option{
  padding-top: 6px;
  padding-bottom: 6px;
}

.dd-multi--compact .Select-menu-outer input[type="checkbox"]{
  width: 13px;
  height: 13px;
  accent-color: #0d6efd !important;
}

/* Force blue interaction states for dropdown options/chips */
.filter-bar .Select-option.is-focused{
  background-color: rgba(13,110,253,0.10);
  color: #1f2937;
}

.filter-bar .Select-option.is-selected{
  background-color: rgba(13,110,253,0.18);
  color: #0b3d91;
}

.filter-bar .Select--multi .Select-value{
  background-color: rgba(13,110,253,0.10);
  border: 1px solid rgba(13,110,253,0.28);
  color: #0d6efd;
}

.filter-bar .Select--multi .Select-value-icon{
  border-right: 1px solid rgba(13,110,253,0.28);
  color: #0d6efd;
}

.filter-bar .Select--multi .Select-value-icon:hover,
.filter-bar .Select--multi .Select-value-icon:focus{
  background-color: rgba(13,110,253,0.14);
  color: #0b5ed7;
}

/* Dash v4 dropdown states (new class names) */
.filter-bar .dash-dropdown-search-container:focus-within{
  border-color: rgba(13,110,253,0.55);
  outline: 1px solid rgba(13,110,253,0.55);
}

.filter-bar .dash-dropdown-option:not(:has(input[disabled])):hover,
.filter-bar .dash-dropdown-option:not(:has(input[disabled])):focus-within,
.filter-bar .dash-options-list-option:not(:has(input[disabled])):hover,
.filter-bar .dash-options-list-option:not(:has(input[disabled])):focus-within{
  background-color: rgba(13,110,253,0.08);
  color: #0d6efd;
}

.filter-bar .dash-dropdown-option:has(input:checked),
.filter-bar .dash-dropdown-option:has(input:checked) .dash-options-list-option-text,
.filter-bar .dash-options-list-option:has(input:checked),
.filter-bar .dash-options-list-option:has(input:checked) .dash-options-list-option-text{
  color: #0d6efd;
}

/* ==========================================================================
   6) Apply button
   ========================================================================== */
.filter-apply-btn{
  height: 38px;
  width: 100%;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.9rem;

  background-color: #0d6efd;
  border: none;
  color: white;
  cursor: pointer;
}

.filter-apply-btn:hover{
  filter: brightness(0.97);
}

.filter-apply-btn:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(13,110,253,0.20);
}

.filter-apply-btn:disabled{
  opacity: 0.65;
  cursor: not-allowed;
  filter: none;
  box-shadow: none;
}

 .filter-bar__toggle{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: none;
  box-shadow: none;
  background: transparent;
}

#filter-toggle-icon_sales_page{ margin-left: 8px; }

@media (max-width: 992px){
  .filter-bar .filter-checklist--countries{
    flex-wrap: wrap;
  }
}