/* =============================================================================
   KBM.Blazor.UI.MudBlazor: brand rules MudBlazor's theme cannot express.
   Load after MudBlazor.min.css and _content/KBM.Blazor.UI/css/kbm.css:
     <link href="_content/KBM.Blazor.UI.MudBlazor/css/kbm-mudblazor.css" rel="stylesheet" />
   Colors only via custom properties (no hex values): the light/dark palette comes from KbmTheme.
   ============================================================================= */

/* ---- Semantic roles of kbm.css follow the active MudBlazor palette (light/dark) ----
   :root:root wins over kbm.css' :root regardless of link order. */
:root:root {
  --kbm-text: var(--mud-palette-text-primary);
  --kbm-text-secondary: var(--mud-palette-text-secondary);
  --kbm-accent: var(--mud-palette-primary);
  --kbm-on-accent: var(--mud-palette-primary-text);
  --kbm-ground: var(--mud-palette-background);
  --kbm-panel: var(--mud-palette-background-gray);
  --kbm-line: var(--mud-palette-lines-default);
  /* --kbm-brand-surface stays KBM-Blau in both modes (app bar, table header) */
}

/* ---- Typography: what MudBlazor's Typography has no property for ---------------- */
.mud-typography-h6,
.mud-typography-caption {
  font-style: italic;
}

.mud-typography-h1,
.mud-typography-h2,
.mud-typography-overline {
  color: var(--mud-palette-primary);
}

.mud-typography-subtitle1,
.mud-typography-caption {
  color: var(--mud-palette-text-secondary);
}

/* On colored surfaces typography inherits the surface's text color */
:is(.mud-appbar, .mud-alert-filled, .mud-snackbar, .mud-tooltip, .mud-chip, .mud-button-root, .mud-table-head) .mud-typography {
  color: inherit;
}

/* ---- Alerts: no colored body text (Text/Outlined variants use *-darken as text in MudBlazor) ---- */
.mud-alert-text-primary, .mud-alert-outlined-primary,
.mud-alert-text-secondary, .mud-alert-outlined-secondary,
.mud-alert-text-tertiary, .mud-alert-outlined-tertiary,
.mud-alert-text-info, .mud-alert-outlined-info,
.mud-alert-text-success, .mud-alert-outlined-success,
.mud-alert-text-warning, .mud-alert-outlined-warning,
.mud-alert-text-error, .mud-alert-outlined-error,
.mud-alert-text-dark, .mud-alert-outlined-dark {
  color: var(--mud-palette-text-primary);
}

/* ---- Chips: square like every other surface ("Keine Ecken"). MudBlazor gives each chip size its own radius
   (12, 16, 20 px) instead of the theme's DefaultBorderRadius, so only the Label chips were square. */
.mud-chip.mud-chip,
.mud-chip.mud-chip.mud-chip-size-small,
.mud-chip.mud-chip.mud-chip-size-medium,
.mud-chip.mud-chip.mud-chip-size-large {
  border-radius: var(--kbm-radius);
}

/* Outlined and Text chips write their text in the chip's color. Signalorange, Stahlcyan and Alpengelb are never text
   colors (Alpengelb 1.9:1 on white), so the text stays the normal text color, as in alerts; the border and the
   hover keep the status color. A warning that must stand out is a filled chip (black on Alpengelb). */
:is(.mud-chip-outlined, .mud-chip-text):is(.mud-chip-color-secondary, .mud-chip-color-tertiary, .mud-chip-color-info, .mud-chip-color-warning) {
  color: var(--mud-palette-text-primary);
}

/* ---- Form fields ------------------------------------------------------------------
   MudBlazor sizes the input line for Roboto (1.1876em). Open Sans' descenders (g, p, q, y) reach lower and get
   clipped, so the line gets 1.4375em; the vertical padding shrinks by the same 4 px to keep every field's height. */
.mud-input {
  line-height: 1.4375em;
}

.mud-input > input.mud-input-root,
div.mud-input-slot.mud-input-root {
  padding: 4px 0 5px;
}

.mud-input > input.mud-input-root.mud-input-root-margin-dense,
div.mud-input-slot.mud-input-root.mud-input-root-margin-dense {
  padding-top: 1px;
}

.mud-input > input.mud-input-root.mud-input-root-filled,
div.mud-input-slot.mud-input-root.mud-input-root-filled {
  padding: 25px 12px 8px;
}

.mud-input > input.mud-input-root.mud-input-root-filled.mud-input-root-margin-dense,
div.mud-input-slot.mud-input-root.mud-input-root-filled.mud-input-root-margin-dense {
  padding-top: 21px;
  padding-bottom: 4px;
}

.mud-input > input.mud-input-root.mud-input-root-filled.mud-input-root-hidden-label,
div.mud-input-slot.mud-input-root.mud-input-root-filled.mud-input-root-hidden-label {
  padding-top: 16px;
  padding-bottom: 17px;
}

.mud-input > input.mud-input-root.mud-input-root-filled.mud-input-root-hidden-label.mud-input-root-margin-dense,
div.mud-input-slot.mud-input-root.mud-input-root-filled.mud-input-root-hidden-label.mud-input-root-margin-dense {
  padding-top: 8px;
  padding-bottom: 9px;
}

.mud-input > input.mud-input-root-outlined,
div.mud-input-slot.mud-input-root-outlined {
  padding: 16.5px 14px;
}

.mud-input > input.mud-input-root-outlined.mud-input-root-margin-dense,
div.mud-input-slot.mud-input-root-outlined.mud-input-root-margin-dense {
  padding-top: 8.5px;
  padding-bottom: 8.5px;
}

/* Labels use the input's own type (Body1) instead of Subtitle1 (1.125rem in KBM). Shrunk to 75 % they then match the
   0.75rem legend that cuts the notch into the outlined border, so the label no longer runs into the border. */
.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
  font-family: var(--mud-typography-body1-family);
  font-size: var(--mud-typography-body1-size);
  font-weight: var(--mud-typography-body1-weight);
  letter-spacing: var(--mud-typography-body1-letterspacing);
}

/* The label clips its text (overflow: hidden for the ellipsis), and MudBlazor's 1.15rem line is too low for Open Sans:
   descenders (g, p, q, y) were cut, most visibly in the small label on the field's border. It gets the input's
   1.4375em line; the negative margin moves the box up by half the extra height, so the text stays where it was. */
.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol,
.mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined.mud-input-label-inputcontrol {
  line-height: 1.4375em;
  margin-top: calc((1.15rem - 1.4375em) / 2);
}

/* An empty field's resting label ends with "…" before an end adornment (a date's calendar, a select's arrow, a time
   field's clock, a unit) instead of running under it and hiding the required "*": 14 px padding plus the 40 px of the
   adornment. A filled field's label sits small on the border and has the whole width. */
.mud-input.mud-input-outlined:not(.mud-shrink):not(:focus-within):has(> .mud-input-adornment-end) ~ label.mud-input-label-outlined {
  max-width: calc(100% - 14px - 40px);
}

/* The required label gets its "*" via ::after; the legend needs it too, or the notch is one character short */
.mud-input-control.mud-input-required .mud-input-outlined-border legend::after {
  content: "*";
}

/* ---- Navigation: Montserrat in the Button size (web type scale "Navigation / actions") ----
   MudNavLink inherits Body1 (1rem × 1.75 = 28 px line) and top-aligns its 24 px icon, so the text sat low.
   0.875rem × 1.75 gives a 24.5 px line, level with the icon. Weights stay MudBlazor's (400, active 500). */
.mud-nav-link {
  font-family: var(--mud-typography-button-family);
  font-size: var(--mud-typography-button-size);
  line-height: var(--mud-typography-button-lineheight);
}

.mud-nav-link .mud-nav-link-text {
  letter-spacing: var(--mud-typography-button-letterspacing);
}

/* MudTab: same style instead of MudBlazor's forced caps in the inherited Body1 font. Caps are reserved for the small
   tracked labels (overline, KPI label, table header). Weight stays MudBlazor's 500. */
.mud-tab {
  font-family: var(--mud-typography-button-family);
  font-size: var(--mud-typography-button-size);
  line-height: var(--mud-typography-button-lineheight);
  letter-spacing: var(--mud-typography-button-letterspacing);
  text-transform: var(--mud-typography-button-text-transform);
}

/* A tab with a count (BadgeData): the badge sits in the tab's flow, raised after the text, instead of floating
   over the tab's edge, which clips it. So "12" or "99+" grows the tab and shows whole. */
.mud-tab .mud-badge-root.mud-tab-badge {
  position: relative;
  display: inline-flex;
  align-self: flex-start;
  margin-top: -2px;
  margin-left: 4px;
}

.mud-tab .mud-tab-badge .mud-badge-wrapper {
  position: static;
  display: inline-flex;
  width: auto;
  height: auto;
}

.mud-tab .mud-tab-badge .mud-badge {
  position: static;
  inset: auto;
  transform: none;
}

/* ---- Tables: header row KBM-Blau with white Open Sans Bold caps (+0.15em) in both modes ---- */
.mud-table .mud-table-root .mud-table-head .mud-table-cell,
.mud-simple-table.mud-simple-table table thead th {
  background-color: var(--kbm-brand-surface);
  color: var(--kbm-on-brand-surface);
  font-family: var(--kbm-font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.mud-table-head :is(.mud-icon-button, .mud-table-sort-label, .mud-button-root) {
  color: inherit;
}

/* ---- KbmLayout ---------------------------------------------------------------------- */
/* Clear space ½ X (X = logo height, 32 px at the default 160 px width) */
.kbm-layout-home {
  display: flex;
  align-items: center;
  margin-inline: 16px;
}

/* With a drawer the logo heads the drawer: 16 px on all sides, left edge level with the nav link icons */
.kbm-layout-drawer-home {
  flex: none;
  align-self: flex-start;
  margin: 0;
  padding: 16px;
}

/* The title takes the room between the menu (or logo) and the app bar's buttons and is shortened with an ellipsis.
   Where that room is too narrow to show a word (a phone with several buttons, which left only "K…"), the title is
   hidden: the logo names the app. The outer span is the container whose width decides, the inner one the text. */
.kbm-layout-title {
  flex: 1 1 0;
  min-width: 0;
  container-type: inline-size;
  container-name: kbm-layout-title;
}

.kbm-layout-title-text {
  display: block;
  font-family: var(--kbm-font-heading);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@container kbm-layout-title (max-width: 6.5rem) {
  .kbm-layout-title-text {
    display: none;
  }
}

.kbm-layout-menu + .kbm-layout-title {
  margin-inline-start: 12px;
}

.kbm-layout-content {
  padding-block: 2rem;
}

/* A link to a heading in the content (e.g. a section of a guide) scrolls it to just below the 64 px app bar */
.kbm-layout-main :is(h1, h2, h3, h4, h5, h6)[id] {
  scroll-margin-top: 80px;
}

/* ---- KbmIconButton ---------------------------------------------------------------- */
/* The span a long press listens on: no own box, and no long-press menu, link preview or text selection of the phone */
.kbm-icon-button-press {
  display: inline-flex;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ---- KbmLanguageSelector ----------------------------------------------------------- */
.kbm-language {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.kbm-language-current {
  color: var(--kbm-accent);
}

/* ---- KbmSettingsMenu: overline headings, a hairline between the sections ------------ */
.kbm-settings-list {
  min-width: 240px;
}

.kbm-settings-heading.mud-typography {
  display: block;
  padding: 8px 16px 2px;
}

.kbm-settings-heading.mud-typography:not(:first-child) {
  margin-top: 4px;
  border-top: 1px solid var(--kbm-line);
}

.kbm-settings-divider {
  margin-block: 4px;
}

.kbm-settings-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.kbm-settings-label {
  flex: 1 1 auto;
}

/* The on/off switch is drawn as an icon: the whole entry is the control (menuitemcheckbox) */
.kbm-settings-toggle.mud-icon-root {
  font-size: 2rem;
  margin-block: -6px;
}

/* ---- Components -------------------------------------------------------------------- */
.kbm-info-box-icon {
  color: var(--kbm-accent);
}

/* ---- KbmPageHelp: a Hinweisbox whose header row opens and closes it ------------------ */
.kbm-page-help.kbm-info-box {
  padding: 0;
  margin-bottom: 1rem;
}

.kbm-page-help-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.kbm-page-help-header:focus-visible {
  outline: 2px solid var(--kbm-accent);
  outline-offset: -2px;
}

/* Montserrat like the title of a Hinweisbox, in the body size so the collapsed box stays one slim row */
.kbm-page-help-title {
  flex-grow: 1;
  font-family: var(--kbm-font-heading);
  font-weight: 600;
}

/* Aligned with the title, after the icon */
.kbm-page-help-body {
  padding: 0 12px 12px 40px;
}

.kbm-page-help-body ul {
  margin: 6px 0 0;
  font-size: 0.875rem;
  line-height: 1.43;
}

.kbm-page-help-body li + li {
  margin-top: 2px;
}

.kbm-page-help-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-top: 8px;
  font-size: 0.875rem;
}

@media (max-width: 599.98px) {
  .kbm-page-help-body {
    padding-left: 12px;
  }
}

/* ---- KbmHelpTip ---------------------------------------------------------------------- */
.kbm-help-tip-root {
  vertical-align: middle;
}

.kbm-help-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 2px;
  padding: 2px;
  border: none;
  background: none;
  color: inherit;
  cursor: help;
}

.kbm-help-tip:focus-visible {
  outline: 2px solid var(--kbm-accent);
}

/* MudBlazor sets "max-width: none" inline when it positions the popover, so the limit needs !important.
   KbmHelpTip measures the room where the tip opens and passes it as --kbm-help-tip-max-width. */
.kbm-help-tip-popover {
  max-width: min(var(--kbm-help-tip-max-width, 320px), calc(100vw - 32px)) !important;
  text-align: left;
  white-space: normal;
}

/* A field with a "?" after it: <div class="kbm-field-with-tip"><MudTextField … /><KbmHelpTip … /></div>.
   The "?" sits level with the middle of the input line, not in the middle of the field and its helper text: the
   label's notch 6.5px plus half the 43px outlined input minus half the 24px tip. A button, check box, switch or link is
   centred. */
.kbm-field-with-tip {
  display: flex;
  align-items: flex-start;
  gap: 2px;
}

.kbm-field-with-tip > :first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.kbm-field-with-tip > .kbm-help-tip-root {
  margin-top: 16px;
}

.kbm-field-with-tip:has(> .mud-button-root, > .mud-checkbox, > .mud-switch, > .mud-link) {
  align-items: center;
}

.kbm-field-with-tip:has(> .mud-button-root, > .mud-checkbox, > .mud-switch, > .mud-link) > .kbm-help-tip-root {
  margin-top: 0;
}