/* Catppuccin Mocha Farbschema - kannst du natürlich anpassen */
* {
  all: unset;
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
}

/* Notification Window */
.notification-row {
  outline: none;
  margin: 10px;
}

.notification {
  background: rgba(30, 30, 46, 0.95);
  border: 2px solid #89b4fa;
  border-radius: 10px;
  padding: 0;
  margin: 0;
}

.notification-content {
  background: transparent;
  padding: 15px;
  margin: 0;
}

.close-button {
  background: #f38ba8;
  color: #1e1e2e;
  border-radius: 8px;
  margin: 8px;
  padding: 4px 8px;
}

.close-button:hover {
  background: #eba0ac;
}

.notification-default-action {
  margin: 0;
  padding: 0;
}

/* Summary (Titel) */
.summary {
  color: #cdd6f4;
  font-weight: bold;
  font-size: 15px;
  margin-bottom: 5px;
}

/* Body (Text) */
.body {
  color: #bac2de;
  font-size: 13px;
}

/* Time */
.time {
  color: #6c7086;
  font-size: 11px;
  margin-top: 5px;
}

/* Urgency Levels */
.low {
  border: 2px solid #94e2d5;
}

.normal {
  border: 2px solid #89b4fa;
}

.critical {
  border: 2px solid #f38ba8;
  background: rgba(243, 139, 168, 0.1);
}

/* Control Center */
.control-center {
  background: rgba(30, 30, 46, 0.98);
  border: 2px solid #89b4fa;
  border-radius: 15px;
  padding: 10px;
}

.control-center-list {
  background: transparent;
}

/* Widget Titel */
.widget-title {
  color: #cdd6f4;
  font-size: 18px;
  font-weight: bold;
  margin: 10px;
}

.widget-title > button {
  background: #89b4fa;
  color: #1e1e2e;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
}

.widget-title > button:hover {
  background: #b4befe;
}

/* DND Toggle */
.widget-dnd {
  margin: 10px;
  padding: 10px;
  background: rgba(137, 180, 250, 0.1);
  border-radius: 10px;
}

.widget-dnd > switch {
  background: #45475a;
  border-radius: 20px;
  padding: 2px;
}

.widget-dnd > switch:checked {
  background: #89b4fa;
}

.widget-dnd > switch slider {
  background: #cdd6f4;
  border-radius: 50%;
}

/* Notification in Control Center */
.control-center .notification {
  margin: 5px 0;
}

/* Scrollbar */
.control-center-list > scrollbar {
  background: transparent;
  width: 8px;
}

.control-center-list > scrollbar > slider {
  background: #585b70;
  border-radius: 8px;
}

.control-center-list > scrollbar > slider:hover {
  background: #6c7086;
}

/* Leeres Center */
.blank-window {
  background: transparent;
}

/* Image */
.notification-icon {
  border-radius: 8px;
  margin-right: 10px;
}

.body-image {
  border-radius: 8px;
  margin-top: 8px;
}