/* b======================================= 
   STAIRCASE MAIN CSS
   ===================================================== */
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 400;
  src: local("Roboto Condensed Regular"), local("RobotoCondensed-Regular"),
    url("../../fonts/roboto-condensed-v18-latin-regular.woff2") format("woff2"),
    url("../../fonts/roboto-condensed-v18-latin-regular.woff") format("woff");
}

/* OVERWRITE BOOTSTRAP NORMAL STYLES */


/* Bootstrap 5 Color Overrides for Staircase */
:root {
  /* Primary - Staircase Blue */
 --bs-primary: #04378b;
  --bs-primary-rgb: 4, 55, 139;
  /* Secondary - Staircase Light Blue (from links and navigation) */
 --bs-secondary: #526d95;
  --bs-secondary-rgb: 82, 109, 149;
  /* Success - Staircase Green */
 --bs-success: #72c37e;
  --bs-success-rgb: 114, 195, 126;
  /* Danger - Staircase Delete Red */
 --bs-danger: #d32f2f;
  --bs-danger-rgb: 211, 47, 47;
  /* Warning - Staircase/Toastr Warning Orange */
 --bs-warning: #feb21d;
  --bs-warning-rgb: 254, 178, 29;
  /* Info - Light Blue (complementary to primary) */
 --bs-info: #335b9e;
  --bs-info-rgb: 51, 91, 158;
  /* Light - Keep Bootstrap default */
 --bs-light: #f8f9fa;
  --bs-light-rgb: 248, 249, 250;
  /* Dark - Dark Blue (based on sidebar gradient) */
 --bs-dark: #042d6f;
  --bs-dark-rgb: 4, 45, 111;
  /* Body color adjustments */
  --bs-body-color: #212529;
  --bs-body-bg: #fff;
  
  /* Body font and text settings */
  --bs-body-font-family: "Roboto Condensed", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-size: 16px;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-text-align: left;
  /* SC Custom - Primary hover (lighter blue) */
  --sc-primary-hover: #3464b4;
  /* Blue shades for consistency */
 --bs-blue: #04378b;
  --bs-indigo: #335b9e;
  --bs-purple: #6c4c93;
  --bs-pink: #e91e63;
  --bs-red: #d32f2f;
  --bs-orange: #feb21d;
  --bs-yellow: #ffc107;
  --bs-green: #72c37e;
  --bs-teal: #20c997;
  --bs-cyan: #17a2b8;
}

/* Body global styles using CSS variables */
body {
  margin: 0;
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  text-align: var(--bs-body-text-align);
  background-color: var(--bs-body-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
/* Additional color classes for backwards compatibility */
.bg-primary {
  background-color: var(--bs-primary) !important;
  }
.bg-secondary {
  background-color: var(--bs-secondary) !important;
  }
.bg-success {
  background-color: var(--bs-success) !important;
  }
.bg-danger {
  background-color: var(--bs-danger) !important;
  }
.bg-warning {
  background-color: var(--bs-warning) !important;
  }
.bg-info {
  background-color: var(--bs-info) !important;
  }
.bg-light {
  background-color: var(--bs-light) !important;
  }
.bg-dark {
  background-color: var(--bs-dark) !important;
  }
.text-primary {
  color: var(--bs-primary) !important;
  }
.text-secondary {
  color: var(--bs-secondary) !important;
  }
.text-success {
  color: var(--bs-success) !important;
  }
.text-danger {
  color: var(--bs-danger) !important;
  }
.text-warning {
  color: var(--bs-warning) !important;
  }
.text-info {
  color: var(--bs-info) !important;
  }
.text-light {
  color: var(--bs-light) !important;
  }
.text-dark {
  color: var(--bs-dark) !important;
  }
/* Button color overrides to ensure Staircase styling */
.btn-primary {
  --bs-btn-bg: #04378b;
  --bs-btn-border-color: #04378b;
  --bs-btn-hover-bg: #335b9e;
  --bs-btn-hover-border-color: #335b9e;
  --bs-btn-active-bg: #042d6f;
  --bs-btn-active-border-color: #042d6f;
  }
.btn-secondary {
  --bs-btn-bg: #526d95;
  --bs-btn-border-color: #526d95;
  --bs-btn-hover-bg: #335b9e;
  --bs-btn-hover-border-color: #335b9e;
  --bs-btn-active-bg: #04378b;
  --bs-btn-active-border-color: #04378b;
  }
.btn-success {
  --bs-btn-bg: #72c37e;
  --bs-btn-border-color: #72c37e;
  --bs-btn-hover-bg: #5fae6b;
  --bs-btn-hover-border-color: #5fae6b;
  --bs-btn-active-bg: #4d9a58;
  --bs-btn-active-border-color: #4d9a58;
  }
.btn-danger {
  --bs-btn-bg: #d32f2f;
  --bs-btn-border-color: #c62828;
  --bs-btn-hover-bg: #c62828;
  --bs-btn-hover-border-color: #b71c1c;
  --bs-btn-active-bg: #b71c1c;
  --bs-btn-active-border-color: #b71c1c;
  }
.btn-warning {
  --bs-btn-bg: #feb21d;
  --bs-btn-border-color: #feb21d;
  --bs-btn-hover-bg: #f7a600;
  --bs-btn-hover-border-color: #f7a600;
  --bs-btn-active-bg: #e09600;
  --bs-btn-active-border-color: #e09600;
  --bs-btn-color: #000;
  }
.btn-info {
  --bs-btn-bg: #335b9e;
  --bs-btn-border-color: #335b9e;
  --bs-btn-hover-bg: #2a4d87;
  --bs-btn-hover-border-color: #2a4d87;
  --bs-btn-active-bg: #224070;
  --bs-btn-active-border-color: #224070;
  }
/* Outline Button color overrides */
.btn-outline-primary {
  --bs-btn-color: #04378b;
  --bs-btn-border-color: #04378b;
  --bs-btn-hover-bg: #04378b;
  --bs-btn-hover-border-color: #04378b;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #04378b;
  --bs-btn-active-border-color: #04378b;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: #04378b;
  --bs-btn-disabled-border-color: #04378b;
  }
.btn-outline-secondary {
  --bs-btn-color: #526d95;
  --bs-btn-border-color: #526d95;
  --bs-btn-hover-bg: #526d95;
  --bs-btn-hover-border-color: #526d95;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #526d95;
  --bs-btn-active-border-color: #526d95;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: #526d95;
  --bs-btn-disabled-border-color: #526d95;
  }
.btn-outline-success {
  --bs-btn-color: #72c37e;
  --bs-btn-border-color: #72c37e;
  --bs-btn-hover-bg: #72c37e;
  --bs-btn-hover-border-color: #72c37e;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #72c37e;
  --bs-btn-active-border-color: #72c37e;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: #72c37e;
  --bs-btn-disabled-border-color: #72c37e;
  }
.btn-outline-danger {
  --bs-btn-color: #d32f2f;
  --bs-btn-border-color: #d32f2f;
  --bs-btn-hover-bg: #d32f2f;
  --bs-btn-hover-border-color: #d32f2f;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #d32f2f;
  --bs-btn-active-border-color: #d32f2f;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: #d32f2f;
  --bs-btn-disabled-border-color: #d32f2f;
  }
.btn-outline-warning {
  --bs-btn-color: #feb21d;
  --bs-btn-border-color: #feb21d;
  --bs-btn-hover-bg: #feb21d;
  --bs-btn-hover-border-color: #feb21d;
  --bs-btn-hover-color: #000;
  --bs-btn-active-bg: #feb21d;
  --bs-btn-active-border-color: #feb21d;
  --bs-btn-active-color: #000;
  --bs-btn-disabled-color: #feb21d;
  --bs-btn-disabled-border-color: #feb21d;
  }
.btn-outline-info {
  --bs-btn-color: #335b9e;
  --bs-btn-border-color: #335b9e;
  --bs-btn-hover-bg: #335b9e;
  --bs-btn-hover-border-color: #335b9e;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #335b9e;
  --bs-btn-active-border-color: #335b9e;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: #335b9e;
  --bs-btn-disabled-border-color: #335b9e;
  }
/* Alert color overrides */
.alert-primary {
  --bs-alert-bg: #e8f0fb;
  --bs-alert-border-color: #d1e2f7;
  --bs-alert-color: #04378b;
  }
.alert-secondary {
  --bs-alert-bg: #e7ebf1;
  --bs-alert-border-color: #d6dce6;
  --bs-alert-color: #526d95;
  }
.alert-success {
  --bs-alert-bg: #e6f5e9;
  --bs-alert-border-color: #d2edda;
  --bs-alert-color: #0a5514;
  }
.alert-danger {
  --bs-alert-bg: #f8d7d7;
  --bs-alert-border-color: #f5c2c2;
  --bs-alert-color: #842029;
  }
.alert-warning {
  --bs-alert-bg: #fff8e5;
  --bs-alert-border-color: #ffecb5;
  --bs-alert-color: #856404;
  }
.alert-info {
  --bs-alert-bg: #e0e8f3;
  --bs-alert-border-color: #ccd8ea;
  --bs-alert-color: #1a2e51;
  }
/* Badge color overrides */
.badge.bg-primary {
  background-color: var(--bs-primary) !important;
  }
.badge.bg-secondary {
  background-color: var(--bs-secondary) !important;
  }
.badge.bg-success {
  background-color: var(--bs-success) !important;
  }
.badge.bg-danger {
  background-color: var(--bs-danger) !important;
  }
.badge.bg-warning {
  background-color: var(--bs-warning) !important;
  color: #000 !important;
  }
.badge.bg-info {
  background-color: var(--bs-info) !important;
  }
/* GENERAL */

table {
  height: 100%;
  font-family: "Roboto Condensed", Arial, sans-serif !important;
  font-weight: 400 !important;
  }
tr.tableRow td {
  vertical-align:middle;
  padding: 0.35rem;
  }
.sticky-header th {
  position: sticky;
  top: 0;
  z-index: 1020;
  /* Bootstrap 4's navbar uses 1030, so below that */
}
tr.sc-table-position-header > th {
  background-color: #ffffff;
  /* Weißer Hintergrund für Suchzeile */
 border: none;
  }
@media screen and (min-width: 576px) {
  .sc-hide-desktop {
  display: none !important;
  }

}
@media screen and (max-width: 575.98px) {
  body {
    margin-top: 60px !important;
  }

  /* Reduce margin-top for login page on mobile */
  body.login {
    margin-top: 20px !important;
  }

  .sc-hide-mobile {
    display: none !important;
  }

  .table td,
  .table th {
    padding: 0.5rem;
  }

  .sc-link-delete-detail {
    color: red !important;
  }

  /* Sidebar auf Mobile verstecken (kein !important, damit jQuery .show() es überschreiben kann) */
  #sc-sidebar {
    display: none;
  }
}

/* Screens Container Padding */
@media screen and (max-width: 575.98px) {
  #screens {
    padding-top: 20px !important;
  }
}

@media screen and (min-width: 576px) {
  #screens {
    padding-top: 0 !important;
  }
}
a,
a:hover {
  text-decoration: none !important;
  color: #526d95 !important;
  }
a.dropdown-item.active,
a.dropdown-item:active {
  color: white !important;
  }
button {
  outline: none !important;
  }
.sc-gradient {
  background: rgb(4, 55, 139);
  background: linear-gradient(180deg, rgba(4, 55, 139, 1) 0%, #04378b 100%);
  }
.sc-green {
  background-color: #72c37e;
  }
.sc-green-inv {
  color: #0a5514;
  }
.navbar.fixed-bottom {
  min-height: 50px;
  z-index: 899;
  }
/* ============================================================
   HEADER - Variante G: Breadcrumb + Neu Dropdown + Icon Toolbar
   ============================================================ */

/* Animation für Dropdowns */
@keyframes scDropIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* WICHTIG: Desktop-Header auf Mobile verstecken */
@media screen and (max-width: 575.98px) {
  .sc-header-container,
  #sc-header {
    display: none !important;
  }
}

/* HEADER - Desktop (≥576px) */
@media screen and (min-width: 576px) {

  /* Header Container */
  .sc-header-container {
    display: flex !important;
    align-items: center;
    height: 56px;
    background: white;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    padding: 0 1.25rem;
    width: 100%;
    gap: 0;
    margin-bottom: 1rem;
  }

  /* Respect Bootstrap d-none d-sm-block utility */
  #sc-header.d-none.d-sm-block {
    display: flex !important;
  }

  /* ---- Breadcrumb (links) ---- */
  .sc-header-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0;
    font-size: 0.875rem;
    flex: 1;
    min-width: 0;
  }

  .sc-header-crumb {
    color: #94a3b8;
    white-space: nowrap;
  }

  .sc-header-crumb-sep {
    color: #cbd5e1;
    margin: 0 0.5rem;
    font-size: 0.65rem;
  }

  .sc-header-crumb-active {
    color: #1e293b;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.125rem;
    margin: 0;
    line-height: 1.4;
  }

  /* Identifier Title innerhalb Breadcrumb */
  .sc-header-crumb-active .identifier_title {
    display: inline;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ---- + Neu Button & Dropdown ---- */
  .sc-header-neu {
    flex-shrink: 0;
    margin: 0 1rem;
  }

  .sc-header-neu-wrap {
    position: relative;
  }

  .sc-header-neu-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 500;
    background: transparent;
    color: #64748b;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    height: 38px;
  }

  .sc-header-neu-btn:hover {
    background: #f1f5f9;
    color: var(--bs-primary, #04378b);
  }

  .sc-header-neu-btn i {
    font-size: 0.85rem;
  }

  .sc-header-neu-chevron {
    font-size: 0.55rem !important;
    margin-left: 0.125rem;
    color: #94a3b8;
  }

  /* Neu Dropdown */
  .sc-header-neu-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    min-width: 280px;
    z-index: 1200;
    padding: 0.375rem;
    animation: scDropIn 0.15s ease;
  }

  .sc-header-neu-dropdown.open {
    display: block;
  }

  .sc-header-neu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.12s;
    text-decoration: none !important;
    color: inherit !important;
  }

  .sc-header-neu-item:hover {
    background: #f1f5f9;
    text-decoration: none !important;
  }

  .sc-header-neu-item-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
  }

  .sc-header-neu-item-icon.blue { background: #eef2ff; color: #04378b; }
  .sc-header-neu-item-icon.green { background: #ecfdf5; color: #059669; }
  .sc-header-neu-item-icon.orange { background: #fff7ed; color: #ea580c; }
  .sc-header-neu-item-icon.purple { background: #f3e8ff; color: #7c3aed; }

  .sc-header-neu-item-text {
    display: flex;
    flex-direction: column;
  }

  .sc-header-neu-item-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e293b;
  }

  .sc-header-neu-item-desc {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 1px;
  }

  /* ---- Right Icons ---- */
  .sc-header-right {
    display: flex !important;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
    margin-left: auto;
  }

  .sc-header-right.d-none.d-md-block {
    display: flex !important;
  }

  /* Icon Buttons (einheitlich) */
  .sc-header-icon-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.05rem;
    transition: all 0.15s;
    position: relative;
    text-decoration: none !important;
    border: none;
    background: transparent;
    padding: 0;
  }

  .sc-header-icon-btn:hover {
    background: #f1f5f9;
    color: #04378b;
    text-decoration: none !important;
  }

  /* Dropdown-Toggle Arrow entfernen (Bootstrap) */
  .sc-header-icon-btn.dropdown-toggle::after {
    display: none;
  }

  /* Chevron neben User-Icon */
  .sc-header-icon-chevron {
    font-size: 0.55rem;
    color: #94a3b8;
    margin-left: 0.125rem;
  }

  /* Icon-Button mit Chevron: breiter */
  .sc-header-icon-btn:has(.sc-header-icon-chevron) {
    width: auto;
    padding: 0 0.5rem;
    gap: 0.25rem;
  }

  /* ---- Tooltips (CSS-only via data-tooltip) ---- */
  .sc-header-icon-btn[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: white;
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 1100;
    pointer-events: none;
    animation: scDropIn 0.1s ease;
  }

  /* Tooltip nicht bei offenen Dropdowns zeigen */
  .sc-header-icon-btn.show[data-tooltip]:hover::after {
    display: none;
  }

  /* ---- Badge (Notifications) ---- */
  .sc-header-badge {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 16px;
    height: 16px;
    background: #dc3545;
    color: white;
    font-size: 0.6rem;
    font-weight: 700;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid white;
    line-height: 1;
  }

  /* ---- Separator ---- */
  .sc-header-sep {
    width: 1px;
    height: 24px;
    background: #e2e8f0;
    margin: 0 0.375rem;
    flex-shrink: 0;
  }

  /* ---- Dropdown Menu Styling (alle Header-Dropdowns) ---- */
  .sc-header-container .dropdown-menu {
    border: 1px solid #e2e8f0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    margin-top: 8px;
    padding: 0.375rem;
    min-width: 200px;
    animation: scDropIn 0.15s ease;
  }

  .sc-header-container .dropdown-item {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    transition: all 0.12s;
    border-radius: 6px;
  }

  .sc-header-container .dropdown-item i {
    width: 1rem;
    text-align: center;
    color: #94a3b8;
    font-size: 0.9rem;
  }

  .sc-header-container .dropdown-item:hover {
    background-color: #f1f5f9;
    color: #1e293b;
  }

  .sc-header-container .dropdown-item:hover i {
    color: #04378b;
  }

  /* Active Dropdown Item */
  .sc-header-container .dropdown-item.active {
    background-color: #04378b;
    color: #ffffff;
  }

  .sc-header-container .dropdown-item.active i {
    color: #ffffff;
  }

  /* Dropdown Header */
  .sc-header-container .dropdown-header {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    font-weight: 600;
  }

  /* Dropdown Divider */
  .sc-header-container .dropdown-divider {
    margin: 0.25rem 0.625rem;
    border-color: #f1f5f9;
  }

  /* ---- System Environment Colors ---- */
  .sc-db-dev { color: #198754 !important; }
  .sc-db-other { color: #fd7e14 !important; }
  .sc-env-test { color: #198754 !important; }
  .sc-env-prod { color: #fd7e14 !important; }

  /* Dropdown Items - Test Environment (Grün) */
  .dropdown-item.sc-env-test { color: #198754; }
  .dropdown-item.sc-env-test i { color: #198754; }
  .dropdown-item.sc-env-test:hover { background-color: #d1e7dd; color: #0a3622; }
  .dropdown-item.sc-env-test:hover i { color: #0a3622; }
  .dropdown-item.sc-env-test.active { background-color: #198754; color: #ffffff; }
  .dropdown-item.sc-env-test.active i { color: #ffffff; }

  /* Dropdown Items - Prod Environment (Orange) */
  .dropdown-item.sc-env-prod { color: #fd7e14; }
  .dropdown-item.sc-env-prod i { color: #fd7e14; }
  .dropdown-item.sc-env-prod:hover { background-color: #ffe5d0; color: #984c0c; }
  .dropdown-item.sc-env-prod:hover i { color: #984c0c; }
  .dropdown-item.sc-env-prod.active { background-color: #fd7e14; color: #ffffff; }
  .dropdown-item.sc-env-prod.active i { color: #ffffff; }

  /* Content Spacing */
  #content {
    padding-top: 0;
  }
}

/* ---- Responsive: ≤1400px → + Neu wird kompakter ---- */
@media screen and (min-width: 576px) and (max-width: 1400px) {
  .sc-header-neu-label {
    display: none;
  }
  .sc-header-neu-chevron {
    display: none;
  }
  .sc-header-neu-btn {
    padding: 0.45rem 0.65rem;
  }
}

/* ---- Mobile Header (unverändert) ---- */
#sc-mobile-header {
  display: none;
  background: #04378b;
  height: 60px;
}
#sc-mobile-header-navigation-button {
  font-size: 22px;
}
.sc-mobile-title {
  font-weight: 700;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-size: 16px;
  flex: 1;
  text-align: left;
}
@media screen and (max-width: 575.98px) {
  #sc-mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
  }
}

/* ---- Settings Popover (shared mobile + desktop) ---- */
.sc-settings-popover {
  position: fixed;
  width: 240px;
  background: #fff;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 8px 30px rgba(4, 55, 139, 0.18), 0 2px 8px rgba(0,0,0,0.08);
  overflow: hidden;
  z-index: 1050;
  animation: scSettingsPopIn 0.15s ease-out;
}
@keyframes scSettingsPopIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.sc-settings-user {
  padding: 10px 16px 6px 16px;
  font-size: 12px;
  color: #6c757d;
  margin: 0;
}
.sc-settings-username {
  display: block;
  color: #04378b;
  font-weight: 600;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sc-settings-divider {
  height: 1px;
  background: #e8ecf1;
  margin: 0 12px;
}
.sc-settings-menu {
  padding: 4px 0;
}
.sc-settings-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  color: #333;
  text-decoration: none;
  font-size: 13px;
  transition: background 0.12s;
  cursor: pointer;
}
.sc-settings-item:hover {
  background: #f4f6fa;
  text-decoration: none;
  color: #333;
}
.sc-settings-item i {
  width: 18px;
  text-align: center;
  font-size: 14px;
  color: #5a6b8a;
}
.sc-settings-item--logout {
  color: #d33;
}
.sc-settings-item--logout i {
  color: #d33;
}
.sc-settings-item--logout:hover {
  background: #fef2f2;
  color: #d33;
}

/* BUTTONS */

.btn-primary {
  background: #335b9e !important;
  border-color: #ecf3fb !important;
  color: #ffffff !important;
  }
.btn-primary:hover {
  background: #f8f9fa !important;
  border-color: #dee2e6 !important;
  color: #212529 !important;
  }
.btn.btn-danger {
  background-color: #d32f2f !important;
  border-color: #c62828 !important;
  color: #fff !important;
  }
.btn.btn-danger:hover {
  background-color: #c62828 !important;
  border-color: #b71c1c !important;
  color: #fff !important;
  }
.btn.btn-secondary:hover {
  background-color: #335b9e !important;
  border-color: #335b9e !important;
  color: #ffffff !important;
  }
.btn.btn-warning:hover {
  background-color: #f7bc61;
  border-color: #f7bc61;
  }
.sc-logo-desktop {
  max-width: 140px;
  display: inline-block;
  margin-left: 30px;
  }
.sc-desktop-wrapper {
  display: flex;
  align-items: stretch;
  height: 100vh;           /* Split-Scroll: Gesamtrahmen auf Viewport begrenzen */
  overflow: hidden;        /* Verhindert Body-Scroll, erzwingt unabhängige Scroll-Bereiche */
  }
/* Main Content Wrapper - Header + Content vertikal gestapelt */
#sc-main-content {
  display: flex;
  flex-direction: column;  /* Header und Content vertikal stapeln */
  flex: 1;                 /* Nimmt restlichen Platz neben Sidebar */
  width: 100%;
  min-height: 0;           /* Split-Scroll: Flex-Child darf schrumpfen (verhindert Overflow) */
  overflow: hidden;        /* Split-Scroll: Nur #content scrollt, nicht der gesamte Wrapper */
  }
.dropdown-toggle.collapsed::after {
  border-top: .3em solid;
  border-right: .3em solid transparent;
  border-bottom: 0;
  border-left: .3em solid transparent;
  }
.dropdown-toggle:not(.collapsed)::after {
  border-top: 0;
  border-right: .3em solid transparent;
  border-bottom: .3em solid;
  border-left: .3em solid transparent;
  }
#content {
  width: 100%;
  /* padding-top wird in Media Query gesetzt - Desktop: 1rem, Mobile: 0 */
  padding-right: 12px;
  padding-bottom: 10px;
  padding-left: 12px;
  flex: 1;                 /* Split-Scroll: Füllt verfügbaren Platz unterhalb des Headers */
  min-height: 0;           /* Split-Scroll: Notwendig damit flex:1 korrekt begrenzt */
  overflow-y: auto;        /* Split-Scroll: Content scrollt unabhängig von Sidebar */
  transition: all 0.3s;
  }
@media screen and (max-width: 575.98px) {
  #content {
  min-height: auto;
  }
}
@media screen and (max-width: 575.98px) {
  #sc-sidebar {
  width: 280px;
  position: absolute;
  height: auto;
  z-index: 900;
  }

}
@media screen and (max-width: 575.98px) {
  #sc-sidebar {
  display: none;
  position: fixed;
  overflow: auto;
  height: calc(100vh - 60px);
  }

}
/** hide input spinners, not needed **/

/* For Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
  }
/* For Firefox */
input[type="number"] {
  -moz-appearance: textfield;
  }
/* BOTTOM BAR */

.sc-bottom-bar a i {
  color: #fff;
  }
.sc-bottom-bar a:hover i {
  color: #acf5fa;
  }
.sc-bottom-bar.sc-icon-bar {
  padding: 0;
  }
.sc-icon-bar-container {
  height: 50px;
  margin: 0;
  }
.sc-icon-bar-container div {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  }
.sc-icon-bar-container div a {
  display: block;
  width: 100%;
  }
.sc-icon-bar-container .text-start#left {
  text-align: left !important;
  justify-content: flex-start;
  }
.sc-icon-bar-container .text-start#left span {
  display: inline-block;
  margin-left: 30px;
  }
.sc-page {
  display: inline-block;
  background: #043790;
  border-radius: 5px;
  padding: 3px 10px;
  }
.sc-bottom-bar .border-right,
.sc-bottom-bar .border-left {
  border-color: #002a76 !important;
  border-width: 2px !important;
  }
/* FAB: Floating Action Button (+ Button in Overview) */
.sc-bottom-bar.sc-fab {
  position: fixed;
  bottom: 16px;
  right: 16px;
  left: auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #04378b;
  box-shadow: 0 4px 12px rgba(4, 55, 139, 0.4);
  z-index: 1050;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
.sc-bottom-bar.sc-fab:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(4, 55, 139, 0.5);
  }
.sc-bottom-bar.sc-fab .sc-mobile-add-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  color: #fff;
  }
.sc-bottom-bar.sc-fab .sc-mobile-add-button i {
  font-size: 24px;
  color: #fff;
  }
/* FAB mit Bottom-Nav: über die Bottom-Nav positionieren */
body.has-bottom-nav .sc-bottom-bar.sc-fab {
  bottom: calc(70px + env(safe-area-inset-bottom));
  }
/* TABS */

.sc-tabs.nav-tabs {
  border-bottom: 0;
  }
.sc-tabs.nav-tabs > li {
  margin-bottom: 0 !important;
  }
.sc-tabs .nav-item a i,
.sc-tabs .nav-item a span {
  color: #335b9e !important;
  }
.sc-tabs .nav-item a.active i,
.sc-tabs .nav-item a.active span {
  color: #335b9e !important;
  }
@media screen and (max-width: 779px) {
  #sc-tooltip {
  height: 100%;
  }
#sc-tooltip-inner {
  height: 100%;
  display: flex;
  justify-content: end;
  align-items: center;
  }

}
@media screen and (min-width: 780px) {
  .sc-tabs {
  background: transparent;
  width: 100%;
  border-radius: 0;
  padding-bottom: 0;
  display: flex;
  align-items: flex-end;
  border-top: none;
  margin-top: 0;
  margin-bottom: 0;
  /* Kein zusätzlicher Abstand nach unten */
}
/* Normaler Tab-Container - NICHT für Wizard */
 .sc-tabs:not(#sc-wizard) {
  background: transparent;
  }
.sc-tabs .nav-item {
  margin-left: 2px;
  margin-top: 0;
  margin-bottom: 0;
  }
.sc-tabs .nav-item .nav-link {
  background-color: #e8f0fe;
  color: #335b9e !important;
  border: 1px solid #dee2e6;
  border-bottom: 1px solid #dee2e6;
  border-radius: 8px 8px 0 0;
  padding: 12px 20px;
  transition: all 0.2s ease;
  position: relative;
  font-weight: 500;
  }
.sc-tabs .nav-item .nav-link:hover:not(.active) {
  background-color: #d2e3fc;
  transform: translateY(-2px);
  box-shadow: 0 -2px 8px rgba(51, 91, 158, 0.1);
  }
.sc-tabs .nav-item .nav-link {
  color: #335b9e !important;
  }
/* Icons und Text in Tabs */
 .sc-tabs .nav-item a i,
 .sc-tabs .nav-item a span {
  color: #335b9e !important;
  transition: color 0.2s ease;
  }
.sc-tabs .nav-item a:hover:not(.active) i,
 .sc-tabs .nav-item a:hover:not(.active) span {
  color: #1a4894 !important;
  }
/* Tab Content Box - keine eigene Border */
 .tab-content {
  background-color: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
  position: relative;
  z-index: 5;
  margin-top: 0;
  width: 100%;
  }
/* Durchgehende Linie unter den Tabs */
 .tab-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0.5px;
  background-color: #dee2e6;
  z-index: 1;
  }
/* Tab-Pane bekommt das Styling */
 .tab-content .tab-pane {
  background-color: #ffffff;
  border: none;
  border-top: none;
  padding: 0;
  border-radius: 0 0 8px 8px;
  margin-top: -1px;
  margin-left: 0;
  margin-right: 0;
  }
/* Erster Tab ausrichten */
 .sc-tabs .nav-item:first-child {
  margin-left: 0;
  }
/* Aktiver Tab verbindet sich mit Content */
 .sc-tabs .nav-item a.active {
  background-color: #ffffff;
  border: 1px solid #dee2e6;
  border-bottom: 1px solid #ffffff;
  padding-bottom: 13px;
  /* 1px mehr für Überlappung */
 margin-bottom: -1px;
  position: relative;
  z-index: 10;
  }
/* Dropdown-Toggle in Tabs */
 .sc-tabs .nav-item.dropdown .dropdown-toggle {
  background-color: #e8f0fe !important;
  color: #335b9e !important;
  border: 1px solid #dee2e6;
  border-radius: 8px 8px 0 0;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  }
/* Dropdown-Pfeil sichtbar machen */
 .sc-tabs .nav-item.dropdown .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.5rem;
  vertical-align: middle;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
  color: #335b9e;
  }
/* Dropdown Hover */
 .sc-tabs .nav-item.dropdown .dropdown-toggle:hover {
  background-color: #d2e3fc !important;
  transform: translateY(-2px);
  box-shadow: 0 -2px 8px rgba(51, 91, 158, 0.1);
  }
/* Aktiver/Offener Dropdown */
 .sc-tabs .nav-item.dropdown.show .dropdown-toggle {
  background-color: #ffffff !important;
  border-bottom-color: #ffffff;
  z-index: 10;
  }
.sc-tabs .nav-item a.active {
  background-color: #ffffff;
  border: 1px solid #dee2e6;
  border-bottom: 1px solid #ffffff;
  box-shadow: 0 -4px 12px rgba(51, 91, 158, 0.08);
  position: relative;
  z-index: 10;
  transform: none;
  }
.sc-tabs .nav-item a.active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 3px;
  background-color: #ffffff;
  z-index: 11;
  }
.sc-tabs .nav-item a.active:hover i,
 .sc-tabs .nav-item a.active:hover span {
  color: #335b9e !important;
  }
/* Aktiver Tab bleibt beim Hover weiß */
 .sc-tabs .nav-item a.active:hover {
  background-color: #ffffff !important;
  transform: none !important;
  }
/* Entfernt alte Hover-Regel für normale Links */
 .sc-tabs.nav > li > a:hover {
  /* Überschrieben durch .nav-link:hover */
}
/* Dropdown-Toggle in Tabs zurück zum Original */
 .sc-tabs .dropdown-menu {
  padding: 0 !important;
  margin-top: -1px !important;
  margin-left: -1px !important;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border: 1px solid #dee2e6;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
/* Dropdown-Items */
 .sc-tabs .dropdown-menu .dropdown-item {
  color: #6c757d;
  /* Grauer Text statt blau */
 padding: 8px 20px 8px 16px;
  font-weight: 400;
  /* Normal statt bold */
 font-size: 0.9rem;
  /* Etwas kleiner */
 transition: all 0.2s ease;
  position: relative;
  border-left: 3px solid transparent;
  }
.sc-tabs .dropdown-menu .dropdown-item:hover {
  background-color: #f8f9fa;
  color: #335b9e;
  border-left-color: #335b9e;
  padding-left: 20px;
  /* Kleine Animation beim Hover */
}
.sc-tabs .dropdown-menu .dropdown-item.active {
  background-color: #e8f0fe;
  color: #335b9e;
  font-weight: 500;
  /* Nur aktive etwas fetter */
 border-left-color: #335b9e;
  }
/* Icons in Dropdown-Items */
 .sc-tabs .dropdown-menu .dropdown-item i {
  margin-right: 10px;
  font-size: 0.875rem;
  opacity: 0.7;
  }
.sc-tabs .dropdown-menu .dropdown-item:hover i,
 .sc-tabs .dropdown-menu .dropdown-item.active i {
  opacity: 1;
  }
/* Tab Content Box - entfernt alte Styles */
 
 /* Überschreibt die weißen Icons/Text für Dropdown-Toggle */
 .sc-tabs .nav-item.dropdown .dropdown-toggle i,
 .sc-tabs .nav-item.dropdown .dropdown-toggle span {
  color: #335b9e !important;
  }
/* Hover-Zustand für Dropdown-Toggle Text */
 .sc-tabs .nav-item.dropdown .dropdown-toggle:hover i,
 .sc-tabs .nav-item.dropdown .dropdown-toggle:hover span {
  color: #1a4894 !important;
  }
/* Aktiver/Offener Dropdown Text bleibt blau */
 .sc-tabs .nav-item.dropdown.show .dropdown-toggle i,
 .sc-tabs .nav-item.dropdown.show .dropdown-toggle span {
  color: #335b9e !important;
  }
.sc-tabs .nav-item .nav-link.dropdown-toggle.active {
  color: #335b9e !important;
  background-color: #ffffff !important;
  }
.sc-tabs .nav-item .nav-link.dropdown-toggle.active:hover {
  background-color: #ffffff !important;
  transform: none !important;
  }
.sc-tabs.nav-tabs .nav-item.show .nav-link.dropdown-toggle.active {
  color: #fff !important;
  }
.sc-tabs.nav-tabs .nav-item.show .nav-link.dropdown-toggle.active:hover {
  color: #335b9e !important;
  }
.sc-tabs.nav-tabs .nav-item.show .nav-link {
  background-color: #042d6f;
  border-color: #042d6f;
  }
.sc-tabs .nav-item.show .nav-link {
  border-radius: 0;
  }
.sc-tabs.nav-tabs .nav-item.show .nav-link:hover {
  background-color: #1a4894;
  }
.sc-tabs.nav-tabs .nav-item.show .sc-dropdown-nav-link.nav-link.active {
  background-color: #1a4894;
  }
.sc-tabs.nav-tabs .nav-item.show .sc-dropdown-nav-link.nav-link.active span,
 .sc-tabs.nav-tabs .nav-item.show .sc-dropdown-nav-link.nav-link.active i {
  color: #fff !important;
  }
.sc-tabs .dropdown-menu {
  padding: 0 !important;
  margin-top: -1px !important;
  margin-left: -1px !important;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border: 1px solid #dee2e6;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
/* Dropdown-Items */
 .sc-tabs .dropdown-menu .dropdown-item {
  color: #6c757d;
  /* Grauer Text statt blau */
 padding: 8px 20px 8px 16px;
  font-weight: 400;
  /* Normal statt bold */
 font-size: 0.9rem;
  /* Etwas kleiner */
 transition: all 0.2s ease;
  position: relative;
  border-left: 3px solid transparent;
  }
.sc-tabs .dropdown-menu .dropdown-item:hover {
  background-color: #f8f9fa;
  color: #335b9e;
  border-left-color: #335b9e;
  padding-left: 20px;
  /* Kleine Animation beim Hover */
}
.sc-tabs .dropdown-menu .dropdown-item.active {
  background-color: #e8f0fe;
  color: #335b9e;
  font-weight: 500;
  /* Nur aktive etwas fetter */
 border-left-color: #335b9e;
  }
/* Icons in Dropdown-Items */
 .sc-tabs .dropdown-menu .dropdown-item i {
  margin-right: 10px;
  font-size: 0.875rem;
  opacity: 0.7;
  }
.sc-tabs .dropdown-menu .dropdown-item:hover i,
 .sc-tabs .dropdown-menu .dropdown-item.active i {
  opacity: 1;
  }

}
/* TOOLTIP */

#sc-tooltip-inner button.btn.btn-default {
  color: #335b9e;
  }
/* Delete button - red */
#sc-tooltip-inner button.btn.btn-outline-danger.sc-link-delete-detail {
  color: #dc3545 !important;
  border-color: #dc3545 !important;
  background-color: transparent !important;
  }
#sc-tooltip-inner button.btn.btn-outline-danger.sc-link-delete-detail:hover {
  background-color: #dc3545 !important;
  color: #ffffff !important;
  }
/* Lock button - keep gray */
#sc-tooltip-inner button.btn.btn-default.locking {
  color: #6c757d !important;
  border-color: transparent !important;
  }
#sc-tooltip-inner button.btn.btn-default.locking:hover {
  color: #495057 !important;
  }
.tooltip-inner {
  background: linear-gradient(135deg, #04378b 0%, #0a4aa8 100%);
  /* Staircase blue gradient - matches sidebar */
  color: #ffffff;
  /* White text */
  font-size: 11px;
  /* Compact size */
  padding: 0.35rem 0.6rem;
  /* Tighter padding */
  border-radius: 4px;
  /* Subtle corners */
  box-shadow: 0 4px 12px rgba(4, 55, 139, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.15);
  /* Blue-tinted shadow matching theme */
  max-width: 280px;
  /* Slightly narrower */
  line-height: 1.4;
  /* Comfortable line spacing */
  font-weight: 500;
  /* Medium weight for clarity */
  letter-spacing: 0.01em;
  /* Slight spacing for readability */
  border: 1px solid rgba(255, 255, 255, 0.1);
  /* Subtle white border for depth */
}
/* Tooltip arrow styling to match new background */
.tooltip.bs-tooltip-top .arrow::before {
  border-top-color: #04378b;
  }
.tooltip.bs-tooltip-bottom .arrow::before {
  border-bottom-color: #0a4aa8;
  }
.tooltip.bs-tooltip-left .arrow::before {
  border-left-color: #06409c;
  }
.tooltip.bs-tooltip-right .arrow::before {
  border-right-color: #06409c;
  }
/* Fast smooth animation */
.tooltip {
  opacity: 0;
  transition: opacity 0.15s ease-out;
  /* Faster appearance */
  }
.tooltip.show {
  opacity: 0.98;
  /* Near full opacity for clarity */
}
/* Responsive tooltip styling for mobile devices */
@media (max-width: 768px) {
  .tooltip-inner {
  max-width: 200px;
  font-size: 10px;
  padding: 0.3rem 0.5rem;
  }

}
@media screen and (min-width: 780px) {
  #sc-tooltip {
  display: flex;
  align-items: center;
  justify-content: end;
  height: 100%;
  }
#sc-tooltip-inner button.btn.btn-default {
  background-color: transparent !important;
  border-color: transparent !important;
  }
#sc-tooltip-inner button.btn.btn-default:hover {
  background-color: #042d6f !important;
  color: #ffffff !important;
  }

}
/* Cancel Button Styling */
.btn.cancel {
  background-color: #6c757d;
  border-color: #6c757d;
  color: white;
  }
.bt.btn.cancel:hover { 
  background-color: #5a6268;
  border-color: #545b62;
  color: white;
  }
/* Focus parent indicator */
.has-focus {
  position: relative;
  }
.has-focus::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: #007bff;
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.2s;
  }
.has-focus:focus-within::before {
  opacity: 1;
  }
@media screen and (max-width: 767px) {
  .sc-form-row .sc-field:not(:first-child) {
  margin-top: 0.875rem;
  }

}
/* Responsive Checkbox-Layout */
@media screen and (max-width: 768px) {
  .sc-checkbox-group {
  grid-template-columns: 1fr;
  }

}
/* Checkbox-Container mit besserer UX */
.custom-control {
  padding: 0.5rem;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  }
.custom-control:hover {
  background-color: rgba(4, 55, 139, 0.05);
  }
/* Section Headers */
.sc-section-header {
  border-bottom: 1px solid #e9ecef;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  font-weight: 500;
  color: #495057;
  }
.sc-calendar-remove:hover {
  cursor: pointer;
  color: #dc3545 !important;
  }
/* IMPROVED PANEL STYLES */
.tab-pane .card {
  border: 1px solid #e9ecef;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s ease-in-out;
  }
.tab-pane .card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
.tab-pane .card-header {
  background-color: #f8f9fa;
  text-decoration: none;
  border-bottom: 1px solid #e9ecef;
  border-radius: 0.5rem 0.5rem 0 0;
  transition: background-color 0.2s ease-in-out;
  }
.tab-pane .card-header:hover {
  background-color: #e9ecef;
  }
.sc-panel-title {
  color: #04378b !important;
  font-size: 16px;
  padding: 4px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  }
button.sc-panel-title {
  text-decoration: none !important;
  background: none;
  border: none;
  text-align: left;
  transition: color 0.2s ease-in-out;
  }
button.sc-panel-title:hover {
  color: #335b9e !important;
  }
button.sc-panel-title:focus {
  outline: none;
  box-shadow: none;
  }
/* Panel Icons */
.sc-panel-title i {
  margin-right: 0.5rem;
  transition: transform 0.3s ease-in-out;
  font-size: 14px;
  }
button.sc-panel-title[aria-expanded="false"] i {
  transform: rotate(0deg);
  }
button.sc-panel-title[aria-expanded="true"] i {
  transform: rotate(90deg);
  }
/* Panel Expand/Collapse Indicator - DEAKTIVIERT */
/* .sc-panel-title::after {
  content: '\f078';
  font-family: 'Font Awesome 6 Pro';
  font-weight: 400;
  font-size: 12px;
  margin-left: auto;
  transition: transform 0.3s ease-in-out;
  color: #6c757d;
  float: right;
  }
*/

/* Kein ::after Pfeil mehr */
.sc-panel-title::after {
  display: none !important;
  content: none !important;
  }
/* Chevron-Styling für Panel-Toggle */
.sc-panel-title i.fa-chevron-down,
.sc-panel-title i.fa-chevron-up,
.sc-panel-title i.fa-chevron-right {
  width: 16px;
  /* Feste Breite für alle Icons */
 height: 16px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease-in-out;
  font-size: 14px;
  color: #6c757d;
  flex-shrink: 0;
  /* Verhindert Größenänderung */
}
/* button.sc-panel-title[aria-expanded="true"]::after {
  transform: rotate(180deg);
  }
*/

/* Panel Title Button Flexbox Layout */
button.sc-panel-title {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  text-align: left;
  position: relative;
  }
/* Icon-Container mit fester Breite */
button.sc-panel-title .icon-container {
  width: 16px;
  height: 16px;
  margin-right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  }
/* Pfeil-Icon vor dem Titel - alle Icons gleiche Breite */
button.sc-panel-title i[class*="fa-chevron"] {
  display: inline-block !important;
  margin: 0;
  margin-right: 12px;
  /* Abstand zum Text */
 flex-shrink: 0;
  min-width: 16px;
  /* Mindestbreite für konsistente Ausrichtung */
 text-align: center;
  }
/* Rotation für Pfeil beim Öffnen/Schließen */
button.sc-panel-title[aria-expanded="true"] i.fa-chevron-right {
  transform: rotate(90deg);
  }
div.card-header {
  padding: 0.75rem 1.25rem;
  background: #f8f9fa;
  }
/* CHECKBOX COLORS (EDIT, GREEN, RED) */

checkox.red ~ .custom-control-label::before {
  background-color: #333;
  border-color: #333;
  }
/* ============================================================
   INITIAL PAGE LOADER — Branded splash, visible from first paint
   z-index 10000 sits above the AJAX spinner (9999)
   ============================================================ */
#sc-pageloader {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #04378b;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease;
}
#sc-pageloader.sc-pageloader-done {
  opacity: 0;
  pointer-events: none;
}
.sc-pageloader-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.sc-pageloader-logo {
  max-width: 210px;
  opacity: 1;
}
.sc-pageloader-text {
  color: rgba(255, 255, 255, 0.75);
  font-size: 17px;
  font-weight: 300;
  font-family: "Roboto", Arial, sans-serif;
  letter-spacing: 0.04em;
  margin-top: -16px;
}
/* Animated progress bar */
.sc-pageloader-bar {
  width: 180px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.sc-pageloader-bar::after {
  content: '';
  position: absolute;
  top: 0; left: -45%;
  width: 45%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
  animation: sc-pageloader-slide 1.4s ease-in-out infinite;
}
@keyframes sc-pageloader-slide {
  0%   { left: -45%; }
  100% { left: 100%; }
}

/* SPINNER DIV CONTAINER - Updated to match login style */

#sc_loading_spinner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Loading Content — transparent, kein Rahmen (Google-Style) */
#sc_loading_spinner .loading-content {
  background: transparent;
  border-radius: 0;
  padding: 0;
  text-align: center;
  box-shadow: none;
  min-width: 0;
  max-width: none;
  animation: sc-spinner-fadein 0.2s ease;
}

/* Loading Spinner */
#sc_loading_spinner .loading-spinner {
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
  position: relative;
}

#sc_loading_spinner .spinner-circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top: 3px solid #ffffff;
  border-radius: 50%;
  box-sizing: border-box !important;
  animation: sc-spinner-rotate 0.85s linear infinite;
}

/* Loading Text */
#sc_loading_spinner .sc-loading-text {
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  font-weight: 300;
  min-height: 24px;
  line-height: 24px;
  position: static;
  transform: none;
  text-shadow: none;
}

@keyframes sc-spinner-fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Spin Animation for Loading Spinner */
@keyframes sc-spinner-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Mobile Responsiveness */
@media (max-width: 420px) {
  #sc_loading_spinner .loading-content {
    min-width: 90%;
    max-width: 90%;
    padding: 30px 20px;
  }
  
  #sc_loading_spinner .sc-loading-text {
    font-size: 14px;
  }
  
  #sc_loading_spinner .loading-spinner {
    width: 50px;
    height: 50px;
  }
}
/* Modern Search Input Styling */
.sc-overview-search {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background-color: #ffffff;
  transition: all 0.2s ease;
  }
.sc-overview-search:focus {
  outline: none;
  border-color: #2563eb;
  background-color: white;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
  }
/* Override Bootstrap 5 CSS variables */
ul.pagination {
  --bs-pagination-color: #526d95 !important;
  --bs-pagination-bg: #ffffff !important;
  --bs-pagination-border-color: #d5d5d5 !important;
  --bs-pagination-hover-color: #4169aa !important;
  --bs-pagination-hover-bg: #ecf3fb !important;
  --bs-pagination-hover-border-color: #4169aa !important;
  --bs-pagination-active-color: #fff !important;
  --bs-pagination-active-bg: #4169aa !important;
  --bs-pagination-active-border-color: #4169aa !important;
  --bs-pagination-disabled-color: #526d95 !important;
  --bs-pagination-disabled-bg: #f5f5f5 !important;
  --bs-pagination-disabled-border-color: #e5e5e5 !important;
  }
/* 5. Override Bootstrap 5 table defaults */
.table-striped > tbody > tr:nth-of-type(odd) > *,
.table-striped > tbody > tr:nth-of-type(even) > * {
  --bs-table-accent-bg: transparent !important;
  --bs-table-bg-type: transparent !important;
  --bs-table-bg-state: transparent !important;
  }
.sc-dropzone.card-body {
  padding: 0;
  }
.sc-dropzone.card-body .dropzone {
  border: 0;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: repeating-linear-gradient(
 45deg,
 #f9fafb,
 #f9fafb 2px,
 transparent 2px,
 transparent 4px
 );
  }
.sc-dropzone .dz-message p {
  margin-top: 28px;
  }
.sc-dropzone .dz-message span,
.sc-dropzone .dz-message i {
  display: block;
  }
.sc-dropzone .dz-message span {
  padding-top: 1rem;
  font-size: 12px;
  max-width: 260px;
  }
.sc-dropzone .dz-message i {
  color: #335b9e;
  }
.sc-dropzone .dropzone .dz-preview.dz-file-preview .dz-image {
  border-radius: 0.5rem;
  }
.sc-dropzone .dropzone .dz-preview .dz-success-mark {
  background: rgba(116, 181, 116, 0.8);
  }
.sc-dropzone .dropzone .dz-preview .dz-success-mark svg {
  fill: #fff;
  }
/** START DASHBOARD **/

.sc-dashboard-header {
  font-family: "Roboto Condensed", Arial, sans-serif !important;
  text-transform: uppercase;
  }
.sc-dashboard-title {
  color: #235099;
  }
.sc-dashboard-title.container,
.sc-dashboard-goals.container,
.sc-dashboard-tasks.container {
  background: #f7f7f7;
  }
.sc-dashboard-goals .card-header {
  text-align: center;
  }
.sc-dashboard-goals .sc-card {
  box-shadow: 0px 0px 15px -4px rgba(56, 58, 59, 0.5);
  border: 0;
  }
.sc-dashboard-goals .sc-dashboard-goal-content .sc-result-column {
  width: 50%;
  padding: 0;
  text-align: center;
  padding-top: 1.5rem;
  }
.sc-dashboard-goals .sc-card {
  width: 32%;
  }
.sc-dashboard-goals .card-header {
  background-color: #04378b;
  font-family: "Roboto Condensed", Arial, sans-serif !important;
  }
.sc-dashboard-goals .sc-dashboard-goal-content div:first-child {
  border-right: 1px solid #dee2e6;
  }
.sc-dashboard-goal-content {
  width: 100%;
  display: flex;
  flex: 1 1 auto;
  }
.sc-goals-descr {
  font-family: "Roboto Condensed", Arial, sans-serif !important;
  text-transform: uppercase;
  color: #474747;
  margin-bottom: 0.25rem;
  }
.sc-goals-result {
  color: #04378b;
  font-size: 2rem;
  }
.sc-goals-result-indicator {
  background-color: #f7f7f7;
  border-radius: 100%;
  width: 50px;
  height: 50px;
  left: calc(50% - 25px);
  top: calc(50% - 10px);
  }
.sc-goals-result-indicator i {
  font-size: 1.5rem;
  }
.sc-dashboard-calendar {
  background: linear-gradient(
 90deg,
 rgb(255, 255, 255) 0%,
 rgb(246, 246, 246) 100%
 );
  }
.sc-dashboard-calendar h6 {
  font-family: "Roboto Condensed", Arial, sans-serif !important;
  text-transform: uppercase;
  color: #7e7e7e;
  font-size: 0.875rem;
  }
@media screen and (max-width: 767px) {
  .sc-dashboard-goals {
  flex-direction: column;
  }
.sc-dashboard-goals .sc-card {
  width: 100%;
  }

}
/* END DASHBOARD /*

/* SC PLANNING TABLE */

.sc-planning-table-wrapper {
  cursor: pointer;
  }
.sc-planning-table {
  font-size: 8pt;
  width: 100%;
  overflow-x: auto;
  }
.sc-planning-table tbody td {
  padding: 0.1rem;
  }
.sc-planning-table tbody th {
  padding: 0.1rem 0.5rem;
  text-align: left;
  }
.sc-planning-table th {
  padding: 0.1rem;
  text-align: center;
  }
.sc-planning-table.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(216, 216, 216, 0.5);
  }
.sc-planning-table tbody tr td:not(:first-child) {
  text-align: center;
  }
.sc-planning-table.table .thead-dark th {
  background-color: #04378b;
  border-color: #1f4b99;
  }
.sc-planning-table-divider td {
  background: #fff;
  border-color: #fff;
  height: 0.5rem;
  border-bottom-color: #dee2e6;
  }
.sc-db-header-location,
.sc-db-header-displaymode,
.sc-db-header-date {
  color: #808080 !important;
  }
.sticky-column th:first-child,
.sticky-column td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: #f4f4f4;
  }
table.table-fit {
  table-layout: auto !important;
  }
table.table-fit thead th,
table.table-fit tbody td,
table.table-fit tfoot th,
table.table-fit tfoot td {
  width: auto !important;
  }
/** SC DASHBOARD */

#flexpep-dashboard {
  font-family: 'Roboto Condensed', sans-serif;
  }
/* SC DASH CHARTS */
#flexpep-dashboard .chart-box {
  background: #F7F7F7;
  border-radius: 1rem;
  padding: 1.5rem;
  margin-bottom: 2rem;
  }
#flexpep-dashboard .chart-inner {
  background: #ffffff;
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
  padding: 1rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  }
#flexpep-dashboard .chart-title {
  display: flex;
  align-items: center;
  font-size: 1rem;
  color: #04378B;
  margin-bottom: 1rem;
  }
#flexpep-dashboard .chart-title i {
  margin-right: 0.5rem;
  }
#flexpep-dashboard .chart-footer {
  background: #04378B;
  color: #CDE2FA;
  border-bottom-left-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  text-align: center;
  }
#flexpep-dashboard .chart-footer small {
  color: #fff;
  }
#flexpep-dashboard .chart-footer a:hover .fas {
  color: #fff;
  }
/* TIMELINE */
#flexpep-dashboard .timeline {
  position: relative;
  margin-left: 2rem;
  padding-left: 2rem;
  border-left: 2px solid #c7d3ea;
  }
#flexpep-dashboard .timeline::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -2px;
  width: 2px;
  height: 10px;
  background: #fff;
  }
#flexpep-dashboard .timeline-item,
#flexpep-dashboard .timeline-end {
  position: relative;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: flex-start;
  }
#flexpep-dashboard .timeline-icon {
  position: absolute;
  left: -2.8rem;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #c7d3ea;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  z-index: 1;
  }
#flexpep-dashboard .timeline-icon.approved {
  color: #00C48C;
  border-color: #00C48C;
  }
#flexpep-dashboard .timeline-icon.rejected {
  color: #FF647C;
  border-color: #FF647C;
  }
#flexpep-dashboard .timeline-icon.pending {
  color: #04378B;
  border-color: #04378B;
  }
#flexpep-dashboard .timeline-end-icon {
  position: absolute;
  left: -2.4rem;
  top: 0;
  width: 12px;
  height: 12px;
  background: #04378B;
  border-radius: 50%;
  z-index: 1;
  }
#flexpep-dashboard .timeline-content strong {
  color: #04378B;
  }
#flexpep-dashboard .timeline-content u {
  color: #04378B;
  }
#flexpep-dashboard .small-text {
  font-size: 0.8rem;
  color: #A5B4D8;
  margin-top: 0.2rem;
  display: block;
  }
#flexpep-dashboard .timeline-end-content {
  margin-top: -0.3rem;
  }
#flexpep-dashboard .timeline-link {
  font-size: 0.9rem;
  color: #A5B4D8;
  text-decoration: none;
  }
#flexpep-dashboard .timeline-link i {
  font-size: 0.75rem;
  margin-left: 0.3rem;
  }
/* TEMP COLORS - USE STAIRCASE CSS STANDARD COLORS */
#flexpep-dashboard .sc-lightblue {
  color: #A7D0FC;
  }
#flexpep-dashboard .sc-mediumblue {
  color: #4066A5;
  }
/* =====================================================
 BOOTSTRAP 5 TABLE OVERRIDES - Restore BS4 appearance
 ===================================================== */

/* Remove Bootstrap 5 striped table colors */
.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: transparent;
  background-color: transparent;
  }
/* Standard tables without striping */
.table > tbody > tr {
  background-color: transparent;
  }
/* Adjust hover effect to match BS4 */
.table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: rgba(0, 0, 0, 0.075);
  background-color: rgba(0, 0, 0, 0.075);
  }
/* Reset header colors */
.table > thead {
  --bs-table-bg: transparent;
  background-color: transparent;
  }
/* Remove Bootstrap 5 borders */
.table > :not(caption) > * > * {
  border-bottom-width: 0;
  }
/* Restore Bootstrap 4 borders */
.table td,
.table th {
  border-top: 1px solid #dee2e6;
  border-bottom: 0;
  }
.table thead th {
  border-bottom: 2px solid #dee2e6;
  border-top: 0;
  }
/* Fix table color classes to match BS4 */
.table-success {
  --bs-table-bg: #d4edda;
  --bs-table-border-color: #c3e6cb;
  background-color: #d4edda;
  }
.table-danger {
  --bs-table-bg: #f8d7da;
  --bs-table-border-color: #f5c6cb;
  background-color: #f8d7da;
  }
.table-warning {
  --bs-table-bg: #fff3cd;
  --bs-table-border-color: #ffeeba;
  background-color: #fff3cd;
  }
.table-info {
  --bs-table-bg: #d1ecf1;
  --bs-table-border-color: #bee5eb;
  background-color: #d1ecf1;
  }
/* Fix for cell-level color classes in BS5 */
.table td.table-success,
.table th.table-success {
  --bs-table-bg: #d4edda;
  background-color: #d4edda !important;
  }
.table td.table-danger,
.table th.table-danger {
  --bs-table-bg: #f8d7da;
  background-color: #f8d7da !important;
  }
.table td.table-warning,
.table th.table-warning {
  --bs-table-bg: #fff3cd;
  background-color: #fff3cd !important;
  }
.table td.table-info,
.table th.table-info {
  --bs-table-bg: #d1ecf1;
  background-color: #d1ecf1 !important;
  }
/* Ensure background colors are visible on hover too */
.table-hover > tbody > tr:hover td.table-success,
.table-hover > tbody > tr:hover th.table-success {
  --bs-table-bg: #c3e6cb;
  background-color: #c3e6cb !important;
  }
.table-hover > tbody > tr:hover td.table-danger,
.table-hover > tbody > tr:hover th.table-danger {
  --bs-table-bg: #f5c6cb;
  background-color: #f5c6cb !important;
  }
.table-hover > tbody > tr:hover td.table-warning,
.table-hover > tbody > tr:hover th.table-warning {
  --bs-table-bg: #ffeeba;
  background-color: #ffeeba !important;
  }
.table-hover > tbody > tr:hover td.table-info,
.table-hover > tbody > tr:hover th.table-info {
  --bs-table-bg: #bee5eb;
  background-color: #bee5eb !important;
  }
/* Ensure custom row coloring works */
.sc-overview-coloring {
  background-color: inherit !important;
  }
/* Ensure zebra striping is disabled by default */
.table:not(.table-striped) > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: transparent;
  }
/* Override any Bootstrap 5 transparency issues */
.table > tbody > tr > td.table-success,
.table > tbody > tr > td.table-danger,
.table > tbody > tr > td.table-warning,
.table > tbody > tr > td.table-info {
  --bs-table-accent-bg: var(--bs-table-bg);
  }
/* Modern Search Inputs */
.sc-overview-search {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background-color: #ffffff;
  transition: all 0.2s ease;
  }
.sc-overview-search:focus {
  outline: none;
  border-color: #2563eb;
  background-color: white;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
  }
/* Ensure sc-btn-action has no borders */
.btn.sc-btn-action {
  border: none !important;
  border-width: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
  }
.btn.sc-btn-action:focus,
.btn.sc-btn-action:active,
.btn.sc-btn-action:hover {
  border: none !important;
  outline: none !important;
  }
/* Override Bootstrap CSS variables for outline buttons */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-light,
.btn-outline-dark {
  --bs-btn-border-width: 0 !important;
  --bs-btn-border-color: transparent !important;
  --bs-btn-hover-border-color: transparent !important;
  --bs-btn-focus-shadow-rgb: none !important;
  --bs-btn-active-border-color: transparent !important;
  --bs-btn-disabled-border-color: transparent !important;
  }
/* Fix for Bootstrap table classes that might override */
table.table td,
table.table th,
.table td,
.table th {
  vertical-align: middle !important;
  }
/* Bootstrap Table Override für maximale Kompatibilität */
.table-middle > tbody > tr > td,
.table-middle > tbody > tr > th,
.table-middle > tfoot > tr > td,
.table-middle > tfoot > tr > th,
.table-middle > thead > tr > td,
.table-middle > thead > tr > th {
  vertical-align: middle !important;
  }
/* Fix for inline styles or other overrides */
input.sc-overview-search[style*="border-radius: 0"] {
  border-radius: 0.375rem !important;
  }
/* Force with attribute selector */
input[class*="sc-overview-search"] {
  border-radius: 0.375rem !important;
  }
/* Override any inline styles */
input.sc-overview-search[style] {
  border-radius: 0.375rem !important;
  }
/* Nuclear option - use CSS variables */
.sc-overview-search {
  --bs-border-radius: 0.375rem !important;
  border-radius: var(--bs-border-radius) !important;
  }
hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  }
/* ENHANCED PANEL STYLES */

/* Panel Type Icons - Different icons for different panel types */
.sc-panel-address i.fa-chevron-right::before {
  content: '\f015';
  /* House icon for address */
 font-family: 'Font Awesome 6 Pro';
  }
.sc-panel-contact i.fa-chevron-right::before {
  content: '\f2b9';
  /* Address card icon for contact */
 font-family: 'Font Awesome 6 Pro';
  }
.sc-panel-database i.fa-chevron-right::before {
  content: '\f1c0';
  /* Database icon */
 font-family: 'Font Awesome 6 Pro';
  }
.sc-panel-settings i.fa-chevron-right::before {
  content: '\f013';
  /* Cog icon for settings */
 font-family: 'Font Awesome 6 Pro';
  }
/* Smooth collapse animation */
.collapse {
  transition: height 0.35s ease;
  }
.collapsing {
  transition: height 0.35s ease;
  }
/* Active panel indicator */
.card-header.active {
  background-color: #e7f3ff !important;
  border-left: 3px solid #04378b;
  }
/* Panel Group Styling */
.panel-group .card {
  margin-bottom: 1rem;
  }
.panel-group .card:last-child {
  margin-bottom: 0;
  }
/* Mobile Responsive Panels */
@media screen and (max-width: 767px) {
  .sc-panel-title {
  font-size: 14px;
  }
div.card-header {
  padding: 0.5rem 1rem;
  }
.card-body {
  padding: 1rem;
  }

}
/* Panel Loading State */
.card-loading {
  position: relative;
  opacity: 0.6;
  pointer-events: none;
  }
.card-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #04378b;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  }
@keyframes spin {
  0% {
  transform: translate(-50%, -50%) rotate(0deg);
  }
100% {
  transform: translate(-50%, -50%) rotate(360deg);
  }
}
/* Panel Status Indicators */
.card-header.panel-success {
  border-left: 3px solid #28a745;
  }
.card-header.panel-warning {
  border-left: 3px solid #ffc107;
  }
.card-header.panel-error {
  border-left: 3px solid #dc3545;
  }
/* Panel Counter Badge */
.sc-panel-title .badge {
  background-color: #04378b;
  color: white;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 0.5rem;
  }
/* Nested Panels */
.card .card {
  box-shadow: none;
  border: 1px solid #dee2e6;
  }
.card .card .card-header {
  background-color: #fcfcfc;
  padding: 0.5rem 1rem;
  }
/* Panel Actions */
.card-header .panel-actions {
  float: right;
  margin-top: -2px;
  }
.card-header .panel-actions a {
  color: #6c757d;
  margin-left: 0.5rem;
  font-size: 14px;
  transition: color 0.2s;
  }
.card-header .panel-actions a:hover {
  color: #04378b;
  }
@media (max-width: 768px) {
  .select2-dropdown {
  max-width: calc(100vw - 40px) !important;
  left: 10px !important;
  right: 10px !important;
  }

}
/* Button neben Select2 - Dezentes Design */
.btn.button_open_overview,
button.button_open_overview.btn {
  height: 38px !important;
  width: 38px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  border-radius: 0.25rem !important;
  background-color: #f8f9fa !important;
  /* Light gray background */
 border: 1px solid #dee2e6 !important;
  /* Subtle border */
 color: #6c757d !important;
  /* Gray icon color */
 font-size: 14px !important;
  line-height: 1 !important;
  transition: all 0.15s ease-in-out !important;
  }
.btn.button_open_overview:hover,
button.button_open_overview.btn:hover {
  background-color: #e9ecef !important;
  border-color: #adb5bd !important;
  color: #495057 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
  }
.btn.button_open_overview:active,
button.button_open_overview.btn:active {
  background-color: #dee2e6 !important;
  box-shadow: none !important;
  }
.btn.button_open_overview:focus,
button.button_open_overview.btn:focus {
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25) !important;
  }
.button_open_overview i {
  font-size: 14px !important;
  color: inherit !important;
  }
/* Abstand zwischen Select2 und Button */
.d-flex .button_open_overview {
  margin-left: 8px;
  }
/* ========================================
 MODUL-HEADER OPTIMIERUNGEN 
 Reduziert Abstände zwischen Titel und Tabs
 ======================================== */

/* Kompakterer Modul-Header */
#sc-header h1 {
  margin-bottom: 0.25rem !important;
  /* Minimaler Abstand nach unten */
 line-height: 1.2;
  }
/* Tabs direkt nach Header - weniger Abstand */
.nav-tabs.sc-tabs {
  margin-top: 0.5rem !important;
  padding-top: 0 !important;
  }
/* Tab-Content ohne zusätzliche Abstände */
.tab-content {
  margin-top: 0 !important;
  padding-top: 0rem !important;
  }
/* Breadcrumb kompakter */
.breadcrumb {
  margin-bottom: 0.5rem !important;
  padding: 0.25rem 0 !important;
  }
/* Wenn Header + Tabs zusammen vorkommen */
.has-tabs + .nav-tabs,
#sc-header + .nav-tabs {
  margin-top: 0.75rem !important;
  }
/* Mobile Anpassungen */
@media screen and (max-width: 768px) {
  #sc-header h1 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem !important;
  }
.nav-tabs.sc-tabs {
  margin-top: 0.5rem !important;
  }

}
/* ========================================
 DROPDOWN MENU OPTIMIERUNGEN
 Bessere visuelle Hierarchie für Submenüs
 ======================================== */

/* Dropdown Toggle (Weitere Daten) - dezenter als normale Tabs */
.sc-tabs .nav-item.dropdown .dropdown-toggle {
  font-weight: 400 !important;
  /* Weniger prominent */
}
/* Dropdown-Menü selbst */
.sc-tabs .dropdown-menu {
  border: 1px solid #e9ecef;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  min-width: 220px;
  }
/* Visuelle Trennung zwischen Dropdown-Items */
.sc-tabs .dropdown-menu .dropdown-divider {
  margin: 0.25rem 0;
  border-color: #f0f0f0;
  }
/* Hover-Effekt subtiler */
.sc-tabs .dropdown-menu .dropdown-item {
  letter-spacing: 0.01em;
  }
/* Aktives Dropdown-Item - Checkmark hinzufügen */
.sc-tabs .dropdown-menu .dropdown-item.active::before {
  content: "\f00c";
  /* Font Awesome checkmark */
 font-family: "Font Awesome 6 Pro";
  font-weight: 400;
  position: absolute;
  right: 15px;
  font-size: 0.75rem;
  color: #335b9e;
  }
/* Question mark Icons dezenter */
.sc-tabs .dropdown-menu .dropdown-item i.fa-question {
  color: #6c757d;
  font-size: 0.8rem;
  }
/* Mobile Optimierung */
@media screen and (max-width: 768px) {
  .sc-tabs .dropdown-menu {
  width: 100%;
  border-radius: 0;
  }
.sc-tabs .dropdown-menu .dropdown-item {
  padding: 12px 16px;
  }

}
/* Icon Animations */
@keyframes pulse {
  0% {
  transform: scale(1);
  }
50% {
  transform: scale(1.05);
  }
100% {
  transform: scale(1);
  }

}
/* Responsive Modal */
@media (max-width: 576px) {
  .modal-dialog {
  margin: 1rem;
  max-width: calc(100% - 2rem);
  }

}

/* Ensure contrast for all delete buttons */
.btn-danger.deleteConfirm {
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
  color: #ffffff !important;
  opacity: 1 !important;
  }
.sc-overview-hr::after {
  content: '';
  position: absolute;
  left: 15px;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  height: 1px;
  background: linear-gradient(to right, 
 rgba(0,0,0,0) 0%, 
 rgba(0,0,0,0.15) 10%, 
 rgba(0,0,0,0.15) 90%, 
 rgba(0,0,0,0) 100%);
  }
/* Alternative approach if the above doesn't work */
.sc-overview-not-mobile {
  align-items: flex-end !important;
  }
/* Also ensure the table itself has no top margin */
.sc-overview-table table {
  margin-top: 0 !important;
  }
@keyframes fadeIn {
  from {
  opacity: 0;
  transform: translateY(20px);
  }
to {
  opacity: 1;
  transform: translateY(0);
  }

}
/* Forgot Password Link */
.forgot-password {
  margin-top: 16px;
  }
.forgot-password a {
  color: #6c757d;
  font-size: 14px;
  transition: color 0.2s ease;
  }
.forgot-password a:hover {
  color: #04378b;
  text-decoration: none;
  }
.footer-links {
  margin-bottom: 10px;
  }
.footer-links a {
  color: #6c757d;
  font-size: 12px;
  text-decoration: none;
  transition: color 0.2s ease;
  display: inline-block;
  margin: 4px 0;
  }
.footer-links a:hover {
  color: #04378b;
  }
.footer-links .separator {
  color: #dee2e6;
  margin: 0 8px;
  font-size: 10px;
  display: none;
  }
.copyright {
  color: #adb5bd;
  font-size: 11px;
  }

@keyframes spin {
  from {
  transform: rotate(0deg);
  }
to {
  transform: rotate(360deg);
  }

}

/* Ensure proper mobile layout for multiselect */
/* Ensure proper mobile layout for multiselect */
@media (max-width: 767px) {
  .sc-field .d-flex.align-items-stretch {
  flex-direction: column;
  }
.sc-field .d-flex.align-items-stretch > select {
  width: 100% !important;
  margin-bottom: 10px;
  }
.sc-field .d-flex.align-items-stretch > .d-flex.flex-column {
  flex-direction: row !important;
  justify-content: center;
  width: 100%;
  margin: 10px 0;
  }
.sc-field .d-flex.align-items-stretch > .d-flex.flex-column button {
  margin: 0 5px !important;
  }

}
/* Panel Status Indicators */
.card-header.panel-success {
  border-left: 3px solid #28a745;
  }
.card-header.panel-warning {
  border-left: 3px solid #ffc107;
  }
.card-header.panel-error {
  border-left: 3px solid #dc3545;
  }
/* Panel Counter Badge */
.sc-panel-title .badge {
  background-color: #04378b;
  color: white;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 0.5rem;
  }
/* Nested Panels */
.card .card {
  box-shadow: none;
  border: 1px solid #dee2e6;
  }
.card .card .card-header {
  background-color: #fcfcfc;
  padding: 0.5rem 1rem;
  }
/* Panel Actions */
.card-header .panel-actions {
  float: right;
  margin-top: -2px;
  }
.card-header .panel-actions a {
  color: #6c757d;
  margin-left: 0.5rem;
  font-size: 14px;
  transition: color 0.2s;
  }
.card-header .panel-actions a:hover {
  color: #04378b;
  }
@media (max-width: 768px) {
  .select2-dropdown {
  max-width: calc(100vw - 40px) !important;
  left: 10px !important;
  right: 10px !important;
  }

}
/* Button neben Select2 - Dezentes Design */
.btn.button_open_overview,
button.button_open_overview.btn {
  height: 38px !important;
  width: 38px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  border-radius: 0.25rem !important;
  background-color: #f8f9fa !important;
  /* Light gray background */
 border: 1px solid #dee2e6 !important;
  /* Subtle border */
 color: #6c757d !important;
  /* Gray icon color */
 font-size: 14px !important;
  line-height: 1 !important;
  transition: all 0.15s ease-in-out !important;
  }
.btn.button_open_overview:hover,
button.button_open_overview.btn:hover {
  background-color: #e9ecef !important;
  border-color: #adb5bd !important;
  color: #495057 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
  }
.btn.button_open_overview:active,
button.button_open_overview.btn:active {
  background-color: #dee2e6 !important;
  box-shadow: none !important;
  }
.btn.button_open_overview:focus,
button.button_open_overview.btn:focus {
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25) !important;
  }
.button_open_overview i {
  font-size: 14px !important;
  color: inherit !important;
  }
/* Abstand zwischen Select2 und Button */
.d-flex .button_open_overview {
  margin-left: 8px;
  }
/* ========================================
 MODUL-HEADER OPTIMIERUNGEN 
 Reduziert Abstände zwischen Titel und Tabs
 ======================================== */

/* Kompakterer Modul-Header */
#sc-header h1 {
  margin-bottom: 0.25rem !important;
  /* Minimaler Abstand nach unten */
 line-height: 1.2;
  }
/* Tabs direkt nach Header - weniger Abstand */
.nav-tabs.sc-tabs {
  margin-top: 0.5rem !important;
  padding-top: 0 !important;
  }
/* Tab-Content ohne zusätzliche Abstände */
.tab-content {
  margin-top: 0 !important;
  padding-top: 0rem !important;
  }
/* Breadcrumb kompakter */
.breadcrumb {
  margin-bottom: 0.5rem !important;
  padding: 0.25rem 0 !important;
  }
/* Wenn Header + Tabs zusammen vorkommen */
.has-tabs + .nav-tabs,
#sc-header + .nav-tabs {
  margin-top: 0.75rem !important;
  }
/* Mobile Anpassungen */
@media screen and (max-width: 768px) {
  #sc-header h1 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem !important;
  }
.nav-tabs.sc-tabs {
  margin-top: 0.5rem !important;
  }

}
/* ========================================
 DROPDOWN MENU OPTIMIERUNGEN
 Bessere visuelle Hierarchie für Submenüs
 ======================================== */

/* Dropdown Toggle (Weitere Daten) - dezenter als normale Tabs */
.sc-tabs .nav-item.dropdown .dropdown-toggle {
  font-weight: 400 !important;
  /* Weniger prominent */
}
/* Dropdown-Menü selbst */
.sc-tabs .dropdown-menu {
  border: 1px solid #e9ecef;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  min-width: 220px;
  }
/* Visuelle Trennung zwischen Dropdown-Items */
.sc-tabs .dropdown-menu .dropdown-divider {
  margin: 0.25rem 0;
  border-color: #f0f0f0;
  }
/* Hover-Effekt subtiler */
.sc-tabs .dropdown-menu .dropdown-item {
  letter-spacing: 0.01em;
  }
/* Aktives Dropdown-Item - Checkmark hinzufügen */
.sc-tabs .dropdown-menu .dropdown-item.active::before {
  content: "\f00c";
  /* Font Awesome checkmark */
 font-family: "Font Awesome 6 Pro";
  font-weight: 400;
  position: absolute;
  right: 15px;
  font-size: 0.75rem;
  color: #335b9e;
  }
/* Question mark Icons dezenter */
.sc-tabs .dropdown-menu .dropdown-item i.fa-question {
  color: #6c757d;
  font-size: 0.8rem;
  }
/* Mobile Optimierung */
@media screen and (max-width: 768px) {
  .sc-tabs .dropdown-menu {
  width: 100%;
  border-radius: 0;
  }
.sc-tabs .dropdown-menu .dropdown-item {
  padding: 12px 16px;
  }

}
/* Icon Animations */
@keyframes pulse {
  0% {
  transform: scale(1);
  }
50% {
  transform: scale(1.05);
  }
100% {
  transform: scale(1);
  }

}
/* Responsive Modal */
@media (max-width: 576px) {
  .modal-dialog {
  margin: 1rem;
  max-width: calc(100% - 2rem);
  }

}

/* Ensure contrast for all delete buttons */
.btn-danger.deleteConfirm {
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
  color: #ffffff !important;
  opacity: 1 !important;
  }
.sc-overview-hr::after {
  content: '';
  position: absolute;
  left: 15px;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  height: 1px;
  background: linear-gradient(to right, 
 rgba(0,0,0,0) 0%, 
 rgba(0,0,0,0.15) 10%, 
 rgba(0,0,0,0.15) 90%, 
 rgba(0,0,0,0) 100%);
  }
/* Alternative approach if the above doesn't work */
.sc-overview-not-mobile {
  align-items: flex-end !important;
  }
/* Also ensure the table itself has no top margin */
.sc-overview-table table {
  margin-top: 0 !important;
  }
@keyframes fadeIn {
  from {
  opacity: 0;
  transform: translateY(20px);
  }
to {
  opacity: 1;
  transform: translateY(0);
  }

}
/* Forgot Password Link */
.forgot-password {
  margin-top: 16px;
  }
.forgot-password a {
  color: #6c757d;
  font-size: 14px;
  transition: color 0.2s ease;
  }
.forgot-password a:hover {
  color: #04378b;
  text-decoration: none;
  }
.footer-links {
  margin-bottom: 10px;
  }
.footer-links a {
  color: #6c757d;
  font-size: 12px;
  text-decoration: none;
  transition: color 0.2s ease;
  display: inline-block;
  margin: 4px 0;
  }
.footer-links a:hover {
  color: #04378b;
  }
.footer-links .separator {
  color: #dee2e6;
  margin: 0 8px;
  font-size: 10px;
  display: none;
  }
.copyright {
  color: #adb5bd;
  font-size: 11px;
  }

@keyframes spin {
  from {
  transform: rotate(0deg);
  }
to {
  transform: rotate(360deg);
  }

}

/* Ensure proper mobile layout for multiselect */
/* Ensure proper mobile layout for multiselect */
@media (max-width: 767px) {
  .sc-field .d-flex.align-items-stretch {
  flex-direction: column;
  }
.sc-field .d-flex.align-items-stretch > select {
  width: 100% !important;
  margin-bottom: 10px;
  }
.sc-field .d-flex.align-items-stretch > .d-flex.flex-column {
  flex-direction: row !important;
  justify-content: center;
  width: 100%;
  margin: 10px 0;
  }
.sc-field .d-flex.align-items-stretch > .d-flex.flex-column button {
  margin: 0 5px !important;
  }

}
/* Panel Status Indicators */
.card-header.panel-success {
  border-left: 3px solid #28a745;
  }
.card-header.panel-warning {
  border-left: 3px solid #ffc107;
  }
.card-header.panel-error {
  border-left: 3px solid #dc3545;
  }
/* Panel Counter Badge */
.sc-panel-title .badge {
  background-color: #04378b;
  color: white;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 0.5rem;
  }
/* Nested Panels */
.card .card {
  box-shadow: none;
  border: 1px solid #dee2e6;
  }
.card .card .card-header {
  background-color: #fcfcfc;
  padding: 0.5rem 1rem;
  }
/* Panel Actions */
.card-header .panel-actions {
  float: right;
  margin-top: -2px;
  }
.card-header .panel-actions a {
  color: #6c757d;
  margin-left: 0.5rem;
  font-size: 14px;
  transition: color 0.2s;
  }
.card-header .panel-actions a:hover {
  color: #04378b;
  }
@media (max-width: 768px) {
  .select2-dropdown {
  max-width: calc(100vw - 40px) !important;
  left: 10px !important;
  right: 10px !important;
  }

}
/* Button neben Select2 - Dezentes Design */
.btn.button_open_overview,
button.button_open_overview.btn {
  height: 38px !important;
  width: 38px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  border-radius: 0.25rem !important;
  background-color: #f8f9fa !important;
  /* Light gray background */
 border: 1px solid #dee2e6 !important;
  /* Subtle border */
 color: #6c757d !important;
  /* Gray icon color */
 font-size: 14px !important;
  line-height: 1 !important;
  transition: all 0.15s ease-in-out !important;
  }
.btn.button_open_overview:hover,
button.button_open_overview.btn:hover {
  background-color: #e9ecef !important;
  border-color: #adb5bd !important;
  color: #495057 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
  }
.btn.button_open_overview:active,
button.button_open_overview.btn:active {
  background-color: #dee2e6 !important;
  box-shadow: none !important;
  }
.btn.button_open_overview:focus,
button.button_open_overview.btn:focus {
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25) !important;
  }
.button_open_overview i {
  font-size: 14px !important;
  color: inherit !important;
  }
/* Abstand zwischen Select2 und Button */
.d-flex .button_open_overview {
  margin-left: 8px;
  }
/* ========================================
 MODUL-HEADER OPTIMIERUNGEN 
 Reduziert Abstände zwischen Titel und Tabs
 ======================================== */

/* Kompakterer Modul-Header */
#sc-header h1 {
  margin-bottom: 0.25rem !important;
  /* Minimaler Abstand nach unten */
 line-height: 1.2;
  }
/* Tabs direkt nach Header - weniger Abstand */
.nav-tabs.sc-tabs {
  margin-top: 0.5rem !important;
  padding-top: 0 !important;
  }
/* Tab-Content ohne zusätzliche Abstände */
.tab-content {
  margin-top: 0 !important;
  padding-top: 0rem !important;
  }
/* Breadcrumb kompakter */
.breadcrumb {
  margin-bottom: 0.5rem !important;
  padding: 0.25rem 0 !important;
  }
/* Wenn Header + Tabs zusammen vorkommen */
.has-tabs + .nav-tabs,
#sc-header + .nav-tabs {
  margin-top: 0.75rem !important;
  }
/* Mobile Anpassungen */
@media screen and (max-width: 768px) {
  #sc-header h1 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem !important;
  }
.nav-tabs.sc-tabs {
  margin-top: 0.5rem !important;
  }

}
/* ========================================
 DROPDOWN MENU OPTIMIERUNGEN
 Bessere visuelle Hierarchie für Submenüs
 ======================================== */

/* Dropdown Toggle (Weitere Daten) - dezenter als normale Tabs */
.sc-tabs .nav-item.dropdown .dropdown-toggle {
  font-weight: 400 !important;
  /* Weniger prominent */
}
/* Dropdown-Menü selbst */
.sc-tabs .dropdown-menu {
  border: 1px solid #e9ecef;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  min-width: 220px;
  }
/* Visuelle Trennung zwischen Dropdown-Items */
.sc-tabs .dropdown-menu .dropdown-divider {
  margin: 0.25rem 0;
  border-color: #f0f0f0;
  }
/* Hover-Effekt subtiler */
.sc-tabs .dropdown-menu .dropdown-item {
  letter-spacing: 0.01em;
  }
/* Aktives Dropdown-Item - Checkmark hinzufügen */
.sc-tabs .dropdown-menu .dropdown-item.active::before {
  content: "\f00c";
  /* Font Awesome checkmark */
 font-family: "Font Awesome 6 Pro";
  font-weight: 400;
  position: absolute;
  right: 15px;
  font-size: 0.75rem;
  color: #335b9e;
  }
/* Question mark Icons dezenter */
.sc-tabs .dropdown-menu .dropdown-item i.fa-question {
  color: #6c757d;
  font-size: 0.8rem;
  }
/* Mobile Optimierung */
@media screen and (max-width: 768px) {
  .sc-tabs .dropdown-menu {
  width: 100%;
  border-radius: 0;
  }
.sc-tabs .dropdown-menu .dropdown-item {
  padding: 12px 16px;
  }

}
/* Icon Animations */
@keyframes pulse {
  0% {
  transform: scale(1);
  }
50% {
  transform: scale(1.05);
  }
100% {
  transform: scale(1);
  }

}
/* Responsive Modal */
@media (max-width: 576px) {
  .modal-dialog {
  margin: 1rem;
  max-width: calc(100% - 2rem);
  }

}

/* Ensure contrast for all delete buttons */
.btn-danger.deleteConfirm {
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
  color: #ffffff !important;
  opacity: 1 !important;
  }
.sc-overview-hr::after {
  content: '';
  position: absolute;
  left: 15px;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  height: 1px;
  background: linear-gradient(to right, 
 rgba(0,0,0,0) 0%, 
 rgba(0,0,0,0.15) 10%, 
 rgba(0,0,0,0.15) 90%, 
 rgba(0,0,0,0) 100%);
  }
/* Alternative approach if the above doesn't work */
.sc-overview-not-mobile {
  align-items: flex-end !important;
  }
/* Also ensure the table itself has no top margin */
.sc-overview-table table {
  margin-top: 0 !important;
  }
@keyframes fadeIn {
  from {
  opacity: 0;
  transform: translateY(20px);
  }
to {
  opacity: 1;
  transform: translateY(0);
  }

}
/* Forgot Password Link */
.forgot-password {
  margin-top: 16px;
  }
.forgot-password a {
  color: #6c757d;
  font-size: 14px;
  transition: color 0.2s ease;
  }
.forgot-password a:hover {
  color: #04378b;
  text-decoration: none;
  }
.footer-links {
  margin-bottom: 10px;
  }
.footer-links a {
  color: #6c757d;
  font-size: 12px;
  text-decoration: none;
  transition: color 0.2s ease;
  display: inline-block;
  margin: 4px 0;
  }
.footer-links a:hover {
  color: #04378b;
  }
.footer-links .separator {
  color: #dee2e6;
  margin: 0 8px;
  font-size: 10px;
  display: none;
  }
.copyright {
  color: #adb5bd;
  font-size: 11px;
  }

@keyframes spin {
  from {
  transform: rotate(0deg);
  }
to {
  transform: rotate(360deg);
  }

}

/* Ensure proper mobile layout for multiselect */
/* Ensure proper mobile layout for multiselect */
@media (max-width: 767px) {
  .sc-field .d-flex.align-items-stretch {
  flex-direction: column;
  }
.sc-field .d-flex.align-items-stretch > select {
  width: 100% !important;
  margin-bottom: 10px;
  }
.sc-field .d-flex.align-items-stretch > .d-flex.flex-column {
  flex-direction: row !important;
  justify-content: center;
  width: 100%;
  margin: 10px 0;
  }
.sc-field .d-flex.align-items-stretch > .d-flex.flex-column button {
  margin: 0 5px !important;
  }

}

  /* Fix für Checkbox-Layout in Cards - Root Cause: zu kleine Columns und abgeschnittener Text */
.card-body .sc-field.col-md-3 {
  min-width: 200px;
  flex: 0 0 auto;
  }

/* =====================================================
   RESPONSIVE: Header Quick Action Buttons
   Bei ≤1400px: Button-Text ausblenden, nur Icons
   ===================================================== */
@media (max-width: 1400px) {
    /* Buttons kompakter machen (nur Icon) */
    .sc-header-center .btn,
    .sc-header-center button {
        min-width: 36px !important;
        width: 36px !important;
        max-width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        font-size: 0 !important; /* Text unsichtbar durch font-size 0 */
        overflow: hidden !important;
    }
    
    /* Icon zentrieren und normal groß machen */
    .sc-header-center .btn i,
    .sc-header-center button i {
        margin: 0 auto !important;
        padding: 0 !important;
        font-size: 1rem !important; /* Icon normal groß */
        display: block !important;
        text-align: center !important;
    }
}