/*
 * Light surface — Mercedes-Benz Trucks.
 *
 * "The base colour of Mercedes-Benz Trucks websites is white, not black."
 *   -- .design-sync/guidelines/colours.md
 *
 * ---------------------------------------------------------------------------
 * WHY THIS FILE EXISTS INSTEAD OF EDITING base-styles.css / booking-styles.css
 *
 * Those two files are also linked by _Layout_Fuso.cshtml, and the Fuso brand is
 * explicitly out of scope -- it must render byte-identically. Rather than audit
 * 1,221 lines declaration-by-declaration (some rules mix a Fuso-dead
 * `var(--wb-*)` with a Fuso-live literal in the same block, e.g.
 * base-styles.css:446 .calendar-day-time), this file is ADDITIVE and Fuso never
 * links it. Fuso fetches none of these bytes, so Fuso cannot change.
 *
 * The invariant is checkable by diff:
 *   git diff -- .../assets/css/{base-styles,booking-styles,storno-styles,\
 *                               captcha-code-design,Navbar-Right-Links-icons}.css
 *   git diff -- .../Pages/Shared/_Layout_Fuso.cshtml .../assets/themes/fuso/
 * Both must be empty. If you find yourself editing one of those files, stop.
 *
 * CONVENTION: every rule below repeats its selector VERBATIM from the file it
 * overrides, with a `<- file:line` comment. That way the diff can be audited
 * 1:1 against the dark rules and nobody has to do specificity arithmetic.
 * Where the original used !important, repeat !important.
 *
 * LOAD ORDER: must come after @RenderSectionAsync("Styles") -- booking-styles.css
 * is pulled in there by 10 of the 13 Booking pages. See the layout <head>.
 * ---------------------------------------------------------------------------
 */

/* ===========================================================================
 * 1. Page surface                                     <- base-styles.css:50-53
 * ========================================================================= */

body .wrapper #content,
#loading-spinner-wrapper {
  background: var(--brand-surface);
  color: var(--brand-ink);
}

/* The full-screen loading scrim needs to be light now, not the black gradient
 * it inherited from the rule above. */
#loading-spinner-wrapper {
  background: rgba(255, 255, 255, 0.85);
}

h1, h2, h3, h4, h5, h6 {                             /* <- base-styles.css:55-62 */
  color: var(--brand-ink);
}

/* ===========================================================================
 * 2. Legacy white-on-black text utilities
 *
 * Bootstrap's .text-white / .text-light / .link-light are !important and
 * Bootstrap IS loaded under Fuso, so these classes cannot be stripped from
 * shared Razor markup (Pages/Booking/**, Pages/Errors/**, Index.cshtml,
 * _CookieConsentPartial, _BookingHeaderPartial) without changing Fuso.
 * Neutralise them here instead. Add .brand-on-dark to opt out -- used by the
 * black header bar and by hero text sitting on an image.
 *
 * Specificity (0,2,0) + !important beats Bootstrap's (0,1,0) + !important.
 * NOT done by retinting --bs-light-rgb: that token also drives .bg-light,
 * .border-light, .btn-light and .table-light.
 * ========================================================================= */

.text-white:not(.brand-on-dark),
.text-light:not(.brand-on-dark) {
  color: var(--brand-ink) !important;
}

.link-light:not(.brand-on-dark) {
  color: var(--brand-ink) !important;
  text-decoration-color: var(--brand-ink) !important;
}

.link-light:not(.brand-on-dark):hover,
.link-light:not(.brand-on-dark):focus {
  color: var(--brand-action) !important;
  text-decoration-color: var(--brand-action) !important;
}

/* Re-assert white INSIDE a deliberately dark region. The :not() above only
 * exempts an element that itself carries .brand-on-dark; descendants of a dark
 * block (the black header bar, hero copy over an image) need this. Same
 * specificity (0,2,0), declared later, so it wins.
 *
 * .header-image-overlay is listed here rather than having .brand-on-dark added
 * to Pages/Index.cshtml, because that file also renders under the Fuso layout.
 * Handling it in CSS Fuso never loads keeps the "no Fuso changes" invariant
 * mechanical instead of requiring a judgement call about an inert class. */
.brand-on-dark .text-white,
.brand-on-dark .text-light,
.brand-on-dark .link-light,
.header-image-overlay .text-white,
.header-image-overlay .text-light {
  color: var(--brand-ink-inverse) !important;
  text-decoration-color: var(--brand-ink-inverse) !important;
}

.brand-on-dark .link-light:hover,
.brand-on-dark .link-light:focus {
  color: var(--brand-action-on-dark) !important;
  text-decoration-color: var(--brand-action-on-dark) !important;
}

/* ===========================================================================
 * 3. Workbench component host tokens
 *
 * A light-DOM rule on the host beats the component's own :host([variant=...]),
 * so the variant axis has to be restored explicitly here.
 * ========================================================================= */

wb-card {                                          /* <- base-styles.css:167-182 */
  --bg-color: var(--brand-surface);
}

wb-card[variant="light-grey"] {
  --bg-color: #f8f8f8;                             /* Workbench's own light-grey */
}

wb-card wb-input {                                 /* <- base-styles.css:188-190 */
  --background-color: #f8f8f8;
}

/* ===========================================================================
 * 4. Chrome: header, nav, footer
 * ========================================================================= */

.sst-bg-dark {                                     /* <- base-styles.css:184-186 */
  background-color: var(--brand-surface-sunken);
  border-inline-end: 1px solid var(--brand-border);
}

.language-chooser,                                 /* <- base-styles.css:209-216 */
.language-chooser a {                              /* <- base-styles.css:226-228 */
  color: var(--brand-ink-muted);
}

.language-chooser a:hover,
.language-chooser .culture-selector.active {
  color: var(--brand-action);
}

.nav-link:focus,                                   /* <- base-styles.css:137-142 */
.nav-link:hover {
  color: var(--brand-action);
  background-color: transparent;
  border-color: transparent;
}

/* Hero copy sits on home.jpg, not on the page surface, so it stays white.
 * base-styles.css:359-361 already forces it; restated so the intent is on
 * record next to everything else that went light. */
.header-image-overlay h1,                          /* <- base-styles.css:359-361 */
.header-image-overlay h5 {
  color: var(--brand-ink-inverse);
}

/* --- Booking wizard step rail. Renders on 8 pages via _BookingHeaderPartial.
 * guidelines/navigation.md: active item in Pure Blue plus a blue index bar. --- */

/* Bootstrap's stock --bs-nav-pills-border-radius (0.375rem) is never overridden
 * in this app, so every pill carries a 6px radius. The brand is squared-off --
 * cf. base-styles.css:749 --bs-btn-border-radius: 0px. Today the rounding is
 * only visible on the focus ring, because the active pill below sets
 * `background: none !important` and so has no filled shape to round; that makes
 * it a latent bug rather than a harmless one. Setting the variable rather than
 * the property also covers `.nav-pills .show > .nav-link`. */
.nav-pills {
  --bs-nav-pills-border-radius: 0;
}

.nav-pills .nav-link.step-completed,               /* <- base-styles.css:370-372 */
.nav-pills .nav-link {
  color: var(--brand-ink);
}

.nav-pills .nav-link.step-completed .wb-icon-checkmark {  /* <- base-styles.css:374-376 */
  color: var(--brand-action);
}

.nav-pills-desktop li {                            /* <- base-styles.css:378-381 */
  border-left: 1px solid var(--brand-divider);
}

.nav-pills-mobile li:first-child {                 /* <- base-styles.css:387-391 */
  border-right: 1px solid var(--brand-divider);
}

.nav-pills-mobile-sidebar li {                     /* <- base-styles.css:393-396 */
  border-bottom: 1px solid var(--brand-divider);
}

.nav-pills-desktop .nav-link:hover .nav-number {   /* <- base-styles.css:408-410 */
  color: var(--brand-action);
}

.nav-pills .nav-link.active,                       /* <- base-styles.css:413-420 */
.nav-pills .nav-link.active span,
.nav-pills .show > .nav-link span,
.nav-pills .nav-item.active .nav-link,
.nav-pills .nav-item.active .nav-link span {
  color: var(--brand-action);
  background: none !important;
}

/* The blue index bar the navigation guideline asks for. */
.nav-pills-desktop .nav-link.active {
  box-shadow: inset 0 -3px 0 0 var(--brand-action);
}

.nav-pills .nav-number {                           /* <- base-styles.css:426-429 */
  color: var(--brand-ink-muted);
}

.nav-link,                                         /* <- base-styles.css:438-440 */
.nav-link.disabled {
  color: var(--brand-ink-muted);
}

/* --- Footer. guidelines/footer.md: meta links left with dividers, copyright
 * right, on white. --- */

footer p,                                          /* <- base-styles.css:474-478 */
footer li a {
  color: var(--brand-ink-muted);
}

footer li:not(:last-child) a:after {               /* <- base-styles.css:484-489 */
  color: var(--brand-border-strong);
}

footer li a:hover {                                /* <- base-styles.css:491-493 */
  color: var(--brand-action);
}

.footer-hr {                                       /* <- base-styles.css:495-498 */
  color: var(--brand-divider);
}

hr.divider {                                       /* <- base-styles.css:823-826 */
  border-color: var(--brand-divider);
}

/* ===========================================================================
 * 5. Sidebar, modals, buttons
 * ========================================================================= */

#sidebar {                                         /* <- base-styles.css:593-604 */
  background-color: var(--brand-surface-sunken);
  border-inline-end: 1px solid var(--brand-border);
}

.modal-body a:hover {                              /* <- base-styles.css:692-694 */
  color: var(--brand-action);
}

/* Primary button = "filled surface with the highest colour contrast"
 * (guidelines/elements.md) -- black on white, which .btn-dark already is. It
 * only lacks the Pure Blue hover the guideline mandates for everything. */
.btn-dark {                                        /* <- base-styles.css:732-750 */
  --bs-btn-hover-bg: var(--brand-action);
  --bs-btn-hover-border-color: var(--brand-action);
  --bs-btn-active-bg: var(--brand-action-hover);
  --bs-btn-active-border-color: var(--brand-action-hover);
}

.btn-secondary {                                   /* <- base-styles.css:148-151 */
  --bs-btn-color: var(--brand-ink);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--brand-border-strong);
  --bs-btn-hover-color: var(--brand-action);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: var(--brand-action);
  color: var(--brand-ink);
  border: solid 1px var(--brand-border-strong);
}

/* Focus = 3px inline Pure Blue frame; inactive = 30% opacity
 * (guidelines/elements.md). */
.btn:focus-visible,
.nav-link:focus-visible,
a:focus-visible {
  outline: 3px solid var(--brand-focus);
  outline-offset: 2px;
  box-shadow: none;
}

.btn:disabled,
.btn.disabled {
  opacity: var(--brand-disabled-opacity);
}

/* ===========================================================================
 * 6. Booking wizard              <- booking-styles.css (loaded via @section Styles)
 * ========================================================================= */

.progress, .progress-stacked {                     /* <- booking-styles.css:14-16 */
  --bs-progress-bg: var(--brand-surface-inset);
}

hr {                                               /* <- booking-styles.css:31-33 */
  color: var(--brand-divider) !important;
}

.booking-info hr {                                 /* <- booking-styles.css:35-37 */
  color: var(--brand-divider) !important;
}

.wb-selection-card {                               /* <- booking-styles.css:44-48 */
  border-bottom: 1px solid var(--brand-divider);
}

.wb-accordion .wb-selection-card {                 /* <- booking-styles.css:50-53 */
  background-color: var(--brand-surface);
}

.wb-accordion .wb-selection-card[checked] {        /* <- booking-styles.css:55-57 */
  background-color: var(--brand-surface-sunken);
}

.wb-accordion .wb-selection-card:hover {           /* <- booking-styles.css:59-61 */
  background-color: var(--brand-surface-sunken);
}

.wb-selection-card[checked] {                      /* <- booking-styles.css:88-91 */
  background-color: var(--brand-surface-sunken);
}

.wb-selection-card[checked] ~ .selection-footer {  /* <- booking-styles.css:97-99 */
  background-color: var(--brand-surface-sunken);
}

.selection-footer {                                /* <- booking-styles.css:105-107 */
  background-color: var(--brand-surface-sunken);
}

.selection-footer .selection-btn {                 /* <- booking-styles.css:109-114 */
  color: var(--brand-ink) !important;
}

.selection-footer .selection-btn:hover {           /* <- booking-styles.css:116-118 */
  color: var(--brand-action) !important;
}

.checked-dates-box,                                /* <- booking-styles.css:125-128 */
.booking-dates-box {
  color: var(--brand-ink);
}

.country-selector {                                /* <- booking-styles.css:135-137 */
  background-color: var(--brand-surface-sunken);
}

.booking-date-info {                               /* <- booking-styles.css:140-144 */
  color: var(--brand-action);
}

/* Three stacked surfaces (wb-card > .complete-info-box > .card) cannot all be
 * distinct greys on a white page. guidelines/elements.md prefers a 1px line to
 * a fill for structured content, so the inner well becomes a bordered panel. */
.booking-info .complete-info-box {                 /* <- booking-styles.css:152-154 */
  background-color: transparent;
  border: 1px solid var(--brand-divider);
  border-radius: 4px;
}

/* Was white text on a transparent background inside a yellow outline --
 * invisible on white, and yellow is not the indicator for an error. */
.alert-danger {                                    /* <- booking-styles.css:157-162 */
  --bs-alert-color: var(--brand-red-ink);
  --bs-alert-bg: var(--brand-red-surface);
  --bs-alert-border-color: var(--brand-red-text);
  border-color: var(--brand-red-text);
}

#dates-block-spinner {                             /* <- booking-styles.css:172-183 */
  background: rgba(255, 255, 255, 0.7);
}

#dates-wrapper {                                   /* <- booking-styles.css:186-188 */
  background-color: var(--brand-surface);
}

/* --- bootstrap-datepicker (DateSelection) --- */

.datepicker table tr td.disabled,                  /* <- booking-styles.css:207-214 */
.datepicker table tr td.disabled:hover {
  color: var(--brand-neutral-400);
  background-color: var(--brand-surface-sunken);
  border-color: var(--brand-border);
}

td.disabled.day:before {                           /* <- booking-styles.css:216-229 */
  border-color: var(--brand-neutral-400);
}

button.arrow-button {                              /* <- booking-styles.css:273-275 */
  background-color: var(--brand-surface-sunken) !important;
}

.datepicker .datepicker-switch:hover,              /* <- booking-styles.css:292-294 */
.datepicker .next:hover,
.datepicker .prev:hover,
.datepicker tfoot tr th:hover {
  background: var(--brand-surface-sunken);
}

/* Time-slot chips. The active state moves off --wb-blue-50 (#008dfc, 3.38:1
 * against white text -- fails AA) onto Pure Blue Dark. */
.calendar-day-time {                               /* <- base-styles.css:446-455 */
  background-color: var(--brand-surface-sunken);
  color: var(--brand-ink);
  border-color: var(--brand-border);
}

.calendar-day-time.active {                        /* <- base-styles.css:457-461 */
  background-color: var(--brand-action);
  color: var(--brand-ink-on-accent);
  border-color: var(--brand-action);
}

.calendar-day-time:hover {                         /* <- base-styles.css:463-465 */
  border: 1px solid var(--brand-action) !important;
}

/* --- Links inside content panels --- */

.content-box a {                                   /* <- booking-styles.css:296-298 */
  color: var(--brand-ink);
}

#copy-text-partner a,                              /* <- booking-styles.css:300-303 */
.card-body a {
  color: var(--brand-ink);
}

#show-text-partner a,                              /* <- booking-styles.css:304-307 */
.card-body a {
  color: var(--brand-ink);
}

.content-box a:hover,                              /* <- booking-styles.css:309-314 */
#copy-text-partner a:hover,
#show-text-partner a:hover,
.card-body a:hover {
  color: var(--brand-action);
}

/* --- VehicleSelection "or" divider: was white-on-white --- */

.vehicle-or-divider {                              /* <- booking-styles.css:359-365 */
  color: var(--brand-ink-muted);
}

.vehicle-or-divider::before,                       /* <- booking-styles.css:367-373 */
.vehicle-or-divider::after {
  border-bottom: 1px solid var(--brand-border);
  opacity: 1;
}

.vehicle-or-divider__text {                        /* <- booking-styles.css:375-382 */
  color: var(--brand-ink-muted);
}

/* ===========================================================================
 * 7. Overrides for files this layer cannot edit
 *
 * storno-styles.css and captcha-code-design.css are Fuso-loaded too.
 * ========================================================================= */

/* captcha-code-design.css is linked from @section Styles on VehicleSelection,
 * ManageBooking and Identity/Login, and Fuso renders those pages too -- so it is
 * overridden here rather than edited. #SchutzInputText is an ID selector, so the
 * override has to carry ID specificity to win. */
#SchutzInputText {                            /* <- captcha-code-design.css:1-4 */
  background-color: var(--brand-surface-sunken);
  color: var(--brand-ink);
  border: 1px solid var(--brand-border);
}

#SchutzInputText::placeholder {               /* <- captcha-code-design.css:6-8 */
  color: var(--brand-ink-muted);
}

.input-group-text {                          /* <- captcha-code-design.css:10-13 */
  background-color: var(--brand-surface-inset);
  color: var(--brand-ink);
  border-color: var(--brand-border);
}

/* ===========================================================================
 * 8. Framework chrome for the new header / footer markup
 *
 * These selectors only match in the truck/buses public layouts. They are inert
 * in the admin console, which links this file for sections 1-5 but has no
 * .brand-header / .brand-footer markup.
 *
 * guidelines/header.md: black bar 72px desktop / 56px mobile, star 38px,
 * min side distance 2/3 of the star diameter, star-to-wordmark gap 1/2 of it.
 * 2/3 x 38 = 25.3 and 1/2 x 38 = 19, both rounded to the 8px grid per
 * guidelines/spacing.md -> 24px.
 * ========================================================================= */

.brand-header {
  width: 100%;
}

.brand-header__bar {
  background: var(--brand-header-bg);
  color: var(--brand-ink-inverse);
}

.brand-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--brand-header-h);
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 24px;
}

.brand-header__brand {
  display: flex;
  align-items: center;
  gap: 24px;
  text-decoration: none;
}

/* logo.svg is the flat 2D bds/mb-star at fill:#fff -- same artwork as favicon.svg.
 * It is referenced from <img>, so the fill cannot be driven from here; recolouring
 * means editing the asset. Legible ONLY because this bar is black. */
.brand-header__star {
  width: 38px;
  height: 38px;
}

/* logo-claim.svg is fill:#fff -- it is legible ONLY because this bar is black.
 * If the header ever goes light, both it and the star above have to be re-cut. */
.brand-header__claim {
  height: 24px;
  width: auto;
}

.brand-metabar {
  height: var(--brand-metabar-h);
  background: var(--brand-metabar-bg);
  color: var(--brand-ink);
}

.brand-metabar__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--wb-spacing-xs, 1rem);
  height: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 24px;
}

.brand-footer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wb-spacing-xs, 1rem);
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--brand-divider);
  padding-block: var(--wb-spacing-s, 1.5rem);
  color: var(--brand-ink-muted);
}

.brand-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.brand-footer__links a {
  color: var(--brand-ink-muted);
  text-decoration: none;
}

.brand-footer__links a:hover {
  color: var(--brand-action);
}

.brand-footer__links li:not(:last-child) a::after {
  content: "|";
  margin: 0 0.625rem;
  color: var(--brand-border-strong);
}

.brand-footer__copy {
  margin: 0;
}

@media (max-width: 767.98px) {
  .brand-header__inner {
    height: var(--brand-header-h-mobile);
  }

  .brand-header__star {
    width: 30px;
    height: 30px;
  }

  .brand-footer__meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .brand-footer__links li:not(:last-child) a::after {
    content: "";
    margin: 0;
  }
}

/* ===========================================================================
 * 9. Typography                                    guidelines/typography.md
 *
 * Nothing in this app ever set font-family on `body`, `html` or `*`. Only
 * base-styles.css:55-62 (h1-h6) reached for an MB face, so Bootstrap's
 * `body { font-family: var(--bs-body-font-family) }` -- system-ui, Segoe UI,
 * Roboto, ... -- governed every paragraph, span, table cell, nav label and
 * Bootstrap button in the product. The guideline is explicit that MB Corpo S
 * Text carries all of that, "but also as input fonts in forms".
 *
 * See brand-tokens.css for why the weight, not the family name, is what
 * selects between S Title Cond Bold and A Title Cond.
 * ========================================================================= */

/* Re-declare the headline face as woff2-only.
 *
 * mercedes-font.css:26-32 lists its sources legacy-first:
 *   eot, eot?#iefix, otf format('otf'), svg, ttf format('truetype'), woff, woff2
 * A browser takes the FIRST entry whose format it supports. 'embedded-opentype'
 * and 'svg' are dead in every current engine and format('otf') is not a valid
 * token at all (it would be 'opentype'), so the first live entry is
 * format('truetype') -- and Chrome duly downloads the 156 KB .ttf while the
 * 54 KB .woff2 sits unused two entries later.
 *
 * That was invisible while headlines rendered at weight 400; section 9 puts this
 * face on every large heading, so it is now on the critical path. A later
 * @font-face for the same family+weight supersedes an earlier one, and this file
 * is linked after mercedes-font.css, so this wins -- without editing the
 * Fuso-shared file. Fuso keeps the .ttf until it comes in scope.
 * (MBCorpo Text needs no equivalent: workbench/css/globals.css already
 * re-declares 400/700 as woff2.) */
@font-face {
  font-family: "MBCorpo Title";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/MBCorpoSTitle-CondBold-Web.woff2) format("woff2");
}

body {
  font-family: var(--brand-font-text);
}

/* wb-heading's own shadow CSS is
 *   :host([size=m|l|xl]) { font-family: var(--wb-font-title); font-weight: 400 }
 * and weight 400 of "MBCorpo Title" is MBCorpoATitleCond-Regular -- the serif
 * A Title Cond that the guideline says has been REPLACED as the headline face.
 * So every large heading in the product, including the h1 of every booking
 * page, was rendering in the retired font. Rules in the outer document that
 * target the host beat :host rules in the shadow tree, so this reaches it.
 * size="s"/"xs" already use --wb-font-text-bold and are left alone. */
wb-heading[size="m"],
wb-heading[size="l"],
wb-heading[size="xl"] {
  font-family: var(--brand-font-headline);
  font-weight: 700;
}

/* DevExtreme needs its own rule, and it needs this exact shape.
 *
 * dx.light.css does not rely on inheriting from body -- it re-declares its own
 * stack on class selectors, so `body { font-family }` never reaches the admin
 * console. It does so at TWO specificities, and a rule at one does not cover the
 * other:
 *   (0,1,0)  .dx-widget            .dx-field   .dx-theme-generic-typography
 *   (0,1,1)  .dx-widget input      .dx-field textarea   ... (16 selectors)
 * The descendant form is what governs the text a user types into a grid cell or
 * filter row, so omitting it leaves every DevExtreme editor un-branded even when
 * the widget chrome is correct.
 *
 * This wins on order, not specificity: BookingConsole/_Layout.cshtml links
 * dx.light.css at line 66 and this file at line 74. Keep it that way -- moving
 * light-surface.css above dx.light.css silently reverts the admin console.
 * (guidelines/typography.md: MB Corpo S Text is also the "input font in forms".) */
.dx-widget,
.dx-field,
.dx-theme-generic-typography,
.dx-overlay-wrapper,
.dx-menu-base,
.dx-chat-file,
.dx-datagrid-column-chooser,
.dx-treelist-column-chooser,
.dx-widget input,
.dx-widget textarea,
.dx-field input,
.dx-field textarea,
.dx-theme-generic-typography input,
.dx-theme-generic-typography textarea,
.dx-overlay-wrapper input,
.dx-overlay-wrapper textarea,
.dx-menu-base input,
.dx-menu-base textarea,
.dx-chat-file input,
.dx-chat-file textarea,
.dx-datagrid-column-chooser input,
.dx-datagrid-column-chooser textarea,
.dx-treelist-column-chooser input,
.dx-treelist-column-chooser textarea {
  font-family: var(--brand-font-text);
}

/* .dx-theme-marker is how DevExtreme detects its own active theme at runtime --
 * it reads the computed font-family and expects the literal "dx.generic.light".
 * It must NOT be caught by the rule above; the selectors are all listed
 * explicitly rather than using a .dx-* wildcard for exactly this reason. */

/* Toplines and sublines are the one place A Title Cond still belongs. h5/h6 are
 * deliberately NOT switched: in this app they are small section headings (e.g.
 * Summary.cshtml:149), not the topline/subline pattern the guideline scopes the
 * serif to. Use these classes where that pattern is actually intended. */
.topline,
.subline {
  font-family: var(--brand-font-topline);
  font-weight: 400;
  text-transform: none;
}

/* ===========================================================================
 * 10. Workbench component states                      guidelines/elements.md
 *
 * "inactive = 30% reduced opacity" (elements.md:18). The .btn rule in section 5
 * already honoured that, but it never applied to the booking wizard, whose
 * primary actions are <wb-button disabled> rather than .btn -- see
 * DateSelection.cshtml:103, Services.cshtml:133, VehicleSelection.cshtml:133,
 * ManageBooking.cshtml:79. The 40% came from the vendored components' own
 * shadow CSS, `:host([disabled]) { opacity: .4 }`, which no first-party
 * stylesheet touched.
 *
 * Outer-document rules targeting the host win over :host rules in the shadow
 * tree, so plain element selectors are enough for every component below.
 * ========================================================================= */

wb-button[disabled],
wb-input[disabled],
wb-checkbox[disabled],
wb-toggle[disabled],
wb-select[disabled],
wb-radio-button[disabled] {
  opacity: var(--brand-disabled-opacity);
}

/* wb-round-button is the one exception: it hangs the opacity off an inner
 * `.button` element (`:host([disabled]) .button { opacity: .4 }`) and exposes no
 * CSS part, so the outer document cannot address it. Opacity composites
 * multiplicatively, so dimming the host to 0.75 yields 0.75 x 0.4 = 0.3 for the
 * rendered result. Used on Storno.cshtml:44 and :55.
 * If a future Workbench release moves that rule onto :host, this must become a
 * plain 0.3 -- otherwise the control lands at 0.75. */
wb-round-button[disabled] {
  opacity: calc(var(--brand-disabled-opacity) / 0.4);
}