body {
  font-family: "Nunito Sans", sans-serif !important;
  background-color: #f7f8fc;
  color: #1a1a1a;
  line-height: 1.6;
}

/* Header immer über normalem Inhalt */
.ir-nav,
.ir-nav .dropdown-menu,
.submenu {
  z-index: 2000 !important;
}

.modal-backdrop {
  z-index: 3000 !important;
}

.modal {
  z-index: 3050 !important;
  position: fixed !important;
  top: 0; left: 0; width: 100%;
}

.modal-dialog,
.modal-content {
  z-index: 3060 !important;
  border-radius: 12px;
  overflow: hidden;
}

/* Modal Header wie Card Header */
.modal-header {
  background: linear-gradient(90deg, #2c335a, #1e212e);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.15);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  padding: 1rem 1.25rem;
}
.modal-header .modal-title,
.modal-header i {
  color: #fff;
  font-weight: 600;
}
.modal-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 0.9;
}
.modal-header .btn-close:hover {
  opacity: 1;
}

a.dropdown-item i {
  width: 18px;
  margin-right: 0.4rem;
  text-align: center;
}

.badge.rounded-pill {
  padding: 4px 8px;
  font-weight: 600;
}

@media (min-width: 992px) {
  #topnav .navigation-menu.nav-light > li > a,
  #topnav .navigation-menu.nav-light > li > a:hover,
  #topnav .navigation-menu.nav-light > li.active > a {
    color: unset !important;
  }

  #topnav .navigation-menu.nav-light .has-submenu.active .menu-arrow {
    border-color: #35404e !important;
  }
}

footer {
  max-width: unset;
  margin: unset;
}

.page-main {
  margin-top: 120px;
}

/* --- Cards --- */
.card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.08) !important;
  background: #fff;
}

.card.card-table table {
  margin-bottom: 0;
  border-color: transparent;
}

.card.card-table table thead,
.card.card-table table tbody tr:not(:last-child) {
  border-bottom: 1px solid rgba(0,0,0,.08);
}

/* --- Card-Header mit Verlauf --- */
.card-header,
.card.card-table table thead tr {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.15);
  padding: 1rem 1.25rem;
  color: #fff;
  background: linear-gradient(90deg, #2c335a, #1e212e);
}

.card-header h5,
.card-header i,
.card.card-table table thead tr th {
  color: #fff;
}

/* Tabellen-Zellen */
.card.card-table table thead tr th {
  padding: 18px 26px;
  font-size: 1rem;
  font-weight: 600;
}

.card.card-table table tbody tr td {
  padding: 18px 26px;
}

/* --- Buttons --- */
.btn {
  border-radius: 10px;
  font-weight: 600;
  padding: 10px 22px;
  font-size: 15px;
  border: none;
}

/* Primary mit Farbverlauf */
.btn-primary {
  background: linear-gradient(90deg, #586BF2, #7587FD);
  color: #fff;
  box-shadow: 0 6px 16px rgba(88, 107, 242, .35);
}
.btn-primary:disabled,
.btn-primary.disabled {
  background: linear-gradient(90deg, #a3adfb, #c1c9ff);
  color: #eaeaea;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.8;
}

/* Secondary */
.btn-secondary {
  background: #f0f1f5;
  color: #2c335a;
  box-shadow: 0 3px 10px rgba(0,0,0,.06);
}
.btn-secondary:disabled,
.btn-secondary.disabled {
  background: #f3f4f6;
  color: #aaa;
  box-shadow: none;
  opacity: 0.7;
  cursor: not-allowed;
}

/* --- Dropdown --- */
.ir-btn.dropdown-toggle {
  background: linear-gradient(90deg, #586BF2, #7587FD);
  color: #fff;
  border-radius: 10px;
  font-weight: 600;
  padding: 10px 18px;
  border: none;
  box-shadow: 0 6px 16px rgba(88, 107, 242, .35);
}
.ir-btn.dropdown-toggle i {
  margin-right: 0.4rem;
}

.dropdown-menu.dd-menu {
  min-width: 250px;
  border: none;
  border-radius: 12px;
  padding: .5rem 0;
  background: rgba(30, 33, 46, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
}

.dropdown-menu.dd-menu .dropdown-divider {
  border-color: rgba(255,255,255,.08);
  margin: .5rem 0;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1rem;
  color: #f5f6fa;
  font-size: .95rem;
  font-weight: 500;
}
.dropdown-item i {
  width: 20px;
  text-align: center;
  color: #7587FD;
}
.dropdown-item .badge {
  margin-left: auto;
  font-size: .75rem;
  background: #f05d27;
  color: #fff;
  border-radius: 999px;
  padding: 4px 8px;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: rgba(88, 107, 242, .15);
  color: #fff;
  text-decoration: none;
}
.dropdown-item.hover-danger {
  color: #f05d27;
}
.dropdown-item.hover-danger i {
  color: #f05d27;
}
.dropdown-item.hover-danger:hover {
  background: rgba(240, 93, 39, .15);
  color: #f05d27;
}

/* --- Submenu Items --- */
.sub-menu-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1rem;
  font-size: .95rem;
  font-weight: 500;
  color: #f5f6fa !important;
  border-radius: 8px;
}
.sub-menu-item i {
  width: 20px;
  text-align: center;
  color: #7587FD;
}
.sub-menu-item:hover,
.sub-menu-item:focus {
  background: rgba(88,107,242,.15);
  color: #fff !important;
  text-decoration: none;
}

/* --- Dashboard Cards --- */
.hw-dashboard {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.hw-dashboard > .col-md {
  flex: 1 1 calc(25% - 1.25rem); /* 4 pro Reihe */
  max-width: calc(25% - 1.25rem);
}

@media (max-width: 991.98px) {
  .hw-dashboard > .col-md {
    flex: 1 1 calc(50% - 1rem); /* 2 pro Reihe auf Tablet */
    max-width: calc(50% - 1rem);
  }
}
@media (max-width: 575.98px) {
  .hw-dashboard > .col-md {
    flex: 1 1 100%; /* 1 pro Reihe auf Mobile */
    max-width: 100%;
  }
}

.hw-icon-card {
  position: relative;
  overflow: hidden;
  background: #191c29; /* Einfarbig dunkel */
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  color: #fff;
  text-align: center;
  height: 100%;
}

.hw-icon-card .card-body {
  position: relative;
  z-index: 2;
  padding: 1.5rem 1rem;
}

.hw-icon-card i {
  font-size: 2rem;
  color: #7587FD;
  margin-bottom: .75rem;
  display: block;
}

.hw-icon-card h3 {
  font-size: 1.6rem;
  margin: 0;
  font-weight: 700;
  color: #fff;
}

.hw-icon-card h5 {
  font-size: .95rem;
  margin-top: .25rem;
  font-weight: 500;
  color: rgba(255,255,255,.85);
}

/* Wasserzeichen-Icon */
.hw-icon-card::before {
  content: attr(data-icon);
  font-family: "Font Awesome 5 Pro"; /* anpassen an deine Icon-Font */
  position: absolute;
  font-size: 5rem;
  line-height: 1;
  color: rgba(255,255,255,.06);
  right: 10px;
  bottom: 10px;
  z-index: 1;
  pointer-events: none;
}

.hw-icon-card .card-footer {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  padding: .75rem;
  font-size: .85rem;
}
.hw-icon-card .card-footer a {
  color: #7587FD;
  font-weight: 600;
  text-decoration: none;
}

/* Alerts */
.alert {
  position: relative;
  font-size: 1rem;
  border-radius: 10px;
  border: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
.alert > i {
  position: absolute;
  font-size: 48px;
  opacity: 0.1;
  left: 15px;
}

/* Produkt-Seiten Liste */
.hw-product-page-list {
  background-color: #f9faff;
  padding: 16px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
}
.hw-product-page-list a {
  border: none;
  background-color: transparent;
  padding: 12px 16px;
  border-radius: 8px;
}
.hw-product-page-list a.active {
  background: linear-gradient(90deg, #5368f1, #7a8bff);
  color: #fff !important;
  font-weight: 600;
}

/* Badges */
.badge {
  font-size: 0.75em;
  font-weight: 600;
}
h2 .badge {
  padding: 8px 14px;
}

/* Farben */
.text-bg-primary { background-color: #5368f1 !important; }
.text-bg-success { background-color: #6fda63 !important; }
.text-bg-warning { background-color: #ffbb44 !important; }
.text-bg-danger  { background-color: #f05d27 !important; }
.progress-bar    { background-color: #5368f1 !important; }

/* Inputs & Forms */
input, .form-control {
  font-family: "Nunito Sans", sans-serif;
  font-size: 15px;
  border-radius: 8px;
}

#topnav .navigation-menu > li .submenu li h6 {
  padding: 7px 20px;
  font-weight: 700;
  color: #5368f1;
}

/* ApexCharts Anpassung */
.apexcharts-text tspan,
.apexcharts-legend-text,
.apexcharts-tooltip-text {
  font-family: "Nunito Sans", sans-serif!important;
}