/**
 * @copyright Marktplatz Design und Software GmbH
 * @author Marouane Edghoughi <med@marktplatz-agentur.de>
 * @date 07.01.2025 12:00
 * @description: This file is intended to hold the required styles in order to override Radzen components
 */

/* Font faces declaration */
@font-face {
  font-family: "Lato-Light";
  src: url("fonts/Lato-Light.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Lato-Regular";
  src: url("fonts/Lato-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Lato-Bold";
  src: url("fonts/Lato-Bold.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}


:root:has(.light-theme) {
  background-color: var(--mp-app-background) !important;
  transition: all 0.3s ease-in-out !important;
}
:root:has(.dark-theme) {
  background-color: var(--mp-app-background) !important;
  transition: all 0.3s ease-in-out !important;
}

.rz-layout {
  height: 100% !important;
}

/* set backgrounds */
.rz-layout,
.rz-body,
.rz-footer {
  background-color: var(--mp-app-background) !important;
  transition: var(--mp-default-transition) !important;
}

/* header styling */
.rz-header {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center;
  height: 70px !important;
  padding: 0 20px 0 0 !important;
  flex-wrap: wrap;
  background-color: var(--mp-header-bg, var(--mp-component-border)) !important;
  border-bottom: 2px solid var(--mp-primary) !important;
  transition: var(--mp-default-transition) !important;
}

.rz-header .rz-sidebar-toggle {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 70px !important;
  height: 70px !important;
  color: #ffffff !important;
  background-color: var(--mp-primary) !important;
  transition: var(--mp-default-transition) !important;
}
.rz-header .rz-sidebar-toggle:hover {
  border-radius: 0 !important;
  background-color: var(--mp-primary-hover) !important;
}

.rz-header .logo {
  height: 40px !important;
  width: auto !important;
  pointer-events: none !important;
}
.rz-header .logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.rz-header .logo-link .logo {
  pointer-events: auto !important;
}
.rz-header .state-logo {
  height: 40px !important;
  width: auto !important;
  pointer-events: none !important;
}
.rz-header .rz-text-body2 {
  margin-block-start: unset !important;
  margin-block-end: unset !important;
}

.rz-header .switch-mode {
  display: flex !important;
  flex-direction: row !important;
  gap: 5px !important;
  align-items: center !important;
}
.rz-header .switch-mode .rz-text-body1 {
  margin-block-start: unset !important;
  margin-block-end: unset !important;
}
.rz-header .switch-mode .rz-button {
  color: var(--mp-primary) !important;
}
.rz-header .switch-mode .rz-button:hover .rz-button-text {
  transition: var(--mp-default-transition) !important;
  text-decoration: underline !important;
}

/* sidebar styling */
.rz-sidebar {
  background-color: var(--mp-app-background) !important;
  transition: var(--mp-default-transition) !important;
}
.rz-sidebar .rz-panel-menu {
  background-color: var(--mp-header-bg, var(--mp-primary)) !important;
  transition: var(--mp-default-transition) !important;
}
.rz-sidebar .rz-panel-menu .rz-navigation-item-wrapper {
  background-color: unset !important;
}

.rz-panel-menu .rz-navigation-item {
  border-block-end: unset !important;
  border-radius: 0 !important;
}
.rz-panel-menu .rz-navigation-item .rz-navigation-item-text {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.82) !important;
}

.rz-panel-menu .rz-navigation-item .rz-navigation-item-link {
  background: unset !important;
  background-color: transparent !important;
  transition: var(--mp-default-transition) !important;
}
.rz-panel-menu .rz-navigation-item .rz-navigation-item-link:hover {
  background-color: rgba(255, 255, 255, 0.10) !important;
}
.rz-panel-menu .rz-navigation-item .rz-navigation-item-link.active {
  background-color: rgba(255, 255, 255, 0.18) !important;
}
.rz-panel-menu .rz-navigation-item .rz-navigation-item-link.active .rz-navigation-item-text {
  color: #ffffff !important;
  font-weight: 700 !important;
}
.rz-panel-menu .rz-navigation-item .rz-navigation-item-link i {
  color: rgba(255, 255, 255, 0.82) !important;
}
.rz-panel-menu .rz-navigation-item .rz-navigation-item-link.active i {
  color: #ffffff !important;
}

.component-bg {
  background-color: var(--mp-component-background) !important;
  transition: var(--mp-default-transition) !important;
}

/* login container section */
.login-container {
  width: 100%;
  max-width: 1100px;
  overflow: hidden !important;
  border: 2px solid var(--mp-component-border) !important;
  transition: var(--mp-default-transition) !important;
}
.login-container .rz-form-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}
.login-container .rz-form-row .rz-label,
.login-container .rz-form-row .rz-form-input-wrapper {
  flex: 0 !important;
}

.rz-link,
.rz-link:focus {
  color: var(--mp-primary) !important;
  transition: var(--mp-default-transition) !important;
}
.rz-link:hover {
  color: var(--mp-primary-hover) !important;
}

.login-container .register {
  padding: 0 !important;
  background-color: transparent !important;
}
.login-container
  .rz-register
  .rz-button:not(.rz-state-disabled):not(:active):hover {
  background-image: unset !important;
  background-size: unset !important;
}
.login-container .rz-register .rz-button .rz-button-text {
  color: var(--mp-primary) !important;
  transition: var(--mp-default-transition) !important;
}
.login-container .rz-register .rz-button .rz-button-text:hover {
  color: var(--mp-primary-hover) !important;
}

.login-container .login-overlay-bg {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45) url("../images/jb-login-bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: overlay;
}

.login-container .logo {
  width: 70%;
  height: auto;
  pointer-events: none;
}

/* styling footer */
.rz-footer {
  padding: 2rem !important;
}
.rz-footer .login-signet-wrapper {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
.rz-footer .login-signet-wrapper .login-signet {
  width: 70px !important;
  height: auto !important;
  pointer-events: none;
}

/* set typography style */
* {
  font-family: "Lato-Regular";
}

.rz-text-h1,
.rz-text-h2,
.rz-text-h3 {
  font-family: "Lato-Bold" !important;
  outline: none !important;
  transition: var(--mp-default-transition) !important;
}

.rz-text-h1 {
  position: relative;
  font-size: 2.5rem;
  color: var(--mp-text) !important;
}
.rz-text-h1:after {
  position: absolute;
  content: "";
  width: 60px;
  height: 4px;
  background-color: var(--mp-primary);
  left: 0;
  bottom: -8px;
  transition: var(--mp-default-transition) !important;
}

.rz-text-h2 {
  font-size: 1.8rem;
}

.rz-text-h3 {
  font-size: 1.5rem;
  font-weight: 400;
}

/* disable ripple effect */
.rz-ripple {
  animation: none !important;
  transition: none !important;
}

/* style radzen buttons */
.rz-button:not(.rz-datepicker-trigger) {
  padding: 16px 30px !important;
  border-radius: var(--corner-radius-small) !important;
  transition: var(--mp-default-transition) !important;
  box-shadow: none !important;
}
.rz-button .rz-button-box .rz-button-text {
  font-size: 1rem !important;
}

.rz-button.rz-primary {
  color: var(--mp-text-invert) !important;
  background-color: var(--mp-primary) !important;
}
.rz-button.rz-secondary,
.rz-button.rz-success {
  color: var(--mp-text-invert) !important;
  background-color: var(--mp-success) !important;
}
.rz-button.rz-danger {
  color: var(--mp-text-invert) !important;
  background-color: var(--mp-error) !important;
}

.rz-button.rz-warning {
  color: var(--mp-text-invert) !important;
  background-color: var(--mp-warning) !important;
}

.rz-button.rz-variant-text {
  padding: 0 !important;
  border-radius: 0 !important;
  color: var(--mp-text) !important;
  background-color: transparent !important;
  transition: var(--mp-default-transition) !important;
}

.rz-button.rz-state-disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* search section styling */
.search-accordion {
  margin-bottom: 40px;
  border-radius: var(--corner-radius-small) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}
.search-accordion > div:first-child {
  border-radius: var(--corner-radius-small) var(--corner-radius-small) 0 0 !important;
}
.search-accordion > div:only-child {
  border-radius: var(--corner-radius-small) !important;
}

.search-accordion .rz-accordion-header {
  background-color: var(--mp-primary) !important;
  border-radius: var(--corner-radius-small) var(--corner-radius-small) 0 0 !important;
  transition: background-color 0.2s ease !important;
}
.search-accordion .rz-accordion-header:hover {
  background-color: var(--mp-primary-hover) !important;
}

/* Radzen updated accordion header from <a> to <button> — target button now */
.search-accordion .rz-accordion-header button {
  display: flex !important;
  align-items: center !important;
  padding: 16px !important;
  gap: 8px !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}
.search-accordion .rz-accordion-header button i,
.search-accordion .rz-accordion-header button span {
  color: #ffffff !important;
}

.search-accordion .rz-accordion-content {
  background-color: var(--mp-component-border) !important;
  border-radius: 0 0 var(--corner-radius-small) var(--corner-radius-small) !important;
  transition: var(--mp-default-transition) !important;
}

.search-accordion .rz-row .rz-col {
  padding: 20px !important;
  min-width: 0;
  background-color: var(--mp-component-background) !important;
  border-radius: var(--corner-radius-small) !important;
  transition: var(--mp-default-transition) !important;
}

.search-accordion .search-buttons {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-end !important;
}

.search-advanced-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 16px;
  background-color: var(--mp-component-background) !important;
  border: none;
  color: var(--mp-primary) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: var(--mp-default-transition) !important;
}

.search-advanced-toggle:hover {
  background-color: var(--mp-element-background) !important;
}

.search-advanced-toggle .rz-icon {
  color: var(--mp-primary) !important;
  font-size: 1.1rem !important;
}

/* Minimierte Suchmaske: kompaktes Grid ohne Spalten-Karten */
.search-compact-panel {
  background-color: var(--mp-component-background) !important;
}

.search-compact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 12px;
  align-items: start;
  padding: 12px 16px;
}

.search-compact-grid--basic {
  grid-template-columns: minmax(100px, 0.7fr) minmax(150px, 1fr) minmax(150px, 1fr) minmax(180px, 1.2fr);
  padding-bottom: 8px;
}

.search-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.search-field--checkbox {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}

.search-field--checkbox .rz-label {
  margin-bottom: 0 !important;
}

.search-field .rz-label {
  margin-bottom: 0 !important;
}

.search-compact .search-advanced-section {
  margin-top: 0;
  border-top: 1px solid var(--mp-component-border);
}

.search-compact .search-advanced-toggle {
  padding: 8px 16px;
  border: none;
  border-radius: 0;
  background-color: var(--mp-component-background) !important;
}

.search-compact .search-advanced-toggle.is-open {
  border-bottom: 1px solid var(--mp-component-border) !important;
}

.search-compact .search-advanced-content {
  border: none !important;
  border-radius: 0 !important;
  background-color: var(--mp-component-background) !important;
  padding: 0 !important;
}

.search-compact .search-advanced-content .search-compact-grid {
  padding-top: 8px;
  padding-bottom: 12px;
}

.search-accordion .rz-accordion-content:has(.search-compact) {
  padding: 0 !important;
  background-color: var(--mp-component-background) !important;
}

.search-accordion .search-compact ~ .search-buttons {
  padding: 8px 16px 12px;
  background-color: var(--mp-component-background) !important;
  border-top: 1px solid var(--mp-component-border);
}

/* content container */
.content-container {
  padding: 20px !important;
  background-color: var(--mp-component-background) !important;
  border: 1px solid var(--mp-component-border) !important;
  border-radius: var(--corner-radius-small) !important;
  transition: var(--mp-default-transition) !important;
}

/* radzen form components */
.rz-label {
  color: var(--mp-text) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  transition: var(--mp-default-transition) !important;
}

.rz-text-body1.required-validator {
  margin-bottom: 0 !important;
  font-size: 0.9rem !important;
  color: var(--mp-hinweis-invert) !important;
  transition: var(--mp-default-transition) !important;
}

.rz-textbox,
.rz-dropdown,
.rz-datepicker .rz-inputtext,
.rz-numeric .rz-numeric-input {
  height: unset !important;
  padding: 8px !important;
  background-color: var(--mp-app-background) !important;
  border-width: 2px !important;
  border-color: var(--mp-component-border) !important;
  border-radius: var(--corner-radius-small) !important;
  transition: var(--mp-default-transition) !important;
}
.rz-textarea {
  padding: 8px !important;
  background-color: var(--mp-app-background) !important;
  border-width: 2px !important;
  border-color: var(--mp-component-border) !important;
  border-radius: var(--corner-radius-small) !important;
  transition: var(--mp-default-transition) !important;
}
.rz-textbox:disabled,
.rz-textarea:disabled,
.rz-dropdown:disabled,
.rz-datepicker .rz-inputtext:disabled,
.rz-numeric:has(.rz-numeric-input:disabled) {
  color: var(--mp-text-disabled) !important;
}
.rz-textbox:focus,
.rz-textbox:focus,
.rz-dropdown:focus,
.rz-datepicker .rz-inputtext:focus,it 
.rz-numeric:has(.rz-numeric-input:focus) {
  border-color: var(--mp-primary) !important;
}
.rz-textbox:not(:disabled):not(.rz-state-disabled):focus,
.rz-textarea:not(:disabled):not(.rz-state-disabled):focus,
.rz-dropdown:not(:disabled):not(.rz-state-disabled):focus,
.rz-datepicker .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus,
.rz-numeric:not(:disabled):not(.rz-state-disabled):focus {
  box-shadow: unset !important;
  outline: unset !important;
  outline-offset: unset !important;
}

.rz-dropdown {
  cursor: pointer !important;
  max-width: 100% !important;
}

.rz-dropdown .rz-dropdown-label {
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
}

.rz-datepicker .rz-button {
  position: absolute !important;
  padding: 0 !important;
  inset-block-start: 50% !important;
  inset-inline-end: 0.625rem !important;
  transform: translateY(-50%);
}

.rz-numeric {
  height: unset !important;
  border: 2px solid var(--mp-component-border) !important;
  background-color: unset !important;
  transition: var(--mp-default-transition) !important;
}
.rz-numeric .rz-numeric-button {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0 !important;
  color: var(--mp-primary) !important;
  inset-inline-end: 10px !important;
}
.rz-numeric .rz-numeric-up {
  inset-block-start: 8px !important;
}
.rz-numeric .rz-numeric-down {
  inset-block-end: 8px !important;
}
.rz-numeric .rz-numeric-button .rzi {
  font-size: 22px !important;
}
.rz-numeric .rz-button:not(.rz-state-disabled):before {
  display: none !important;
}

/* radzen checkbox */
.rz-chkbox {
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  border: 2px solid var(--mp-component-border) !important;
  border-radius: var(--corner-radius-small) !important;
  transition: var(--mp-default-transition) !important;
}
.rz-chkbox:hover {
  border-color: var(--mp-primary) !important;
}
.rz-chkbox:has(.rz-state-active):hover {
  border-color: var(--mp-component-border) !important;
}

.rz-chkbox .rz-chkbox-box {
  width: 18px !important;
  height: 18px !important;
  margin: auto !important;
  box-shadow: unset !important;
  border-radius: 3px !important;
  border: unset !important;
  background-color: var(--mp-app-background) !important;
  transition: var(--mp-default-transition) !important;
}
.rz-chkbox .rz-chkbox-box.rz-state-active {
  background-color: var(--mp-primary) !important;
  transition: var(--mp-default-transition) !important;
}

.rz-chkbox .rz-chkbox-box .rzi-check:before {
  transition: var(--mp-default-transition) !important;
}

.rz-chkbox .rz-chkbox-box:after,
.rz-chkbox-box.rz-state-active:hover:not(.rz-state-disabled):after {
  display: none !important;
}

.rz-checkbox .rz-chkbox-label {
  color: var(--mp-text) !important;
  transition: var(--mp-default-transition) !important;
}

/* radzen radio */
.radio-btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  margin: 5px;
  border: 1px solid var(--mp-input-checkbox);
  border-radius: 50%;
  transition: var(--mp-default-transition);
}
.radio-btn input {
  appearance: none !important;
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer;
  transition: var(--mp-default-transition);
}
.radio-btn:has(input:checked) {
  border: 1px solid var(--mp-primary);
}
.radio-btn input:after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: var(--mp-primary);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: var(--mp-default-transition);
}
.radio-btn input:checked:after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* radzen radio button list */
.rz-radio-button-list-horizontal {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.rz-radio-btn {
  display: flex !important;
  flex-direction: row !important;
  gap: 10px !important;
}
.rz-radio-btn .rz-radiobutton {
  width: 24px !important;
  height: 24px !important;
}

.rz-radio-btn .rz-radiobutton .rz-radiobutton-box {
  border-width: 1px !important;
}

.rz-radio-btn .rz-radiobutton .rz-radiobutton-box .rzi-circle-on {
  background-color: var(--mp-primary) !important;
  transition: background-color 0.3s ease-in-out !important;
}
.rz-radio-btn .rz-radiobutton .rz-radiobutton-box .rzi {
  width: 12px !important;
  height: 12px !important;
}
.rz-radio-btn .rz-radiobutton .rz-radiobutton-box::after {
  content: none !important;
  display: none !important;
}

.rz-radio-btn .rz-radiobutton-label {
  margin-block: unset !important;
  margin-inline: unset !important;
  cursor: pointer;
  align-self: center !important;
}

/* radzen switch */
.rz-switch {
  width: 52px !important;
  min-width: 52px !important;
  height: 28px !important;
  border: none !important;
  border-radius: 100px !important;
  transition: var(--mp-default-transition) !important;
}

.rz-switch:focus-within {
  outline: 2px solid var(--mp-primary) !important;
  outline-offset: 3px !important;
  border-radius: 100px !important;
}

.rz-switch .rz-hidden-accessible {
  display: none !important;
}

.rz-switch .rz-switch-circle {
  inset-block-start: unset !important;
  inset-inline-start: unset !important;
  inset-inline-end: unset !important;
  inset-block-end: unset !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 100px !important;
  background: var(--mp-element-background) !important;
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.1) !important;
  transition: background 0.22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.22s ease !important;
}

.rz-switch.rz-switch-checked .rz-switch-circle {
  background: var(--mp-primary) !important;
  box-shadow: none !important;
}

.rz-switch .rz-switch-circle:before {
  width: 20px !important;
  height: 20px !important;
  inset-inline-start: unset !important;
  margin-block-start: unset !important;
  transform: translate(4px, -50%) !important;
  background: #ffffff !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2) !important;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease !important;
}

.rz-switch.rz-switch-checked .rz-switch-circle:before {
  transform: translate(28px, -50%) !important;
  background: #ffffff !important;
}

.rz-switch .rz-switch-circle:hover:not(.rz-disabled):before {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2),
    0 0 0 8px var(--mp-element-background) !important;
}

.rz-switch.rz-switch-checked .rz-switch-circle:hover:not(.rz-disabled):before {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2),
    0 0 0 8px color-mix(in srgb, var(--mp-primary) 18%, transparent) !important;
}

.rz-switch.rz-state-disabled .rz-switch-circle {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

/* radzen table */
.rz-datatable {
  border: 0 !important;
  border-radius: var(--corner-radius-small) !important;
}

.rz-grid-table thead th {
  background-color: var(--mp-primary) !important;
  transition: var(--mp-default-transition) !important;
}
.rz-grid-table thead th:first-child {
  border-top-left-radius: var(--corner-radius-small) !important;
}
.rz-grid-table thead th:last-child {
  border-top-right-radius: var(--corner-radius-small) !important;
}

.rz-grid-table thead th > div:not(.rz-cell-filter) {
  padding: 10px !important;
}
.rz-grid-table thead th .rz-column-title,
.rz-grid-table thead th .rz-column-title .rz-link,
.rz-grid-table thead th .rz-column-title .rz-link:focus {
  color: #ffffff !important;
  font-weight: 700 !important;
  padding-inline: unset !important;
  transition: var(--mp-default-transition) !important;
}

/* Sortable column headers: minimal sort-icon states, no hover background */
.rz-grid-table thead th.rz-sortable-column {
  cursor: pointer !important;
}
/* Idle sort icon: faint white, with reserved spacing so titles don't shift */
.rz-grid-table thead th .rz-sortable-column-icon {
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 1.05rem !important;
  margin-inline-start: 4px !important;
  transition: var(--mp-default-transition) !important;
}
/* Active sort direction (asc/desc): solid white */
.rz-grid-table thead th[aria-sort="ascending"] .rz-sortable-column-icon,
.rz-grid-table thead th[aria-sort="descending"] .rz-sortable-column-icon {
  color: #ffffff !important;
}

/* Empty-state ("no records") for data grids */
.table-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
}
.table-empty-state .table-empty-state-icon {
  font-size: 3rem !important;
  width: auto !important;
  height: auto !important;
  color: var(--mp-primary) !important;
  opacity: 0.55;
  margin-bottom: 0.25rem;
}
.table-empty-state .table-empty-state-title {
  margin: 0 !important;
  font-weight: 600 !important;
  color: var(--mp-text, var(--rz-text-color)) !important;
}
.table-empty-state .table-empty-state-hint {
  margin: 0 !important;
  max-width: 32rem;
  color: var(--rz-text-tertiary-color) !important;
}

.rz-grid-table-striped
  tbody
  > tr:not(.rz-expanded-row-content):nth-child(even)
  > td,
.rz-grid-table-striped
  tbody
  > tr:not(.rz-expanded-row-content):nth-child(even)
  td.rz-frozen-cell-left-inner::after,
.rz-grid-table-striped
  tbody
  > tr:not(.rz-expanded-row-content):nth-child(even)
  > td.match-selectable-design::after {
  background-color: var(--mp-table-row-even) !important;
  transition: var(--mp-default-transition) !important;
}
.rz-grid-table-striped
  tbody
  > tr:not(.rz-expanded-row-content):nth-child(odd)
  > td,
.rz-grid-table-striped
  tbody
  > tr:not(.rz-expanded-row-content):nth-child(odd)
  td.rz-frozen-cell-left-inner::after,
.rz-grid-table-striped
  tbody
  > tr:not(.rz-expanded-row-content):nth-child(odd)
  > td.match-selectable-design::after {
  background-color: var(--mp-table-row-odd) !important;
  transition: var(--mp-default-transition) !important;
}

.rz-selectable
  tbody
  tr.rz-data-row:hover:not(.rz-state-highlight)
  > td.rz-frozen-cell-left:before,
.rz-selectable
  tbody
  tr.rz-data-row:hover:not(.rz-state-highlight)
  > td.rz-frozen-cell-left-inner:before,
.rz-selectable
  tbody
  tr.rz-data-row:hover:not(.rz-state-highlight)
  > td.rz-frozen-cell-right-inner:before {
  background-color: unset !important;
}

.rz-selectable
  tbody
  tr.rz-data-row.rz-state-highlight
  > td.match-selectable-design,
.rz-selectable
  tbody
  tr.rz-data-row.rz-state-highlight
  > td.rz-frozen-cell-right:after,
.rz-selectable
  tbody
  tr.rz-data-row.rz-state-highlight
  > td.rz-frozen-cell-right-inner:after {
  background-color: var(--mp-table-row-selectable) !important;
  transition: var(--mp-default-transition) !important;
}

.rz-selectable tbody tr.rz-data-row .rz-cell-data > .edit-remark {
  padding: 10px;
  margin-top: 10px;
  background-color: var(--mp-component-background);
  border-radius: var(--corner-radius-small);
  transition: var(--mp-default-transition);
}

.rz-grid-table .action-column {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
}

.rz-grid-table .rz-data-row .table-action-btn {
  padding: 0 !important;
  color: var(--mp-table-row-edit) !important;
  background-color: unset !important;
  transition: var(--mp-default-transition) !important;
}
.rz-grid-table .rz-data-row .table-action-btn:hover {
  color: var(--mp-primary-hover) !important;
  background-color: unset !important;
}
.rz-grid-table .rz-data-row .table-action-btn.delete {
  color: var(--mp-error) !important;
}
.rz-grid-table .rz-data-row .table-action-btn i {
  font-size: 2rem !important;
}

/* assessment center table action buttons */
.ac-action-btn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.ac-action-btn i {
  font-size: 1.15rem !important;
}
.ac-action-btn.ac-edit {
  color: var(--mp-primary) !important;
  background-color: color-mix(
    in srgb,
    var(--mp-primary) 10%,
    transparent
  ) !important;
  border: none !important;
}
.ac-action-btn.ac-edit:hover {
  background-color: color-mix(
    in srgb,
    var(--mp-primary) 20%,
    transparent
  ) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 100, 211, 0.25);
}
.ac-action-btn.ac-delete {
  color: var(--mp-error) !important;
  background-color: color-mix(
    in srgb,
    var(--mp-error) 10%,
    transparent
  ) !important;
  border: none !important;
}
.ac-action-btn.ac-delete:hover {
  background-color: color-mix(
    in srgb,
    var(--mp-error) 20%,
    transparent
  ) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(202, 56, 56, 0.25);
}

/*.rz-grid-table .rz-data-row .table-edit-btn,*/
/*.rz-grid-table .rz-data-row .table-delete-btn {*/
/*    padding: 0 !important;*/
/*}*/

/* assessment center zuweisen dialog */
.ac-zuweisen-dialog {
  min-width: 420px;
}

.ac-radio-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}

.ac-radio-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1.5px solid var(--rz-border-color);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.18s ease;
  background: var(--mp-component-background);
}
/* compact variant */
.ac-radio-item.compact {
  padding: 8px 10px;
  gap: 2px;
  border-radius: 8px;
}
.ac-radio-item.compact .ac-radio-item-top {
  gap: 8px;
}
.ac-radio-item.compact .radio-btn {
  width: 18px;
  height: 18px;
}
.ac-radio-item.compact .radio-btn input:after {
  width: 9px;
  height: 9px;
}
.ac-radio-item.compact .ac-radio-content {
  font-size: 0.82rem;
  gap: 5px;
  line-height: 1.3;
}
.ac-radio-item.compact .ac-radio-name {
  font-weight: 600;
}
.ac-radio-item.compact .ac-radio-separator {
  font-size: 0.78rem;
}
.ac-radio-item.compact .ac-radio-details {
  font-size: 0.78rem;
}
.ac-radio-item.compact .ac-radio-meta {
  padding-left: 26px;
  font-size: 0.72rem;
  gap: 6px;
}
.ac-radio-item:hover {
  border-color: color-mix(in srgb, var(--mp-primary) 50%, transparent);
  background: color-mix(in srgb, var(--mp-primary) 4%, transparent);
}
.ac-radio-item.selected {
  border-color: var(--mp-primary);
  background: color-mix(in srgb, var(--mp-primary) 8%, transparent);
  border: 1px solid var(--mp-primary);
}

.ac-radio-item-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ac-radio-item-top .radio-btn {
  margin: 0;
  flex-shrink: 0;
}

.ac-radio-content {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.9rem;
  line-height: 1.4;
}
.ac-radio-name {
  font-weight: 600;
  color: var(--rz-text-color);
}
.ac-radio-separator {
  color: var(--rz-text-tertiary-color);
  font-size: 0.85rem;
}
.ac-radio-details {
  color: var(--rz-text-secondary-color);
  font-size: 0.85rem;
}

.ac-radio-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 34px;
  font-size: 0.78rem;
  color: var(--rz-text-tertiary-color);
}
.ac-meta-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--rz-text-tertiary-color);
  display: inline-block;
  flex-shrink: 0;
}
.ac-radio-stelle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}
.ac-radio-bewerber {
  white-space: nowrap;
}

.rz-grid-table .rz-data-row:last-of-type {
  border-radius: 0 0 var(--corner-radius-small) var(--corner-radius-small) !important;
}

/* style pager / table footer */
.rz-pager {
  padding: 0.5rem 1rem !important;
  background-color: var(--mp-app-background) !important;
  transition: var(--mp-default-transition) !important;
  gap: 0.5rem !important;
}

/* prevent dropdown from stretching */
.rz-pager .rz-dropdown {
  max-width: unset !important;
}

/* fix ::marker dots on pager list items */
.rz-pager .rz-pager-pages {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.125rem !important;
}
.rz-pager .rz-pager-item {
  list-style: none !important;
  display: flex !important;
}
.rz-pager .rz-pager-item::marker,
.rz-pager .rz-pager-item::before {
  content: none !important;
  display: none !important;
}

/* page nav buttons */
.rz-pager .rz-pager-element {
  background: transparent !important;
  border: none !important;
  border-radius: var(--corner-radius-small) !important;
  color: var(--mp-text) !important;
  min-width: 1.875rem !important;
  height: 1.875rem !important;
  padding: 0 0.3rem !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: var(--mp-default-transition) !important;
}
.rz-pager .rz-pager-element:not(.rz-state-disabled):hover {
  background-color: var(--mp-element-background) !important;
  background-image: none !important;
}
.rz-pager .rz-pager-element.rz-state-active {
  background-color: var(--mp-primary) !important;
  background-image: none !important;
  color: var(--mp-text-invert) !important;
  font-weight: 600 !important;
}
.rz-pager .rz-pager-element.rz-state-disabled {
  opacity: 0.35 !important;
}

/* summary and page size label */
.rz-pager .rz-pager-summary,
.rz-pager .rz-pagesize-text {
  font-size: 0.8125rem !important;
  color: var(--mp-text-disabled) !important;
}

/* page size dropdown */
.rz-pager .rz-dropdown {
  background-color: var(--mp-component-background) !important;
  border: 1px solid var(--mp-component-border) !important;
  border-radius: var(--corner-radius-small) !important;
  font-size: 0.8125rem !important;
  transition: var(--mp-default-transition) !important;
}
.rz-pager .rz-dropdown:hover {
  border-color: var(--mp-primary) !important;
}

/* details view */
.details-view-control {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  margin-bottom: 20px !important;

  /* action bar transitions */
  transform: translateY(0) !important;
  transition: transform 0.3s ease-in-out !important;
}
.details-view-control .action-buttons {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 10px !important;
}
.details-view-control.sticky-bar {
  position: sticky !important;
  top: 12px !important;
  z-index: 1000 !important;
  padding: 12px 16px !important;
  /* Glas-Effekt: leicht transluzenter Hintergrund + Weichzeichner, damit der
     darunterliegende Inhalt beim Scrollen dezent durchscheint (moderne, schwebende
     Actionbar). Fällt in Browsern ohne backdrop-filter auf die volle Fläche zurück. */
  background-color: color-mix(in srgb, var(--mp-component-background) 82%, transparent) !important;
  -webkit-backdrop-filter: saturate(180%) blur(12px) !important;
  backdrop-filter: saturate(180%) blur(12px) !important;
  border-radius: var(--corner-radius-small) !important;
  border: 1px solid var(--mp-component-border) !important;
  box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.08) !important;

  /* sanftes Ein-/Ausblenden von Schatten und Hintergrund beim Haften */
  transition: box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out !important;
}

/* Fallback: ohne backdrop-filter volle Deckkraft, damit Inhalt nicht durchscheint. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .details-view-control.sticky-bar {
    background-color: var(--mp-component-background) !important;
  }
}
/* unset overflow for parents in order to apply sticky positionning */
.rz-layout,
.rz-body,
.rz-tabview-panels,
.rz-tabview-panel {
  overflow: unset !important;
}

/* Horizontalen Seitenüberlauf verhindern: Der Inhaltsbereich (.rz-body) ist ein
   Grid-Item mit min-width:auto und würde sonst auf die Breite des breitesten
   Inhalts wachsen und die ganze Seite nach rechts schieben. min-width:0 lässt ihn
   auf die verfügbare Breite schrumpfen; overflow-x:clip kappt verbleibenden
   horizontalen Überlauf. overflow-y bleibt sichtbar (oben per overflow:unset),
   damit die Sticky-Actionbar weiterhin am Viewport haftet (clip erzeugt keinen
   Scroll-Container). */
.rz-body {
  min-width: 0 !important;
  overflow-x: clip !important;
}

/* Reiter-Navigation umbrechen lassen, statt in einer Zeile über den Rand zu laufen
   (Detailseiten mit vielen Reitern, z. B. Stellen-/Ausbildungsangebote). So sind
   bei schmaleren Auflösungen alle Reiter sichtbar; bei breiteren passen sie in eine
   Zeile. */
.rz-tabview-nav {
  flex-wrap: wrap !important;
}

/* style tags (Radzen Chips) */
.rz-dropdown.rz-dropdown-chips {
  padding: 4px !important;
}
.rz-dropdown-chips .rz-chip {
  padding-inline: unset !important;
  padding-block: unset !important;
  padding: 10px !important;
  background-color: var(--mp-primary) !important;
  border-radius: var(--corner-radius-small) !important;
  transition: var(--mp-default-transition) !important;
}
.rz-dropdown-chips .rz-chip .rz-chip-text {
  color: var(--mp-text-invert) !important;
  font-size: 0.8rem !important;
  font-weight: 400 !important;
  transition: var(--mp-default-transition) !important;
}
.rz-dropdown-chips .rz-chip .rz-button {
  padding: unset !important;
  background-color: transparent !important;
}
.rz-dropdown-chips .rz-chip .rz-button i {
  color: var(--mp-text-invert) !important;
  transition: var(--mp-default-transition) !important;
}

/* style hinweis */
.hinweis {
  display: flex !important;
  padding: 20px !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 10px !important;
  background-color: var(--mp-hinweis) !important;
  border: 1px solid var(--mp-hinweis-invert) !important;
  border-radius: var(--corner-radius-small) !important;
  transition: var(--mp-default-transition) !important;
}
.hinweis .rz-text-body1 {
  color: var(--mp-text) !important;
  transition: var(--mp-default-transition) !important;
}

/* style html editor */
.rz-html-editor {
  min-height: 350px !important;
  border: 2px solid var(--mp-component-border) !important;
  border-radius: var(--corner-radius-small) !important;
  transition: var(--mp-default-transition) !important;
}
.rz-html-editor:focus-within {
  outline: unset !important;
  outline-offset: unset !important;
  border-color: var(--mp-primary) !important;
}
.rz-html-editor .rz-html-editor-toolbar {
  padding: 14px !important;
  border-bottom: 2px solid var(--mp-component-border) !important;
  background-color: var(--mp-component-border) !important;
  transition: var(--mp-default-transition) !important;
}

.rz-html-editor .rz-html-editor-toolbar .rz-html-editor-button {
  cursor: pointer !important;
  background-color: var(--mp-component-border) !important;
  border-radius: var(--corner-radius-small) !important;
  transition: var(--mp-default-transition) !important;
}
.rz-html-editor .rz-html-editor-toolbar .rz-html-editor-button i {
  color: var(--mp-text) !important;
  transition: var(--mp-default-transition) !important;
}
.rz-html-editor .rz-html-editor-toolbar .rz-html-editor-button:disabled {
  cursor: not-allowed !important;
}
.rz-html-editor .rz-html-editor-toolbar .rz-html-editor-button:disabled i {
  color: var(--mp-text-disabled) !important;
}

/* color picker */
.rz-html-editor
  .rz-html-editor-toolbar
  .rz-html-editor-colorpicker
  .rz-colorpicker-trigger {
  cursor: pointer !important;
  background-color: var(--mp-component-border) !important;
}
.rz-html-editor .rz-html-editor-toolbar .rz-html-editor-colorpicker {
  background-color: var(--mp-component-border) !important;
  border-radius: var(--corner-radius-small) !important;
  transition: var(--mp-default-transition) !important;
}

.rz-colorpicker-popup {
  border: 1px solid var(--mp-component-border) !important;
  border-radius: var(--corner-radius-small) !important;
  background-color: var(--mp-component-background) !important;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px !important;
}

.rz-colorpicker-popup .rz-colorpicker-rgba .rz-color-box .rz-numeric {
  padding: 0 !important;
}
.rz-colorpicker-popup .rz-colorpicker-rgba .rz-color-box .rz-numeric button {
  display: none !important;
}

.rz-colorpicker-popup .rz-colorpicker-button button {
  padding: 8px 15px !important;
}
/* end color picker */

.rz-html-editor .rz-html-editor-content {
  padding: 14px !important;
  background-color: var(--mp-app-background) !important;
  transition: var(--mp-default-transition) !important;
}

.wrapped-editor .rz-html-editor-content,
.wrapped-editor .rz-html-editor-content p,
.wrapped-editor .rz-html-editor-content div,
.wrapped-editor .rz-html-editor-content span {
  text-align: left !important;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* style tabview navigation */

/* Radzen updated tab elements from <a> to <button> — reset browser button defaults */
.rz-tabview-nav li button {
  padding: 12px 16px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  color: var(--mp-text) !important;
  transition: var(--mp-default-transition) !important;
}

.rz-tabview-nav li button span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

.rz-tabview-nav li button i {
  color: var(--mp-accent) !important;
  transition: var(--mp-default-transition) !important;
}

.rz-tabview-nav li:hover button {
  color: var(--mp-primary) !important;
  border-radius: var(--corner-radius-small) var(--corner-radius-small) 0 0 !important;
}
.rz-tabview-nav li:hover button i {
  color: var(--mp-primary) !important;
}
.rz-tabview-nav li:hover:after {
  background-color: var(--mp-primary) !important;
  transition: var(--mp-default-transition) !important;
}

.rz-tabview-nav .rz-tabview-selected button {
  color: var(--mp-primary) !important;
  font-weight: 700 !important;
  border-radius: var(--corner-radius-small) var(--corner-radius-small) 0 0 !important;
}
.rz-tabview-nav .rz-tabview-selected button i {
  color: var(--mp-primary) !important;
}
.rz-tabview-nav li.rz-tabview-selected:after {
  background-color: var(--mp-primary) !important;
}

.rz-tabview.rz-tabview-top > .rz-tabview-panels {
  border-top: 1px solid var(--mp-component-border);
  transition: var(--mp-default-transition);
}

/* style icons on nutzerverwalung table */
i.active {
  font-size: 28px !important;
  color: var(--mp-success) !important;
  transition: var(--mp-default-transition) !important;
}
i.inactive {
  font-size: 28px !important;
  color: var(--mp-error) !important;
  transition: var(--mp-default-transition) !important;
}

/* style checkbox list */
.checkbox-list {
  width: 100%;
}
.checkbox-list .rz-stack {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  width: 100% !important;
  flex-direction: unset !important;
  flex-wrap: unset !important;
}
.rz-checkbox-list-vertical {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.rz-checkbox {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}
.checkbox-list .rz-checkbox .rz-chkbox-template {
  color: var(--mp-text) !important;
  transition: var(--mp-default-transition) !important;
}
.checkbox-list .rz-button {
  padding: 5px !important;
  background-color: var(--mp-error) !important;
  transition: var(--mp-default-transition) !important;
}
.checkbox-list .rz-button .rz-button-box i {
  color: var(--mp-text-invert) !important;
  transition: var(--mp-default-transition) !important;
}
.checkbox-list .rz-multiselect-header {
  display: inline-flex !important;
  align-items: center !important;
  margin-bottom: 10px !important;
  border-radius: var(--corner-radius-small) !important;
  transition: var(--mp-default-transition) !important;
}
.checkbox-list .rz-multiselect-header:hover {
  background-color: var(--mp-component-background) !important;
}
.checkbox-list .rz-multiselect-header .rz-chkbox-label {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--mp-text) !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: var(--mp-default-transition) !important;
}
.checkbox-list .rz-multiselect-header .rz-chkbox-label:hover {
  color: var(--mp-primary) !important;
}

/* style notifications */
/* Wrapper an Item-Breite anpassen, sonst läuft das Item rechts über den Rand. */
.rz-notification-item-wrapper {
  width: auto !important;
  min-width: 22rem !important;
  max-width: calc(100vw - 2rem) !important;
}
.rz-notification-item {
  border-radius: 10px !important;
  padding: 0.875rem 1rem !important;
  gap: 0.75rem !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.08) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  transition: var(--mp-default-transition) !important;
}
.rz-notification-title {
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}
.rz-notification-content {
  font-size: 0.875rem !important;
  opacity: 0.88 !important;
  line-height: 1.4 !important;
}
.rz-notification-icon {
  font-size: 1.25rem !important;
  flex-shrink: 0 !important;
  color: var(--mp-text-invert) !important;
  transition: var(--mp-default-transition) !important;
}
.rz-notification-close {
  color: var(--mp-text-invert) !important;
  background: none !important;
  border: none !important;
  opacity: 0.7 !important;
  font-size: 1rem !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: var(--mp-default-transition) !important;
}
.rz-notification-close:hover {
  opacity: 1 !important;
}
.rz-notification-success .rz-notification-item {
  color: var(--mp-text-invert) !important;
  background-color: var(--mp-success) !important;
  border-left: 4px solid rgba(0, 0, 0, 0.15) !important;
}
.rz-notification-error .rz-notification-item {
  color: var(--mp-text-invert) !important;
  background-color: var(--mp-error) !important;
  border-left: 4px solid rgba(0, 0, 0, 0.15) !important;
}
.rz-notification-warn .rz-notification-item {
  color: var(--mp-text-invert) !important;
  background-color: var(--mp-warning) !important;
  border-left: 4px solid rgba(0, 0, 0, 0.15) !important;
}
.rz-notification-info .rz-notification-item {
  color: var(--mp-text-invert) !important;
  background-color: var(--mp-primary) !important;
  border-left: 4px solid rgba(0, 0, 0, 0.15) !important;
}

/* style dialogs */
.rz-dialog {
  background-color: var(--mp-component-background) !important;
  border: 1px solid var(--mp-component-border) !important;
  border-radius: 10px !important;
  box-shadow: var(--mp-dialog-shadow) !important;
}
.rz-dialog .rz-dialog-titlebar {
  background-color: var(--mp-component-background) !important;
  border-bottom: 1px solid var(--mp-component-border) !important;
  padding: 0.875rem 1.25rem !important;
}
.rz-dialog .rz-dialog-titlebar .rz-dialog-title {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--mp-text) !important;
}
.rz-dialog .rz-dialog-titlebar .rz-dialog-titlebar-close {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: unset !important;
  width: 2rem !important;
  height: 2rem !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  color: var(--mp-text-disabled) !important;
  transition: var(--mp-default-transition) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.rz-dialog .rz-dialog-titlebar .rz-dialog-titlebar-close:hover {
  background-color: var(--mp-element-background) !important;
  color: var(--mp-text) !important;
}
.rz-dialog .rz-dialog-titlebar .rz-dialog-titlebar-icon span {
  cursor: pointer !important;
  font-size: 1.1rem !important;
  line-height: 1 !important;
}
.rz-dialog .rz-dialog-content {
  padding: 1.25rem !important;
}

/* setting pointer events to none prevents flickering on mouse leave */
/*.rz-tooltip {
    pointer-events: none !important;
}*/
.rz-tooltip .info-tooltip {
  font-size: 16px;
  white-space: normal !important;
  word-break: break-word !important;
  max-width: 400px;
  overflow-wrap: break-word !important;
  display: block;
  word-wrap: break-word;
  word-break: break-word;
  line-height: 1.5;
}

.rz-tooltip.tooltip-wrap {
  max-width: 400px !important;
}

.rz-tooltip.tooltip-wrap .rz-tooltip-content,
.rz-tooltip.tooltip-wrap .info-tooltip {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

/* Tooltip design: comfortable padding, soft corners, crisp shadow, wrapping */
.rz-tooltip .rz-tooltip-content {
  padding: 0.5rem 0.75rem !important;
  border-radius: var(--corner-radius-small) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.12) !important;
  font-size: 0.875rem !important;
  line-height: 1.4 !important;
  max-width: 400px !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
}

/* style file elements */
.rz-datalist-content {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
}

.rz-datalist-data {
  padding: 14px !important;
  background-color: var(--mp-app-background) !important;
  border: 1px solid var(--mp-component-border) !important;
  border-radius: var(--corner-radius-small) !important;
  transition: var(--mp-default-transition) !important;
}
.rz-datalist-data > li {
  padding: unset !important;
  margin: unset !important;
  border: unset !important;
  border-radius: unset !important;
  background-color: unset !important;
}

.rz-datalist-data .file-icon {
  display: flex !important;
  justify-content: center !important;
  width: 35px !important;
  height: auto !important;
}
.rz-datalist-data .file-icon svg {
  fill: var(--mp-primary) !important;
}

.rz-datalist-data .file-details {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  width: 100% !important;
}

.rz-datalist-data .file-details .file-name {
  color: var(--mp-text) !important;
  font-size: 1rem !important;
  font-family: "Lato-Light" !important;
  transition: var(--mp-default-transition) !important;
}
.rz-datalist-data .file-details .file-size {
  color: var(--mp-text) !important;
  font-size: 0.8rem !important;
  transition: var(--mp-default-transition) !important;
}

.rz-datalist-data .file-details .file-actions {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
}

.rz-datalist-data .file-details .file-actions .rz-button {
  padding: 0 !important;
  background-color: transparent !important;
  transition: var(--mp-default-transition) !important;
  cursor: pointer !important;
  border: none !important;
}
.rz-datalist-data .file-details .file-actions .rz-button .rz-button-box svg {
  width: 16px !important;
  height: 16px !important;
  transition: var(--mp-default-transition) !important;
}
.rz-datalist-data
  .file-details
  .file-actions
  .rz-button.delete
  .rz-button-box
  svg {
  fill: var(--mp-error) !important;
}
.rz-datalist-data
  .file-details
  .file-actions
  .rz-button.download
  .rz-button-box
  svg {
  fill: var(--mp-success) !important;
}

/* drag & drop dialog */
.rz-dialog .rz-dialog-content .rz-fileupload .rz-fileupload-content {
  margin-top: 20px !important;
}

.rz-dialog
  .rz-dialog-content
  .rz-fileupload
  .rz-fileupload-content
  .rz-fileupload-files {
  background-color: unset !important;
  padding: unset !important;
}

.rz-dialog
  .rz-dialog-content
  .rz-fileupload
  .rz-fileupload-content
  .rz-fileupload-files
  .rz-fileupload-row {
  padding: 14px !important;
  background-color: var(--mp-app-background) !important;
  border: 2px solid var(--mp-component-border) !important;
  border-radius: var(--corner-radius-small) !important;
  transition: var(--mp-default-transition) !important;
}
.rz-dialog
  .rz-dialog-content
  .rz-fileupload
  .rz-fileupload-content
  .rz-fileupload-files
  .rz-fileupload-row
  div:last-of-type {
  display: none !important;
}

.rz-dialog .rz-dialog-content .rz-fileupload .rz-fileupload-buttonbar {
  padding: 0 !important;
  background-color: var(--mp-app-background) !important;
  border: 2px solid var(--mp-component-border) !important;
  border-radius: var(--corner-radius-small) !important;
  transition: var(--mp-default-transition) !important;
}
.rz-dialog .rz-dialog-content .rz-fileupload .rz-fileupload-buttonbar:hover {
  border-color: var(--mp-primary) !important;
}
.rz-dialog
  .rz-dialog-content
  .rz-fileupload
  .rz-fileupload-buttonbar
  .rz-fileupload-choose {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 30px !important;
  height: 150px !important;
  background-color: unset !important;
  transition: var(--mp-default-transition) !important;
}
.rz-dialog
  .rz-dialog-content
  .rz-fileupload
  .rz-fileupload-buttonbar
  .rz-fileupload-choose
  input {
  width: 100%;
  height: 100%;
}
.rz-dialog .rz-dialog-content .rz-fileupload .rz-button {
  font-size: 0.95rem !important;
}

.text-preview {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 3; /* Limit to 3 lines */
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  height: auto;
}

/* =====================================================
   Dropdown — clear button, panel, items & scrollbar
   ===================================================== */

/* Ensure the dropdown is a positioning context */
.rz-dropdown {
  position: relative !important;
}

/* Clear (×) button — BITV/WCAG 2.1 AA conformant */
.rz-dropdown .rz-dropdown-clear-icon {
  position: absolute !important;
  right: 34px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* WCAG 2.5.8: minimum target size 24×24 px */
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 50% !important;
  /* WCAG 1.4.11: --mp-accent is #5f5f5f (light) / #e4e4e4 (dark) → ≥ 5:1 on panel bg */
  color: var(--mp-accent) !important;
  font-size: 0.9rem !important;
  cursor: pointer !important;
  transition: var(--mp-default-transition) !important;
  z-index: 2 !important;
}
.rz-dropdown .rz-dropdown-clear-icon:hover {
  background-color: var(--mp-element-background) !important;
  color: var(--mp-text) !important;
}
/* WCAG 2.4.7: visible focus indicator */
.rz-dropdown .rz-dropdown-clear-icon:focus-visible {
  outline: 2px solid var(--mp-primary) !important;
  outline-offset: 2px !important;
  background-color: var(--mp-element-background) !important;
}

/* Popup panel */
.rz-dropdown-panel {
  background-color: var(--mp-component-background) !important;
  border: 1.5px solid var(--mp-component-border) !important;
  border-radius: var(--corner-radius-small) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.06) !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin-top: 4px !important;
}

/* Search filter bar */
.rz-dropdown-panel .rz-dropdown-filter-container {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  padding: 8px 10px !important;
  border-bottom: 1.5px solid var(--mp-component-border) !important;
  background-color: var(--mp-app-background) !important;
  transition: var(--mp-default-transition) !important;
}
.rz-dropdown-panel .rz-dropdown-filter {
  width: 100% !important;
  padding: 6px 8px 6px 30px !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  font-size: 0.875rem !important;
  color: var(--mp-text) !important;
  outline: none !important;
  box-shadow: none !important;
  transition: none !important;
}
.rz-dropdown-panel .rz-dropdown-filter:focus {
  border-color: transparent !important;
  box-shadow: none !important;
}
.rz-dropdown-panel .rz-dropdown-filter-icon {
  position: absolute !important;
  left: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 0.875rem !important;
  color: var(--mp-text-disabled) !important;
  pointer-events: none !important;
}

/* Scrollable items wrapper — reset Radzen's -1rem bleed margin, custom thin scrollbar */
.rz-dropdown-panel .rz-dropdown-items-wrapper {
  margin: 0 !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--mp-component-border) transparent !important;
}
.rz-dropdown-panel .rz-dropdown-items-wrapper::-webkit-scrollbar {
  width: 5px !important;
}
.rz-dropdown-panel .rz-dropdown-items-wrapper::-webkit-scrollbar-track {
  background: transparent !important;
  margin-block: 4px !important;
}
.rz-dropdown-panel .rz-dropdown-items-wrapper::-webkit-scrollbar-thumb {
  background-color: var(--mp-component-border) !important;
  border-radius: 100px !important;
}
.rz-dropdown-panel .rz-dropdown-items-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: var(--mp-text-disabled) !important;
}

/* Items list */
.rz-dropdown-panel .rz-dropdown-items {
  padding: 4px 0 !important;
  margin: 0 !important;
}

/* Individual option */
.rz-dropdown-panel .rz-dropdown-item {
  padding: 9px 14px !important;
  font-size: 0.875rem !important;
  color: var(--mp-text) !important;
  cursor: pointer !important;
  list-style: none !important;
  transition: background-color 0.14s ease, color 0.14s ease !important;
}
.rz-dropdown-panel .rz-dropdown-item:hover {
  background-color: color-mix(in srgb, var(--mp-primary) 8%, transparent) !important;
  color: var(--mp-primary) !important;
}
.rz-dropdown-panel .rz-dropdown-item.rz-state-highlight {
  background-color: color-mix(in srgb, var(--mp-primary) 8%, transparent) !important;
  color: var(--mp-primary) !important;
}
.rz-dropdown-panel .rz-dropdown-item[aria-selected="true"] {
  background-color: color-mix(in srgb, var(--mp-primary) 12%, transparent) !important;
  color: var(--mp-primary) !important;
  font-weight: 600 !important;
}

/* =====================================================
   Multiselect — panel, items & scrollbar
   ===================================================== */

/* Popup panel */
.rz-multiselect-panel {
  background-color: var(--mp-component-background) !important;
  border: 1.5px solid var(--mp-component-border) !important;
  border-radius: var(--corner-radius-small) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.06) !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin-top: 4px !important;
}

/* Search header — reset Radzen's -1rem negative margin */
.rz-multiselect-panel .rz-multiselect-header {
  margin: 0 !important;
  padding: 0 !important;
  background-color: var(--mp-app-background) !important;
  border-bottom: 1.5px solid var(--mp-component-border) !important;
}

/* Search filter container */
.rz-multiselect-panel .rz-multiselect-filter-container {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  padding: 8px 10px !important;
}
.rz-multiselect-panel .rz-multiselect-filter-container .rz-inputtext {
  width: 100% !important;
  padding: 6px 8px 6px 30px !important;
  background-color: transparent !important;
  border: none !important;
  border-width: 0 !important;
  border-radius: 0 !important;
  font-size: 0.875rem !important;
  color: var(--mp-text) !important;
  outline: none !important;
  box-shadow: none !important;
  transition: none !important;
}
.rz-multiselect-panel .rz-multiselect-filter-container .rz-inputtext:focus {
  border-color: transparent !important;
  box-shadow: none !important;
}
.rz-multiselect-panel .rz-multiselect-filter-icon {
  position: absolute !important;
  left: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 0.875rem !important;
  color: var(--mp-text-disabled) !important;
  pointer-events: none !important;
}

/* Scrollable items wrapper — reset Radzen's -1rem bleed margin, custom thin scrollbar */
.rz-multiselect-panel .rz-multiselect-items-wrapper {
  margin: 0 !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--mp-component-border) transparent !important;
}
.rz-multiselect-panel .rz-multiselect-items-wrapper::-webkit-scrollbar {
  width: 5px !important;
}
.rz-multiselect-panel .rz-multiselect-items-wrapper::-webkit-scrollbar-track {
  background: transparent !important;
  margin-block: 4px !important;
}
.rz-multiselect-panel .rz-multiselect-items-wrapper::-webkit-scrollbar-thumb {
  background-color: var(--mp-component-border) !important;
  border-radius: 100px !important;
}
.rz-multiselect-panel .rz-multiselect-items-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: var(--mp-text-disabled) !important;
}

/* Items list */
.rz-multiselect-panel .rz-multiselect-items {
  padding: 4px 0 !important;
  margin: 0 !important;
}

/* Individual option */
.rz-multiselect-panel .rz-multiselect-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 14px !important;
  font-size: 0.875rem !important;
  color: var(--mp-text) !important;
  cursor: pointer !important;
  list-style: none !important;
  transition: background-color 0.14s ease, color 0.14s ease !important;
}
.rz-multiselect-panel .rz-multiselect-item:hover {
  background-color: color-mix(in srgb, var(--mp-primary) 8%, transparent) !important;
  color: var(--mp-primary) !important;
}
.rz-multiselect-panel .rz-multiselect-item.rz-state-highlight {
  background-color: color-mix(in srgb, var(--mp-primary) 8%, transparent) !important;
  color: var(--mp-primary) !important;
}
.rz-multiselect-panel .rz-multiselect-item[aria-selected="true"] {
  background-color: color-mix(in srgb, var(--mp-primary) 12%, transparent) !important;
  color: var(--mp-primary) !important;
}
.rz-multiselect-panel .rz-multiselect-item[aria-selected="true"] .rz-multiselect-item-content {
  font-weight: 600 !important;
}

/* =====================================================
   Datepicker popup
   ===================================================== */

/* Popup container */
.rz-datepicker-popup-container {
  background-color: var(--mp-component-background) !important;
  border: 1.5px solid var(--mp-component-border) !important;
  border-radius: var(--corner-radius-small) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.06) !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin-top: 4px !important;
}

/* Calendar inner padding */
.rz-datepicker-popup-container .rz-calendar {
  padding: 12px !important;
}

/* Header row spacing */
.rz-datepicker-popup-container .rz-calendar-header {
  padding-bottom: 8px !important;
}

/* Prev / Next navigation buttons */
.rz-datepicker-popup-container .rz-calendar-prev,
.rz-datepicker-popup-container .rz-calendar-next {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  color: var(--mp-text) !important;
  background-color: transparent !important;
}
.rz-datepicker-popup-container .rz-calendar-prev:hover,
.rz-datepicker-popup-container .rz-calendar-next:hover {
  background-color: var(--mp-element-background) !important;
  color: var(--mp-text) !important;
}
.rz-datepicker-popup-container .rz-calendar-prev:focus-visible,
.rz-datepicker-popup-container .rz-calendar-next:focus-visible {
  outline: 2px solid var(--mp-primary) !important;
  outline-offset: 2px !important;
}

/* Month / year dropdowns — borderless, bold, compact */
.rz-datepicker-popup-container .rz-calendar-month-dropdown,
.rz-datepicker-popup-container .rz-calendar-year-dropdown {
  width: auto !important;
  min-width: unset !important;
  border: none !important;
  border-width: 0 !important;
  background-color: transparent !important;
  padding: 4px 24px 4px 8px !important;
  border-radius: var(--corner-radius-small) !important;
  transition: var(--mp-default-transition) !important;
}
.rz-datepicker-popup-container .rz-calendar-month-dropdown:hover,
.rz-datepicker-popup-container .rz-calendar-year-dropdown:hover {
  background-color: var(--mp-element-background) !important;
  border-color: transparent !important;
}
.rz-datepicker-popup-container .rz-calendar-month-dropdown:focus,
.rz-datepicker-popup-container .rz-calendar-year-dropdown:focus {
  border-color: transparent !important;
  box-shadow: none !important;
  outline: 2px solid var(--mp-primary) !important;
  outline-offset: 2px !important;
}
.rz-datepicker-popup-container .rz-calendar-month-dropdown .rz-dropdown-label,
.rz-datepicker-popup-container .rz-calendar-year-dropdown .rz-dropdown-label {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: var(--mp-text) !important;
}

/* Weekday column headers */
.rz-datepicker-popup-container .rz-calendar-view thead th {
  padding: 4px 2px !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  color: var(--mp-text-disabled) !important;
  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* Grid spacing */
.rz-datepicker-popup-container .rz-calendar-view {
  border-collapse: separate !important;
  border-spacing: 2px !important;
}

/* Day cells */
.rz-datepicker-popup-container .rz-calendar-view td {
  padding: 1px !important;
  text-align: center !important;
}

/* Day number — circular */
.rz-datepicker-popup-container .rz-calendar-view td span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  font-size: 0.875rem !important;
  color: var(--mp-text) !important;
  cursor: pointer !important;
  transition: background-color 0.14s ease, color 0.14s ease !important;
}

/* Hover */
.rz-datepicker-popup-container .rz-calendar-view td:not([aria-disabled="true"]):hover span {
  background-color: color-mix(in srgb, var(--mp-primary) 10%, transparent) !important;
  color: var(--mp-primary) !important;
}

/* Today */
.rz-datepicker-popup-container .rz-calendar-view td span.rz-state-today {
  border: 2px solid var(--mp-primary) !important;
  color: var(--mp-primary) !important;
  font-weight: 700 !important;
}

/* Selected */
.rz-datepicker-popup-container .rz-calendar-view td[aria-selected="true"] span,
.rz-datepicker-popup-container .rz-calendar-view span.rz-state-active {
  background-color: var(--mp-primary) !important;
  color: var(--mp-text-invert) !important;
  font-weight: 600 !important;
}

/* Keyboard-focused day */
.rz-datepicker-popup-container .rz-calendar-view td span.rz-state-focused {
  outline: 2px solid var(--mp-primary) !important;
  outline-offset: 2px !important;
}

/* Other-month days */
.rz-datepicker-popup-container .rz-calendar-view td span.rz-calendar-other-month {
  color: var(--mp-text-disabled) !important;
  opacity: 0.45 !important;
}

/* Disabled days */
.rz-datepicker-popup-container .rz-calendar-view td span.rz-state-disabled {
  color: var(--mp-text-disabled) !important;
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

/* Time picker row */
.rz-datepicker-popup-container .rz-timepicker {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 10px 12px 14px !important;
  border-top: 1.5px solid var(--mp-component-border) !important;
  background-color: var(--mp-app-background) !important;
}

/* Hour / minute inputs */
.rz-datepicker-popup-container .rz-timepicker .rz-numeric {
  width: 64px !important;
}

/* Colon separator */
.rz-datepicker-popup-container .rz-timepicker .rz-separator span {
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  color: var(--mp-text-disabled) !important;
}

/* Ok button */
.rz-datepicker-popup-container .rz-timepicker .rz-button:not(.rz-numeric-button) {
  padding: 6px 16px !important;
  height: auto !important;
  font-size: 0.875rem !important;
  background-color: var(--mp-primary) !important;
  color: var(--mp-text-invert) !important;
  border-radius: var(--corner-radius-small) !important;
}

/* Gemeinsamer Hintergrund für Status- und Herkunfts-Icons */
.bewerbung-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 6px;
    border-radius: var(--corner-radius-small, 4px);
    background-color: color-mix(in srgb, var(--mp-primary) 38%, transparent);
    border: 1px solid color-mix(in srgb, var(--mp-primary) 52%, transparent);
}

.bewerbung-icon-badge--with-label {
    gap: 6px;
    max-width: 100%;
}

.bewerbungsstatus-icon,
.bewerbungsherkunft-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    object-fit: contain;
    display: block;
}

}

.text-preview-bemerkungen {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* Limit to 3 lines */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  height: auto;
}

.text-preview-angebot-titel {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  height: auto;
}

.bewerbungsstatus-fallback-icon {
    font-size: 22px;
    line-height: 1;
    color: var(--mp-primary);
}

/* Eingangsbestätigung: Platzhalter-Variablen in der Hinweisbox */
.light-theme .hinweis .eingangs-bestaetigung-platzhalter-trenn,
.dark-theme .hinweis .eingangs-bestaetigung-platzhalter-trenn {
  color: var(--mp-hinweis-invert);
  opacity: 0.55;
  font-weight: 400;
}

.light-theme .hinweis .eingangs-bestaetigung-platzhalter-var,
.dark-theme .hinweis .eingangs-bestaetigung-platzhalter-var {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.92em;
  font-weight: 700;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
}

/* VB-Benachrichtigung accordion headers */
.vb-accordion-section .vb-accordion-header {
  cursor: pointer;
  padding: 8px 6px;
  border-radius: 6px;
  transition: background-color 0.15s ease;
  user-select: none;
}

.vb-accordion-section .vb-accordion-header:hover {
  background-color: var(--mp-element-background);
}

.vb-accordion-section .vb-accordion-header .rzi {
  font-size: 18px;
  opacity: 0.6;
}

.vb-accordion-section .vb-accordion-header .rz-text-subtitle1 {
  margin: 0;
}

.vb-accordion-section {
  border-top: 1px solid var(--rz-border-color);
  padding: 16px 0 32px;
}

.vb-accordion-section + .vb-accordion-section {
  margin-top: 16px;
}

.bewerbungsstatus-label {
    font-size: 0.8rem;
    line-height: 1.2;
    text-align: left;
    word-break: break-word;
}

/* ── Sprachreiter: Indikator für ungespeicherte Änderungen ─────────────────── */
/* !important, um die Radzen-/Material3-Regeln für Tab-Buttons zu überstimmen
   (Konvention in dieser Datei) – sonst kollabiert der leere Punkt auf Größe 0. */
.textsprache-tab-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.textsprache-dirty-dot {
    position: relative !important;
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    min-height: 8px !important;
    border-radius: 50% !important;
    background-color: var(--mp-warning, #fe9803) !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    cursor: help;
}

/* Sanft pulsierender Ring – nutzt denselben Theme-Token und blendet über Opazität aus. */
.textsprache-dirty-dot::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 50% !important;
    background-color: var(--mp-warning, #fe9803) !important;
    opacity: 0.5;
    animation: textsprache-dirty-pulse 1.8s ease-out infinite;
}

@keyframes textsprache-dirty-pulse {
    0%   { transform: scale(1);   opacity: 0.5; }
    70%  { transform: scale(2.6); opacity: 0; }
    100% { transform: scale(2.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .textsprache-dirty-dot::after { animation: none; }
}

/* ── Dashboard-Widgets: einheitlicher Card-Look (konsistent zu .sticky-bar) ──── */
.dashboard-widget .rz-panel {
    border: 1px solid var(--mp-component-border) !important;
    border-radius: var(--corner-radius-small) !important;
    background-color: var(--mp-component-background) !important;
    box-shadow: rgba(99, 99, 99, 0.12) 0px 2px 8px 0px !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.dashboard-widget .rz-panel:hover {
    box-shadow: rgba(99, 99, 99, 0.22) 0px 4px 14px 0px !important;
    border-color: color-mix(in srgb, var(--mp-primary) 35%, var(--mp-component-border)) !important;
}

/* Radzen rendert eine leere Default-Titlebar – wir nutzen einen eigenen Header. */
.dashboard-widget .rz-panel-titlebar { display: none !important; }

.dashboard-widget .rz-panel-content {
    padding: 14px 16px !important;
}

/* Widget-Header: Icon + Titel links, Aktionen rechts, dezente Trennlinie. */
.dashboard-widget-header {
    align-items: center !important;
    padding-bottom: 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--mp-component-border);
}

.dashboard-widget-header .rz-text-body1 {
    font-weight: 600;
    font-size: 1rem;
    color: var(--mp-text);
    margin: 0;
}

/* Titel-Icon etwas kräftiger. */
.dashboard-widget-header > .rz-stack .rzi {
    font-size: 1.25rem;
}

/* Aktions-Icons (Minimieren, Bearbeiten, Öffnen …) mit dezentem Hover-Feedback. */
.dashboard-widget-header span[style*="cursor: pointer"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--corner-radius-small);
    transition: background-color 0.15s ease;
}

.dashboard-widget-header span[style*="cursor: pointer"]:hover {
    background-color: color-mix(in srgb, var(--mp-primary) 12%, transparent);
}

/* ── Nicht-authentifizierte Seiten (Login/Registrierung/Passwort): auf schmalen
      Viewports nur das Formular zeigen, das Bild ausblenden. Gilt für alle Seiten,
      die die .login-container-Struktur nutzen (Login, RegisterUser, ForgotPassword,
      ResetPassword). ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Bild-Spalte (Hintergrundbild + Logo) komplett ausblenden. */
    .login-container > *:has(.login-overlay-bg) {
        display: none !important;
    }

    /* Formular-Spalte über die volle Breite. */
    .login-container > *:has(.component-bg) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Innenabstand auf Mobile reduzieren (rz-p-12 = 48px ist zu viel). */
    .login-container .component-bg {
        padding: 24px !important;
    }
}

/* ── Alerts / Hinweise ──────────────────────────────────────────────────────
      Flaches, modernes Design mit semantischen Design-System-Farben. Hintergrund
      ist eine dezente Tönung der Akzentfarbe über der Komponentenfläche (funktioniert
      dadurch in Light- und Dark-Mode), links eine kräftige Akzentkante. Die Akzent-
      farbe je AlertStyle wird über die Custom-Property --alert-accent gesetzt. */
.rz-alert {
    --alert-accent: var(--mp-accent);
    padding: 12px 16px !important;
    border: 1px solid color-mix(in srgb, var(--alert-accent) 28%, transparent) !important;
    border-left: 4px solid var(--alert-accent) !important;
    border-radius: var(--corner-radius-small) !important;
    background-color: color-mix(in srgb, var(--alert-accent) 10%, var(--mp-component-background)) !important;
    color: var(--mp-text) !important;
    box-shadow: none !important;
    transition: var(--mp-default-transition) !important;
}

.rz-alert.rz-info {
    --alert-accent: var(--mp-hinweis-invert);
}

.rz-alert.rz-success {
    --alert-accent: var(--mp-success);
}

.rz-alert.rz-danger,
.rz-alert.rz-error {
    --alert-accent: var(--mp-error);
}

.rz-alert.rz-warning {
    --alert-accent: var(--mp-warning);
}

.rz-alert.rz-primary {
    --alert-accent: var(--mp-primary);
}

/* Icon und Nachricht mittig ausrichten, Icon in Akzentfarbe. */
.rz-alert .rz-alert-item {
    align-items: center;
    gap: 12px;
}

.rz-alert .rz-alert-icon {
    color: var(--alert-accent) !important;
}

.rz-alert .rz-alert-message,
.rz-alert .rz-alert-content {
    color: var(--mp-text) !important;
}

/* Schließen-Symbol ebenfalls in dezenter Textfarbe. */
.rz-alert .rz-alert-close .rzi {
    color: var(--mp-text) !important;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.rz-alert .rz-alert-close:hover .rzi {
    opacity: 1;
}

/* ── Dashboard-Bearbeitungsmodus: ausgeblendete Widgets + Drag-&-Drop-Karten ──── */
.dashboard-edit-hidden-bar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border: 1px dashed color-mix(in srgb, var(--mp-primary) 40%, var(--mp-component-border));
    border-radius: var(--corner-radius-small);
    background-color: color-mix(in srgb, var(--mp-primary) 6%, var(--mp-component-background));
}

.dashboard-edit-widget {
    position: relative;
    border: 1px solid var(--mp-component-border);
    border-radius: var(--corner-radius-small);
    background-color: var(--mp-component-background);
    overflow: hidden;
    box-shadow: rgba(99, 99, 99, 0.10) 0px 2px 8px 0px;
    transition: box-shadow 0.2s ease, transform 0.15s ease, opacity 0.2s ease, border-color 0.2s ease;
}

.dashboard-edit-widget:hover {
    border-color: color-mix(in srgb, var(--mp-primary) 45%, var(--mp-component-border));
    box-shadow: rgba(99, 99, 99, 0.18) 0px 4px 14px 0px;
}

.dashboard-edit-widget.is-dragging {
    opacity: 0.6;
    transform: scale(0.99);
    border: 1px dashed var(--mp-primary);
    box-shadow: color-mix(in srgb, var(--mp-primary) 28%, transparent) 0px 8px 22px 0px;
}

/* Einfüge-Markierung: gestrichelte Linie im Abstand zwischen den Widgets. */
.dashboard-drop-line {
    height: 0;
    margin: 0 6px;
    border-top: 3px dashed color-mix(in srgb, var(--mp-primary) 55%, transparent);
    border-radius: 2px;
    pointer-events: none;
}

/* Innenkarte im Edit-Modus abflachen, damit keine Karte-in-Karte entsteht. */
.dashboard-edit-widget .dashboard-widget .rz-panel,
.dashboard-edit-widget .dashboard-widget .rz-panel:hover {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Eigene Aktions-Icons des Widgets (Bearbeiten/Minimieren) im Edit-Modus ausblenden. */
.dashboard-edit-widget .dashboard-widget-header > .rz-stack:last-child {
    display: none !important;
}

.dashboard-edit-widget-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background-color: color-mix(in srgb, var(--mp-primary) 10%, var(--mp-component-background));
    border-bottom: 1px solid color-mix(in srgb, var(--mp-primary) 20%, var(--mp-component-border));
    cursor: grab;
    user-select: none;
}

.dashboard-edit-widget-toolbar:active {
    cursor: grabbing;
}

.dashboard-edit-drag-handle {
    color: var(--mp-text-disabled);
    transition: color 0.15s ease;
}

.dashboard-edit-widget-toolbar:hover .dashboard-edit-drag-handle {
    color: var(--mp-primary);
}

.dashboard-edit-widget-body {
    padding: 4px 12px 12px;
    pointer-events: none;
}

/* Freistehende Chips (RadzenChip) */
.rz-chip {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    color: var(--mp-text);
    background-color: var(--mp-component-background);
    border: 1px solid var(--mp-component-border);
    border-radius: 999px;
    font-size: 0.8125rem;
    line-height: 1.25;
    white-space: nowrap;
    user-select: none;
    transition: var(--mp-default-transition);
}

.rz-chip.rz-chip-sm {
    padding: 0.125rem 0.625rem;
    font-size: 0.75rem;
}

.rz-chip.rz-chip-xs {
    padding: 0.0625rem 0.5rem;
    font-size: 0.6875rem;
}

.rz-chip .rz-chip-text {
    font-size: inherit;
    line-height: inherit;
}

.rz-chip .rz-chip-icon {
    font-size: 1em;
    line-height: 1;
}

.rz-chip:not(.rz-state-disabled) {
    cursor: pointer;
}

.rz-chip:not(.rz-state-disabled):hover {
    border-color: var(--mp-primary);
    color: var(--mp-primary);
}

.rz-chip:not(.rz-state-disabled):active {
    background-color: var(--mp-element-background);
}

.rz-chip:focus-visible {
    outline: 2px solid var(--mp-primary);
    outline-offset: 2px;
}

.rz-chip.rz-chip-selected {
    color: var(--mp-text-invert);
    background-color: var(--mp-primary);
    border-color: var(--mp-primary);
}

.rz-chip.rz-chip-selected:not(.rz-state-disabled):hover {
    color: var(--mp-text-invert);
    background-color: var(--mp-primary-hover);
    border-color: var(--mp-primary-hover);
}

.rz-chip.rz-state-disabled {
    color: var(--mp-text-disabled);
    border-color: var(--mp-component-border);
    background-color: var(--mp-app-background);
    pointer-events: none;
}