:root {
  --bg-color: hsl(210, 0%, 16%);
  --text-color: hsl(210, 20%, 90%);
  --color-primary: hsl(212, 77%, 54%);
  --outline-color: hsl(212, 50%, 60%);

  --button-bg: linear-gradient(to right, hsl(210, 0%, 26%), hsl(210, 0%, 20%));
  --button-bg-box-shadow-color: rgba(0, 0, 0, 0.5);

  --button-bg-primary: linear-gradient(to right, hsl(212, 77%, 54%), hsl(212, 77%, 44%));
  --button-bg-primary-box-shadow-color: hsla(212, 77%, 54%, 0.4);

  --button-bg-secondary: linear-gradient(to right, hsl(260, 47%, 55%), hsl(265, 67%, 45%));
  --button-bg-secondary-box-shadow-color: hsla(212, 40%, 35%, 0.4);

  --button-bg-danger: linear-gradient(to right, hsl(0, 70%, 50%), hsl(0, 60%, 40%));
  --button-bg-danger-box-shadow-color: hsla(0, 70%, 40%, 0.4);

  --button-bg-success: linear-gradient(to right, hsl(130, 58%, 40%), hsl(130, 58%, 35%));
  --button-bg-success-box-shadow-color: hsla(130, 58%, 35%, 0.4);

  --button-action-shadow-color: hsla(210, 20%, 5%, 0.3);

  --underline-color: hsl(212, 40%, 65%);
  --secondary-text-color: hsl(210, 10%, 65%);

  --send-icon-hover-color: hsl(212, 77%, 54%);
  --send-spinner-icon-color: hsl(210, 10%, 70%);
  --success-icon-color: hsl(144, 40%, 57%);
  --error-icon-color: hsl(0, 70%, 60%);
  --copy-icon-color: hsl(212, 77%, 54%);
  --copy-icon-bg-color: hsl(210, 0%, 22%);
  --copy-icon-shadow-color: rgba(0, 0, 0, 0.4);

  --focus-outline-color: hsla(212, 77%, 54%, 0.6);
  --checkbox-bg-color: hsl(212, 77%, 54%);

  --input-shadow-color: hsla(210, 20%, 10%, 0.6);
  --input-hover-shadow-color: hsla(210, 20%, 20%, 0.6);
  --input-label-color: hsl(210, 20%, 85%);

  --table-bg-color: hsl(210, 0%, 22%);
  --table-shadow-color: rgba(0, 0, 0, 0.5);
  --table-tr-border-color: hsl(210, 0%, 28%);
  --table-tr-hover-bg-color: hsl(210, 0%, 26%);
  --table-head-tr-border-color: hsl(210, 0%, 32%);
  --table-status-gray-bg-color: hsl(210, 0%, 20%);

  --keyframe-slidey-offset: 0;

  /* Basisfarben */
  --bg-color: hsl(210, 0%, 16%);
  --text-color: hsl(210, 20%, 90%);
  --color-primary: hsl(212, 77%, 54%);
  --color-secondary: hsl(212, 40%, 45%); /* abgedunkeltes Blau statt Lila */

  /* Oberflächenfarben */
  --surface-1: hsl(210, 0%, 20%); /* Standardflächen */
  --surface-2: hsl(210, 0%, 24%); /* Hover-Flächen */
  --surface-3: hsl(210, 0%, 28%); /* Inputs, Dialogboxen */
  --surface-border: hsl(210, 0%, 32%);

  /* Texte */
  --secondary-text-color: hsl(210, 10%, 65%);
  --underline-color: hsl(212, 40%, 65%);
}

button,
a.button {
  background: var(--surface-2);
  color: var(--text-color);
  box-shadow: 0 5px 6px rgba(0,0,0,0.4);
}

button.primary,
a.button.primary {
  background: linear-gradient(to right, var(--color-primary), hsl(212, 77%, 44%));
  color: white;
}

button.secondary,
a.button.secondary {
  background: linear-gradient(to right, var(--color-secondary), hsl(212, 40%, 35%));
  color: white;
}

input[type="text"],
input[type="email"],
input[type="password"],
select {
  background-color: var(--surface-3);
  color: var(--text-color);
  border: 1px solid var(--surface-border);
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

input::placeholder,
select:has(option[value=""]:checked) {
  color: var(--secondary-text-color);
}

table {
  background-color: var(--surface-1);
  color: var(--text-color);
}

table thead,
table tfoot {
  background-color: var(--surface-2);
}

table tr:hover {
  background-color: var(--surface-3);
}

.dialog .box {
  background-color: var(--surface-2);
  color: var(--text-color);
}

button.nav {
  background-color: var(--surface-2);
  color: var(--text-color);
  box-shadow: 0 0px 6px rgba(0,0,0,0.6);
}

button.nav:disabled {
  background-color: var(--surface-1);
  color: var(--secondary-text-color);
  box-shadow: none;
}

input[type="checkbox"] {
  background-color: var(--surface-2);
  border: 1px solid var(--surface-border);
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

input[type="checkbox"]::after {
  background-color: var(--color-primary);
}

a#tab-links,
a#tab-users,
a#tab-domains {
  background: hsl(210, 40%, 22%);   /* leicht helleres Blau als active */
  color: hsl(210, 20%, 85%);
}

a#tab-links.active,
a#tab-users.active,
a#tab-domains.active {
  background: hsl(210, 60%, 28%);   /* satteres dunkleres Blau */
  color: hsl(210, 30%, 95%);
}

span.status.green {
  background-color: hsl(150, 45%, 22%) !important; /* dunkles, sattes Grün */
  color: hsl(120, 20%, 88%) !important;
}

span.status.red {
  background-color: hsl(0, 65%, 28%) !important; /* dunkles Rot */
  color: hsl(0, 20%, 92%) !important;
}

button.action.ban,
button.action.delete {
  background: linear-gradient(to right, hsl(210, 10%, 20%), hsl(210, 10%, 25%));
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  color: hsl(0, 70%, 50%); /* damit die roten SVGs sichtbar bleiben */
}

button.action.ban svg,
button.action.delete svg {
  fill: hsl(0, 70%, 50%); /* rotes Icon bleibt */
}

#main-table-wrapper table tbody td.right-fade:after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 16px;
  background: linear-gradient(
    to left,
    var(--table-bg-color),
    rgba(0, 0, 0, 0) /* transparenter Auslauf */
  );
}