/*
  Ported from NLIUmbracoCore/SearchIndex/Vue/src/index.scss (global theme overrides — colors/pill-shapes,
  these WIN via !important in the original app) merged with the component-scoped <style> blocks of
  pages/Index.vue, components/Pages/Index/LangBox.vue, components/Layout/FiltersBar.vue,
  components/Layout/FiltersBarMobile.vue, components/Ui/MixMultiselect.vue, layouts/MainLayout.vue
  (structural/spacing values, since those are not overridden). Same class names reused deliberately
  for a faithful, verifiable port rather than a redesign.
*/

/* icon font — ported from NLIUmbracoCore/SearchIndex/Vue/src/css/app.css (it lived only inside the
   Quasar build, not the general site, so it has to be shipped with this component). Font files
   copied to ./fonts/. Class names/codepoints reproduced exactly, including the RTL/LTR chevron swap. */
@font-face {
  font-family: 'nliicons';
  src: url('fonts/nliicons.eot?xfvpye');
  src: url('fonts/nliicons.eot?xfvpye#iefix') format('embedded-opentype'),
       url('fonts/nliicons.ttf?xfvpye') format('truetype'),
       url('fonts/nliicons.woff?xfvpye') format('woff'),
       url('fonts/nliicons.svg?xfvpye#nliicons') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
.comp-search-index-table [class^="icon-"], .comp-search-index-table [class*=" icon-"] {
  font-family: 'nliicons' !important; speak: never; font-style: normal; font-weight: normal;
  font-variant: normal; text-transform: none; line-height: 2;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.comp-search-index-table .icon-close:before { content: "\e900"; }
.comp-search-index-table .icon-calendar:before { content: "\e902"; }
.comp-search-index-table .icon-chev_down:before { content: "\e905"; }
.comp-search-index-table .icon-arrow-down:before { content: "\e910"; }
.comp-search-index-table .icon-chev_left:before { content: "\e906"; }
[dir=ltr] .comp-search-index-table .icon-chev_left:before { content: "\e907"; }
.comp-search-index-table .icon-chev_right:before { content: "\e907"; }
[dir=ltr] .comp-search-index-table .icon-chev_right:before { content: "\e906"; }
.comp-search-index-table .icon-filter:before { content: "\e908"; }
.comp-search-index-table .icon-format-icon-2:before {
    content: "\e913";
    font-size: 50px;
    line-height: 1;
    color: #000;
}
.comp-search-index-table .icon-noresults:before { content: "\e90e"; }
.comp-search-index-table .icon-search:before { content: "\e90f"; }
.comp-search-index-table .icon-x-icon-tag:before { content: "\e919"; }
.comp-search-index-table .icon-x-white-icon:before { content: "\e917"; }
.comp-search-index-table .btn-resetfilters .icon { font-size: 1.1111em; }
.comp-search-index-table .icon-format-icon:before {
  content: "\e912"; font-size: 50px; line-height: 1; border: 1px solid #7c7272; border-radius: 20px;
}

.comp-search-index-table .btn.btn-resetfilters {
    font-weight: 600;
}

/* Ported from wwwroot/SearchIndex/Css/styles-extended.css:46-62. Not part of this component's own DOM
   — it's the page's own <h1 class="index-title"> (NSContentPage.cshtml:69), sitting above this
   component. Safe to keep unscoped like the original: this file only loads on these index pages, same
   as styles-extended.css originally did. */
body .index-title {
    padding: 40px;
    color: #1a1a1a;
}
@media screen and (min-width: 1920px) {
    body .index-title {
        padding: 70px;
    }
}
@media screen and (max-width: 768px) {
    body .index-title {
        padding: 20px;
    }
}

.comp-search-index-table {
    font-family: 'narkis', 'Frutiger', sans-serif;
    background-color: #fffaf8;
    position: relative;
    padding: 20px;
}
@media screen and (max-width: 1200px) { .comp-search-index-table { padding: 0 15px; } }
@media screen and (min-width: 1201px) { .comp-search-index-table { padding-left: 70px; padding-right: 70px; } }
/* ⚠️ 70px confirmed by user only at 1920px viewport width — the site's own container/page padding
   likely has other values at other breakpoints (this component's own CSS never controlled this
   originally; it inherited whatever padding the surrounding Umbraco page/layout container applied).
   Using a single 1024px+ breakpoint as a placeholder pending the real breakpoint table. */
/* Defensive: ".input"/".list"/".toggle"/".tag" etc. are generic class names that may collide with
   global site CSS now that this isn't sandboxed inside a Quasar/webpack build anymore — scope box
   model explicitly rather than relying on browser/global defaults. */
.comp-search-index-table, .comp-search-index-table * { box-sizing: border-box; }
.comp-search-index-table > .filters-bar .input { flex: 0 0 auto; }

/* ===== page loader ===== */
.comp-search-index-table > .page-loader {
  position: absolute; left: 0; top: 0; z-index: 8;
  background: rgba(255,255,255,1); width: 100%; height: 100%;
}
.comp-search-index-table > .page-loader.wopacity { background: rgba(255,255,255,0.5); }
.comp-search-index-table > .page-loader .inner { width: 100%; height: 100%; position: relative; }
.comp-search-index-table > .page-loader .spinner-cont {
  position: absolute; left: 50%; top: 20%; text-align: center; white-space: nowrap; transform: translate(-50%,-50%);
}
.comp-search-index-table > .page-loader .spinner {
  display: block; margin: 0 auto 8px; width: 32px; height: 32px; border-radius: 50%;
  border: 3px solid rgba(26,26,26,0.2); border-top-color: #1a1a1a; animation: sit-spin 0.8s linear infinite;
}
@keyframes sit-spin { to { transform: rotate(360deg); } }
.comp-search-index-table > .page-loader .label { color: #1a1a1a; line-height: 1; letter-spacing: 0.1em; }

/* ===== no-results ===== */
.comp-search-index-table.has-noresults { min-height: 100vh; }
.comp-search-index-table > .noresults {
  position: absolute; left: 0; top: 0; width: 100%; z-index: 7; background: #fffaf8; height: 100vh;
}
.comp-search-index-table > .noresults .box {
  max-width: 27.875rem; position: absolute; left: 50%; top: 40%; transform: translate(-50%,-50%);
  width: 100%; text-align: center; color: #7c7272;
}
.comp-search-index-table > .noresults .box .icon { font-size: 65px; display: block; margin-bottom: 16px; }
.comp-search-index-table > .noresults .box .desc { font-weight: 700; margin-bottom: 15px; }
.comp-search-index-table > .noresults .box .reset-filters {
  text-decoration: underline; cursor: pointer; color: #1a1a1a; display: inline-block;
  border: none; outline: none; background: none; font: inherit; padding: 0;
}

/* ===== filters bar (desktop) ===== */
.comp-search-index-table > .filters-bar { background-color: transparent; position: relative; }
/* padding:9px 0 and padding-left:61px both only make sense on desktop: on mobile the entire content
   of .filters-bar (.row-c) is hidden (see responsive section), so unscoped padding here reserves
   empty vertical/horizontal space for nothing. */
@media screen and (min-width: 1024px) {
  .comp-search-index-table > .filters-bar { padding: 9px 0 9px 61px; }
}
.comp-search-index-table > .filters-bar.loading { pointer-events: none; opacity: 0.6; }
.comp-search-index-table > .filters-bar .inputs-cont { display: flex; flex-wrap: wrap; align-items: flex-start; }
.comp-search-index-table > .filters-bar .input { padding-left: 40px; padding-bottom: 10px; }

.comp-search-index-table .input-search {
    width: 300px;
    border-radius: 100px;
    background: #fffaf8;
    border: 2px solid #1a1a1a;
    height: 50px;
    color: #444;
    position: relative;
    overflow: hidden;
    padding-inline-start: 38px;
    display: block;
}
    .comp-search-index-table .input-search .icon {
        position: absolute;
        inset-inline-start: 0;
        top: 0;
        width: 38px;
        height: 48px;
        line-height: 48px;
        text-align: center;
        color: #1a1a1a;
    }
.comp-search-index-table .input-search .icon img { position: absolute; right: 0; top: 0; left: 0; bottom: 0; margin: auto; width: 1.25rem; }
.comp-search-index-table .input-search input[type="text"]::placeholder { color: #444; opacity: 1; } /* no source-confirmed opacity tweak for this specific input — kept plain rather than inventing one */
.comp-search-index-table .input-search input[type="text"] {
  display: block; width: 100%; height: 100%; background: none; text-indent: 10px; color: #444; border: none;
}
body header.filters-bar .input .input-search input {
    color: #1a1a1a !important;
    font-size: 20px !important;
}
.comp-search-index-table .input-search input[type="text"]:focus-visible {
  outline: 2px solid #000 !important;
}

/* z-index:1 baseline, boosted to 10 while .open — lifts this filter's WHOLE component (button+dropdown,
   which keep their own internal 4/3 ordering below) above every OTHER filter's button, regardless of
   which row it wraps to. Fixes the dropdown-hides-behind-the-next-row's-button bug at 1200-1920px
   without needing a hand-numbered z-index per filter. */
.comp-search-index-table .mix-multiselect { width: 300px !important; flex: 0 0 300px; user-select: none; position: relative; z-index: 1; }
.comp-search-index-table .mix-multiselect.open { z-index: 10; }
    .comp-search-index-table .mix-multiselect .toggle {
        border-radius: 100px;
        border: 2px solid #1a1a1a;
        background: #fffaf8;
        height: 50px;
        width: 100%;
        position: relative;
        overflow: hidden;
        padding-right: 38px;
        text-align: right;
        cursor: pointer;
        z-index: 4;
    }
        .comp-search-index-table .mix-multiselect .toggle .label {
            display: flex;
            width: 100%;
            height: 100%;
            line-height: 48px;
            padding-right: 20px;
            padding-left: 25px;
            font-size: 20px;
            color: #444;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            padding-inline-start: 38px;
        }
        .comp-search-index-table .mix-multiselect .toggle .arrow {
            font-size: 21px;
            position: absolute;
            inset-inline-end: 9px;
            top: 0;
            height: 100%;
            line-height: 48px;
            color: #1a1a1a;
            font-family: 'nliicons' !important;
            transition: transform 0.25s ease;
        }
        .comp-search-index-table .mix-multiselect .toggle .icon-side {
            position: absolute;
            inset-inline-start: 0;
            top: 0;
            width: 38px;
            height: 48px;
            line-height: 48px;
            text-align: center;
        }
.comp-search-index-table .mix-multiselect .toggle .icon-side img {
  position: absolute; right: 0; top: 0; left: 0; bottom: 0; margin: auto; max-height: 1.375rem; max-width: 1.375rem;
}
.comp-search-index-table .mix-multiselect.open .toggle .arrow { transform: rotate(180deg); }
.comp-search-index-table .mix-multiselect .list {
  position: absolute; right: 1px; top: 100%; margin-top: -13px; width: calc(100% - 2px); background: #fffaf8;
  border: 2px solid #1a1a1a; border-top: none; border-radius: 0 0 25px 25px; z-index: 3;
  box-shadow: 0 8px 24px rgba(0,0,0,0.16); color: #373a3c; padding-top: 20px;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translate3d(0,-10px,0); transition: all 0.25s ease;
}
.comp-search-index-table .mix-multiselect.open .list { opacity: 1; visibility: visible; pointer-events: all; transform: translate3d(0,0,0); }
.comp-search-index-table .mix-multiselect .list-in {
  max-height: 175px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: #c4c4c4 transparent; /* Firefox: thin, no arrow buttons by default */
}
.comp-search-index-table .mix-multiselect .list-in::-webkit-scrollbar { width: 5px; }
.comp-search-index-table .mix-multiselect .list-in::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.comp-search-index-table .mix-multiselect .list-in::-webkit-scrollbar-track { background: transparent; }
.comp-search-index-table .mix-multiselect .list-in::-webkit-scrollbar-thumb { background: #c4c4c4; border-radius: 3px; }
.comp-search-index-table .mix-multiselect .list-in::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }
.comp-search-index-table .mix-multiselect .q-option-group { padding: 0 13px; }
/* Custom checkbox visual (Quasar draws its own, doesn't use the native browser checkbox appearance
   at all — confirmed from source: `.q-checkbox__inner--truthy .q-checkbox__bg`). Checked color #7c7272
   matches the confirmed index.scss override (`$theme-border`), not Quasar's own default blue. */
.comp-search-index-table .q-checkbox {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    position: relative;
    user-select: none;
    padding-bottom: 15px;
}
.comp-search-index-table .q-checkbox__native {
  position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; cursor: pointer;
}
.comp-search-index-table .q-checkbox__inner {
  position: relative; display: inline-block; width: 20px; height: 20px; flex: 0 0 20px;
}
.comp-search-index-table .q-checkbox__bg {
  position: absolute; inset: 0; border: 2px solid #ddd; border-radius: 3px; background: #fff;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
/* Real Quasar structure (confirmed against production DOM 2026-08-24): the checkmark is an inline
   SVG <path> (.q-checkbox__truthy), not a CSS-drawn border-triangle — swapped to match exactly. */
.comp-search-index-table .q-checkbox__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.comp-search-index-table .q-checkbox__truthy {
  stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0;
}
.comp-search-index-table .q-checkbox__native:checked ~ .q-checkbox__inner .q-checkbox__bg {
  background: #7c7272; border-color: #7c7272;
}
.comp-search-index-table .q-checkbox__native:checked ~ .q-checkbox__inner .q-checkbox__truthy { opacity: 1; }
.comp-search-index-table .q-checkbox__native:focus-visible ~ .q-checkbox__inner .q-checkbox__bg { outline: 2px solid #1a1a1a; outline-offset: 2px; }
.comp-search-index-table .q-checkbox__label {
    flex: 1;
    min-width: 0;
    margin-right: 8px;
    line-height: 18px;
    white-space: normal;
    overflow-wrap: break-word;
}
.comp-search-index-table .q-checkbox__inner { margin-top: 1px; } /* nudge to align with the first line's cap-height, since align-items is now flex-start */
.comp-search-index-table .mix-multiselect .btns-group { padding: 15px 13px; text-align: center; }

/* Exact match to source: NLIUmbracoCore/SearchIndex/Vue/src/components/Ui/MixMultiselect.vue's
   <style scoped>, `.mix-multiselect .list .daterange` block — blue #007FAD, not the black theme
   used elsewhere in this component (that override in index.scss doesn't touch this element). */
.comp-search-index-table .daterange { padding: 30px 13px 11px; }
.comp-search-index-table .daterange .input {
  border: 2px solid #007fad; border-radius: 4px; position: relative; height: 52px;
}
.comp-search-index-table .daterange .input:not(:last-child) { margin-bottom: 32px; }
    .comp-search-index-table .daterange .input input {
        display: flex;
        width: 100%;
        height: 100%;
        padding: 0 0px 0 35px;
        color: #444;
        font-size: 16px;
        letter-spacing: 0.05em;
        background: transparent;
        border: none;
        align-items: center;
        justify-content: flex-end;
    }
.comp-search-index-table .daterange .input .label {
  position: absolute; right: 10px; padding: 0 4px; background: #fff; top: -3px; transform: translateY(-50%); color: #007fad; font-size: 12px;
}
.comp-search-index-table .daterange .input .icon-calendar {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 1.3em; color: #007fad; pointer-events: none;
}
/* Hide the browser's own native calendar-picker icon but stretch it invisibly over the whole input,
   so clicking anywhere in the row opens the picker (not just the tiny native icon). Our own visible
   .icon-calendar span above is purely decorative and has pointer-events:none, so clicks pass through
   to this stretched native indicator underneath. */
.comp-search-index-table .daterange .input input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute; inset: 0; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; opacity: 0; cursor: pointer;
}

.comp-search-index-table .btn {
  border-radius: 100px; background-color: #1a1a1a; color: #fff; padding: 3px 24px; font-size: 18px;
  border: 2px solid #1a1a1a; min-width: 8.5rem; height: 50px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.comp-search-index-table .btn-reset,
.comp-search-index-table .btn-confirm,
.comp-search-index-table .btn-cancel { min-width: 0; padding: 6px 18px; height: auto; font-size: 15px; margin: 0 4px; }
.comp-search-index-table .btn-cancel { background: #fffaf8; color: #1a1a1a; }

/* Vertically centered against the 50px-tall filter pills via top:50%/translateY rather than the
   original's top:0;bottom:0;height:36px (which anchors to the top and doesn't actually center a
   36px box inside a taller row without an explicit auto-margin — flagged as a deliberate deviation
   after visual QA showed real misalignment, not a literal copy of the source rule). */
/* z-index needed here (not just on the tooltip ::after inside .btn-grid): the transform below creates
   a new stacking context for this whole subtree, so without a z-index on THIS element, the tooltip's
   own z-index:9999 only wins comparisons within this subtree — the whole unit still loses to siblings
   like .mix-multiselect.open (z-index:10) when compared from outside. */
.comp-search-index-table .btn-grid-cont {
    position: absolute;
    inset-inline-end: 0;
    top: 35px;
    transform: translateY(-50%);
    inset-inline-end: -45px;
    z-index: 20;
}
/* Border removed per user's explicit instruction (2026-09-14) — the BtnApp.vue-sourced white border
   (added earlier this session) turned out to visually read as an oversized frame around the button in
   practice, not the subtle look intended; user asked to drop it entirely rather than keep tuning it. */
.comp-search-index-table .btn-grid {
  display: flex; align-items: center; justify-content: center; position: relative; width: 56px; height: 50px;
  border: none; background: transparent; color: #7c7272; cursor: pointer; overflow: visible; padding: 0;
}
.comp-search-index-table .btn-grid.btn-small { height: 40px; }
.comp-search-index-table .btn-grid.btn-light { color: #7c7272; }
/* .btn-light is also a Bootstrap button-variant class — same generic-class-name-collision risk flagged
   elsewhere in this file (.input/.list/.toggle etc.), now hitting the site's global Bootstrap CSS
   specifically: its default :active/:focus box-shadow ring + background/border-color flash was
   bleeding through on click. Overridden back to this button's own look; specificity here (4 classes +
   the same :not()/:active/:focus chain) beats Bootstrap's own rule (1 class + that chain) without !important. */
.comp-search-index-table .btn-grid.btn-light:not(:disabled):not(.disabled):active,
.comp-search-index-table .btn-grid.btn-light:not(:disabled):not(.disabled).active {
  color: #7c7272; background-color: transparent; border-color: transparent;
}
.comp-search-index-table .btn-grid.btn-light:not(:disabled):not(.disabled):active:focus,
.comp-search-index-table .btn-grid.btn-light:not(:disabled):not(.disabled).active:focus {
  box-shadow: none;
}
.comp-search-index-table .btn-grid .icon-format-icon-2 { font-size: 17px; }
/* CSS-only tooltip replacing Quasar's <q-tooltip anchor="center left" self="center right"
   :offset="[10,10]"> (FiltersBar.vue:30), which had no equivalent in the port at all — only
   aria-label was set, which is screen-reader-only and produces no visible hover bubble. Colors/size
   confirmed from this APP's own compiled bundle (wwwroot/SearchIndex/Vue/css/app.659fab00.css —
   [dir] .q-tooltip{background:#444;border-radius:2px;padding:3px 4px;box-shadow:0 3px 6px
   rgba(0,0,0,.16)} + .q-tooltip{font-size:14px}), which overrides Quasar's generic framework default
   (vendor.2304ea8b.css's .q-tooltip--style{background:#757575;border-radius:4px;font-size:10px} —
   tried that first, wrong, this app-level override wins in the real cascade). color:#fafafa kept from
   the vendor default since this app.css override doesn't touch it. Quasar teleports its tooltip to
   <body> with position:fixed and JS-computed coordinates; unnecessary complexity here —
   position:absolute anchored to the button covers this simple hover-only case. */
.comp-search-index-table .btn-grid[data-tooltip] { overflow: visible; }
.comp-search-index-table .btn-grid[data-tooltip]::after {
  content: attr(data-tooltip);
  /* left:0 + translateX (not left/right:100%, which resolved unpredictably under this page's RTL
     context) — anchoring to the button's own left edge and shifting right by the tooltip's own width
     via transform is direction-agnostic. User wants the tooltip entirely to the button's right (in
     Hebrew/RTL). */
  position: absolute; left: 0; top: 50%; transform: translateY(-50%) translateX(calc(100% + 10px));
  white-space: nowrap; background: #444; color: #fafafa; box-shadow: 0 3px 6px rgba(0,0,0,0.16);
  font-size: 14px; font-weight: 400; padding: 3px 4px; border-radius: 2px;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.15s ease; z-index: 9999;
}
/* This was hardcoded physically (always right), but .btn-grid-cont itself flips physical side between
   RTL/LTR (inset-inline-end) — so the tooltip needs to flip too, or it ends up off-screen/clipped in
   English. Mirrored to the button's left for LTR. */
[dir=ltr] .comp-search-index-table .btn-grid[data-tooltip]::after {
  left: auto; right: 0; transform: translateY(-50%) translateX(calc(-100% - 10px));
}
.comp-search-index-table .btn-grid[data-tooltip]:hover::after,
.comp-search-index-table .btn-grid[data-tooltip]:focus-visible::after { opacity: 1; visibility: visible; }

/* ===== mobile filters ===== */
/* Position confirmed against production DOM (2026-08-26): normal document flow near the top of the
   page, NOT position:fixed at the bottom-left (that was a guess, and wrong). */
.comp-search-index-table .filters-cont { display: none; }
.comp-search-index-table .filters-cont .btn-cont { padding: 15px 0; }
.comp-search-index-table .filters-cont .row-c { display: flex; justify-content: flex-end; }
.comp-search-index-table .btn-filter {
    height: 44px;
    border-radius: 22px;
    border: 1px solid #1a1a1a;
    background: #1a1a1a;
    color: #fffaf8;
    padding: 0 18px;
    background-color: #fffaf8;
    display: inline-block;
    height: 44px;
    width: auto;
    color: #1a1a1a;
}
.comp-search-index-table .btn-filter .icon { margin-left: 8px; }
.comp-search-index-table .filters-bar-mobile { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 3000; }
.comp-search-index-table .filters-bar-mobile .mask { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); }
.comp-search-index-table .filters-bar-mobile .box {
  position: absolute; left: 0;  width: 100%;  background: #fffaf8;
  border-radius: 5px 5px 0 0; box-shadow: 0 3px 6px rgba(0,0,0,0.16); overflow: hidden; display: flex; flex-direction: column;
}
.comp-search-index-table .filters-bar-mobile .top { border-bottom: 1px solid #e5e5e5; height: 55px; position: relative; flex: 0 0 auto; }
.comp-search-index-table .filters-bar-mobile .btn-back, .comp-search-index-table .filters-bar-mobile .btn-clear {
  position: absolute; top: 50%; transform: translateY(-50%); color: #1a1a1a; font-weight: 700; cursor: pointer;
}
.comp-search-index-table .filters-bar-mobile .btn-back { right: 16px; }
.comp-search-index-table .filters-bar-mobile .btn-clear { left: 16px; }
.comp-search-index-table .filters-bar-mobile .bottom { overflow-y: auto; padding: 15px 16px 18px; }
.comp-search-index-table .filters-bar-mobile .openfilter { position: relative; height: 48px; border-bottom: 1px solid #e5e5e5; }
.comp-search-index-table .filters-bar-mobile .openfilter .label { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-weight: 700; }
    .comp-search-index-table .filters-bar-mobile .openfilter .value {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        color: #7c7272;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
    }
.comp-search-index-table .filters-bar-mobile .checkbox-remote { font-weight: 700; padding: 14px 0; }

/* ===== page head / active-filter tags ===== */
.comp-search-index-table .fs-16 { font-size: 16px; }
.comp-search-index-table .fs-18 { font-size: 18px; }
.comp-search-index-table .fs-19 { font-size: 19px; }
.comp-search-index-table .fs-20 { font-size: 20px; }
.comp-search-index-table .fs-22 { font-size: 22px; }
.comp-search-index-table .fs-28 { font-size: 28px; }
.comp-search-index-table > .page-head { color: #1a1a1a; padding-top: 29px; padding-bottom: 0; }
.comp-search-index-table > .page-head .item strong { font-weight: 700; }
    .comp-search-index-table > .page-head .in {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        padding-bottom: 4px;
    }
.comp-search-index-table > .page-head .item { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; background: #fffaf8; }
.comp-search-index-table > .page-head .item .item-label { white-space: nowrap; }
.comp-search-index-table > .page-head .item .tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0; margin: 0; list-style: none; }
.comp-search-index-table > .page-head .item .tags > li { display: flex; align-items: center; }
.comp-search-index-table > .page-head .item .tags .tag-in { display: flex; }
.comp-search-index-table > .page-head .item .tags .tag {
  display: flex; align-items: center; justify-content: center; gap: 5px; height: 21px; padding: 12px 10px;
  border: 1px solid #7c7272; border-radius: 100px; color: #7c7272; font-size: 14px; white-space: nowrap; direction: ltr;
}
.comp-search-index-table > .page-head .item .tags .remove { color: #1a1a1a; font-size: larger; cursor: pointer; display: inline-flex; }

/* ===== table view ===== */
.comp-search-index-table > .page-content { padding-bottom: 27px; position: relative; }
.comp-search-index-table .qtable {
  width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0 20px; color: #444; line-height: 1.37;
  margin-top: -20px; /* cancels the leading gap border-spacing's vertical value also adds before the first row */
}
    .comp-search-index-table .qtable th {
        font-weight: 600;
        background: rgb(26, 26, 26);
        padding: 8px 25px;
        text-align: right;
        cursor: pointer;
        position: relative;
        color: #fff;
        font-size: 0.9473em;
        padding-inline-start: 10px;
    }
.comp-search-index-table .qtable th:not(:last-child) { border-left: 1px solid #e5e5e5; }
.comp-search-index-table .qtable th.text-right { text-align: right; }
/* Ported from Index.vue:571-573 — never applied before, so English-culture pages kept the RTL
   text-align:right on headers, producing the misaligned look. */
[dir=ltr] .comp-search-index-table .qtable th.text-right { text-align: left !important; }
/* Not source-confirmed (no [dir=ltr] mirror for this in Index.vue or the compiled Quasar bundle —
   this may be a pre-existing bug in the original English pages too), but border-left on :not(:last-
   child) only separates adjacent columns correctly in RTL reading order; mirrored for correctness
   regardless of whether the original ever fixed it. */
[dir=ltr] .comp-search-index-table .qtable th:not(:last-child) { border-left: none; }
[dir=ltr] .comp-search-index-table .qtable th:not(:first-child) { border-left: 1px solid #e5e5e5; }
        .comp-search-index-table .qtable th .q-table__sort-icon {
            position: absolute;
            left: 22px;
            font-size: 0;
            top: 25%;
            height: 100%;
            opacity: 0;
            transition: opacity 0.125s ease;
        }
/* Same reasoning as the border mirror above — the sort icon's physical left:22px only sits next to
   the (right-aligned) text in RTL; mirrored to the right for LTR's left-aligned text. */
[dir=ltr] .comp-search-index-table .qtable th .q-table__sort-icon { left: auto; right: 40px; }
.comp-search-index-table .qtable th.sortable:hover .q-table__sort-icon,
.comp-search-index-table .qtable th.sorted .q-table__sort-icon { opacity: 1; }
.comp-search-index-table .qtable th .q-table__sort-icon:before {
  content: '\e911'; font-family: 'nliicons' !important; font-size: 6px; line-height: 1;
  position: absolute; left: 0; top: 0; speak: never; font-style: normal; font-weight: normal;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.comp-search-index-table .qtable th.sort-desc .q-table__sort-icon:before { transform: rotate(180deg); }
@media screen and (min-width: 768px) {
  .comp-search-index-table .qtable th .q-table__sort-icon:before { font-size: 20px; }
}
.comp-search-index-table .qtable td {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: 43px;
    vertical-align: middle;
    font-size:19px;
}
.comp-search-index-table .qtable td:first-child { border-right: 1px solid #000; }
.comp-search-index-table .qtable td:last-child { border-left: 1px solid #000; }
[dir=ltr] .comp-search-index-table .qtable td:first-child { border-right: none; border-left: 1px solid #000; }
[dir=ltr] .comp-search-index-table .qtable td:last-child { border-left: none; border-right: 1px solid #000; }
.comp-search-index-table .qtable td:nth-child(3) { font-weight: 600; }
.comp-search-index-table .qtable tr:hover td { background: #f7f0eb; }
.comp-search-index-table .qtable td a {
  font-family: 'hadassa', 'Frutiger', sans-serif; text-decoration: none; color: #1a1a1a; display: block; font-size: 30px;
}
.comp-search-index-table .qtable td a:hover { color: #007fad; } /* styles-extended.css override wins over the component's own #043055 */
/* [data-v-58b40cc6] dropped — that's a Vue scoped-CSS attribute from the original app, meaningless here. */
@media screen and (min-width: 768px) {
  [dir=rtl] .comp-search-index-table > .page-content .qtable tr td:not(:first-child) {
    padding-right: 15px;
  }
}

/* ===== grid / letter view ===== */
.comp-search-index-table .lang-box { border-radius: 3px; color: #444; }
.comp-search-index-table .lang-box:not(:last-child) { margin-bottom: 20px; }
.comp-search-index-table .lang-box .lang-head {
  border-bottom: 1px solid #e5e5e5; background: #1a1a1a; height: 49px; line-height: 49px; padding: 0 19px; color: #fffaf8; font-weight: 400;
}
/* .clear is used in the markup (letters-filter, list) on containers with floated children
   (.letters-filter > li is float:right) but was never actually defined — the floated children
   didn't contribute height to their parent, so .lang-content collapsed around them instead of
   framing them. Standard clearfix. */
.comp-search-index-table .clear:after { content: ''; display: table; clear: both; }
.comp-search-index-table .lang-box .lang-content { padding: 0; }
.comp-search-index-table .lang-box .letters-filter { list-style: none; padding: 0; margin: 0; }
.comp-search-index-table .lang-box .letters-filter > li { float: right; padding-bottom: 11px; padding-left: 14px; }
/* float:right places the first (A) letter rightmost, walking left to Z — correct for RTL reading, but
   backwards for LTR since the DOM order (A...Z) doesn't change per culture. Mirrored so A starts left. */
[dir=ltr] .comp-search-index-table .lang-box .letters-filter > li { float: left; padding-left: 0; padding-right: 14px; }
    .comp-search-index-table .lang-box .letters-filter .btn {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid #1a1a1a;
        background: #fffaf8;
        color: #1a1a1a;
        padding: 0;
        min-width: 0;
        font-weight: 600;
    }
.comp-search-index-table .lang-box .letters-filter .btn:hover,
.comp-search-index-table .lang-box .letters-filter .btn.active { background: #1a1a1a; color: #fff; }
.comp-search-index-table .lang-box .letters-filter .btn:disabled { opacity: 0.3; cursor: default; }

/* Re-read LangBox.vue's <style> in full (2026-08-26) and matched exactly, including the mobile-first
   cascade (base = mobile, overridden at >=1024px) — this whole block was previously an approximation
   built from memory of an earlier partial read, with several wrong/missing values. */
.comp-search-index-table .lang-box .list { font-size: 0; position: relative; overflow: hidden; }
.comp-search-index-table .lang-box .list:before {
  position: absolute; right: 0; top: 0; width: 100%; height: 0; background: #fff; content: ''; z-index: 5;
}
.comp-search-index-table .lang-box .item {
  display: inline-block; vertical-align: top; padding-bottom: 21px; padding-top: 0; position: relative; font-size: 16px;
}
.comp-search-index-table .lang-box.letter-actives .item { display: block; }
.comp-search-index-table .lang-box .item:before {
  content: ''; position: absolute; right: 0; top: 0; width: 100vw; height: 0; background: #e5e5e5;
}
.comp-search-index-table .lang-box .item .letter-head { font-weight: 700; color: #043055; line-height: 1; margin-bottom: 17px; }
.comp-search-index-table .lang-box .item .titles-list {
  display: block; grid-template-rows: auto; grid-auto-flow: initial; justify-content: initial;
}
.comp-search-index-table .lang-box .item .titles-list ul { list-style: none; margin: 0; padding: 0; }
.comp-search-index-table .lang-box .item .titles-list li:not(.li-expand) {
  position: relative; font-size: 0; padding: 0 0 12px 0; width: 100%; overflow-wrap: anywhere; margin-bottom: 0.75rem; border-bottom: 2px solid #f3f3f3;
}
.comp-search-index-table .lang-box .item .titles-list li:not(.li-expand):before { display: none; }
.comp-search-index-table .lang-box .item .titles-list li:not(.li-expand) > span,
.comp-search-index-table .lang-box .item .titles-list li:not(.li-expand) > span > a {
  display: inline-block; font-size: 1.0625rem; transition: color 0.125s ease, opacity 0.125s ease;
}
/* The trailing <br> (copied faithfully from production DOM, not present in this checked-in source's
   ExpandBox.vue template — see the discrepancy note above) reserves a full extra line of height
   inside the inline-block span/li regardless of text length. Neutralized without removing it from
   the DOM, since it's not clear whether it serves some other purpose (e.g. text selection/copy behavior). */
.comp-search-index-table .lang-box .item .titles-list li:not(.li-expand) > span > br { display: none; }
.comp-search-index-table .lang-box.letter-actives .item .titles-list.is-expand:not(.expand-active) { padding-bottom: 0; }
/*.comp-search-index-table .lang-box:not(.letter-actives) .item .titles-list.is-expand:not(.expand-active) { padding-bottom: 36px; }*/
.comp-search-index-table .lang-box .item .titles-list li.li-expand { width: 100%; }
.comp-search-index-table .lang-box .item .titles-list .expand-link {
  line-height: 1.375; position: relative; display: inline-block; padding: 0 5px; color: #7c7272;
  text-decoration: none; font-weight: 400; user-select: none; cursor: pointer;
}
.comp-search-index-table .lang-box .item .titles-list .expand-link .icon {
  font-size: 0.625em; margin-right: 8px; transform: rotate(-90deg); display: inline-block;
}
.comp-search-index-table .lang-box .item .titles-list .expand-link .icon.icon-chev_right { margin-right: 0; margin-left: 8px; }
/* This chevron is a fixed-rotation (-90deg) expand/collapse indicator, not a directional nav arrow
   (like the sort icon or back-button, which DO mirror per direction) — it should look identical in
   both languages. The generic [dir=ltr] icon-chev_left/right content swap (defined globally for those
   other uses) was flipping the base glyph while the rotation stayed fixed, producing the wrong
   diagonal in English. Canceled here specifically, back to the RTL-default codepoints. */
[dir=ltr] .comp-search-index-table .lang-box .item .titles-list .expand-link .icon-chev_left:before { content: "\e906"; }
[dir=ltr] .comp-search-index-table .lang-box .item .titles-list .expand-link .icon-chev_right:before { content: "\e907"; }
.comp-search-index-table .lang-box .item .titles-list .expand-link:hover:after { background: #043055; }

@media screen and (min-width: 1024px) {
  .comp-search-index-table .lang-box .lang-content { padding: 30px 40px; margin-top: 20px; border: 1px solid #000; }
  .comp-search-index-table .lang-box .list:before { height: 1px; }
  .comp-search-index-table .lang-box .item { padding-bottom: 17px; padding-top: 25px; }
  .comp-search-index-table .lang-box .item:before { height: 1px; }
  .comp-search-index-table .lang-box .item .letter-head { margin-bottom: 15px; }
  .comp-search-index-table .lang-box .item .titles-list { display: flex; flex-wrap: wrap; }
  .comp-search-index-table .lang-box .item .titles-list.expand-active ul:last-child { margin-bottom: 28px; }
  .comp-search-index-table .lang-box .item .titles-list li:not(.li-expand) {
    padding-right: 14px; padding-bottom: 9px; width: calc((100vw - 120px) / 4); padding-left: 30px;
    margin-bottom: 0; border-bottom: none; font-size: 15px;
  }
  /* 14px reserves room for the marker (now on the left), 30px becomes the gap toward the next column
     (now on the right) — mirrors the RTL padding-right:14px/padding-left:30px above. */
  [dir=ltr] .comp-search-index-table .lang-box .item .titles-list li:not(.li-expand) {
    padding-right: 30px; padding-left: 14px;
  }
  .comp-search-index-table .lang-box .item .titles-list li:not(.li-expand):before {
    display: block; content: ''; width: 4px; height: 10px; background: #043055; position: absolute; right: 0; top: 6px;
  }
  /* right:0 sits before the text in RTL (right-aligned text) — mirrored so it stays before the text
     (i.e. at the start of the line, now the left) once text becomes left-aligned for LTR. */
  [dir=ltr] .comp-search-index-table .lang-box .item .titles-list li:not(.li-expand):before {
    right: auto; left: 0;
  }
    .comp-search-index-table .lang-box .item .titles-list li:not(.li-expand) > span,
    .comp-search-index-table .lang-box .item .titles-list li:not(.li-expand) > span > a {
        line-height: 1.36842;
        color: #444;
        text-decoration: none;
        font-size: inherit;
        font-size: 20px;
    }
  .comp-search-index-table .lang-box .item .titles-list li:not(.li-expand) > span > a:hover { text-decoration: underline; }
  .comp-search-index-table .lang-box:not(.letter-actives) .item .titles-list.is-expand:not(.expand-active) { padding-bottom: 47px; }
  .comp-search-index-table .lang-box .item .titles-list.expand-active li.li-expand { position: relative; top: 22px; }
    .comp-search-index-table .lang-box .item .titles-list:not(.expand-active) li.li-expand {
        position: absolute;
        right: 0;
        padding-top: 20px;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .comp-search-index-table .lang-box .item .titles-list.expand-active ul:nth-child(n+5) { padding-top: 28px; position: relative; }
  .comp-search-index-table .lang-box .item .titles-list.expand-active ul:nth-child(n+5):before {
    position: absolute; right: 0; top: 11px; width: 100vw; height: 1px; background: #e5e5e5; content: '';
  }
}
@media screen and (min-width: 1280px) {
  .comp-search-index-table .lang-box .item .titles-list.expand-active ul:nth-child(n+6) { padding-top: 28px; position: relative; }
  .comp-search-index-table .lang-box .item .titles-list.expand-active ul:nth-child(n+6):before {
    position: absolute; right: 0; top: 11px; width: 100vw; height: 1px; background: #e5e5e5; content: '';
  }
  .comp-search-index-table .lang-box .item .titles-list li:not(.li-expand) { width: calc((100vw - 120px) / 5); }
}
@media screen and (min-width: 1440px) {
  .comp-search-index-table .lang-box .letters-filter > li:not(:last-child) { padding-left: 20px; }
  [dir=ltr] .comp-search-index-table .lang-box .letters-filter > li:not(:last-child) { padding-left: 0; padding-right: 20px; }
}
@media screen and (min-width: 1800px) {
  .comp-search-index-table .lang-box .item .titles-list li:not(.li-expand) { width: calc((100vw - 198px) / 5); }
}

/* ===== responsive ===== */
@media screen and (max-width: 1023px) {
  .comp-search-index-table .filters-bar .row-c { display: none; }
  .comp-search-index-table .filters-cont { display: flex; }
  .comp-search-index-table .btn-grid-cont { display: none; }
  .comp-search-index-table .lang-box { border-radius: 0; border: 1px solid #000; padding: 25px; }
  .comp-search-index-table .lang-box .list { columns: 3; column-gap: 30px; }
  .comp-search-index-table .lang-box .item { width: 100%; }
  .comp-search-index-table .lang-box .item .titles-list { display: block; }
  .comp-search-index-table .lang-box .item .titles-list > li:not(.li-expand) { width: 100%; margin-bottom: 12px; border-bottom: 2px solid #f3f3f3; }
  .comp-search-index-table .lang-box .item .titles-list > li:not(.li-expand):before { display: none; }
  .comp-search-index-table > .page-head .item { float: none; }
  .comp-search-index-table > .page-head .item .tags { float: none; }
}
@media screen and (max-width: 767px) {
  .comp-search-index-table .lang-box .list { columns: auto; column-gap: 0; padding: 0 10px; }
}
@media screen and (min-width: 1024px) {
  .comp-search-index-table .filters-cont, .comp-search-index-table .filters-bar-mobile { display: none !important; }
}

/* RTL is inherited from the host Umbraco page ([dir] on <html>), matching the original app
   (it never sets `dir` itself either — confirmed in spec_Vue_table_app.md §6/§9). */