:root {
    /* 1. --- Softer, Lighter Header --- 
       We remove the default ALL-CAPS, reduce the font size,
       and change the background to be less prominent.
    */
    --rz-grid-header-background-color: #f8f9fa; /* A very light grey */
    --rz-grid-header-color: #6c757d; /* A softer, dark grey text */
    --rz-grid-header-font-size: 0.9rem;
    --rz-grid-header-font-weight: 600;
    --rz-grid-header-text-transform: none; /* Removes ALL-CAPS */
    --rz-grid-header-padding: 0.75rem 1rem;
    /* 2. --- Cleaner Rows --- 
       Increase padding for more breathing room and use a
       light bottom border instead of full cell borders.
    */
    --rz-grid-cell-padding: 0.75rem 1rem;
    --rz-grid-cell-border: 1px solid #dee2e6;
    --rz-grid-row-border: 1px solid #dee2e6;
    /* 3. --- Better Alternating Rows (Striping) --- 
       Makes the alternating row color more subtle.
    */
    --rz-grid-stripe-background-color: #fdfdfd;
    /* 4. --- Cleaner Selected Row --- */
    --rz-grid-selected-background-color: #e6f7ff; /* A light blue */
    --rz-grid-selected-color: #333;
    /* 5. --- Remove Grid Container Border --- 
       This removes the main border around the entire grid component.
    */
    --rz-grid-border: none;
    --rz-grid-border-radius: 6px; /* Optional: adds a slight curve */
}

/* 6. --- Remove All Cell Borders --- 
   The CSS variables above control most borders, but to ensure
   no cell borders (left/right), we target the class directly.
*/
.rz-data-grid .rz-grid-table td {
    border: none;
}

/* 7. --- Subtle Row Hover Effect --- 
   This adds a simple background change when you hover over a row.
*/
.rz-data-grid .rz-grid-table tbody tr:not(.rz-state-selected):hover {
    background-color: #f5f5f5;
}

/* 8. --- Clean Pager ---
   Minor tweaks to the pager at the bottom.
*/
.rz-pager {
    border-top: 1px solid #dee2e6;
    background-color: #fff;
    padding-top: 1rem;
}


/* Flatten the RadzenLogin component to blend into the page */
.clean-login .rz-card {
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Modernize the Input Fields */
.clean-login input.rz-textbox {
    height: 48px; /* Taller inputs = Modern look */
    background-color: var(--rz-base-200); /* Slightly grey background for inputs */
    border: 1px solid transparent;
}

.clean-login input.rz-textbox:focus {
    background-color: var(--rz-base-100);
    border-color: var(--rz-primary);
}

/* Modernize the Login Button */
.clean-login .rz-login-button {
    height: 48px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-top: 1rem;
    width: 100%;
}


.my-popup {
    display: none;
    position: absolute;
    overflow: auto;
    /* FIX: Use a fixed reasonable width for desktop */
    width: 600px;
    /* FIX: Safety cap so it never exceeds screen width on weirdly resized windows */
    max-width: 95vw;
    height: 50vh;
    min-height: 200px;
    border: var(--rz-panel-border);
    background-color: var(--rz-panel-background-color);
    box-shadow: var(--rz-panel-shadow);
    border-radius: var(--rz-border-radius);
    z-index: 1000; /* Ensure it floats above other elements */
}

/* Responsive adjustments for TABLETS and MOBILES */
@media (max-width: 768px) {
    .my-popup {
        /* On small screens, switch back to relative width */
        width: 90vw;
        height: 50vh;
        min-height: 200px;
        min-width: unset; /* Remove min-width to prevent overflow on very small phones */
        padding: 1rem;
    }
}

@media (max-width: 576px) {
    :root {
        --rz-gap: 3rem;
    }
}

@media (max-width: 1000px) {
    .rz-steps-title {
        display: none;
    }
}

@media (max-width: 576px) {
    .rz-steps [role=tablist] {
        display: block;
    }

    .rz-steps .rz-steps-item {
        display: block;
        padding: 0.25rem 0;
    }

    /* Show titles again for vertical layout */
    .rz-steps-title {
        display: block;
    }
}

.main-app-layout .rz-layout {
    height: auto !important;
}

/* .rz-body { */
    /* max-width: 2000px; */
    /* margin-left: auto; */
    /* margin-right: auto; */
    /* width: 95%; */
/* } */

    .rz-body {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background-color: #000000 !important; /* Prevents white flash */
		    min-width: 320px; /* A safe minimum for small mobile screens */

    }



a {
    color: black; /* Changes the text color from blue to black */
    text-decoration: none; /* Removes the underline */
}

a:hover {
    color: dimgray; /* Changes color on hover */
    text-decoration: underline; /* Optional: Adds underline on hover */
}

.strikethrough-numeric input {
    text-decoration: line-through;
    color: red;
}


.no-animation-dialog .rz-dialog.rz-open {
  animation: none !important;
}

/* PL temporär die open animation des peer benchmarking dialogs deaktivieren bis radzen team bug gefixt hat mit chart size */
.rz-dialog.rz-open:has(.rz-chart) {
    animation: none !important;
}



.fullscreenContent .rz-dialog-content {
        flex: 1 1 auto;
        padding: var(--rz-dialog-content-padding);
        overflow: auto;
}

.stretched-dialog
{
 flex: 1 1 auto!important;
}

/* Targets the input element WITHIN the component that has the 'bold-numeric' class */
.bold-numeric input {
  font-weight: bold;
}
  
.rz-steps ul {
  padding: 0 1rem; /* PL CSS war padding: 0; */
}

.rz-dialog-confirm-buttons > .rz-secondary {
	background-color: var(--rz-danger) !important;
}

.rz-badge {
  text-transform: none;
}

.rz-datalist-content {
padding: 0;

}

.custom-rzdatalist .rz-datalist-data {
    padding: 0 !important; /* Forces padding to 0 for RadzenDataList */
}

.custom-rzdatalist .rz-steps ul {
    padding: 0 1rem !important; /* Keep padding for steps inside the custom class */
}


.rz-fileupload-row {
  display:none;
}

.rz-fileupload-files{
  padding:0;
}

.rz-button {
  text-transform: none; /* PL CSS war nicht da */
}

/* PL CSS unklar ob das funktioniert auf nicht windows rechnern */
body, .rz-main-content {
    font-family: "Segoe UI", "Roboto", sans-serif;
}

.rz-dialog-wrapper:has(.hide-modal-overlay) .rz-dialog-mask {
    background-color: transparent !important;
}

.rz-pager.rz-density-compact .rz-pager-element, .rz-fileupload .rz-button, .rz-button-sm {
  font-size: 0.8rem; /* PL CSS 0.75rem; */
  letter-spacing: normal; /* PL CSS war 0.75px*/
  text-transform: none; /* PL CSS war uppercase; */
}

.rz-button-xs {
  text-transform: none; /* PL CSS war uppercase */
}

/* PL CSS selbes vertikales padding für dropdown wie für numeric input*/
.rz-dropdown {
  padding-block: 0.25rem;
}

.rz-card {
  /* PL CSS border-radius: var(--rz-card-border-radius); */
  border-radius: 5px;
  padding: 1rem 0; /* 1rem top and bottom, 0 left and right */
}

.rz-card.rz-variant-filled {
  box-shadow: none;  /* PL CSS war var(--rz-card-shadow) */
}

.rz-menu:not(.rz-profile-menu) {
  background-color: transparent;/* PL CSS war var(--rz-menu-top-item-background-color); */
}

.rz-steps .rz-widget-content {
  padding: 1rem 1rem; /* PL CSS */
}


.rz-steps-buttons {
  display: flex;
  justify-content: space-between;
  padding-block: var(--rz-steps-buttons-padding-block);
  padding-inline: var(--rz-steps-buttons-padding-inline);

position: absolute;   /* PL CSS Position the buttons at the bottom */
  bottom: 0;            /* PL CSS Align buttons to the bottom of the container */
  left: 0;              /* PL CSS Align buttons to the left */
  width: 100%;          /* PL CSS Ensure the buttons span the full width of the container */
  
  padding-left: 1rem;   /* PL CSS Add 1rem padding to the left */
  padding-right: 1rem;  /* PL CSS Add 1rem padding to the right */
}

.rz-fileupload-buttonbar {
  background-color: transparent; /* PL CSS war var(--rz-upload-button-bar-background-color); */
}


.rz-g > div, .rz-datalist-data > li {
  background-color: transparent; /* PL CSS war var(--rz-datalist-item-background-color); */
}

.rz-tabview-nav {
  padding: 0 !important; /* PL CSS war ohne important */
}

.rz-tabview-nav li a,
.rz-tabview-nav li a:not([href]):not([class]) {
  text-transform: none; /* PL CSS war var(--rz-tabs-tab-text-transform); */
  letter-spacing: normal; /* PL CSS war var(--rz-tabs-tab-letter-spacing); */
}

.rz-form-field-label {
  padding: 0!important; /* PL CSS war var(--rz-form-field-label-padding); */
  font-weight: bold; /* PL CSS war normal */
  inset-inline-start: auto!important; /* PL CSS war var(--rz-form-field-label-inset-inline-start); */
}

input, textarea {
    font-size: var(--rz-input-font-size);
}

  /* --- DASHBOARD STYLES --- */
  .dashboard-background {
      min-height: 100vh;
      width: 100%;
      background-color: #000000;
      /* The cool radial gradient spotlight */
      background-image: radial-gradient(circle at 50% -10%, var(--rz-primary-darker) 0%, #000000 60%);
      padding: 2rem;
      display: flex;
      justify-content: center;
  }

  .main-container {
      /* We re-apply a max-width here so the content doesn't stretch too wide on huge screens */
      max-width: 2000px;
      width: 95%;
      margin-top: 2rem;
  }


  .glow-icon-wrapper {
      background: rgba(255,255,255,0.05);
      padding: 12px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.1);
      display: flex;
      align-items: center;
      justify-content: center;
  }


  .modern-search-wrapper {
      position: relative;
  }

  .modern-input.rz-textbox {
      background-color: rgba(255, 255, 255, 0.05) !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      border-radius: 8px !important;
      color: white !important;
      height: 50px;
      transition: all 0.3s ease;
      font-size: 1rem;
  }

      .modern-input.rz-textbox:focus {
          background-color: rgba(255, 255, 255, 0.1) !important;
          border-color: var(--rz-primary) !important;
          box-shadow: 0 0 15px rgba(var(--rz-primary-rgb), 0.2);
      }

  .modern-input::placeholder {
      color: rgba(255, 255, 255, 0.3);
  }

  /* Card Glassmorphism */
  .app-box {
      background: rgba(255, 255, 255, 0.03);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 16px;
      padding: 1.5rem;
      display: flex;
      flex-direction: column;
      height: 100%;
      min-height: 240px;
      position: relative;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .hover-card:hover {
      transform: translateY(-5px);
      background: rgba(255, 255, 255, 0.06);
      border-color: white;
      box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
  }

  .icon-wrapper {
      width: 48px;
      height: 48px;
      border-radius: 10px;
      background-color: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
  }

  .hover-card:hover .icon-wrapper {
      background-color: var(--rz-primary);
      border-color: var(--rz-primary);
  }

  .box-content {
      display: flex;
      flex-direction: column;
      height: 100%;
  }

  .box-header {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1rem;
  }

  .box-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: auto;
      padding-top: 1rem;
      border-top: 1px solid rgba(255, 255, 255, 0.05);
  }

  .modern-btn-primary {
      width: 100%;
      margin-left: 0.5rem;
      text-transform: uppercase;
      font-weight: 700;
      letter-spacing: 0.5px;
  }

  .modern-btn-secondary {
      border-color: rgba(255,255,255,0.2) !important;
      color: rgba(255,255,255,0.6) !important;
  }

      .modern-btn-secondary:hover {
          background-color: white !important;
          color: black !important;
      }

  .modern-menu .rz-navigation-item-wrapper {
      color: white !important;
  }

      .modern-menu .rz-navigation-item-wrapper:hover {
          background-color: rgba(255,255,255,0.1) !important;
      }


.rz-steps ul {
    padding: 0rem;
}

.rz-steps .rz-widget-content {
     padding: 0rem;
}

:root {
    --rz-row-gap: 2rem; /* PL CSS war 1rem; */
    --rz-makery-gray: #eeeef0;
    --rz-makery-darkgray: #8b969d;
    --rz-makery-aqua: #42bdbf;
    --rz-makery-aqua-planning: rgba(217, 242, 242, 1.0);
    --rz-makery-black: #020104;
    --rz-makery-petrol: #116471;
    --rz-makery-petrol-darker: #0B505A;
    --rz-makery-petrol-lighter: rgba(17, 100, 113, 0.12);
    --rz-makery-brown: #9b694d;
    --rz-makery-darkred: #a10337 /* PL war vorher #6b0023 */;
    --rz-makery-darkgreen: #026106;
    --rz-makery-lightyellow: #ffffdc;
    --rz-sidebar-toggle-hover-background-color: var(--rz-makery-aqua);
    --rz-primary: var(--rz-makery-petrol);
    --rz-switch-checked-circle-background-color: var(--rz-primary);
    --rz-primary-darker: var(--rz-makery-petrol-darker);
    --rz-primary-lighter: var(--rz-makery-petrol-lighter);
    --rz-on-primary-lighter: var(--rz-primary-darker);
    --rz-secondary: #848884;
    --rz-info-light: #3689ca; /* PL CSS war #4dabf5; */
    --rz-info: #00a5bf; /* PL war var(--rz-primary); */
    --rz-success: var(--rz-makery-darkgreen); /* PL CSS war #6f9e71 oder #4caf50; */
    --rz-warning: #f2b254; /* PL CSS war #ff9800; */
    --rz-danger: var(--rz-makery-darkred); /*PL CSS WAR #FD4248; oder #f44336*/
    --rz-danger-light: #cc4237; /* PL CSS WAR #f6695e; */
    --rz-root-font-size: 15px; /* PL CSS war 16px */
    --rz-body-background-color:black; /* PL CSS war #eeeff1; oder var(--rz-base-100) */
    --rz-card-padding: 2rem; /* PL CSS */
    --rz-card-background-color: #eeeff1; /* PL CSS war var(--rz-base-background-color);*/
    --rz-datalist-background-color: transparent; /* PL CSS war var(--rz-base-background-color); */
    --rz-datalist-item-margin-inline: 0.0rem; /* PL CSS war 0.5rem */
    --rz-datalist-item-background-color: transparent; /* PL CSS war var(--rz-base-background-color); */
    --rz-form-field-start-end-padding-inline: 0.75rem; /* PL CSS war 0.75rem */
    --rz-form-field-label-floating-top: -1.25rem; /* PL CSS war -0.5625rem; aber dann auch die höhe ingesamt wieder zurücksetzen */
    --rz-form-field-label-floating-background-color: transparent; /* PL CSS war var(--rz-input-background-color); */
    --rz-grid-cell-font-size: 1.0rem; /* PL CSS war 0.875rem*/
    --rz-grid-selected-background-color: none; /* PL CSS war var(--rz-primary-lighter); */
    --rz-grid-selected-color: var(--rz-primary);
    --rz-grid-header-font-size: 1.0rem; /* PL CSS war 0.875rem*/
    --rz-input-height: 2.0rem; /* PL CSS war 2.5rem */
    --rz-input-background-color: white; /* PL CSS war var(--rz-base-background-color); */
    --rz-input-disabled-border: none; /* PL CSS war var(--rz-border-disabled); */
    --rz-input-disabled-background-color: transparent; /* PL CSS war var(--rz-base-background-color); */
    --rz-input-disabled-color: --rz-text-color; /* PL CSS war var(--rz-text-disabled-color); */
    --rz-input-disabled-border-block-end: none;
    --rz-input-hover-background-color: #f8fcfd;
    --rz-menu-top-item-hover-color: var(--rz-primary); /* PL CSS war var(--rz-on-primary); */
    --rz-menu-top-item-selected-color: var(--rz-primary); /* PL CSS war var(--rz-on-primary); */
    --rz-menu-top-item-icon-color: var(--rz-primary); /* PL CSS war var(--rz-on-primary); */
    --rz-menu-top-item-icon-hover-color: var(--rz-primary); /* PL CSS war var(--rz-on-primary); */
    --rz-steps-number-selected-background: var(--rz-primary); /* PL CSS war var(--rz-secondary); */
    --rz-tabs-padding: 1rem 0rem; /* PL CSS war 1rem*/
    --rz-form-field-margin-block: 0; /* PL CSS war 0.5rem 0*/
    --rz-card-background-color: #fff;
    --rz-datepicker-calendar-selected-hover-background-color: var(--rz-primary);
    --rz-upload-choose-background-color: white;
	--rz-steps-color: white;
	--rz-steps-title-selected-color: var(--rz-makery-aqua);
}

/* Custom Tippy.js Tooltip */
.tippy-box[data-theme~='custom'] {
    background-color: #4a90e2; /* Nice blue color */
    color: white;
    font-size: 14px;
    font-weight: bold;
    padding: 8px 12px;
    border-radius: 6px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.tippy-box[data-theme~='custom'][data-placement^='top'] > .tippy-arrow::before {
    border-top-color: #4a90e2; /* Arrow color */
}
.tippy-box[data-theme~='custom'][data-placement^='bottom'] > .tippy-arrow::before {
    border-bottom-color: #4a90e2;
}