/*
 * Fee chapter menu - AB#190882
 *
 * Ported from the V3 prototype attached to the work item (styles/fee-menu-versions.css in
 * bm-2026-ny_gebyrtabell.zip), which is the treatment the customer reviewed and chose: larger
 * level-1 rows, a coloured active surface and match-count badges.
 *
 * Two things changed on the way in. The prototype carried all eight candidate layouts in one file
 * and switched between them on html[data-feever="vN"] attributes its own router set; V3 is the
 * unscoped base, so the variant overrides are dropped and the scoping hooks are replaced by the
 * body.fee-chapter-menu class the chapter sets when it has an index to search. The prototype also
 * hid the AngularJS menu it replaced by attribute; here the template renders one menu or the other,
 * so nothing needs hiding.
 */
/* Alle flatene hentes fra fargepaletten (color_palette_style.css), slik at
   variantene folger den paletten kommunen har valgt. Fallbackene er
   Bergen gull/gronn-verdiene. */
body.fee-chapter-menu {
  --sf-ink: #16171a;
  --sf-accent: var(--main-theme-color, #117845);
  --sf-accent-dark: var(--text-filters-active-bg, #0c5732);
  /* Bergen beige - samme flate som sumrader og apne tjenestenivaer. */
  --sf-active-bg: var(--table-sumrow-bg, #f7f3e4);
  --sf-muted: #5b6057;
  --sf-rule: #ddd9cc;
}

/* AB#190882: the prototype built its menu as a SECOND DOM beside AngularJS's own list and then
   hid the original with rules here. This port replaces the list in the template instead - the
   chapter renders either the new menu or the old one, never both - so those hiding rules are not
   only unnecessary, they matched OUR markup: the new <ul> also carries .list-group and sits
   directly under .bookmarks-container, as do the title and the status line. They are removed.
   The mobile section is likewise left alone; the mobile menu is rendered, not suppressed. */
body.fee-chapter-menu #bookMarksContent .bookmarks-container { padding: 0 !important; }
body.fee-chapter-menu .detail-left-content-section { top: 77px; }
body.fee-chapter-menu .bookmarks-wrapper { min-height: auto; }

/* Brodsmulefeltet i lys blagratt - ikke gult. */
body.fee-chapter-menu #bBreadcrumb {
  background: var(--sf-active-bg) !important;
  padding: 16px 20px !important;
  line-height: 1.5;
}

/* Litt luft over overskriftene vi hopper til. */
body.fee-chapter-menu #detailContentSectionBottom .h2,
body.fee-chapter-menu #detailContentSectionBottom .h3 { scroll-margin-top: 96px; }

/* =========================================================================
   Felles menychassis
   ========================================================================= */

.sf-nav { background: #f5f5f5; padding: 0 0 32px; min-height: 100%; }
.sf-nav__title {
  margin: 0; padding: 26px 20px 10px;
}

.sf-list { list-style: none; margin: 0; padding: 0; }
.sf-list__row { display: flex; align-items: center; }

/* Niva 1 = tabell */
.sf-l1 {
  flex: 1 1 auto; border: 0; background: none; text-align: left; color: var(--sf-ink);
  font-size: 0.85em; line-height: 1.35; padding: 16px 8px 16px 20px;
}
.sf-l1:hover { text-decoration: underline; }

/* Niva 2 = gebyrgruppe */
.sf-sub { list-style: none; margin: 0; padding: 0 0 10px; }
.sf-l2 {
  display: block; width: 100%; border: 0; background: none; text-align: left;
  color: var(--sf-ink); font-size: 0.75em; line-height: 1.35; padding: 7px 8px 7px 20px;
}
.sf-l2:hover { text-decoration: underline; }

/* Chevron */
.sf-chev {
  flex: 0 0 46px; border: 0; background: none; color: var(--sf-ink);
  font-size: 0.85em; line-height: 1; padding: 16px 20px 16px 0; text-align: right;
}
.sf-chev::before { content: "\276F"; display: inline-block; transition: transform .15s ease; }
.sf-item.is-open > .sf-list__row .sf-chev::before { transform: rotate(90deg); }

.sf-item > .sf-sub { display: none; }
.sf-item.is-open > .sf-sub { display: block; }

/* Aktiv rad: lys flate over hele menybredden + strek i hovedfargen til venstre. */
.sf-list .is-active > .sf-list__row,
.sf-l2.is-active {
  background: var(--sf-active-bg);
  box-shadow: inset 5px 0 0 0 var(--sf-accent);
}
.sf-list .is-active > .sf-list__row .sf-l1 { font-weight: 600; }
.sf-l2.is-active { font-weight: 600; }

/* =========================================================================
   "Utvid alle"
   ========================================================================= */
.sf-toggleall { padding: 0 20px 12px; }
.sf-toggleall__btn {
  border: 0; background: none; padding: 6px 0; text-align: left;
  color: var(--sf-accent); font-size: 0.85em; font-weight: 600;
  text-decoration: underline;
}
/* Samme tegn og samme rotasjon som chevronen i radene, sa kontrollen leses
   som "det samme, men for alle". */
.sf-toggleall__btn::before {
  content: "\276F"; display: inline-block; margin-right: 9px;
  text-decoration: none; transition: transform .15s ease;
}
.sf-toggleall__btn[aria-expanded="true"]::before { transform: rotate(90deg); }

/* =========================================================================
   Sok i gebyrer

   Feltet ligger overst i venstremenyen. Menyen filtreres, med antall
   (.sf-badge) og gebyrene som et tredje niva (.sf-hitlist); treffene
   markeres samtidig i tabellene.
   ========================================================================= */

.sf-search { padding: 0 20px 6px; }
.sf-search__field { position: relative; display: flex; align-items: center; }

.sf-search__input {
  width: 100%; border: 1px solid #b9b9b9; border-radius: 2px; background: #fff;
  color: var(--sf-ink); font-size: 0.85em; line-height: 1.3;
  padding: 9px 34px 9px 12px;
}
.sf-search__input:focus {
  border-color: var(--sf-accent);
  outline: 2px solid var(--sf-accent); outline-offset: 1px;
}
/* Nettleserens egen kryss-knapp erstattes av var, sa den er der ogsa i
   Firefox og far et treffomrade som holder 24x24. */
.sf-search__input::-webkit-search-cancel-button { display: none; }

.sf-search__clear {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; color: var(--sf-muted);
  font-size: 1.25em; line-height: 1; padding: 4px 9px;
}
.sf-search__clear:hover { color: var(--sf-ink); }

.sf-search__status {
  margin: 8px 0 0; min-height: 18px;
  color: var(--sf-muted); font-size: 0.75em; line-height: 1.4;
}

/* ----------------------------------------- treffliste (mobilpanelet) */

.sf-results__btn {
  display: block; width: 100%; border: 0; background: none; text-align: left;
  color: var(--sf-ink); font-size: 0.85em; line-height: 1.35;
  padding: 8px 20px 8px 34px;
}
.sf-results__btn:hover { background: var(--sf-active-bg); }
.sf-results__btn.is-current {
  background: var(--sf-active-bg);
  box-shadow: inset 5px 0 0 0 var(--sf-accent);
  font-weight: 600;
}
.sf-results__ctx {
  display: block; margin-top: 2px; color: var(--sf-muted); font-size: 0.7em;
}

/* ---------------------------------------------------------- filtrert meny */

.sf-badge {
  flex: 0 0 auto; margin: 0 16px 0 4px; padding: 1px 8px; border-radius: 10px;
  background: var(--sf-accent); color: #fff;
  font-size: 0.7em; font-weight: 600; line-height: 1.6;
}
/* Chevronen har sin egen plass i raden - nar badgen kommer i tillegg, ma
   den ikke skyve tittelen ut. */
.sf-item.is-filtered > .sf-list__row .sf-chev { flex-basis: 32px; padding-right: 8px; }

.sf-hitlist { list-style: none; margin: 0 0 8px; padding: 0; }
.sf-hitlist__btn {
  position: relative; display: block; width: 100%;
  border: 0; background: none; text-align: left;
  color: var(--sf-muted); font-size: 0.7em; line-height: 1.35;
  padding: 5px 8px 5px 48px;
}
.sf-hitlist__btn::before { content: "\2013"; position: absolute; left: 34px; }
.sf-hitlist__btn:hover { color: var(--sf-ink); text-decoration: underline; }
.sf-hitlist__btn.is-current { color: var(--sf-ink); font-weight: 600; }

/* --------------------------------------------- treffene i selve tabellene */

/* Kendo legger bakgrunnen for annenhver rad som inline style pa <tr>, og
   temaet setter flater pa sumrader - derfor !important pa cellene. */
.sf-hit > td { background: var(--sf-active-bg) !important; }
.sf-hit--current > td { background: #fdf3c8 !important; }
.sf-hit--current > td:first-child { box-shadow: inset 5px 0 0 0 var(--sf-accent); }
.sf-hit-head { background: var(--sf-active-bg); }
.sf-hit-head.sf-hit--current { background: #fdf3c8; }

/* En overskrift publiseres som <div class="row h2">, og Bootstrap gir hvert
   ELEMENT-barn width:100% via .row > *. Et <mark> rett i overskriften blir
   derfor et flex-element pa egen linje, og overskriften brekker i tre.
   markTarget flytter hele innholdet inn i denne wrapperen forst, sa er det
   den - ikke merkingen - som er flex-elementet. Den skal ta plassen teksten
   hadde, sa paddingen fra .row > * nulles her; ellers rykker overskriften
   inn 12px sa lenge den er markert. I en tabellrad lages ingen wrapper. */
.sf-marktext { padding: 0 !important; margin: 0 !important; }

mark.sf-mark {
  display: inline;
  background: #ffe9a8; color: inherit; padding: 0 1px; border-radius: 2px;
}
.sf-hit--current mark.sf-mark { background: #ffd24d; }

@media only screen and (max-width: 1260px) {
  body.fee-chapter-menu #bookMarksSectionMobile { display: block !important; }
}

/* Level-4 headings need the same scroll offset as the others, or a jump lands them under the
   sticky top. The prototype left this rule unscoped, reasoning that level-4 headings only occur in
   this chapter - but this stylesheet loads on EVERY page of the published document, so unscoped
   means it applies to every chapter. Scoped to the fee menu like the rest, so the story's promise
   that no other chapter changes holds by construction rather than by assumption. */
body.fee-chapter-menu #detailContentSectionBottom .h4 { scroll-margin-top: 96px; }

/*
 * AB#190882 additions to the ported prototype styles.
 *
 * The prototype told the current match apart from the others by background colour alone. The story
 * requires the distinction to survive in greyscale, so the current match is also underlined - the
 * one cue that carries no hue at all.
 */
.sf-hit--current mark.sf-mark,
mark.sf-mark--current {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/*
 * Stepping between matches moves focus onto the row rather than only scrolling to it, so the row
 * needs a focus ring of its own. Rows are not otherwise focusable; they take tabindex="-1" only
 * while a search is running.
 */
tr.sf-hit:focus,
tr.sf-hit:focus-visible {
  outline: 2px solid var(--sf-accent);
  outline-offset: -2px;
}

/*
 * Mobile search panel (AB#190882).
 *
 * No prototype styles exist for this: every variant in the prototype mounted into the DESKTOP
 * bookmark container only, so mobile was never drawn. These follow the direction settled in
 * grooming - a full-screen panel with the field pinned at the top, the status line beneath it, and
 * results as a flat scrollable list carrying their chapter as breadcrumb context.
 *
 * Sizes are in rem and the panel is laid out with flex, so it reflows rather than clips when text
 * spacing is increased or the page is zoomed.
 */
.sf-search__open {
  display: block;
  width: calc(100% - 1.5rem);
  margin: 0 0.75rem 0.75rem;
  padding: 0.5rem 0.75rem;
  text-align: left;
  border: 1px solid var(--sf-border, #ccc);
  border-radius: 4px;
  background: #fff;
}

.sf-mobile-panel {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.sf-mobile-panel__head {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 0.75rem;
  padding: 0.75rem;
  border-bottom: 1px solid var(--sf-border, #ccc);
}

.sf-mobile-panel__head .sf-search__label { grid-column: 1 / -1; }
.sf-mobile-panel__head .sf-search__status { grid-column: 1 / -1; margin: 0; }

.sf-mobile-panel__close {
  border: 0;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0 0.5rem;
}

/* The only scrolling region, so the field and the count stay put while results are browsed. */
.sf-mobile-panel__results {
  flex: 1 1 auto;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sf-mobile-panel__results > li { border-bottom: 1px solid var(--sf-border, #eee); }

.sf-mobile-panel__results .sf-results__btn {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  width: 100%;
  padding: 0.75rem;
  text-align: left;
}

/*
 * Visually hidden, still announced. The search field's label is not drawn - the design has none -
 * but the field must carry a real label rather than relying on its placeholder, so the element
 * stays in the accessibility tree. Not the app's own .sr-only: that is defined only as
 * ".h1.sr-only" and uses display:none, which would hide it from screen readers too.
 */
.sf-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}