: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: 200px;
  --cs-image-logo-max-width: 700px;
  --cs-image-logo-height: auto;
  --cs-image-logo-padding: 5px;

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

@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;
  /* 25% darker than the page background so the top bar stands out. Tied to the theme's per-tenant
     background var, so it tracks each tenant's colour/mode automatically. */
  background-color: color-mix(in srgb, var(--mud-palette-background) 75%, black) !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-tertiary) !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: color-mix(in srgb, var(--mud-palette-background) 85%, black) !important;
  color: #fff !important;
}

.cs-menu-bg .mud-list-item-clickable {
  color: #fff !important;
}

.cs-menu-bg .mud-list-item-clickable:hover {
  background-color: #4a5568 !important;
}

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

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

.mud-input-control .mud-input-default {
  border-radius: var(--mud-default-borderradius) !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);
}

/* Page-dialog header colours. Scoped via :has() to dialogs hosting our page-dialog content so other
   MudBlazor dialogs (alerts/errors) are unaffected. Uses the theme primary so it tracks dark mode. */
.mud-dialog:has(.mud-dialog-content.cs-page-dialog-no-vertical-padding) .mud-dialog-title {
  color: var(--mud-palette-primary);
}

.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(--mud-palette-primary);
  fill: var(--mud-palette-primary);
}

/* === 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(--mud-default-borderradius) !important;
}

.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%;
}

.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 */
}