:root {
  /* === BRAND COLORS === */
  --primary: #CCFF00;
  --primary-light: #D9E85B;
  --primary-dark: #A4C400;

  /* === SECONDARY (Anthrazit-Blau HSL 220 20% 20%) === */
  --secondary: #282C35;
  --secondary-light: #46505C;
  --secondary-dark: #181B21;
  
  /* === ACCENT COLORS === */
  --accent-1: #00FFC8;
  --accent-1-light: #99FFE6;
  --accent-1-dark: #00CC9E;

  --accent-2: #FF00A8;
  --accent-2-light: #FF99D9;
  --accent-2-dark: #CC0085; 

  /* === BACKGROUND & SURFACE === */
  --background: #FFFFFF;
  --white: #FFFFFF;
  --black: #000000;

  /* === TEXT COLORS === */
  --text-primary: #000000;
  --text-muted: #6C757D;
  --text-inverse: #FFFFFF;

  /* === Neutral Colors === */
  --neutral-50:  #f9f9f9;
  --neutral-100: #f0f0f0;
  --neutral-200: #e0e0e0;
  --neutral-300: #dddddd;
  --neutral-400: #cccccc;
  --neutral-500: #b3b3b3;
  --neutral-600: #949494;
  --neutral-700: #757575;
  --neutral-800: #2f2f2f;
  --neutral-900: #1e1e1e;

  /* === STATUS COLORS === */
  --success: #4ab866;         /* Normal */
  --success-light: #e8f7ed;   /* zartes Grün, hoher Kontrast zu Text */
  --success-dark:  #2f7d46;   /* dunkler Akzent passend zu #4ab866 */
  --warning: #f0b849;         /* Normal */
  --warning-light: #fff7e6;   /* sanftes Gelb/Orange, nicht grell */
  --warning-dark:  #a8741f;   /* dunkler Akzent passend zu #f0b849 */
  --error: #cc1818;           /* Normal */
  --error-light:   #fdecec;   /* zartes Rot, für Hintergrund */
  --error-dark:    #7e0e0e;   /* dunkler Akzent passend zu #cc1818 */
}

.ti {
  line-height: 2;
}

/* HTML */
html  {
  font-family: 'DM Sans';
  font-size: 16px;
  font-weight: 400;
  color: var(--black);
  background: var(--background);
}

/* HEADINGS */
h1,
.uk-h1,
h2,
.uk-h2,
h3,
.uk-h3,
h4,
.uk-h4,
h5,
.uk-h5,
h6,
.uk-h6,
.uk-heading-small,
.uk-heading-medium,
.uk-heading-large,
.uk-heading-xlarge,
.uk-heading-2xlarge,
.uk-heading-3xlarge {
  margin: 0 0 20px 0;
  font-family: 'DM Sans';
  font-weight: 900;
  color: var(--black);
  text-transform: none;
}

/* ALERT */
.uk-alert {
  border-radius: 10px;
  padding: 25px 29px 25px 25px;
}
.uk-alert-primary {
  background: #f4f4f4;
  color: var(--black);
}
/*
 * Success
 */
.uk-alert-success {
  background: var(--success-light);
  color: var(--success);;
}
/*
 * Warning
 */
.uk-alert-warning {
background: var(--warning-light);
  color: var(--warning);;
}
/*
 * Danger
 */
.uk-alert-danger {
background: var(--error-light);
  color: var(--error);;
}

/* INPUT */
.uk-input,
.uk-select,
.uk-textarea,
.uk-radio,
.uk-checkbox {
  border-radius: 8px;
}
.uk-input,
.uk-select,
.uk-textarea {
  color: var(--gray);
  border: 1px solid #e5e5e5;
  transition: 0.2s ease-in-out;
  transition-property: color, background-color, border;
}
.uk-input:focus,
.uk-select:focus,
.uk-textarea:focus {
  color: var(--black);
  border-color: var(--secondary);
}
/* Checkbox-Häkchenfarbe */
input.uk-checkbox:checked {
  background-color: var(--secondary); /* z. B. dein Violett */
  border-color: var(--secondary);
}

/* Größe vergrößern */
input.uk-checkbox {
  width: 20px;
  height: 20px;
}

/* Häkchen anpassen */
input.uk-checkbox:checked::after {
  border-color: var(--black); /* Häkchenfarbe */
}
.uk-form-label {
  color: var(--black);
  font-size: 0.75rem;
  font-weight: 700;
}

/* TEXT */
.text-primary {
  color: var(--primary) !important;
}
.text-secondary {
  color: var(--secondary) !important;
}
.text-accent1 {
  color: var(--accent-1) !important;
}
.text-accent2 {
  color: var(--accent-2) !important;
}
.text-black {
  color: var(--black) !important;
}
.text-success {
  color: var(--success) !important;
}
.text-error {
  color: var(--error) !important;
}
.text-warning {
  color: var(--warning) !important;
}
.text-small {
  font-size: .75rem;
}

/* ICONS */
.icon-sm {
  font-size: 16px;
}
.icon-med {
  font-size: 20px;
}
.icon-large {
  font-size: 24px;
}
.icon-xlarge {
  font-size: 32px;
}

/* CARDS */
.uk-card-smaller .uk-card-body, .uk-card-smaller.uk-card-body {
  padding: 10px 10px;
}
.card-round {
  border-radius: 20px;
}
.card-round-inner {
  border-radius: 8px;
}
.card-muted {
  background-color: #f4f4f4
}
.card-muted-border {
  border: 2px solid #f4f4f4;
}
.card-success {
  background-color: var(--success-light);
  color: var(--success) !important;
}
.card-error {
  background-color: var(--error-light);
  color: var(--error) !important;
}
.card-warning {
  background-color: var(--warning-light);
  color: var(--warning) !important;
}

/* BUTTONS */
.uk-button  {
  border-radius: 10px;
  text-transform: none;
}
.uk-button-large  {
  font-size: 1.2rem;
}
.uk-button-primary {
  background-color: transparent;
  border: 3px solid var(--primary); /* Randfarbe */
  color: var(--primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}
/* Hover & Focus */
.uk-button-primary:hover,
.uk-button-primary:focus {
  background-color: var(--primary);
  color: var(--black);
}
/* Active – gedrückt */
.uk-button-primary:active {
  background-color: var(--primary);
  color: var(--black);
}
/* Disabled */
.uk-button-primary:disabled {
  background-color: #E2E9AA;
  color: #999;
  opacity: 0.6;
  cursor: not-allowed;
}
.uk-button-secondary {
  background-color: transparent;
  border: 3px solid var(--secondary); /* Randfarbe */
  color: var(--secondary);
  transition: background-color 0.3s ease, color 0.3s ease;
}
/* Hover & Focus */
.uk-button-secondary:hover,
.uk-button-secondary:focus {
  background-color: var(--secondary);
  color: var(--primary);
}
/* Active – gedrückt */
.uk-button-secondary:active {
  background-color: var(--secondary);
  color: var(--primary);
}
/* Disabled */
.uk-button-secondary:disabled {
  background-color: transparent;
  border: 3px solid var(--secondary-light); /* Randfarbe */
  color: var(--secondary-light);
  opacity: 0.6;
  cursor: not-allowed;
}

a.uk-link-custom {
  color: black;
  text-decoration: none;
  position: relative;
}

/* Gelbe Linie bei Hover und Active */
a.uk-link-custom::after {
  content: "";
  position: absolute;
  left: -5px;
  right: 0;
  bottom: -8px; /* Abstand unter dem Text */
  height: 5px;   /* Dicke der Linie */
  background-color: transparent;
  transition: background-color 0.3s ease;
}
a.uk-link-custom:hover::after,
a.uk-link-custom:active::after {
  background-color: var(--primary);
}

.underline {
  text-decoration: none;
  position: relative;
}

.underline::after {
  content: "";
  position: absolute;
  left: -5px;
  right: 0;
  bottom: -8px; /* Abstand unter dem Text */
  height: 4px;   /* Dicke der Linie */
  background-color: var(--primary);
  transition: background-color 0.3s ease;
}

/* HEADER */
header  {
  padding: 20px 0;
}

main  {
  padding: 30px 0;
}

footer  {
  padding: 30px 0;
}

/* LOGIN */
#login  {
  padding: 50px 50px 5px 50px;
}

#overview-section {
  margin-top: 40px;
}

#summary {
  margin-top: 40px;
}

.status-indicator {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  position: relative;
  margin: 0 5px;
}

/* === ONLINE: Puls mit Welle === */
.status-indicator.online {
  background-color: #4ab866;
}
.status-indicator.online::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background-color: #4ab866;
  opacity: 0.7;
  animation: pulse 1.5s infinite ease-out;
}

/* === OFFLINE: Sanftes Atmen (Rot) === */
.status-indicator.offline {
  background-color: #cc1818;
  animation: breatheRed 2s infinite ease-in-out;
}

/* === UNKNOWN: Leichtes Wabern / Drehen (Gelb) === */
.status-indicator.unknown {
  background-color: #f0b849;
  animation: unknownPulse 2.5s infinite ease-in-out;
}

.status-indicator-big {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  position: relative;
  margin: 8px 5px 0px 5px;
}

/* === ONLINE: Puls mit Welle === */
.status-indicator-big.online {
  background-color: #4ab866;
}
.status-indicator-big.online::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background-color: #4ab866;
  opacity: 0.7;
  animation: pulse 1.5s infinite ease-out;
}

/* === OFFLINE: Sanftes Atmen (Rot) === */
.status-indicator-big.offline {
  background-color: #cc1818;
  animation: breatheRed 2s infinite ease-in-out;
}

/* === UNKNOWN: Leichtes Wabern / Drehen (Gelb) === */
.status-indicator-big.unknown {
  background-color: #f0b849;
  animation: unknownPulse 2.5s infinite ease-in-out;
}

/* === Keyframes === */
@keyframes pulse {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
  70%  { transform: translate(-50%, -50%) scale(2); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}

@keyframes breatheRed {
  0%, 100% { transform: scale(1);   opacity: 0.9; }
  50%      { transform: scale(1.2); opacity: 0.6; }
}

@keyframes unknownPulse {
  0%, 100% { transform: scale(1);   opacity: 0.9; }
  50%      { transform: scale(1.2); opacity: 0.6; }
}

.uk-modal-body  {
  border-radius: 20px;
}

.uk-subnav-pill {
  margin-left: -20px;
}
.uk-subnav-pill > * {
  padding-left: 20px;
}
.uk-subnav-pill > * > :first-child {
  padding: 5px 10px;
  background: transparent;
  color: var(--neutral-600);
  border-radius: 8px;
}
/* Hover */
.uk-subnav-pill > * > a:hover {
  background-color: #f8f8f8;
  color: #666;
}
/* OnClick */
.uk-subnav-pill > * > a:active {
  background-color: #f8f8f8;
  color: #666;
}
/* Active */
.uk-subnav-pill > .uk-active > a {
  background-color: var(--secondary);
  color: var(--primary);
}
/* z.B. in deinem CSS */
#powernodes-section.is-loading .pn-grid { opacity: .6; pointer-events: none; }

.uk-progress {
  background-color: #f4f4f4;
  height: 5px;
  border-radius: 5px;
}
/* Add margin if adjacent element */
* + .uk-progress {
  margin-top: 20px;
}
/*
 * Show background color set on `uk-progress` in Chrome, Safari and Edge.
 */
.uk-progress::-webkit-progress-bar {
  background-color: transparent;
}
/*
 * Progress Bar
 * 1. Transitions don't work on `::-moz-progress-bar` pseudo element in Firefox yet.
 *    https://bugzilla.mozilla.org/show_bug.cgi?id=662351
 */
.uk-progress::-webkit-progress-value {
  background-color: var(--primary);
  transition: width 0.6s ease;
}
.uk-progress::-moz-progress-bar {
  background-color: var(--primary);
  /* 1 */
  transition: width 0.6s ease;
}
/* Skeleton Basis */
/* Basis bleibt wie gehabt */
/* Standard-Skeleton (neutral) */
/* Neutral Skeleton Basis */
.skeleton {
  display: block;
  background: var(--muted-light, #e0e0e0);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.skeleton::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--muted-light, #e0e0e0) 0%,
    var(--muted-lighter, #f5f5f5) 50%,
    var(--muted-light, #e0e0e0) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s linear infinite;
}

@keyframes skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Größen-Helper */
.skel-w-20 { width: 20%; }
.skel-w-30 { width: 30%; }
.skel-w-40 { width: 40%; }
.skel-w-50 { width: 50%; }
.skel-w-60 { width: 60%; }
.skel-w-80 { width: 80%; }

.skeleton.sm { height: 12px; }
.skeleton.lg { height: 24px; }
.skeleton.circle { border-radius: 50%; }