/* ============================================================================
   HotelTRS app header

   LayoutHeaderComponent is on screen the entire time you are logged in, so its
   <style> block was in effect a second global stylesheet - one that nothing
   else could see or override, and that shipped four names generic enough to
   belong to anyone: .layout-holder, .properties-holder, .icon-holder and
   .account-photo.

   .account-photo was the live collision: this file set it to width/height 100%,
   and UserPickerModal set the same global class to a fixed 30px. Whichever
   <style> element came later in the document decided how both rendered.
   ============================================================================ */

.trs-header-bar {
    background: var(--trs-surface);
    border-bottom: 1px solid var(--trs-border);
    display: flex;
    justify-content: end;
    align-items: center;
    /* MEASURED, not assumed: every em in this file resolves against 14px, not
       16px - the ROOT is 16px, but body sets 14px and these elements inherit
       it, so `2.75em` is 38.5px and not the 44px it reads as. (A rem here would
       be 16px. Do not convert one to the other.) The bar therefore comes out
       55px - 38.5px of content plus 16px of padding - and always has. The
       floor below is deliberately under 55px: it only stops the bar collapsing
       if the icon row is ever empty, and the snackbar and toast stacks are
       offset a hardcoded 90px from the top of the viewport, so the natural
       height must not grow past it either. */
    min-height: 3.75em;
    padding: var(--trs-space-2) var(--trs-space-5);
    margin-bottom: 0;
}

/* ----------------------------------------------------------------------------
   IDENTITY - THE USER AND THE HOTEL

   Two clickable texts, not two buttons. Each was a bordered, sunken pill with
   a pen <Button> inside it, which meant one action was drawn as two controls
   and the two identity blocks read as boxes competing with the four icon
   buttons beside them. Now the whole block is the link and the pen is a hint.

   The grouping is what does the spacing work: identities and actions are
   different kinds of control, so the gap BETWEEN the groups (space-4) is wider
   than the gap WITHIN either of them.
   ---------------------------------------------------------------------------- */

.trs-header-props {
    display: flex;
    align-items: center;
    gap: var(--trs-space-5);
    /* So the identity group, not the icon row, is what gives when a hotel name
       is long. */
    min-width: 0;
}

/* 4px here against 16px on the row above, and both are measured text-to-text
   rather than box-to-box, because each link carries 8px of its own padding:
   name to hotel is 20px, hotel to the divider is 24px, divider to the first
   glyph is 28px. That ordering is the whole point - the first version had the
   groups 16px apart and nothing between the names, which is the wrong way
   round and is why the row read as one undifferentiated strip. */
.trs-header-identities {
    display: flex;
    align-items: center;
    gap: var(--trs-space-1);
    min-width: 0;
}

.trs-header-actions {
    display: flex;
    align-items: center;
    gap: var(--trs-space-3);
}

/* Blazorise Tooltip wraps its child in a block-level div, which would drop the
   two links out of the row's alignment and stop them shrinking. Same fix
   floorplan.css makes for its own action row. */
.trs-header-identities .b-tooltip {
    display: inline-flex;
    min-width: 0;
}

/* SCOPED UNDER .trs-header-bar ON PURPOSE. The user link is a Blazorise
   <Button> with no Color, so it takes `.btn` - (0,1,0), emitted into a <style>
   inside <body> and therefore later in document order than this file, so it
   wins any tie. At (0,2,0) these rules win without !important. This is the
   same trap the old .trs-header-edit rule fell into. */
.trs-header-bar .trs-header-identity {
    display: flex;
    align-items: center;
    gap: var(--trs-space-2);
    min-width: 0;
    max-width: 18em;
    /* Same 2.75em as an action button, so the two hover grounds and the four
       icon grounds are all one height. They were 37px and 24px: the user link
       was sized by its avatar and the hotel link by its text, and hovering
       them produced two different pills. */
    min-height: 2.75em;
    /* No VERTICAL padding, and that is what makes the two links the same
       height. With space-1 top and bottom, the user link measured 39.5px - its
       31.5px avatar plus 8px - while the hotel link, whose tallest child is
       17px of text, sat at the 38.5px floor. Measured, both at 38.5px now, and
       the min-height does the centring that the padding was doing. */
    padding: 0 var(--trs-space-2);
    border: none;
    background: none;
    box-shadow: none;
    border-radius: var(--trs-radius-sm);
    color: var(--trs-text);
    /* base, not sm. These are not chips any more - sm is the size the design
       system reserves for chips and grid cells, and at a 14px root it made the
       two names visibly smaller than everything around them. */
    font-size: var(--trs-text-base);
    font-weight: var(--trs-weight-medium);
    line-height: 1.2;
    text-align: start;
    user-select: none;
    transition: background-color var(--trs-motion-fast) var(--trs-ease),
                color var(--trs-motion-fast) var(--trs-ease);
}

/* `button.` rather than another class: the hotel name renders as a <div> for
   the roles that may not edit it, and a type selector means the hover, the
   focus ring and the pointer simply cannot reach that div - no override rule
   to keep in sync. */
.trs-header-bar button.trs-header-identity {
    cursor: pointer;
}

/* p-100, not p-50, and the colour flip carries the state as much as the ground
   does. p-50 measures 1.07 against the dark header surface and 1.10 against the
   light one - a ground you cannot see is not a hover state. p-100 gets light to
   1.22; dark is still only 1.10, which is why the text and the glyphs change
   colour too. That flip is 6.25 dark / 5.93 light against this ground. */
.trs-header-bar button.trs-header-identity:hover,
.trs-header-bar button.trs-header-identity:focus-visible {
    background: var(--trs-p-100);
    color: var(--trs-text-primary);
}

/* The hotel name as read-only context. */
.trs-header-bar .trs-header-identity-static {
    color: var(--trs-text-secondary);
}

.trs-header-identity-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The hotel glyph. It LEADS the name, where the pen used to TRAIL it - and
   that is the whole fix for "no gaps". A trailing glyph put an icon directly
   against the icon row, so the eye read one continuous strip and 16px of air
   between the groups counted for nothing. A leading glyph reads as part of the
   word it labels. The pens are gone entirely; hover and the tooltip carry the
   affordance, which is what "just clickable text" asked for. */
.trs-header-identity-icon {
    color: var(--trs-text-muted);
    font-size: var(--trs-text-base);
    flex-shrink: 0;
    transition: color var(--trs-motion-fast) var(--trs-ease);
}

.trs-header-bar button.trs-header-identity:hover .trs-header-identity-icon,
.trs-header-bar button.trs-header-identity:focus-visible .trs-header-identity-icon {
    color: var(--trs-text-primary);
}

/* The one rule in the row, between the identity text and the action glyphs.
   There is no second rule between the two names on purpose - the avatar and
   the hotel glyph already tell them apart, and two hairlines in a strip this
   short is noise. No margin: the .trs-header-props gap sits on both sides of
   it. */
.trs-header-divider {
    width: 1px;
    height: 1.75em;
    background: var(--trs-border);
    flex-shrink: 0;
}

/* ----------------------------------------------------------------------------
   AVATAR

   The border-radius has to out-specify Blazorise's .btn, which is (0,1,0) and
   sits in a <style> inside <body> - later in document order, so it wins any
   tie. Scoping under .trs-header-bar makes this (0,2,0) and settles it without
   the !important the original needed.
   ---------------------------------------------------------------------------- */

.trs-header-bar .trs-header-avatar {
    border-radius: 50%;
    border: 1px solid var(--trs-border);
    padding: 0;
    width: 2.25em;
    height: 2.25em;
    overflow: hidden;
    /* It is a flex item inside the link now, so it has to be told not to
       squeeze when the name is long. The name ellipsises instead. */
    flex-shrink: 0;
}

.trs-header-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Narrow screens: the two names give up their width before the icon row does. */
@media (max-width: 767px) {
    .trs-header-bar {
        padding: var(--trs-space-2) var(--trs-space-3);
    }

    .trs-header-bar .trs-header-identity {
        max-width: 9em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .trs-header-bar .trs-header-identity,
    .trs-header-identity-icon {
        transition: none;
    }
}

/* ----------------------------------------------------------------------------
   ICON BUTTONS

   Chat and notifications render into these from their own components, so
   .trs-header-icon is a contract shared with ChatPopoverWidget and
   UserNotificationComponent - not a private name.
   ---------------------------------------------------------------------------- */

.trs-header-icon {
    cursor: pointer;
    transition: background-color var(--trs-motion-base) var(--trs-ease),
                color var(--trs-motion-base) var(--trs-ease);
    width: 2.75em;
    height: 2.75em;
    padding: 0;
}

/* The count bubble, on the chat button and the notification bell. Both widgets
   render `.badge-count` inside `.trs-header-icon`, so this one rule covers the
   pair - but the class is shared with four datagrid and page call sites, so the
   sizing has to stay scoped to the header and NOT go into the base rule in
   components.css.

   Bootstrap's `.badge` brings `padding: .35em .65em` and weight 700, which at
   11px made a single digit measure about 20x19 - half the width of the 39px
   button under it, so it read as a label rather than a counter. A 16px circle
   here, growing sideways when a second digit arrives.

   11px stays: components.css sets that floor on purpose - "8px is below what
   this design system will put information at" - so the bubble gets smaller by
   shedding padding, never by shrinking the type. Weight is left to `.badge`,
   whose 700 is what keeps 11px digits legible. */
/* .trs-header-bar in front purely for the specificity. MEASURED in the browser:
   the Blazorise theme emits `.badge:not(.rounded-pill) { border-radius: 6px }`
   into a style element inside the body - (0,2,0), a TIE with
   `.trs-header-icon .badge-count`, and later in document order, so it won and
   the bubble computed 6px instead of the pill this rule asks for. (0,3,0)
   settles it. Exactly the trap design-system.md documents for that style
   element. */
.trs-header-bar .trs-header-icon .badge-count {
    position: absolute;
    top: 3px;
    right: 3px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 var(--trs-space-1);
    border-radius: var(--trs-radius-full);
    font-size: var(--trs-text-2xs);
    line-height: 1;
}

/* The glyphs inside the four buttons were inheriting the 14px body size, so
   they sat small and lost inside a 39px button. 18px is the icon size for this
   row, and the rule below matches the language flag to it - the flag is an
   <img>, not a glyph, so font-size cannot reach it.

   The badge keeps its own 0.6875rem: `.trs-header-icon .badge-count` is (0,2,0)
   against this rule's (0,1,1), so it wins without needing to be repeated. */
.trs-header-icon button *,
.trs-header-icon .dropdown-toggle * {
    font-size: var(--trs-text-lg);
}

/* The flag needs its own size, and NOT the 18px the glyphs take.

   flagsapi serves `/GB/shiny/64.png` - a SQUARE 64px icon with the flag inset
   and transparent padding baked into the asset. So an 18px box does not draw an
   18px flag, it draws about 13px of artwork inside 18px of nothing, which is
   why matching the glyph height made it look shrunken. 24px puts the visible
   flag at roughly a glyph's size. Its predecessor, 2.25em, was 31.5px and
   overshot the other way.

   No border and no radius either: they framed the asset's transparent margin
   rather than the flag. */
.trs-header-flag {
    height: 24px;
    width: 24px;
    display: block;
}

/* Was #003665 - a navy from before the rebrand.

   The scoping under .trs-header-bar used to be here because the chip rule was
   `.trs-header-props > div` and caught these icons too, so the two rules fought
   over the same element. The chip rule is opt-in now and the fight is gone; the
   scoping stays only because it also has to out-specify the theme's `.btn`. */
.trs-header-bar .trs-header-icon:has(> .dropdown-toggle:hover),
.trs-header-bar .trs-header-icon:has(> button:hover) {
    background-color: var(--trs-fill);
    border-radius: var(--trs-radius-sm);   /* was a second hardcoded 8px */
}

/* The GLYPH takes the on-primary colour on hover. The count bubble used to be
   in this list too, and should never have been: it has its own red ground, and
   --trs-on-primary is #12201A in dark mode - so hovering the bell turned a
   white "4" into near-black on red and looked like a rendering fault. Dropping
   the two `.badge-count` selectors leaves it the white that `.badge` gives it.

   Nothing else needs excluding: both widgets render the bubble as a SIBLING of
   the button, not inside it, so `button *` cannot reach it. */
.trs-header-bar .trs-header-icon:has(> .dropdown-toggle:hover) .dropdown-toggle *,
.trs-header-bar .trs-header-icon:has(> button:hover) button * {
    color: var(--trs-on-primary);
}

.trs-header-icon > button,
.trs-header-icon > .dropdown-toggle {
    padding: 0;
    border: none;
    background: none;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

/* ChatPopoverWidget positions its unread badge against this box. It was an
   inline `style="position: relative"`. */
.trs-header-icon-relative {
    position: relative;
}

/* Both header widgets used to hard-code `color: #003665` INLINE on their icon.
   An inline style beats every selector, which is why the hover rule below
   originally needed !important to paint the icon white - and why, the moment
   that !important came off, hovering put navy on the eucalyptus fill. The
   colour belongs here, so neither the rest state nor the hover state needs to
   fight anything. */
.trs-header-icon button *,
.trs-header-icon .dropdown-toggle * {
    color: var(--trs-text-primary);
}

/* ----------------------------------------------------------------------------
   TOASTS

   The header bar is fixed at the top, so Blazorise's snackbar stack and the
   toast container have to start below it rather than at the viewport edge.
   Was in MainLayout's <style>, which is on screen for every authenticated page
   and so was already global - this just makes that visible.

   !important stays: Blazorise computes top/bottom on the stack element itself
   from its Location parameter, and an inline style cannot be out-specified.
   ---------------------------------------------------------------------------- */

.snackbar-stack-bottom-end,
.snackbar-stack-bottom-start,
.snackbar-stack-bottom {
    top: 90px !important;
    bottom: unset !important;
}

.toast-container {
    top: 90px !important;
}

/* ----------------------------------------------------------------------------
   APP FOOTER - the EU funding disclosure

   THIS IS A SIBLING OF .eu-funding-disclosure IN auth.css, NOT AN INDEPENDENT
   DESIGN. That rule dresses the same emblem and the same sentence on the public
   account pages; this one dresses them inside the authenticated shell. The
   layout, the emblem height and the type are deliberately its values, so the
   disclosure looks the same wherever a user meets it - CHANGE THE TWO TOGETHER.

   Only the positioning differs, and it has to: the public one is a fixed band
   pinned to the viewport with `pointer-events: none` so it cannot swallow a
   click meant for the form behind it, while this one is an ordinary block in
   the document flow at the bottom of the page.

   The emblem and the statement now sit on ONE ROW. They were stacked in a
   column, which made the footer 70px tall to say one line of text - and the
   rules this exists to satisfy describe the statement as being spelled out
   BESIDE the emblem, which is what the public band has always done.

   The emblem is sized by height alone with width:auto, so its aspect ratio
   (1280x854, 1.499) is never touched - "shown unmodified" is a requirement
   here, not a preference. It may shrink on a small screen but it is never
   hidden: auth.css carries a note about exactly that, where a display:none
   for short viewports had been hiding a legally mandated statement.
   ---------------------------------------------------------------------------- */

.trs-eu-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Wraps back to two rows only when there is genuinely no width for one. */
    flex-wrap: wrap;
    gap: var(--trs-space-3);
    /* Vertical padding halved with the emblem. The footer is PINNED now, so its
       height is spent on every screen of every page rather than only at the end
       of a long one. */
    padding: var(--trs-space-1) var(--trs-space-4);
    /* Transparent, not --trs-surface. This div fills the footer edge to edge, so
       painting it white covered the bar's own --trs-bg and the footer came out a
       different colour from the header it is paired with. */
    background: transparent;
    /* Kept from the markup this replaces, where they were a Position parameter
       and an inline `z-index: 1`. */
    position: relative;
    z-index: 1;
}

.trs-eu-footer-emblem {
    /* 20px, not the 30px auth.css uses. The login page shows this once on a page
       with room to spare; here it sits in pinned chrome, where 30px of emblem
       against 15px of text was setting the whole bar's height for the sake of the
       shorter half of its own content. The bar goes 47px -> 29px. */
    height: 20px;
    width: auto;
    flex-shrink: 0;
}

.trs-eu-footer-text {
    /* 760px and 11px secondary, again matching auth.css. This was an inline
       `max-width: 900px` with the size coming from a TextSize parameter two
       elements up, so the same sentence measured 12px here and 11px on the
       public pages. */
    max-width: 760px;
    text-align: center;
    font-size: var(--trs-text-2xs);
    line-height: 1.35;
    color: var(--trs-text-secondary);
}

/* ----------------------------------------------------------------------------
   LEGAL DOCUMENT LAYOUT

   Privacy policy and terms, which render outside the app shell.
   ---------------------------------------------------------------------------- */

.legal-page-container {
    min-height: 100vh;
    background-color: var(--trs-surface-sunken);
}

.legal-header {
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--trs-elevation-1);
}

.legal-content {
    max-width: 1200px;
    margin: 0 auto;
}

/* ----------------------------------------------------------------------------
   NAV MENU

   Held back through the whole Phase 4 sweep so it would not be restyled twice -
   the Phase 5 IA change landed first, and this is the same block moved once the
   shape it has to fit was settled.

   Every selector here is one of Blazorise's own: .b-bar-link, .b-bar-dropdown-*
   and .b-bar-menu. That is deliberate rather than sloppy - there is exactly one
   Bar in the application and it is on screen for every authenticated page, so
   these were already global. Moving them out of the component makes that
   visible instead of incidental, which is the same story as MainLayout's block.

   Three rules did NOT come across: .badge-class, .dropdown-badge-class and
   .dropdown-item-container were defined here and used nowhere in the markup.
   ---------------------------------------------------------------------------- */

.b-bar-link {
    padding: var(--trs-space-4) var(--trs-space-2) var(--trs-space-4) var(--trs-space-6) !important;
}

/* The Bar and the BarMenu, off three inline styles.

   Blazorise's own `.b-bar-vertical-inline` already sets display:flex and
   flex-direction:column, and `.b-bar-vertical-inline .b-bar-menu` already sets
   flex:1 - so two thirds of what those inline styles declared was restating the
   framework. What is actually load-bearing is the 100vh (Blazorise gives the
   bar height:100%) and the menu's own overflow, and only those survive here.

   No !important on either: layout.css loads after blazorise.css, so a tie on
   specificity is settled in our favour by document order. */
.trs-nav {
    height: 100vh;
}

/* The hover-only scrollbar below this file has wanted since it was migrated has
   NEVER actually worked in Chromium, and the inline `scrollbar-width: thin`
   this replaces is why.

   MEASURED on Chrome 152: the menu carried a permanent 10px gutter -
   offsetWidth 230 against clientWidth 220 - and `.b-bar-menu::-webkit-scrollbar
   { width: 0 }` was doing nothing at all. Since Chromium 121, setting EITHER
   standard property to a non-initial value switches that element to standard
   scrollbar rendering and the ::-webkit-scrollbar pseudo-elements are ignored
   outright. `thin` did that, and so did the `scrollbar-color` the menu INHERITS
   from body out of base.css - which is why resetting only one of the two still
   measured 10px. With both neutral the gutter measures 0 and the webkit rules
   come back.

   So Chromium gets no standard properties, and the reset below is a reset
   rather than a style: `auto` is scrollbar-color's initial value, undoing what
   body passes down.

   Firefox has no ::-webkit-scrollbar at all, so it still needs the standard
   property - hence the feature query, which is a real test rather than a
   sniff: Chromium answers `selector(::-webkit-scrollbar)` true (verified in
   the browser, along with the `not` form answering false), Firefox answers
   false because it does not know the pseudo-element. Safari knows it, so it
   takes the hover behaviour with Chromium. */
.trs-nav-menu {
    overflow-y: auto;
    scrollbar-color: auto;
}

@supports not selector(::-webkit-scrollbar) {
    .trs-nav-menu {
        scrollbar-width: thin;
    }
}

/* ----------------------------------------------------------------------------
   BRAND LOCKUP

   Was a lone `<Image Source="/content/login/HotelTRS-title.png"
   Height="Height.Rem(2)" />` - the wordmark by itself, 32px tall, as an <img>,
   with the ring mark not in the sidebar at all.

   Both assets are MASKED here instead, and the reason is that they are
   opposite-polarity ink. HotelTRS-title.png is dark on transparency (measured
   average luma 11, every opaque pixel under 128), which is why dark.css carries

       img[src*="HotelTRS-title"] { filter: invert(1) hue-rotate(180deg) brightness(1.6) }

   to make it usable on a dark sidebar. trs_logo.png is the opposite - a pure
   white mark, avg luma 253.5, zero dark pixels - so adding it as an <img> beside
   the wordmark would have needed a second filter going the other way, and the
   two would have had to flip in opposite directions per theme.

   mask-image reads the asset's ALPHA, not its colour. So the geometry comes
   from the file and the ink comes from --trs-text-primary, correct in both
   themes with no filter and no hex. That is the same treatment auth.css gives
   the login card, so the mark is now identical in both places - and the
   dark.css filter simply stops matching in the sidebar, because these are Divs
   and not imgs.
   ---------------------------------------------------------------------------- */

/* The BarItem has to be stretched before the anchor inside it can fill the row,
   and until it was, half the brand was not clickable.

   MEASURED: `.b-bar-brand` is a 64px flex row with no padding, but Blazorise
   gives `.b-bar-item` `margin: 12px 0` and `display: block` with auto height,
   so it stood 40px tall - and the anchor's `height: 100%` resolved against that
   auto height and collapsed to its own content, 32px. elementFromPoint returned
   `.b-bar-brand`, not the link, for the top 12px and the bottom 20px of the
   row: half of a block that looks like one button did nothing when clicked.

   Worse, the hover did not agree with it either. `.b-bar-item` is what dark.css
   paints on hover, and that was a 40px band over a 32px target, so the row lit
   up across pixels that would not respond.

   Zeroing the margin and stretching the item gives the anchor a real 64px to
   fill. (0,2,0) ties Blazorise's own `.b-bar-vertical-inline .b-bar-item` and
   wins on document order, this file loading later. */
.b-bar-brand > .b-bar-item {
    margin: 0;
    height: 100%;
    display: flex;
}

.b-bar-brand .trs-nav-brand {
    display: flex;
    align-items: center;
    gap: var(--trs-space-3);
    height: 100%;
    /* 24px to the left, the same --trs-space-6 the nav links below indent by,
       so the ring sits on the same x as every nav icon.

       !important, and (0,2,0) to carry it, because `.b-bar-link` above is
       itself !important - it has to be, to beat Blazorise's own
       `.b-bar-vertical-inline .b-bar-link` at (0,2,0). Between two !important
       declarations specificity decides, so this wins from (0,2,0) against that
       rule's (0,1,0). It replaces an inline `padding: 1em !important`, which
       nothing in a stylesheet could have reached at all. */
    padding: 0 var(--trs-space-6) !important;
}

/* Collapsed to 64px: the wordmark goes and the ring centres. (0,3,0), so it
   beats the rule above without repeating its reasoning. */
.b-bar-vertical-inline[data-collapse="small"] .trs-nav-brand {
    justify-content: center;
    padding: 0 !important;
}

.b-bar-vertical-inline[data-collapse="small"] .trs-nav-wordmark {
    display: none;
}

/* The brand hover is the MARK changing colour, not a ground: p-800 is a visible
   step from the p-700/p-600 rest ink in both themes, where a tinted ground is
   not - p-100 measures 1.10 against the dark sidebar, and the sunken ground
   dark.css was applying measures about the same.

   Both grounds are suppressed so the two themes agree. Blazorise already gives
   the brand no hover in light (`.b-bar-light .b-bar-brand .b-bar-link:hover
   { background: inherit }`), but dark.css paints BOTH the link and the item,
   and it needs five classes to beat rather than the four I first counted:
   `:root[data-theme="dark"] .b-bar-link:hover` is (0,4,0) - :root and [data-theme]
   each score as a class - so the obvious three-class-plus-:hover selector TIED
   it and lost on document order, layout.css loading before dark.css. MEASURED
   before and after: the link's hover background read #121513 in dark and
   transparent in light. `.page` is MainLayout's own wrapper, so the extra class
   is a real ancestor rather than a hack. */
.page .b-layout-sider .b-bar-brand .b-bar-item:hover,
.page .b-layout-sider .b-bar-brand .trs-nav-brand:hover {
    background-color: transparent;
}

.b-layout-sider .b-bar-brand .trs-nav-brand:hover .trs-nav-emblem,
.b-layout-sider .b-bar-brand .trs-nav-brand:hover .trs-nav-wordmark {
    background-color: var(--trs-p-800);
}

/* Inside @supports for the same reason auth.css guards its lockup: with no mask
   support, background-color would paint two solid green blocks. The fallback
   here is no brand mark, which is worse than auth's (it keeps the wordmark), so
   it is worth saying why that is acceptable - this app already depends on :has()
   for the layout header's hover states, and :has() has NARROWER browser support
   than mask-image does. Any browser that can render the rest of the app passes
   this test. */
@supports ((-webkit-mask-image: url("/content/trs_logo.png")) or (mask-image: url("/content/trs_logo.png"))) {
    .trs-nav-emblem,
    .trs-nav-wordmark {
        background-color: var(--trs-text-primary);

        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-position: center;
                mask-position: center;
        -webkit-mask-size: contain;
                mask-size: contain;

        transition: background-color var(--trs-motion-fast) var(--trs-ease);
    }

    /* 32px against the wordmark's 19.3px, a ratio close to the 40/28.6 the auth
       card uses. Matching their heights exactly would make the circle read as
       smaller than the word, because one is a ring and the other is a
       cap-height row of letters. */
    .trs-nav-emblem {
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        -webkit-mask-image: url("/content/trs_logo.png");
                mask-image: url("/content/trs_logo.png");
    }

    /* 116px wide on a 559x93 asset renders 19.3px tall - down from the 32px the
       <img> was pinned to, which is the "smaller" part of this change. Both
       marks plus the 24px indent and the 12px gap come to 184px inside a 230px
       sidebar. */
    .trs-nav-wordmark {
        width: 116px;
        max-width: 100%;
        aspect-ratio: 559 / 93;
        -webkit-mask-image: url("/content/login/HotelTRS-title.png");
                mask-image: url("/content/login/HotelTRS-title.png");
    }
}

@media (prefers-reduced-motion: reduce) {
    .trs-nav-emblem,
    .trs-nav-wordmark {
        transition: none;
    }
}

.b-bar-dropdown-item {
    /* Indented past the icon column so a child lines up under its group's text
       rather than under its icon. */
    padding: 0.8rem var(--trs-space-2) 0.8rem 3rem;
}

/* Regular nav links: icon + text in a two-column grid, so every label starts at
   the same x whether or not its icon is wide. */
.navmenu-icon-holder {
    display: grid !important;
    grid-template-columns: 2em 1fr;
    gap: var(--trs-space-2);
    align-items: center;
}

.navmenu-icon {
    width: 2em;
    display: flex !important;
    justify-content: center;
    align-items: center;
    margin: 0 !important;
}

/* Dropdown toggles: [icon + text] [chevron]. */
.b-bar-dropdown-toggle {
    display: grid !important;
    grid-template-columns: 1fr auto;
    align-items: center;
    width: 100%;
    column-gap: var(--trs-space-4);
}

/* The icon+text half repeats the regular link's columns, so a group's label
   lines up with a plain link's label. */
.b-bar-dropdown-toggle > .d-flex {
    display: grid !important;
    grid-template-columns: 2em 1fr;
    gap: var(--trs-space-2);
    align-items: center;
}

.b-bar-dropdown-toggle::before,
.b-bar-dropdown-toggle::after {
    grid-column: 2;
    justify-self: end;
}

/* The menu keeps its own thin, hover-only scrollbar rather than the app-wide
   14px one from base.css: a permanent bar down a narrow sidebar reads as a
   border, and it lingered after the menu collapsed. */
.b-bar-menu::-webkit-scrollbar {
    width: 0;
    transition: width var(--trs-motion-base) var(--trs-ease);
}

.b-bar-menu:hover::-webkit-scrollbar {
    width: 4px;
}

.b-bar-menu:hover::-webkit-scrollbar-thumb {
    background: var(--trs-border-strong);
    border-radius: var(--trs-radius-sm);
}