:root {
  --cs-padding-default: 10px;
  --cs-margin-default: 10px;
  --cs-margin-top-default: 10px;

  --cs-app-toolbar-height: 48px;
  --cs-app-real-time-status-view-height: 30px;

  /* The height actually visible. 100vh on iOS Safari is the height with its toolbars HIDDEN, so anything sized
     from it is taller than the visible area and its bottom sits behind the bottom toolbar, where it cannot be
     scrolled into view. 100dvh (iOS Safari 15.4+) follows the toolbars; 100vh stays as the fallback. */
  --cs-app-viewport-height: 100vh;
  --cs-app-margin-left: 5px;
  --cs-app-margin-right: 5px;

  --cs-image-logo-min-width: 150px;
  --cs-image-logo-max-width: 700px;
  --cs-image-logo-height: auto;
  --cs-image-logo-padding: 5px;

  --mud-default-borderradius: 8px !important;
}

/* === Shared design tokens =====================================================================
   The look of the Plans and Pricing page, for every view. The neutrals come from the theme's palette (the archway style
   containers default it to zinc), so a tenant's own background, surface and text colours still win; borders and the
   faint text are DERIVED from them, so they stay in proportion whatever the tenant picks, in dark mode and light.
     --cs-bg            the page
     --cs-surface       cards, dialogs, menus, fields
     --cs-surface-2     a quiet panel on a surface
     --cs-border        hairlines; --cs-border-strong for controls
     --cs-text          body text; --cs-text-soft for secondary text; --cs-text-faint for notes
   The accents are the readable tenant primary further down (--cs-palette-primary-foreground / -contrast). */
:root {
  --cs-bg: var(--mud-palette-background);
  --cs-surface: var(--mud-palette-surface);
  --cs-surface-2: var(--mud-palette-background-gray);
  --cs-text: var(--mud-palette-text-primary);
  --cs-text-soft: var(--mud-palette-text-secondary);
  --cs-text-faint: color-mix(in srgb, var(--mud-palette-text-primary) 58%, var(--mud-palette-surface));
  --cs-border: color-mix(in srgb, var(--mud-palette-text-primary) 12%, var(--mud-palette-surface));
  --cs-border-strong: color-mix(in srgb, var(--mud-palette-text-primary) 20%, var(--mud-palette-surface));
  --cs-hover: color-mix(in srgb, var(--mud-palette-text-primary) 6%, var(--mud-palette-surface));
  --cs-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 18px 40px -24px rgba(0, 0, 0, 0.35);
  --cs-radius: 16px;
  --cs-radius-control: 10px;
}

@supports (height: 100dvh) {
  :root {
    --cs-app-viewport-height: 100dvh;
  }
}

.cs-main-layout {
  position: fixed;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-width: none; /* Firefox */
  top: 0;
  min-width: 100vw;
  max-width: 100vw;
  min-height: var(--cs-app-viewport-height); /* Full viewport height */
  margin: 0;
  padding: 0;
}

.cs-app-toolbar {
  position: fixed;
  justify-content: center;
  top: 0;
  height: var(--cs-app-toolbar-height);
  min-height: var(--cs-app-toolbar-height);
  max-height: var(--cs-app-toolbar-height);
  width: 100vw;
  padding: 0;
  margin: 0;
  z-index: 4;
  /* The palette's AppbarBackground (black in both modes, set by the style containers). Its icons use AppbarText, which
     the theme keeps readable on it - see BlazorCsStyleContainerBase.ApplyReadableAppbar. */
  background-color: var(--mud-palette-appbar-background) !important;
}

.cs-button {
  height: 42px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cs-button-appbar {
  width: 45px !important;
  height: 45px !important;
  margin: 0 !important;
  margin-left: 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Changes only the icon color */
.cs-button-appbar-icon-color {
  color: var(--mud-palette-appbar-text) !important;
}

/* The app bar's icon buttons are Color.Tertiary - drawn in the READABLE tertiary, so they show on the app bar in light
   mode (where Tertiary is near-black) as well as dark. Only the colour changes. */
.cs-app-toolbar .mud-icon-button.mud-tertiary-text,
.cs-app-toolbar .mud-icon-button.mud-tertiary-text .mud-icon-root {
  color: var(--mud-palette-appbar-text) !important;
}

/* Changes only the button text color */
.cs-button-appbar-text-color {
  color: var(--mud-palette-secondary) !important;
}

/*.cs-menu {*/
/*  background-color: color-mix(in srgb, var(--mud-palette-background) 75%, black) !important;*/
/*}*/

.cs-menu-bg {
  background-color: var(--cs-surface) !important;
  color: var(--cs-text) !important;
}

/* The menu's popover: the surface, a hairline and the card radius, as the Plans and Pricing page draws its panels. */
.mud-popover:has(> .cs-menu-bg),
.mud-popover:has(.mud-list.cs-menu-bg) {
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-control) !important;
  box-shadow: var(--cs-shadow) !important;
}

.cs-menu-bg .mud-list-item-clickable {
  color: var(--cs-text) !important;
  border-radius: 8px;
}

.cs-menu-bg .mud-list-item-clickable:hover {
  background-color: var(--cs-hover) !important;
}

.mud-input-outlined-border {
  border-radius: var(--cs-radius-control) !important;
}

.mud-input-filled {
  border-radius: var(--cs-radius-control) !important;
}

.mud-input-control .mud-input-default {
  border-radius: var(--cs-radius-control) !important;
}

.cs-view-toolbar {
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: inherit;
}

.cs-left-main-drawer {
}

.cs-right-main-drawer {
}

.cs-view-background-container-centered {
  display: flex;
  position: fixed;
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-width: none; /* Firefox */
  -webkit-overflow-scrolling: touch;
  top: var(--cs-app-toolbar-height);
  min-height: calc(var(--cs-app-viewport-height) - var(--cs-app-toolbar-height) - var(--cs-app-real-time-status-view-height));
  max-height: calc(var(--cs-app-viewport-height) - var(--cs-app-toolbar-height) - var(--cs-app-real-time-status-view-height));
  min-width: 100vw;
  max-width: 100vw;
  padding: 0;
  margin: 0;
}

.cs-view-container-centered {
  display: flex;
  position: relative;
  align-items: safe center; /* center when it fits; fall back to top-align when content overflows so the top stays scrollable */
  justify-content: safe center;
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-width: none; /* Firefox */
  -webkit-overflow-scrolling: touch;
  top: 0;
  height: auto;
  max-height: calc(var(--cs-app-viewport-height) - var(--cs-app-toolbar-height) - var(--cs-app-real-time-status-view-height));
  min-width: calc(100vw - var(--cs-app-margin-left) - var(--cs-app-margin-right));
  max-width: calc(100vw - var(--cs-app-margin-left) - var(--cs-app-margin-right));
  padding: 0;
  margin: 0 var(--cs-app-margin-right) 0 var(--cs-app-margin-left);
}

.cs-view-inner-container {
  padding: 0;
  margin: 0;
}

.cs-view-inner-container-content {
  padding: var(--cs-padding-default);
  margin: 0;
}

/* Full-page, non-centered: trim the card's BOTTOM padding to 5px (top/left/right stay --cs-padding-default
   = 10px). This matches what the .cs-view-container .cs-view-sticky-actions max-height reserve already
   subtracts — (2 * --cs-padding-default) - 5px = 10px top + 5px bottom — so the card's effective vertical
   padding equals that reserve. The uniform 10px bottom was only invisible while the card filled the band
   with a fixed height; now that it shrink-wraps, the extra 5px showed as a too-tall gap below short forms
   (e.g. Account, which has no bottom action bar). Dialogs/centered views keep the uniform 10px. */
.cs-view-container .cs-view-inner-container-content {
  padding-bottom: 5px;
}

/* LayoutCsPageDialog uses Gutters="false", which makes MudBlazor apply
   `.mud-dialog .mud-dialog-content.mud-dialog-no-side-padding { padding: 12px 0px }` — i.e. it zeroes
   the left/right padding but KEEPS 12px top/bottom. That 12px stacked on top of the uniform
   cs-view-inner-container-content padding made the dialog's top/bottom margin ~2x the left/right.
   This neutralises only that vertical padding so all four sides equal the uniform inner padding.
   NOTE the selector must out-specify MudBlazor's: its rule is (0,3,0) because of the `.mud-dialog`
   ancestor, so we include `.mud-dialog` + both classes (0,4,0) to win unconditionally. */
.mud-dialog .mud-dialog-content.mud-dialog-no-side-padding.cs-page-dialog-no-vertical-padding {
  padding-top: 0;
  padding-bottom: 0;
}

/* Inside the page dialog the view's MudContainer is capped at the view's own (often narrow) MaxWidth,
   while the dialog is FullWidth at a wider breakpoint. cs-view-inner-container sets margin:0, which
   overrides MudContainer's default auto-margins and pins the view to the LEFT of the dialog. Restore
   horizontal auto-margins so the view centres. Scoped to the dialog so root layout is unaffected. */
.mud-dialog .mud-dialog-content.cs-page-dialog-no-vertical-padding .cs-view-inner-container {
  margin-left: auto;
  margin-right: auto;
}

/* Constrain the page-dialog height to the same usable band MainLayout reserves (between the fixed app
   bar at top and the bottom real-time-status bar), so a long view (e.g. the tall tenant form) scrolls
   INSIDE the dialog instead of growing to full viewport height and overflowing over those fixed bars.
   The dialog is viewport-centred, so reserving toolbar+status asymmetrically would still let the
   centred box poke under the taller top bar; reserving the toolbar height on BOTH sides clears the
   app bar exactly at top and the shorter status bar comfortably at the bottom. overflow-y makes the
   content area itself the scroller. */
.mud-dialog .mud-dialog-content.cs-page-dialog-no-vertical-padding {
  /* The extra -30px nudges the centred dialog fully clear of the app bar (reserving exactly the
     toolbar height still left a slight overlap from its elevation/shadow; 10px wasn't enough in
     testing). Trades a small bit of symmetric clearance top & bottom for guaranteed no overlap —
     kept tight so it still reads as filling the band. */
  max-height: calc(var(--cs-app-viewport-height) - (2 * var(--cs-app-toolbar-height)) - 70px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 10px either side instead of MudBlazor's FullWidth 32px (calc(100% - 64px)), which leaves too little room on a
   small phone (iPhone SE). Still capped by the dialog's MaxWidth on wider screens. Scoped to page dialogs, as
   CsInputDialog does for itself. */
.mud-dialog.mud-dialog-width-full:has(.mud-dialog-content.cs-page-dialog-no-vertical-padding) {
  width: calc(100% - 20px);
}

/* === Readable tenant primary =================================================================
   A tenant picks its own primary colour, and a dark one (navy) vanishes on a dark background just as a light one
   does on a light background. The theme keeps Primary EXACTLY as chosen - it FILLS buttons and chips - and works
   out a readable version for everything DRAWN over the page (BlazorCsStyleContainerBase.ApplyReadablePrimary,
   WCAG 4.5:1 against the background and the surface). That version is the palette's ActionDefault, so it follows
   dark/light mode by itself.
     --cs-palette-primary-foreground  primary text, links, icons, outlines - anything ON the page
     --cs-palette-primary-contrast    text ON a primary fill, black or white
   Below, MudBlazor's own foreground uses of primary are pointed at it; its fills are left alone. */
:root {
  --cs-palette-primary-foreground: var(--mud-palette-action-default);
  --cs-palette-primary-contrast: var(--mud-palette-primary-text);
}

/* Color="Color.Primary" text and icons, MudLink (incl. links in MudMarkdown), checkboxes, radios, icon buttons. */
.mud-primary-text {
  color: var(--cs-palette-primary-foreground) !important;
  --mud-ripple-color: var(--cs-palette-primary-foreground) !important;
}

.mud-border-primary {
  border-color: var(--cs-palette-primary-foreground) !important;
}

/* Text and outlined buttons in primary (filled ones keep the brand fill). */
.mud-button-root.mud-button-text-primary,
.mud-button-root.mud-button-outlined-primary {
  color: var(--cs-palette-primary-foreground) !important;
  --mud-ripple-color: var(--cs-palette-primary-foreground) !important;
}

.mud-button-root.mud-button-outlined-primary {
  border-color: color-mix(in srgb, var(--cs-palette-primary-foreground) 50%, transparent) !important;
}

/* A focused input: its label, its underline and its outline. */
.mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol {
  color: var(--cs-palette-primary-foreground) !important;
}

.mud-input.mud-input-underline:after {
  border-bottom-color: var(--cs-palette-primary-foreground) !important;
}

.mud-input:focus-within > .mud-input-outlined-border,
.mud-input:focus-within .mud-shrink > .mud-input-outlined-border {
  border-color: var(--cs-palette-primary-foreground) !important;
}

/* The selected tab. */
.mud-tab.mud-tab-active {
  color: var(--cs-palette-primary-foreground) !important;
}

/* Page-dialog header colours. Scoped via :has() to dialogs hosting our page-dialog content so other
   MudBlazor dialogs (alerts/errors) are unaffected. The READABLE primary, so the title and the close X show
   whatever the tenant's colour. */
.mud-dialog:has(.mud-dialog-content.cs-page-dialog-no-vertical-padding) .mud-dialog-title {
  color: var(--cs-palette-primary-foreground);
}

.mud-dialog:has(.mud-dialog-content.cs-page-dialog-no-vertical-padding) .mud-dialog-title .mud-button-close,
.mud-dialog:has(.mud-dialog-content.cs-page-dialog-no-vertical-padding) .mud-dialog-title .mud-button-close .mud-icon-root {
  color: var(--cs-palette-primary-foreground);
  fill: var(--cs-palette-primary-foreground);
}

/* === Sticky CsView action bars + scrolling middle ============================================
   For any CsView whose layout carries .cs-view-sticky-actions on its main MudStack and wraps the middle
   sections in a .cs-view-scroll-region (emitted by the view-layout codegen templates): pin the top action
   bar + AppViewName title and the bottom action bar, and let ONLY the middle scroll. Two hosting contexts:
   (a) inside a page dialog (.cs-page-dialog-no-vertical-padding), and
   (b) full-page in the main layout, NON-CENTERED views only (.cs-view-container — IsContentCentered=false).
   Centered views (.cs-view-container-centered: sign-in / MFA / short cards) are deliberately NOT matched, so
   they keep their shrink-wrapped, vertically-centred card look. Flip a view's IsContentCentered to choose. */

/* (a) Page dialog: max-height (shrink-wrap short forms; cap + scroll tall ones). -24px reserves card padding. */
.cs-page-dialog-no-vertical-padding .cs-view-sticky-actions {
  display: flex !important;
  flex-direction: column !important;
  max-height: calc(var(--cs-app-viewport-height) - (2 * var(--cs-app-toolbar-height)) - 70px - 24px) !important;
}

/* (b) Full-page, non-centered: max-height ONLY (no fixed height) so the card SHRINK-WRAPS its content — a
   short form's card is only as tall as its fields, NOT stretched to fill the band. The bottom action bar
   stays the last child INSIDE the card, so on a short form it hugs the content; it only reaches the bottom
   of the view/band once the content is tall enough to hit the cap (then the middle scrolls). The reserve is
   the card's top+bottom padding (2 * --cs-padding-default) PLUS a 5px gap so a full-height card stops 5px
   short of the bottom status bar (no second/outer scrollbar — .cs-view-container is already max-height:
   var(--cs-app-viewport-height) - toolbar - status; increase the 5px if a faint outer scrollbar appears). */
.cs-view-container .cs-view-sticky-actions {
  display: flex !important;
  flex-direction: column !important;
  max-height: calc(var(--cs-app-viewport-height) - var(--cs-app-toolbar-height) - var(--cs-app-real-time-status-view-height) - (2 * var(--cs-padding-default)) - 5px) !important;
}

/* The middle is the only scroller (both contexts). flex:1 fills the slack so it reaches exactly down to the
   bottom action bar (no gap) and pushes that bar to the bottom; no max-height (it would cap the region
   shorter than its flex slot and leave a gap above the footer). */
.cs-page-dialog-no-vertical-padding .cs-view-scroll-region,
.cs-view-container .cs-view-scroll-region {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Everything in the stack except the scroll region (top bar, pinned AppViewName title, bottom bar) must not
   grow or shrink. Bare child combinator so it also covers the title, which renders as an <h3>, not a div. */
.cs-page-dialog-no-vertical-padding .cs-view-sticky-actions > :not(.cs-view-scroll-region),
.cs-view-container .cs-view-sticky-actions > :not(.cs-view-scroll-region) {
  flex: 0 0 auto !important;
}

.cs-view-grid {
  padding: 0;
  margin: 0;
}


.cs-border-radius {
  border-radius: var(--mud-default-borderradius) !important;
}

.cs-form {
  display: flex;
  flex-direction: column;
  background-color: transparent;
  margin: 0;
  padding: 0;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  width: 100% !important;
  border-radius: var(--cs-radius-control) !important;
}

/* A form drawn on its own ground (cs-form-background, the page colour) inside a card: a quiet panel with a hairline. */
.cs-form.cs-form-background {
  border: 1px solid var(--cs-border);
}

.cs-form-field {
  margin: 0;
  margin-top: 0;
  padding: 0;
  height: auto;
  width: 100% !important;
  background-color: transparent;
}

.cs-text-appviewname {
  padding: 20px;
  margin: 0;
  width: 100%;
}

/* The view's title, as the Plans and Pricing page's: large, tight and in the body text colour (not Secondary). The
   double class out-specifies MudBlazor's !important .mud-secondary-text. */
.mud-typography.cs-text-appviewname {
  padding: clamp(12px, 2vw, 24px) 20px clamp(8px, 1.5vw, 16px);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.15rem);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.026em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  color: var(--cs-text) !important;
}

.cs-app-real-time-status-view {
  min-height: var(--cs-app-real-time-status-view-height); /* Footer height */
  max-height: var(--cs-app-real-time-status-view-height); /* Footer height */
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: scroll;
  scrollbar-width: none; /* Firefox */
  -webkit-overflow-scrolling: touch;
  margin: 0;
  padding: 0;
  z-index: 5;
  /* 25% darker than the page background, matching the top toolbar, so the bottom status bar stands out. */
  background-color: color-mix(in srgb, var(--mud-palette-background) 75%, black);
}

/* Media query for smaller screens */
/*@media (max-width: 500px) {*/
/*  .cs-app-real-time-status-view {*/
/*    align-items: flex-start; !* Align to top when viewport is short *!*/
/*  }*/
/*}*/

.textWithTruncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Media query for smaller screens */
/*@media (max-height: 1124px) {*/
.cs-view-background-container {
  background-color: transparent;
  display: flex;
  position: fixed;
  align-items: flex-start; /* Align to top when viewport is short */
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-width: none; /* Firefox */
  -webkit-overflow-scrolling: touch;
  top: var(--cs-app-toolbar-height);
  min-height: calc(var(--cs-app-viewport-height) - var(--cs-app-toolbar-height) - var(--cs-app-real-time-status-view-height));
  max-height: calc(var(--cs-app-viewport-height) - var(--cs-app-toolbar-height) - var(--cs-app-real-time-status-view-height));
  min-width: 100vw;
  max-width: 100vw;
  padding: 0;
  margin: 0;
}

.cs-view-container {
  background-color: transparent;
  display: flex;
  position: relative;
  align-items: flex-start; /* Override vertical centering when needed */
  justify-content: center;
  overflow: scroll;
  overflow-x: scroll;
  overflow-y: scroll;
  scrollbar-width: none; /* Firefox */
  -webkit-overflow-scrolling: touch;
  top: 0;
  height: auto;
  max-height: calc(var(--cs-app-viewport-height) - var(--cs-app-toolbar-height) - var(--cs-app-real-time-status-view-height));
  min-width: calc(100vw - var(--cs-app-margin-left) - var(--cs-app-margin-right));
  max-width: calc(100vw - var(--cs-app-margin-left) - var(--cs-app-margin-right));
  padding: 0;
  margin: 0;
  margin-left: var(--cs-app-margin-left);
  margin-right: var(--cs-app-margin-left);
}

/*}*/

.cs-image-logo-container {
  display: flex;
  justify-content: center;
  height: var(--cs-app-toolbar-height); /* Can be anything */
  max-height: var(--cs-app-toolbar-height); /* Can be anything */
  min-width: var(--cs-image-logo-min-width);
  max-width: var(--cs-image-logo-max-width);
  padding: var(--cs-image-logo-padding);
  margin: 0;
}

.cs-image-logo {
  max-height: 100%;
  min-width: var(--cs-image-logo-min-width);
  max-width: var(--cs-image-logo-max-width);
  height: var(--cs-image-logo-height);
  padding: 0;
  margin: 0;
}

/* Media query for smaller screens */
@media (max-width: 300px) {
  .cs-image-logo-container {
    max-width: 500px;
  }

  .cs-image-logo {
    max-width: 50px;
  }
}

/* Media query for smaller screens */
@media (max-width: 350px) {
  .cs-image-logo-container {
    margin: 0 !important;
    padding: 0 !important;
    width: 40px !important;
    max-width: 40px !important;
  }

  .cs-image-logo {
    margin: 0 !important;
    padding: 0 !important;
    width: 40px !important;
    max-width: 40px !important;
  }
}

/* Media query for smaller screens */
@media (max-width: 400px) {
  .cs-image-logo-container {
    margin: 0 !important;
    padding: 0 !important;
    width: 40px !important;
    max-width: 40px !important;
  }

  .cs-image-logo {
    margin: 0 !important;
    padding: 0 !important;
    width: 40px !important;
    max-width: 40px !important;
  }
}

/* Media query for smaller screens */
@media (max-width: 500px) {
  .cs-image-logo-container {
    max-width: 300px;
  }

  .cs-image-logo {
    max-width: 300px;
  }
}

/* Media query for smaller screens */
@media (max-width: 600px) {
  .cs-image-logo-container {
    max-width: 400px;
  }

  .cs-image-logo {
    max-width: 400px;
  }
}

/* Media query for smaller screens */
@media (max-width: 700px) {
  .cs-image-logo-container {
    max-width: 500px;
  }

  .cs-image-logo {
    max-width: 500px;
  }
}

/* Media query for smaller screens */
@media (max-width: 800px) {
  .cs-image-logo-container {
    max-width: 600px;
  }

  .cs-image-logo {
    max-width: 600px;
  }
}

/* Media query for smaller screens */
@media (max-width: 5000px) {
  .cs-image-logo-container {
    max-width: 700px;
  }

  .cs-image-logo {
    max-width: 700px;
  }
}

.cs-truncate-single {
  width: 100%; /* A width constraint is required */
  white-space: nowrap; /* Prevents text from wrapping to a new line */
  overflow: hidden; /* Hides the text that overflows the container */
  text-overflow: ellipsis; /* Appends the "..." at the cut-off point */
}

/* === The shared look, applied to every view ===================================================
   What the Plans and Pricing page draws by hand, applied through the classes every view already carries - so generated
   and hand-maintained views alike change without editing each one. Scoped to the view's card and to dialogs, so the
   app bar (whose menus must stay exactly as they are) is untouched - and not to a --plain card (Plans and Pricing),
   which styles its own buttons and would otherwise be out-specified by these. */

/* THE VIEW'S CARD: the surface, a hairline, the soft shadow and the 16px radius (rounded-lg is !important, hence this). */
.cs-view-inner-container-content.mud-card {
  background-color: var(--cs-surface);
  color: var(--cs-text);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius) !important;
  box-shadow: var(--cs-shadow);
}

/* A view that draws its own ground (Plans and Pricing) opts out of the card. */
.cs-view-inner-container-content.mud-card.cs-view-inner-container-content--plain {
  border: 0;
  box-shadow: none;
}

/* Inside a dialog the DIALOG is the card, so the view's own card goes flat rather than drawing a second frame. */
.mud-dialog .cs-view-inner-container-content.mud-card {
  background-color: transparent;
  border: 0;
  border-radius: 0 !important;
  box-shadow: none;
}

/* DIALOGS: the card's hairline and radius (a full-screen dialog keeps its square corners). */
.mud-dialog:not(.mud-dialog-fullscreen) {
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius) !important;
}

/* BUTTONS - the Plans and Pricing buttons. Every filled button: 10px corners, no drop shadow, sentence case. The
   colour still comes from the action type: Normal (Color.Default) is QUIET - the surface with a hairline, Submit
   (Color.Primary) is the ACCENT - the tenant's primary fill with its black-or-white text, Secondary keeps its colour.
   The hairline is an inset shadow rather than a border, so no button changes size. */
:is(.cs-view-inner-container-content:not(.cs-view-inner-container-content--plain), .mud-dialog) .mud-button-root.mud-button-filled {
  border-radius: var(--cs-radius-control) !important;
  box-shadow: none;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

:is(.cs-view-inner-container-content:not(.cs-view-inner-container-content--plain), .mud-dialog) .mud-button-root.mud-button-filled:hover,
:is(.cs-view-inner-container-content:not(.cs-view-inner-container-content--plain), .mud-dialog) .mud-button-root.mud-button-filled:active {
  box-shadow: none;
}

:is(.cs-view-inner-container-content:not(.cs-view-inner-container-content--plain), .mud-dialog) .mud-button-root.mud-button-filled:focus-visible {
  outline: 2px solid var(--cs-palette-primary-foreground);
  outline-offset: 2px;
}

/* An icon takes the button's own text colour (IconColor="Color.Tertiary" would otherwise clash with an accent fill). */
:is(.cs-view-inner-container-content:not(.cs-view-inner-container-content--plain), .mud-dialog) .mud-button-root.mud-button-filled .mud-icon-root.mud-tertiary-text {
  color: inherit !important;
}

:is(.cs-view-inner-container-content:not(.cs-view-inner-container-content--plain), .mud-dialog) .mud-button-root.mud-button-filled-default:not(:disabled):not(.mud-disabled) {
  background-color: var(--cs-surface);
  color: var(--cs-text);
  box-shadow: inset 0 0 0 1px var(--cs-border-strong);
}

:is(.cs-view-inner-container-content:not(.cs-view-inner-container-content--plain), .mud-dialog) .mud-button-root.mud-button-filled-default:not(:disabled):not(.mud-disabled):hover {
  background-color: var(--cs-hover);
  box-shadow: inset 0 0 0 1px var(--cs-text-faint);
}

:is(.cs-view-inner-container-content:not(.cs-view-inner-container-content--plain), .mud-dialog) .mud-button-root.mud-button-filled-primary:not(:disabled):not(.mud-disabled):hover {
  background-color: var(--mud-palette-primary);
  opacity: 0.88;
}

/* FIELDS (Variant.Filled): the surface with a hairline instead of MudBlazor's grey fill and underline; focus draws the
   ring in the readable primary, an error in the error colour. */
:is(.cs-view-inner-container-content:not(.cs-view-inner-container-content--plain), .mud-dialog) .mud-input.mud-input-filled {
  background-color: var(--cs-surface);
  box-shadow: inset 0 0 0 1px var(--cs-border-strong);
  transition: box-shadow 0.15s ease, background-color 0.15s ease;
}

:is(.cs-view-inner-container-content:not(.cs-view-inner-container-content--plain), .mud-dialog) .mud-input.mud-input-filled:hover {
  background-color: var(--cs-surface);
  box-shadow: inset 0 0 0 1px var(--cs-text-faint);
}

:is(.cs-view-inner-container-content:not(.cs-view-inner-container-content--plain), .mud-dialog) .mud-input.mud-input-filled:focus-within,
:is(.cs-view-inner-container-content:not(.cs-view-inner-container-content--plain), .mud-dialog) .mud-input.mud-input-filled.mud-focused {
  background-color: var(--cs-surface);
  box-shadow: inset 0 0 0 2px var(--cs-palette-primary-foreground);
}

:is(.cs-view-inner-container-content:not(.cs-view-inner-container-content--plain), .mud-dialog) .mud-input.mud-input-filled.mud-input-error {
  box-shadow: inset 0 0 0 2px var(--mud-palette-error);
}

:is(.cs-view-inner-container-content:not(.cs-view-inner-container-content--plain), .mud-dialog) .mud-input.mud-input-filled.mud-disabled {
  background-color: var(--cs-surface-2);
  box-shadow: inset 0 0 0 1px var(--cs-border);
}

:is(.cs-view-inner-container-content:not(.cs-view-inner-container-content--plain), .mud-dialog) .mud-input.mud-input-filled.mud-input-underline:before,
:is(.cs-view-inner-container-content:not(.cs-view-inner-container-content--plain), .mud-dialog) .mud-input.mud-input-filled.mud-input-underline:after {
  display: none;
}

/* EXPANSION PANELS and DIVIDERS: hairlines in the shared border colour. */
:is(.cs-view-inner-container-content:not(.cs-view-inner-container-content--plain), .mud-dialog) .mud-expand-panel {
  border-radius: var(--cs-radius-control) !important;
}

:is(.cs-view-inner-container-content:not(.cs-view-inner-container-content--plain), .mud-dialog) .mud-divider {
  border-color: var(--cs-border);
}

@media (prefers-reduced-motion: reduce) {
  :is(.cs-view-inner-container-content:not(.cs-view-inner-container-content--plain), .mud-dialog) .mud-button-root.mud-button-filled,
  :is(.cs-view-inner-container-content:not(.cs-view-inner-container-content--plain), .mud-dialog) .mud-input.mud-input-filled {
    transition: none;
  }
}

/* === The tenant's background photograph ========================================================
   When the tenant has one (CsTnt.ViewBackgroundImageUrl), MainLayout renders .cs-view-backdrop and marks the layout
   .cs-main-layout--backdrop. The photograph fills the band between the app bar and the bottom bar, fixed so the
   views scroll over it, dimmed a little with the page colour so the bars and cards stand out in both modes. Every
   view's card then turns translucent with the photograph blurred behind it, so its text stays readable over a bright,
   busy image. Dialogs are rendered outside the layout and stay solid. */
.cs-view-backdrop {
  position: fixed;
  top: var(--cs-app-toolbar-height);
  bottom: var(--cs-app-real-time-status-view-height);
  left: 0;
  right: 0;
  z-index: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--cs-bg) 30%, transparent), color-mix(in srgb, var(--cs-bg) 30%, transparent)),
    var(--cs-view-background-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* SEMI-TRANSPARENT CARDS: the surface at 78% with the photograph blurred behind. Covers a --plain card too (Plans and
   Pricing), which otherwise paints the page colour over the whole photograph; its plan cards stay solid. */
.cs-main-layout--backdrop .cs-view-inner-container-content.mud-card {
  background-color: color-mix(in srgb, var(--cs-surface) 78%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
}

/* A centred card never touches the edge of the band: 5px of the photograph shows above it (below the app bar, once it
   is taller than the screen) and below it (above the bottom bar, scrolled to the end). Left and right come from the
   view container's own 5px margins (.cs-view-container-centered). Full-page views are left alone - their card's
   height is worked out to fill the band exactly (.cs-view-container .cs-view-sticky-actions). */
.cs-main-layout--backdrop .cs-view-container-centered .cs-view-inner-container {
  position: relative;
  z-index: 1;
  padding-top: 5px;
  padding-bottom: 5px;
}

/* A view without an app bar (CsView.IsAppBarAvailable false - MainLayout does not draw it): the bar takes no room, so
   the views, the background photograph and the page dialogs' reserves all start at the top of the screen. */
.cs-main-layout--no-appbar {
  --cs-app-toolbar-height: 0px;
}

/* iOS SAFARI ONLY - an extra 5px on the right of the view container. On iOS the view is drawn a few pixels wider than
   its container, so with the usual 5px either side it ran to the very edge of the screen on the right (2026-10-30,
   iPhone). The container is made 5px narrower and the extra goes into its right margin, so the overflow lands inside
   it and the gap on the right matches the left. -webkit-touch-callout exists only in iOS WebKit, so this matches
   iPhone and iPad (every iOS browser is WebKit) and NOT Safari on macOS or any other browser. */
@supports (-webkit-touch-callout: none) {
  .cs-view-container,
  .cs-view-container-centered {
    min-width: calc(100vw - var(--cs-app-margin-left) - var(--cs-app-margin-right) - 5px);
    max-width: calc(100vw - var(--cs-app-margin-left) - var(--cs-app-margin-right) - 5px);
    margin-right: calc(var(--cs-app-margin-right) + 5px);
  }
}

/* A PROCESSING PANEL (the auth provider and checkout round trips, /ap and /cp): translucent like the views' cards. */
.cs-view-processing-panel.mud-paper {
  background-color: color-mix(in srgb, var(--cs-surface) 78%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius) !important;
}

/* TOOLTIPS are off on touch devices (phones and tablets - their primary input cannot hover). A tap opens one and it
   stays over the field the user is about to type into. Hover-capable devices, touchscreen laptops included, keep them. */
@media (hover: none) {
  .mud-popover.mud-tooltip {
    display: none !important;
  }
}