:root {
  --red-bg: #0b131f;
  --red-card: #111c2e;
  --red-ink: #ffffff;
  --red-muted: #8a99ad;
  --red-line: #1e2d42;
  --red-blue: #007bff;
  --red-green: #237a3b;
  --red-orange: #a35d00;
  --red-red: #b3261e;
  --red-grey: #5f6b7a;
}

/* ==========================================================================
   Isoliertes CSS - Wirkt NUR innerhalb unseres App-Containers
   ========================================================================== */

.wp-container-red-standards {
  background: var(--red-bg) !important;
  color: var(--red-ink) !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

/* Überschriften und Texte innerhalb der App */
.wp-container-red-standards h1 {
  margin: 0 0 6px !important;
  font-size: 28px !important;
  color: #fff !important;
}

.wp-container-red-standards p {
  color: var(--red-muted) !important;
  margin-bottom: 1em !important;
}

.wp-container-red-standards a {
  color: #3898ec !important;
}

/* Status-Leiste und Filter-Bar */
.wp-container-red-standards .status, 
.wp-container-red-standards .toolbar {
  margin: 18px 24px;
  background: var(--red-card) !important;
  border: 1px solid var(--red-line) !important;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  gap: 14px 24px;
  flex-wrap: wrap;
  align-items: center;
  color: var(--red-ink) !important;
}

.wp-container-red-standards .toolbar input {
  flex: 1;
  min-width: 320px;
}

/* Eingabefelder (Suche & Dropdowns) */
.wp-container-red-standards .toolbar input, 
.wp-container-red-standards .toolbar select {
  padding: 11px 12px !important;
  border: 1px solid var(--red-line) !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  background-color: #1a2638 !important;
  color: #ffffff !important;
  height: auto !important;
}

.wp-container-red-standards .toolbar input::placeholder {
  color: #66758a !important;
  opacity: 1;
}

/* Buttons */
.wp-container-red-standards button,
.wp-container-red-standards .button {
  display: inline-block !important;
  border: 0 !important;
  background: var(--red-blue) !important;
  color: #fff !important;
  text-decoration: none !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  height: auto !important;
}

.wp-container-red-standards .toolbar button:nth-of-type(1) {
  background: var(--red-grey) !important;
}

.wp-container-red-standards .toolbar button:nth-of-type(2) {
  background: var(--red-green) !important;
}

/* Tabellen-Wrapper */
.wp-container-red-standards .tablewrap {
  margin: 18px 24px 36px;
  background: var(--red-card) !important;
  border: 1px solid var(--red-line) !important;
  border-radius: 12px;
  overflow: auto;
}

.wp-container-red-standards table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 12px !important;
  background: transparent !important;
  margin: 0 !important;
}

.wp-container-red-standards th, 
.wp-container-red-standards td {
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--red-line) !important;
  text-align: left !important;
  vertical-align: top !important;
}

/* Tabellenkopf */
.wp-container-red-standards th {
  position: sticky !important;
  top: 0 !important;
  background: #16253b !important;
  color: #ffffff !important;
  cursor: pointer;
  z-index: 1;
  white-space: normal !important;
}

.wp-container-red-standards td {
  color: #ffffff !important;
}

.wp-container-red-standards tr:hover td {
  background: #17263d !important;
}

/* Spaltenbreiten */
.wp-container-red-standards .standard {
  font-weight: 700 !important;
  min-width: 150px !important;
  max-width: 280px !important;
  white-space: normal !important;
  color: #ffffff !important;
}

.wp-container-red-standards .provision {
  min-width: 150px !important;
  max-width: 280px !important;
  white-space: normal !important;
  color: #ced4da !important;
}

.wp-container-red-standards .narrow-col, 
.wp-container-red-standards table th.narrow-col, 
.wp-container-red-standards table td:nth-child(n+5) {
  max-width: 85px !important;
  word-wrap: break-word !important;
}

/* Badges für den Status */
.wp-container-red-standards .badge {
  display: inline-block !important;
  border-radius: 999px !important;
  padding: 4px 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  background: #212f45 !important;
  color: #a3b2c6 !important;
  white-space: nowrap !important;
}

.wp-container-red-standards .badge.active {
  background: #19422b !important;
  color: #72f299 !important;
}

.wp-container-red-standards .badge.withdrawal-scheduled {
  background: #5c3a00 !important;
  color: #ffb84d !important;
}

.wp-container-red-standards .badge.withdrawn {
  background: #5c1916 !important;
  color: #ff9494 !important;
}

/* Meldungen */
.wp-container-red-standards .message {
  margin: 24px;
  background: var(--red-card) !important;
  border: 1px solid var(--red-line) !important;
  border-radius: 12px;
  padding: 24px;
}

.wp-container-red-standards code {
  background: #1a2638 !important;
  padding: 2px 5px !important;
  border-radius: 4px;
  color: #ff8585 !important;
}

@media(max-width: 800px) {
  .wp-container-red-standards .toolbar input {
    min-width: 100% !important;
  }
}